<html>
<head>
  <!--
    TODO fix number sizes for mobile
    TODO fix single digit numbers
  -->
  <script src="js/global.js"></script>
  <style>
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    #top, #middle, #bottom {
      display: flex;
      justify-content: center;
    }

    #top {
      height: 33%;
      align-items: flex-end;
    }

    #middle {
      flex: 1;
      align-items: center;
    }

    #bottom {
      height: 33%;
      align-items: flex-start;
    }

    #left-number, #right-number {
      font-size: 10vw;
    }

    #left-number {
      display: flex;
      justify-content: flex-end;
      padding-right: 3vw;
    }

    #right-number {
      padding-left: 3vw;
    }

    #answer {
      border-bottom: solid 0.5vw black;
      min-width: 150px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #less-than {
      margin-right: 2vw;
    }

    #new-problem {
      display: none;
    }

    #greater-than {
      margin-right: 2vw;
    }

    #score {
      position: absolute;
      bottom: 0;
      right: 1vh;
      font-size: 8vh;
    }

    #correct, #incorrect {
      display: none;
    }
  </style>
</head>
<body class="no-select">
  <script>
    window.uuid = 'ec646932-ff31-11ea-adc1-0242ac120002';

    window.score = parseInt(localStorage.getItem(`${uuid}::score`)) || 0;
    window.incorrectAnswer = false;

    function newProblem() {
      if (!window.incorrectAnswer) {
        window.left = Math.floor(Math.random() * 101);
        do {
          window.right = Math.floor(Math.random() * 101);
        } while(window.right === window.left);
      }

      document.getElementById('left-number').innerHTML = window.left;
      document.getElementById('right-number').innerHTML = window.right;

      reset();
    }

    function correct() {
      window.score += 1;
      localStorage.setItem(`${window.uuid}::score`, window.score);
      document.getElementById('correct').style.display = 'block';
      document.getElementById('incorrect').style.display = 'none';
    }

    function incorrect() {
      window.incorrectAnswer = true;
      document.getElementById('correct').style.display = 'none';
      document.getElementById('incorrect').style.display = 'block';
    }

    function updateScore() {
      document.getElementById('score').innerText = window.score;
    }

    function hideAnswerButtons() {
      document.getElementById('new-problem').style.display = 'block';

      document.getElementById('less-than').style.display = 'none';
      document.getElementById('greater-than').style.display = 'none';
    }

    function reset() {
      window.incorrectAnswer = false;

      document.getElementById('new-problem').style.display = 'none';

      document.getElementById('less-than').style.display = 'block';
      document.getElementById('greater-than').style.display = 'block';

      document.getElementById('correct').style.display = 'none';
      document.getElementById('incorrect').style.display = 'none';


      document.getElementById('answer').classList.remove('solid-less-than');
      document.getElementById('answer').classList.remove('solid-greater-than');
    }

    function selectLessThan() {
      hideAnswerButtons();
      document.getElementById('answer').classList.remove('solid-greater-than');
      document.getElementById('answer').classList.add('solid-less-than');
      if (window.left < window.right) {
        correct();
      } else {
        incorrect();
      }
      updateScore();
    }

    function selectGreaterThan() {
      hideAnswerButtons();
      document.getElementById('answer').classList.remove('solid-less-than');
      document.getElementById('answer').classList.add('solid-greater-than');
      if (window.left > window.right) {
        correct();
      } else {
        incorrect();
      }
      updateScore();
    }

    window.addEventListener('load', () => {
      updateScore();
      newProblem();
    });
  </script>

  <div id="top">
    <div id="left-number"></div>
    <div id="answer" class="icon-9"></div>
    <div id="right-number"></div>
  </div>

  <div id="middle">
    <div id="correct" class="solid-check icon-9 icon-green"></div>
    <div id="incorrect" class="solid-times icon-9 icon-red"></div>
  </div>

  <div id="bottom">
    <div id="less-than" class="button solid-less-than icon-7" onclick="selectLessThan()"></div>
    <div id="new-problem" class="button solid-sync-alt icon-7" onclick="newProblem()"></div>
    <div id="greater-than" class="button solid-greater-than icon-7" onclick="selectGreaterThan()"></div>
  </div>

  <div id="score">0</div>
</body>
</html>