function draw_urns(label, type) {
    let canvas_name = "myCanvas" + label, caption_name = "caption" + label;
    let black_num = js_vars.black_num[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);
            if ((i + j) & 1) ctx.fillStyle = "red";
            else ctx.fillStyle = "black";
            if (type) ctx.fillStyle = "black";
            ctx.fill();
        }
        
    document.getElementById(caption_name).innerHTML = caption_content;
}

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');
    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
        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
    }
}

function input_box_display(whose_turn) {
    if (whose_turn === js_vars.my_id) {
        document.getElementById('hint').textContent = "轮到您汇报了！";
        document.getElementById('report').style.display = "inline";
        document.getElementById('button').style.display = "inline";
    }
    else {
        document.getElementById('hint').textContent = "轮到其他成员汇报了！";
        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;
    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", false); 
    draw_urns("Right", true);
    input_box_display(1);
}

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;

    input_box_display(data.whose_turn);
}