{{ block title }}
    Round {{ group.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}

{{ block content }}

<style>

    #ttt-board td {
        width: 5em;
        height: 5em;
        text-align: center;
        font-size: large;
        border: 1px solid black;
    }

    #ttt-board {
        width: auto;
        text-align: center;
    }

</style>

<p></p>
<p></p>
<p></p>
<div id="period_status">

</div>
<p></p>
<table id="ttt-board" style="visibility: visible;">
    <tr>
        <td id="square0" data-square="0" onclick="sendMove0()"></td>
        <td id="square1" data-square="1" onclick="sendMove1()"></td>
        <td id="square2" data-square="2" onclick="sendMove2()"></td>
        <td id="square3" data-square="3" onclick="sendMove3()"></td>
        <td id="square4" data-square="4" onclick="sendMove4()"></td>
    </tr>
    <tr>
        <td id="square5" data-square="5" onclick="sendMove5()"></td>
        <td id="square6" data-square="6" onclick="sendMove6()"></td>
        <td id="square7" data-square="7" onclick="sendMove7()"></td>
        <td id="square8" data-square="8" onclick="sendMove8()"></td>
        <td id="square9" data-square="9" onclick="sendMove9()"></td>
    </tr>
    <tr>
        <td id="square10" data-square="10" onclick="sendMove10()"></td>
        <td id="square11" data-square="11" onclick="sendMove11()"></td>
        <td id="square12" data-square="12" onclick="sendMove12()"></td>
        <td id="square13" data-square="13" onclick="sendMove13()"></td>
        <td id="square14" data-square="14" onclick="sendMove14()"></td>
    </tr>
    <tr>
        <td id="square15" data-square="15" onclick="sendMove15()"></td>
        <td id="square16" data-square="16" onclick="sendMove16()"></td>
        <td id="square17" data-square="17" onclick="sendMove17()"></td>
        <td id="square18" data-square="18" onclick="sendMove18()"></td>
        <td id="square19" data-square="19" onclick="sendMove19()"></td>
    </tr>
    <tr>
        <td id="square20" data-square="20" onclick="sendMove20()"></td>
        <td id="square21" data-square="21" onclick="sendMove21()"></td>
        <td id="square22" data-square="22" onclick="sendMove22()"></td>
        <td id="square23" data-square="23" onclick="sendMove23()"></td>
        <td id="square24" data-square="24" onclick="sendMove24()"></td>
    </tr>
</table>
<p></p>
<div id="payoff_status">

</div>
<p></p>
<button class="otree-btn-next btn btn-primary" id="Next" style="visibility: hidden;">Next</button>

<script>

    let my_symbol = js_vars.my_symbol;
    let prize0 = js_vars.prize0;
    let prize1 = js_vars.prize1;
    let prize2 = js_vars.prize2;
    let prize3 = js_vars.prize3;
    let prize4 = js_vars.prize4;
    let prize5 = js_vars.prize5;
    let prize6 = js_vars.prize6;
    let prize7 = js_vars.prize7;
    let prize8 = js_vars.prize8;
    let prize9 = js_vars.prize9;
    let prize10 = js_vars.prize10;
    let prize11 = js_vars.prize11;
    let prize12 = js_vars.prize12;
    let prize13 = js_vars.prize13;
    let prize14 = js_vars.prize14;
    let prize15 = js_vars.prize15;
    let prize16 = js_vars.prize16;
    let prize17 = js_vars.prize17;
    let prize18 = js_vars.prize18;
    let prize19 = js_vars.prize19;
    let prize20 = js_vars.prize20;
    let prize21 = js_vars.prize21;
    let prize22 = js_vars.prize22;
    let prize23 = js_vars.prize23;
    let prize24 = js_vars.prize24;


    let next_round = js_vars.next_round;

    function writePeriodStatus(msg) {
        document.getElementById('period_status').innerText = msg;
    }

    function writePayoffStatus(msg) {
        document.getElementById('payoff_status').innerText = msg;
    }

    function liveRecv(data) {
        let boardState = data.board_state;
        document.getElementById(`square${0}`).innerText = {'X': prize0, ' ': prize0}[boardState[0]];
        document.getElementById(`square${1}`).innerText = {'X': prize1, ' ': ' '}[boardState[1]];
        document.getElementById(`square${2}`).innerText = {'X': prize2, ' ': ' '}[boardState[2]];
        document.getElementById(`square${3}`).innerText = {'X': prize3, ' ': ' '}[boardState[3]];
        document.getElementById(`square${4}`).innerText = {'X': prize4, ' ': ' '}[boardState[4]];
        document.getElementById(`square${5}`).innerText = {'X': prize5, ' ': ' '}[boardState[5]];
        document.getElementById(`square${6}`).innerText = {'X': prize6, ' ': ' '}[boardState[6]];
        document.getElementById(`square${7}`).innerText = {'X': prize7, ' ': ' '}[boardState[7]];
        document.getElementById(`square${8}`).innerText = {'X': prize8, ' ': ' '}[boardState[8]];
        document.getElementById(`square${9}`).innerText = {'X': prize9, ' ': ' '}[boardState[9]];
        document.getElementById(`square${10}`).innerText = {'X': prize10, ' ': ' '}[boardState[10]];
        document.getElementById(`square${11}`).innerText = {'X': prize11, ' ': ' '}[boardState[11]];
        document.getElementById(`square${12}`).innerText = {'X': prize12, ' ': ' '}[boardState[12]];
        document.getElementById(`square${13}`).innerText = {'X': prize13, ' ': ' '}[boardState[13]];
        document.getElementById(`square${14}`).innerText = {'X': prize14, ' ': ' '}[boardState[14]];
        document.getElementById(`square${15}`).innerText = {'X': prize15, ' ': ' '}[boardState[15]];
        document.getElementById(`square${16}`).innerText = {'X': prize16, ' ': ' '}[boardState[16]];
        document.getElementById(`square${17}`).innerText = {'X': prize17, ' ': ' '}[boardState[17]];
        document.getElementById(`square${18}`).innerText = {'X': prize18, ' ': ' '}[boardState[18]];
        document.getElementById(`square${19}`).innerText = {'X': prize19, ' ': ' '}[boardState[19]];
        document.getElementById(`square${20}`).innerText = {'X': prize20, ' ': ' '}[boardState[20]];
        document.getElementById(`square${21}`).innerText = {'X': prize21, ' ': ' '}[boardState[21]];
        document.getElementById(`square${22}`).innerText = {'X': prize22, ' ': ' '}[boardState[22]];
        document.getElementById(`square${23}`).innerText = {'X': prize23, ' ': ' '}[boardState[23]];
        document.getElementById(`square${24}`).innerText = {'X': prize24, ' ': ' '}[boardState[24]];


        let my_period = data.period;
        let my_payoff = data.payoff;
        if (data.final_period) {
            writePeriodStatus('Round {{ group.round_number }} is now over. Your total payoff for Round {{ group.round_number }} was ' + my_payoff + ' points.');
            button = document.getElementById("Next");
            button.style.visibility = "visible";
            table = document.getElementById("ttt-board");
            table.style.visibility = "hidden";
            if (data.final_round) {
                writePayoffStatus('Click next to view a summary of your results from Rounds 1-5.');
            } else {
                writePayoffStatus('Click next to begin Round {{ next_round }}.');
            }
        } else {
            writePeriodStatus('It is period ' + my_period + ' of {{ C.PERIODS }}. Choose your period ' + my_period + ' prize by clicking on any square.');
            writePayoffStatus('Your payoff for this round is currently ' + my_payoff + ' points.');
        }
    }

    function sendMove0() {
        liveSend({'move': 0, 'value': prize0});
    }

    function sendMove1() {
        liveSend({'move': 1, 'value': prize1});
    }

    function sendMove2() {
        liveSend({'move': 2, 'value': prize2});
    }

    function sendMove3() {
        liveSend({'move': 3, 'value': prize3});
    }

    function sendMove4() {
        liveSend({'move': 4, 'value': prize4});
    }

    function sendMove5() {
        liveSend({'move': 5, 'value': prize5});
    }

    function sendMove6() {
        liveSend({'move': 6, 'value': prize6});
    }

    function sendMove7() {
        liveSend({'move': 7, 'value': prize7});
    }

    function sendMove8() {
        liveSend({'move': 8, 'value': prize8});
    }

    function sendMove9() {
        liveSend({'move': 9, 'value': prize9});
    }

    function sendMove10() {
        liveSend({'move': 10, 'value': prize10});
    }

    function sendMove11() {
        liveSend({'move': 11, 'value': prize11});
    }

    function sendMove12() {
        liveSend({'move': 12, 'value': prize12});
    }

    function sendMove13() {
        liveSend({'move': 13, 'value': prize13});
    }

    function sendMove14() {
        liveSend({'move': 14, 'value': prize14});
    }

    function sendMove15() {
        liveSend({'move': 15, 'value': prize15});
    }

    function sendMove16() {
        liveSend({'move': 16, 'value': prize16});
    }

    function sendMove17() {
        liveSend({'move': 17, 'value': prize17});
    }

    function sendMove18() {
        liveSend({'move': 18, 'value': prize18});
    }

    function sendMove19() {
        liveSend({'move': 19, 'value': prize19});
    }

    function sendMove20() {
        liveSend({'move': 20, 'value': prize20});
    }

    function sendMove21() {
        liveSend({'move': 21, 'value': prize21});
    }

    function sendMove22() {
        liveSend({'move': 22, 'value': prize22});
    }

    function sendMove23() {
        liveSend({'move': 23, 'value': prize23});
    }

    function sendMove24() {
        liveSend({'move': 24, 'value': prize24});
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });
</script>



{{ endblock }}