css for prettier game board

1 month ago · e822191944
parent de52499d6f
commit e822191944
6 changed files with 63 additions and 5 deletions
--- a/src/backend/components/boardgame.tsx
+++ b/src/backend/components/boardgame.tsx
@ -24,7 +24,7 @@ const getCellHtml = ({
  const { isDisabled, nextGameState, text } = getCellDisplayData({ gameState, currentOutcome, row, column });

  return (
-    <button {...getSubmitAttributes(key, nextGameState)} disabled={isDisabled}>
+    <button {...getSubmitAttributes(key, nextGameState)} disabled={isDisabled} className={`square-${text}`}>
      {text}
    </button>
  );
@ -55,7 +55,7 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul
          Current player: <span class="current-player-name">{gameState.currentPlayerName}</span>
        </p>

-        <table class="game-board">
+        <table class="game-board-table">
          <tbody class="game-board">
            {sequence(gameState.rows).map((row) => (
              <tr>
--- a/src/backend/main/index.tsx
+++ b/src/backend/main/index.tsx
@ -32,7 +32,7 @@ export const mainPageHandler: RequestHandler = (req, res) => {
        <title>Hi</title>
      </head>
      <body>
-        <section>
+        <section class="counters">
          <p>
            Just a small demo of progressive form and tracker web components.
            <br />
@ -72,8 +72,8 @@ export const mainPageHandler: RequestHandler = (req, res) => {
            ))}
          </ul>
        </section>
-        <section>{board1}</section>
-        <section>{board2}</section>
+        <section class="game1">{board1}</section>
+        <section class="game2">{board2}</section>
      </body>
    </html>,
  );
--- a/src/frontend/components/board-game.ts
+++ b/src/frontend/components/board-game.ts
@ -74,6 +74,9 @@ export class BoardGameComponent extends HTMLElement {
            if (button.innerText !== text) {
              button.innerText = text;
            }
+            if (button.className !== `square-${text}`) {
+              button.className = `square-${text}`;
+            }
          }
        }
      }
--- a/src/frontend/static/o.png
+++ b/src/frontend/static/o.png
--- a/src/frontend/static/style.css
+++ b/src/frontend/static/style.css
@ -1,3 +1,24 @@
+body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: min-content 1fr;
+  grid-template-areas:
+    "counters counters"
+    "game1 game2";
+}
+
+section.counters {
+  grid-area: counters;
+}
+
+section.game1 {
+  grid-area: game1;
+}
+
+section.game2 {
+  grid-area: game2;
+}
+
 .counter {
  font-weight: bold;
  color: red;
@ -18,3 +39,37 @@ board-game:not(.game-in-progress) .when-game-in-progress,
 board-game:not(.game-not-in-progress) .when-game-not-in-progress {
  display: none;
 }
+
+table.game-board-table {
+  border: solid 7px transparent;
+  border-collapse: collapse;
+}
+
+table.game-board-table tbody.game-board td {
+  border: solid 6px black;
+  padding: 3px
+}
+
+tbody.game-board button,
+tbody.game-board button:disabled,
+tbody.game-board button:hover {
+  width: 4em;
+  height: 4em;
+  border: none;
+  background-color: transparent;
+  color:transparent;
+}
+
+tbody.game-board button.square-X {
+  background-image: url("x.png");
+  background-size: 100% 100%;
+}
+
+tbody.game-board button.square-O {
+  background-image: url("o.png");
+  background-size: 100% 100%;
+}
+
+tbody.game-board button.square-_ {
+  cursor: pointer;
+}
--- a/src/frontend/static/x.png
+++ b/src/frontend/static/x.png