async function* renderGame() {
const state = createState();
while (true) {
let body = null;
const p = new Promise((resolve) => {
body = renderGrid(state, resolve);
});
yield body;
await p;
}
}
renderGrid = (state, onChange) =>
html`
<div style="display:flex; flex-direction: column; justify-content: center; align-items: center;">
<h1 style="font-size: 5em;color: red">Tic-Tac-Toe</h1>
<h2> Winner is ${charLut[state.winner]}</h2>
<div style="
display:inline-flex;
justify-content: center;
align-items: center;
border: 2px solid black;
">${d3.range(GRID_WIDTH).map((row) => {
return html`<div>${d3.range(GRID_HEIGHT).map((col) =>
renderBox(state.board[col][row], () => {
handleTurn(state, col, row); //state[col][row] = (state[col][row] + 1) % 3;
onChange();
//}
})
)}`;
})}
</div>
</div>`
function handleTurn(state, col, row) {
if (state.board[col][row] === 0) {
if (state.turn % 2 === 0) {
state.board[col][row] = X_PLAYER;
} else {
state.board[col][row] = O_PLAYER;
}
state.turn++;
winGame(state);
console.log(state, col, row);
}
}
function winGame(state, col, row) {
//display tie
//reset to original game state after 4 seconds use setTimeout()
//Fix the part where if you select the lower left cell it says x||o won. That's a little weird.
//Also this code is uglier than a sack of rotten potatoes, figure out how to make it cleaner.
const TOP_WIN = state.board[0][0] && state.board[0][1] && state.board[0][2];
const MID_WIN = state.board[1][0] && state.board[1][1] && state.board[1][2];
const BOTTOM_WIN =
state.board[2][0] && state.board[2][1] && state.board[2][2];
const RIGHT_DIAG =
state.board[0][0] && state.board[1][1] && state.board[2][2];
const LEFT_DIAG = state.board[0][2] && state.board[1][1] && state.board[2][0];
//build tests to see if x || o won
if (
(TOP_WIN || MID_WIN || BOTTOM_WIN || RIGHT_DIAG || LEFT_DIAG) === X_PLAYER
) {
state.winner = X_PLAYER;
} else if (
(TOP_WIN || MID_WIN || BOTTOM_WIN || RIGHT_DIAG || LEFT_DIAG) === O_PLAYER
) {
state.winner = O_PLAYER;
} else {
state.winner = NEITHER;
}
//state.winner++;
}
function renderBox(cellValue, onClick) {
//const charLut = [``, X_PLAYER, O_PLAYER];
// const charLut = ['', 'X', 'O'];
const box = html`
<div
style="
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border: 2px black solid;
user-select: none;
">
<div style="font-size: 5em">${charLut[cellValue]}</div>
</div>`;
box.addEventListener("click", onClick);
//render box cares not about what the clicking does
return box;
}
charLut = ["", "X", "O", "neither"]
createState()
createState = () => {
const board = d3
.range(GRID_HEIGHT)
.map(() => d3.range(GRID_WIDTH).map(() => 0));
//state[2][2] = 1;
return { board, turn: 0, winner: 0 };
}
GRID_WIDTH = 3
GRID_HEIGHT = 3
X_PLAYER = 1
O_PLAYER = 2
NEITHER = 3
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
