Rewrite layout with CSS Grid framework - predictable areas for gameboard, sidebar, and bottom bar

This commit is contained in:
2026-04-09 13:20:20 -04:00
parent 977481936c
commit 94c619ce7c
2 changed files with 373 additions and 591 deletions

View File

@@ -1417,13 +1417,14 @@ function attachEvents() {
} }
function render() { function render() {
const playerCount = state.players.length;
app.innerHTML = ` app.innerHTML = `
<main class="layout"> <main class="layout" style="--player-count: ${playerCount}">
<section class="game-area"> <section class="game-area">
${renderBoard()} ${renderBoard()}
${renderSidebar()}
</section> </section>
<footer class="scoreboard scoreboard--bottom"> ${renderSidebar()}
<footer class="scoreboard">
${renderScoreboard()} ${renderScoreboard()}
</footer> </footer>
</main> </main>

File diff suppressed because it is too large Load Diff