css for prettier game board

5 days 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 class="game1">{board1}</section>
-        <section>{board2}</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