Published
Edited
Jun 22, 2021
Fork of Bingo
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
async function* renderGame() {
const state = createState();
while (true) {
let body = null;
const p = new Promise((resolve) => {
body = renderGrid(state, resolve);
});

yield body;
await p;
}
}
Insert cell
renderGrid = (state, onChange) =>
html`
<div style="display:flex; flex-direction: column; justify-content: center; align-items: center;">
<h1 style="font-size: 5em;">Bingo</h1>
<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[col][row], () => {
// if (!(row === 2 && col === 2)) {
state[col][row] = (state[col][row] + 1) % 3;
onChange();
// }
})
)}`;
})}
</div>
</div>`
Insert cell
'\u2605'
Insert cell
Insert cell
createState()
Insert cell
Insert cell
Insert cell
GRID_WIDTH = 3
Insert cell
GRID_HEIGHT = 3
Insert cell
Insert cell
Insert cell

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.
Learn more