var DOM = {
  body: document.querySelector('body'),
  parent: document.createElement('div'),
  header: document.createElement('p'),
  answerList: document.createElement('ul'),
  refreshButton: document.createElement('button'),
}

DOM.parent.style.cssText = 'display: block; width: 100%; background: #eee; padding: 30px; position: absolute; top: 100%;';
DOM.header.style.marginBottom = '20px';
DOM.answerList.style.columnCount = 2
DOM.refreshButton.style.cssText = 'margin: 20px 0px 100px 0px; text-align: center; border: 1px solid black; padding: 10px; width: 100%;';
DOM.refreshButton.innerText = 'Refresh'

DOM.body.appendChild(DOM.parent);
DOM.parent.appendChild(DOM.header);
DOM.parent.appendChild(DOM.answerList);
DOM.parent.appendChild(DOM.refreshButton);

a = [...document.scripts].find(script => script.innerText.includes('window.gameData'))
eval(a.innerText)

function makeAnswer(answer, found) {
  let l = document.createElement('li');
  l.style.cssText = found ? 'text-decoration: line-through; opacity: 0.4; margin-bottom: 10px' : 'margin-bottom: 10px';
  l.innerText = answer;
  return l
}

function makeCheatList() {
  let DATA = {
    found: [...document.querySelectorAll('.sb-has-words > li')].map(el => el.innerText.toLowerCase()),
    answers: window.gameData.today.answers
  }

  DOM.answerList.innerHTML = '';
  DOM.header.innerText = `${DATA.found.length} of ${DATA.answers.length} found`;

  [
    ...DATA.answers.filter(answer => !DATA.found.includes(answer)).map(answer => makeAnswer(answer, false)),
    ...DATA.answers.filter(answer => DATA.found.includes(answer)).map(answer => makeAnswer(answer, true))
  ].forEach(li => DOM.answerList.appendChild(li))

}

DOM.refreshButton.onclick = makeCheatList;
makeCheatList();
completion();