{% extends "global/Page.html" %}
{% load static %}

{% block content %}
<p style="color:red;">Note: Do not hit the back button on your browser or refresh the page.</p>
<h3>Round {{ player.round_number }} of {{ Constants.num_rounds }}</h3>


<p><strong>How many “{{ letter }}”s?</strong></p>
<div id="grid_container">
  <table id="grid" style="border-collapse: collapse;">
    {% for row in grid %}
      <tr>
        {% for cell in row %}
          <td style="border:1px solid #000; width:50px; height:50px; font-size:20px; text-align:center;">
            {{ cell }}
          </td>
        {% endfor %}
      </tr>
    {% endfor %}
  </table>
</div>


<div style="margin-top:1em;">
  <input type="number" id="response_input" min="1" />
  <button id="submit_btn" type="button" onclick="submitValue()">Submit</button>
</div>

<p id="feedback" style="color:red; font-size:24px; font-weight:bold;"></p>
<p>Grids Solved This Round: <span id="round_correct">{{ round_correct }}</span></p>
<p>Total Grids Solved: <span id="total_correct">{{ total_correct }}</span></p>

{% endblock %}

{% block scripts %}
<script>
  let t = {{ round_time }};
  setInterval(() => {
    if (t > 0) {
      t--;
      document.getElementById('timer').innerText = t;
    }
  }, 1000);


  function submitValue() {
    const ans = parseInt(document.getElementById('response_input').value);
    if (isNaN(ans)) return;
    liveSend({ type: 'submit', response: ans });
  }

  function liveRecv(data) {
    if (data.correct) {
      document.getElementById('total_correct').innerText = data.total_correct;
      document.getElementById('round_correct').innerText = data.round_correct;
      document.querySelector('p strong').innerText = `How many “${data.letter}”s?`;
      const tbl = document.getElementById('grid');
      tbl.innerHTML = '';
      data.grid.forEach(row => {
        const tr = document.createElement('tr');
        row.forEach(c => {
          const td = document.createElement('td');
          td.style = "border:1px solid #000; width:50px; height:50px; font-size:20px; text-align:center;";
          td.innerText = c;
          tr.appendChild(td);
        });
        tbl.appendChild(tr);
      });
      document.getElementById('response_input').value = '';
      document.getElementById('feedback').innerText = '';
    } else {
      document.getElementById('feedback').innerText = 'Wrong—wait 5s before trying again';
      document.getElementById('submit_btn').disabled = true;
      document.getElementById('grid_container').style.display = 'none';

    setTimeout(() => {
      document.getElementById('feedback').innerText = '';
    document.getElementById('submit_btn').disabled = false;
    document.getElementById('grid_container').style.display = 'block';
    }, 5000);
    }
  }

  document.addEventListener('keydown', function (e) {
    // Ctrl+F or Command+F
    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
        e.preventDefault();
        alert("Search is disabled for this task.");
    }
});

  window.onload = function () {
    history.pushState(null, null, location.href);
    window.onpopstate = function () {
      history.pushState(null, null, location.href);
    };
  };
</script>
{% endblock %}