let game = {
    "state": {
        "progress" : "waiting",
    },
    "grid": [ " ", " ", " ", " ", " ", " ", " ", " ", " " ],
};

/**
 * Updates the game state from the JSON response received from a remote HTTP endpoint.
 *
 * @param {Response} response the HTTP response from a remote JSON endpoint.
 */
async function updateGame(response) {
    if (!response.ok) {
        let error =  await response.text();
        console.log("Error: " + error);
        return;
    }
    game = await response.json();
    updateHtml(game);
}

// Updates the HTML to match the game state given as JSON.
function updateHtml(json) {
    let i = 0;  

    for (const button of document.querySelectorAll(".grid button")) {
        const cellText = json.grid[i];
        // Set the data-state attribute which drives CSS formatting.
        button.setAttribute('data-state', cellText);
        // Set the text contents of the cell.
        button.textContent = cellText;
        i++;
    }
}