diff --git a/src/backend/components/boardgame.tsx b/src/backend/components/boardgame.tsx index b397fa3..0fd4f3b 100644 --- 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 ( - ); @@ -55,7 +55,7 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul Current player: {gameState.currentPlayerName}

- +
{sequence(gameState.rows).map((row) => ( diff --git a/src/backend/main/index.tsx b/src/backend/main/index.tsx index 28ba9cf..8b66087 100644 --- a/src/backend/main/index.tsx +++ b/src/backend/main/index.tsx @@ -32,7 +32,7 @@ export const mainPageHandler: RequestHandler = (req, res) => { Hi -
+

Just a small demo of progressive form and tracker web components.
@@ -72,8 +72,8 @@ export const mainPageHandler: RequestHandler = (req, res) => { ))}

-
{board1}
-
{board2}
+
{board1}
+
{board2}
, ); diff --git a/src/frontend/components/board-game.ts b/src/frontend/components/board-game.ts index 9ae050d..478f3a0 100644 --- 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}`; + } } } } diff --git a/src/frontend/static/o.png b/src/frontend/static/o.png new file mode 100644 index 0000000..cbd7afd Binary files /dev/null and b/src/frontend/static/o.png differ diff --git a/src/frontend/static/style.css b/src/frontend/static/style.css index 124d5cf..ca976c6 100644 --- 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; +} diff --git a/src/frontend/static/x.png b/src/frontend/static/x.png new file mode 100644 index 0000000..f9e0d1e Binary files /dev/null and b/src/frontend/static/x.png differ