{{block title}}
信息聚合任务：示例轮
{{endblock}}
{{block content}}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"> </script>

<h4>一、信息</h4>    
    <p id="info_structureLeft">以<var id = "p"></var>的概率选中左边箱子，</p>
    <p id="info_structureRight">以<var id="pR"></var>的概率选中右边箱子。</p>
    <style>
        #info_structureLeft {
            position: absolute;
            top: 16%;
            left: 52%;
        } 
        #info_structureRight {
            position: absolute;
            top: 20%;
            left: 52%;
        }
    </style>
    <div id = "figure_container">
        <figure id="figureLeft">
            <canvas id="myCanvasLeft"></canvas>
            <figcaption id="captionLeft"></figcaption>
        </figure>

        <figure id="figureRight">
            <canvas id="myCanvasRight"></canvas>
            <figcaption id="captionRight"></figcaption>
        </figure>
    </div>

    <p>本轮任务共有<var id = "round"></var>个阶段。</p>
    <p>当前是阶段<var id = "game_iteration"></var>，您是成员<var id = "player_id"> </var>。 </p>

    <h5>(1)您收到的信号：</h5>
    <p>在本轮任务中，计算机为您从选中的箱子中随机抽取一个球。</p>
    <div style = "display: flex;">
        <p>这个球是<em id = "signal_name"></em>。</p>
        <figure>
        <canvas id = "signal"> </canvas>
        </figure>
    </div>

    <h5>(2)历史预测信息：</h5>
    <table id="ReportTable">
        <thead></thead>
        <tbody></tbody>
    </table>
    <p></p>

<h4>二、行动</h4>
    <p id = "hint"> </p>
    <p id = "input_label">请您根据<mark>(1)您收到的信号</mark>和<mark>(2)历史预测信息</mark>预测<b>球来自左边箱子的概率</b>。</p>
    <p>
        <input type="number" id = "report" placeholder="请输入0到1之间的值，最多保留两位小数" style="width: 300px;"> </input>
        <button type = "button" onclick = "sendInput()" id = "button"> 提交</button>
    </p>
    <script>
        function isTwoDigitDecimal(str) {
            const digits = str.split('.');
            if (digits.length == 1) return true;
            if (digits.length > 2 || digits[1].length > 2) return false;
            return true;
        }
        function sendInput() {
            var input = document.getElementById("report").value;
            if (input == null) {
                window.alert("请输入球来自左边箱子的概率。");
            }
            else {
                if (isTwoDigitDecimal(input) == false) {
                    window.alert("您的预测最多保留两位小数。");
                }
                else {
                    liveSend(parseFloat(input));
                    document.getElementById("report").value = null;
                }
            }
        }
    </script>

<h4>三、分数计算</h4>
    <p>
        <p>您在本轮任务中的分数由各阶段的分数加总得到。</p>
        <p>您在阶段\(i\)中的分数由计算机实际选中的箱子和您在该阶段预测的概率\(x_i\)决定。您在阶段\(i\)的分数为:</p>
            \[
                \left\{
                \begin{aligned}
                &1-(1 - x_i)^2, &\text{如果计算机在本轮任务开始时选中了左边箱子,}\\
                &1-x_i^2, &\text{如果计算机在本轮任务开始时选中了右边箱子.}
                \end{aligned}
                \right.
            \]
    </p>
  
    <script>
        function draw_urns(label) {
            let canvas_name = "myCanvas" + label, caption_name = "caption" + label;
            let black_num = js_vars.black_num[label];
            let balls = js_vars.urn_balls[label];
            let caption_content = String(black_num) + "个黑球," + String(100 - black_num) + "个红球.";
            var canvas = document.getElementById(canvas_name);
            var ctx = canvas.getContext("2d");
            let n = 10, m = 10, r = 6, interspace = 1;
            let H = r * 2 + interspace, W = r * 2;

            canvas.width = W * n;
            canvas.height = H * m;
            
            for (var i = 0; i < n; ++i) 
                for (var j = 0; j < m; ++j) {
                    ctx.beginPath();
                    ctx.arc(i * W + r, j * H + r + interspace/2, r - 0.08 * r, 0, 2 * Math.PI);
                    ctx.fillStyle = balls[i * m + j];
                    ctx.fill();
                }
                
            document.getElementById(caption_name).innerHTML = caption_content;
        }

        function table_filling() {
            myReports = js_vars.table_content;
            for (const [key, value] of Object.entries(myReports)) 
                document.querySelector(key).textContent = value;
        }

        function table_init() {
            let R = js_vars.round, C = js_vars.num_players
            var tableHead = document.querySelector('#ReportTable thead');
            var tableBody = document.querySelector('#ReportTable tbody'); // Get the table body element
            
            var headrow = document.createElement('tr');
            var stage_cell = document.createElement('td');
            stage_cell.textContent = '阶段';
            headrow.appendChild(stage_cell);
            for (var j = 1; j <= C; j++) {
                var cell = document.createElement('td');
                cell.textContent = '成员'+j;
                headrow.appendChild(cell);
            }
            tableHead.appendChild(headrow);

            for (var i = 1; i <= R; i++) { // Loop through each row
                var row = document.createElement('tr'); // Create a new row element
                var stage_num = document.createElement('td');
                stage_num.textContent = i;
                row.appendChild(stage_num);
                for (var j = 1; j <= C; j++) { // Loop through each column in the row
                    var cell = document.createElement('td'); // Create a new cell element
                    cell.textContent = '--'; // Add content to the cell 
                    cell.id = 'cell_' + i + '_' + j; 
                    row.appendChild(cell); // Append the cell to the row
                }
                tableBody.appendChild(row); // Append the row to the table body
            }

            table_filling();
        }

        function input_box_display(game_iteration, whose_turn) {
            document.getElementById("game_iteration").textContent = game_iteration;

            if (whose_turn === js_vars.my_id) {
                window.alert("轮到您预测了！");
                document.getElementById('hint').textContent = "现在是您的预测时间。";//"轮到您预测了！";
                document.getElementById('input_label').style.display = "inline";
                document.getElementById('report').style.display = "inline";
                document.getElementById('button').style.display = "inline";
            }
            else {
                document.getElementById('hint').textContent = "现在是其他成员的预测时间，请等待。";
                document.getElementById('input_label').style.display = "none";
                document.getElementById('report').style.display = "none";
                document.getElementById('button').style.display = "none";
            }
        }

        function page_init() {
            //Show private signal.
            var signal = document.getElementById("signal");
            var signal_2Dcanvas = document.getElementById("signal").getContext("2d");
            let signal_size = 6;
            document.getElementById("signal").height = signal_size * 2.5;
            document.getElementById("signal").width = signal_size * 2.5;
            if (js_vars.signal == "black")
                document.getElementById("signal_name").textContent = "黑球";
            else
                document.getElementById("signal_name").textContent = "红球";
            signal_2Dcanvas.beginPath();
            signal_2Dcanvas.arc(signal_size, signal_size, signal_size * 0.92, 0, 2 * Math.PI);
            signal_2Dcanvas.fillStyle = js_vars.signal;
            signal_2Dcanvas.fill()

            // document.getElementById("gold").textContent = js_vars.computer_choice;

            //ReportTable Initialization.
            table_init(); 
            //Display two urns.
            draw_urns("Left"); 
            draw_urns("Right");
            document.getElementById("p").textContent = js_vars.p;
            document.getElementById("pR").textContent = js_vars.pR;
            
            // document.getElementById("task_number").textContent = js_vars.task_number;
            document.getElementById("round").textContent = js_vars.round;
            //Display identity
            document.getElementById("player_id").textContent = js_vars.my_id;
            //Input_box_display
            input_box_display(js_vars.game_iteration, js_vars.whose_turn);
        }

        function liveRecv(data) {
            if (data.game_over) 
                document.getElementById('form').submit();
            if (data.news != null) {
                document.querySelector(data.news.cell_id).textContent = data.news.report;
            }

            if (data.input_hint != null && data.whose_turn == js_vars.my_id) { //Invalid input
                window.alert(data.input_hint);
                document.getElementById("report").value = null;
            }
            else 
                input_box_display(data.game_iteration, data.whose_turn);
        }

        page_init();
    </script>

<style>
    #figure_container {
        display: flex; 
        gap: 5%;
        position: absolute;
        top: 25%;
        left: 50%;
    }
    #figure_container figure{
        align-items: center;
    }
    figcaption {
      font-size: 8px;
    }  
    canvas {
        border: 1px solid black;
    }
    #signal {
        position: relative;
        border: 0px;
        top: 15%;
        left: 40%;
    }
    #ReportTable td { /* Add border styling to the table cells */
        border: 1px solid black;
        padding: 5px;
        width: 20%;
        border-collapse: collapse;
    }
    #ReportTable {
        position: relative;
        left: 5%;
    }
</style>

{{endblock}}