// ==UserScript==
// @name         派蒙答题器
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  派蒙的十万个为什么，自动搜答案
// @author       You
// @match        https://webstatic.mihoyo.com/*
// @grant        GM_xmlhttpRequest
// @require     https://unpkg.com/string-similarity/umd/string-similarity.min.js
// @license MIT
// @downloadURL none
// ==/UserScript==

(async function () {
  'use strict';

  const box = createBoxElement()
  let container = null
  const answers = await fetchAnswers()

  const timer = setInterval(() => {
    container = document.querySelector('[class|="components-game-assets-index___container"]')
    if (container) {
      clearInterval(timer)
      start()
    }
  }, 1000)

  function start() {
    const observer = new MutationObserver(function (mutationList, observer) {
      checkForAnswer()
    })
    observer.observe(container, { childList: true, subtree: true })
    checkForAnswer()
  }
  
  function checkForAnswer() {
    const questionElem = document.querySelector('[class|="components-game-assets-qa-info___text"]')
    if (questionElem) {
      // const question = '以下关于深境螺旋说法正确的是？'
      const question = questionElem.textContent
      const filterd = answers.filter(answer => matchQuestion(question, answer.q))
      box.innerHTML = filterd.length
                        ? filterd.map(ans => `${ans.q}<br>${ans.a}`).join('<br><br>')
                        : '没找到答案'
    }
  }

  function createBoxElement(){
    const box = document.createElement('div')
    box.style = 'position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: #f3f0ec; padding: 30px; font-size: 16px;'
    document.body.appendChild(box)
    return box
  }

  function matchQuestion(str1, str2) {
    return stringSimilarity.compareTwoStrings(str1, str2) > 0.85;
  }

  async function fetchAnswers() {
    const url = 'https://wiki.biligame.com/ys/%E3%80%8C%E6%B4%BE%E8%92%99%E7%9A%84%E5%8D%81%E4%B8%87%E4%B8%AA%E4%B8%BA%E4%BB%80%E4%B9%88%E3%80%8D%E9%A2%98%E5%BA%93'
    // 加载答案库
    const htmlStr = await fetch(url)
    const dom = new DOMParser().parseFromString(htmlStr, "text/html");
    return [...dom.querySelectorAll('.wikitable tbody tr')].map(({ children }) => ({
      q: children[0].textContent,
      a: children[1].textContent
    }))
  }

  function fetch(url) {
    return new Promise((resolve, reject) => {
      GM_xmlhttpRequest({
        method: 'GET',
        url: url,
        onload(e) {
          resolve(e.response)
        },
        onerror: reject
      })
    })
  }

})();