<%# Page for problem rush %>

<%- include("../../partials/header") -%>
<%- include("../../partials/navigationPrivate") -%>

<%# JS code %>
<script>
  $(document).ready(function() {
    // starting values
    let score = 0;
    let seconds = 301;
    let strikes = 0;
    let timerGoing = false;

    let questionTracker = [];

    // configure start dialogue
    $('#rush-canvas').hide(0);
    $('#results-page').hide(0);

    $('#start-rush').one('click', () => {
      $('#instructions').hide(500);
      $('#rush-canvas').show(500);

      timerGoing = true;

      startRush();
    });

    // declare timer functions
    const secondsToString = (seconds) => {
      let minutes = Math.floor(seconds / 60);
      seconds = seconds % 60;

      if (seconds < 10) {
        seconds = '0' + seconds;
      }

      return minutes + ':' + seconds;
    };

    window.setInterval(() => {
      if (timerGoing) {
        seconds -= 1;

        if (seconds < 0) {
          seconds = 0;
        }

        try {
          questionTracker[questionTracker.length - 1].timeSpent += 1;
        } catch (err) {}

        $('#timer').text(secondsToString(seconds));
      }
    }, 1000);

    // hide strikes and correct/wrong dialogue, as well as q statement and answer choices
    $('#strike-1').hide(0);
    $('#strike-2').hide(0);
    $('#strike-3').hide(0);
    $('#correct').hide(0);
    $('#wrong').hide(0);
    $('#question-statement').hide(0);
    $('#answers').hide(0);

    // function to load and delete child nodes
    function removeAllChildren(selector) {
      const parent = document.querySelector(selector);
      while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
      }
    }

    function addAnswers(choices, selector) {
      let index = 1;

      choices.forEach((choice) => {
        $(selector).append(
          '<button class="btn btn-lg w-100 btn-primary my-1" id="' +
          index +
          '">' +
          choice +
          '</button>'
        );

        index++;
      });

      MathJax.typeset();

      for (let i = 1; i < index; i++) {
        $('#' + i).one('click', async () => {
          $('#question-statement').hide(400);
          $('#answers').hide(400);

          let correct = await submitAnswer(i, $('#hiddenQuestionID').text());

          if (correct) {
            score += 1;
            $('#score').text('Score: ' + score);

            $('#correct').show(400);
          } else {
            strikes += 1;
            $('#wrong').show(400);

            $('#strike-' + strikes).show(400);
          }

          questionTracker[questionTracker.length - 1].correct = correct ?
            1 :
            -1;

          if (strikes < 3 && seconds > 0) {
            setTimeout(loadQuestion(score), 800);
          }
        });
      }
    }

    // functions to load question and submit answer
    let loadQuestion = (score) => {
      $.get(
        '/train/rush/loadQuestion', {
          score,
        },
        async (question) => {
          questionTracker.push({
            id: question.id,
            rating: question.rating,
            subject: question.subject,
            correct: 0,
            timeSpent: 0,
          });

          $('#question-statement').html(question.statement);
          $('#hiddenQuestionID').text(question.id);

          MathJax.typeset();

          if (strikes < 3 && seconds > 0) {
            await removeAllChildren('#answers');
            await addAnswers(question.choices, '#answers');

            $('#question-statement').show(400);
            $('#answers').show(400);

            $('#correct').hide(400);
            $('#wrong').hide(400);
          }
        }
      );
    };

    let submitAnswer = async (index, id) => {
      let data = await $.get('/train/rush/checkAnswer', {
        index,
        id,
      });

      return data.correct;
    };

    // function to interpolate the rush result report
    let interpolateReport = async (questions) => {
      await removeAllChildren('#question-rows');

      console.log(questions);

      questions.forEach((question) => {
        let style =
          question.correct == 1 ?
          'background-color:#5cb85c' :
          question.correct == -1 ?
          'background-color:#d9534f' :
          'background-color:#808080';

        let id = question.id;
        if (window.innerWidth <= 500) {
          id = '[ID]';
        }

        $('#question-rows').append(
          '<tr style=' +
          style +
          '><td>' +
          question.rating +
          '</td><td>' +
          question.subject +
          '</td><td>' +
          question.timeSpent +
          '</td><td>' +
          '<span class="badge bg-secondary"><a href="/question/' +
          question.id +
          '" style="text-decoration: none;" target="_blank">' +
          id +
          '</a></span></td></tr>'
        );
      });
    };

    // actual rush starts!
    let startRush = async () => {
      //first request (starting the game) must submit -1
      loadQuestion(score - 1);
    };

    // define when rush ends
    window.setInterval(() => {
      if (seconds <= 0 || strikes >= 3) {
        timerGoing = false;
        seconds = 301;
        strikes = 0;

        interpolateReport(questionTracker);

        $('#correct').hide(400);
        $('#wrong').hide(400);
        $('#question-statement').hide(400);
        $('#answers').hide(400);

        removeAllChildren('#answers');

        $('#results-page').show(800);
        $('#final-score').text('Final Score: ' + score);

        $.get(
          '/train/rush/results', {
            score,
          },
          (data) => {
            $('#highscore').text(
              'High Score: ' + Math.max(score, data.highscore)
            );
          }
        );
      }
    }, 400);

    // play again function
    $('#play-again').click(() => {
      $('#results-page').hide(500);
      $('#strike-1').hide(400);
      $('#strike-2').hide(400);
      $('#strike-3').hide(400);

      score = 0;
      questionTracker = [];

      timerGoing = true;

      startRush();
    });
  });
</script>


<h1 class="display-3 text-center mt-5 mb-3">Mutorials Problem Rush</h1>

<div class="jumbotron container mb-5" id="instructions">
  <h3>What is Problem Rush?</h3>

  <p class="mt-3">Problem Rush is a fast-paced game testing your knowledge of science. The rules are simple:</p>
  <ul>
    <li>You are given questions one after another which are increasingly difficult</li>
    <li>Try to solve as many as you can within 5 minutes!</li>
    <li>The game ends when 5 minutes are up, or after you get 3 questions wrong</li>
  </ul>

  <button class="btn btn-lg w-100 btn-primary mt-4" id="start-rush">Start Rush!</button>
</div>

<div class="jumbotron container mb-5" id="rush-canvas">
  <div class="row">
    <div class="col-12 col-xl-8">

      <%# Empty containers to be interpolated by jQuery %>
      <h5 id="question-statement"></h5>
      <div id="answers" class="mt-3"></div>

      <div class="alert alert-success" id="correct">Your answer is correct!</div>
      <div class="alert alert-danger" id="wrong">Your answer is incorrect!</div>

      <div id="results-page">

        <h1 class="text-center">Game Over!</h1>

        <h3 class="text-center mt-3" id="highscore">High Score: XXX</h3>

        <h3 class="text-center mb-4" id="final-score">Final Score: XXX</h3>

        <table class="text-center table mb-4">
          <thead>
            <tr>
              <th scope="col">Rating</th>
              <th scope="col">Subject</th>
              <th scope="col">Seconds</th>
              <th scope="col">ID</th>
            </tr>
          </thead>
          <tbody id="question-rows">
          </tbody>
        </table>

        <button class="btn btn-lg w-100 btn-primary my-1" id="play-again">Play Again</button>

        <a class="btn btn-lg w-100 btn-secondary my-1" href="/train">Exit</a>
      </div>
    </div>

    <div class="col-12 col-xl-4">
      <h2 class="display-2 text-center" id="timer">5:00</h2>

      <h3 class="text-center" id="score">Score: 0</h3>

      <div class="row">
        <div class="col-4">
          <h1 class="display-1 text-center" id="strike-1"><span class="badge bg-danger">X</span></h1>
        </div>
        <div class="col-4">
          <h1 class="display-1 text-center" id="strike-2"><span class="badge bg-danger">X</span></h1>
        </div>
        <div class="col-4">
          <h1 class="display-1 text-center" id="strike-3"><span class="badge bg-danger">X</span></h1>
        </div>
      </div>
    </div>
  </div>

  <input type="hidden" id="hiddenQuestionID" value="">
</div>

<%- include("../../partials/footer") -%>
