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

2026-04-09 13:20:20 -04:00
parent 977481936c
commit 94c619ce7c
2 changed files with 373 additions and 591 deletions
--- a/src/main.ts
+++ b/src/main.ts
@@ -1417,13 +1417,14 @@ function attachEvents() {
 }

 function render() {
+  const playerCount = state.players.length;
  app.innerHTML = `
-    <main class="layout">
+    <main class="layout" style="--player-count: ${playerCount}">
      <section class="game-area">
        ${renderBoard()}
-        ${renderSidebar()}
      </section>
-      <footer class="scoreboard scoreboard--bottom">
+      ${renderSidebar()}
+      <footer class="scoreboard">
        ${renderScoreboard()}
      </footer>
    </main>
--- a/src/styles.css
+++ b/src/styles.css