Game

jamesgpearce · jamesgpearce · commit 2d84b0f05a32 · 2026-01-11T00:01:21.000-08:00
diff --git a/src/cli.ts b/src/cli.ts
@@ -56,6 +56,7 @@ const config = {
         {title: 'Todo app', value: 'todos'},
         {title: 'Chat app', value: 'chat'},
         {title: 'Drawing app', value: 'drawing'},
+        {title: 'Tic-tac-toe game', value: 'game'},
       ],
       initial: 0,
     },
diff --git a/templates/index.html.hbs b/templates/index.html.hbs
@@ -10,7 +10,7 @@
   {{includeFile template="public/favicon.svg" output="public/favicon.svg"}}
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <title>
-    TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else}}Todos{{/if}}
+    TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else if (eq appType "game")}}Game{{else}}Todos{{/if}}
   </title>
   <style>
     * {
@@ -162,6 +162,8 @@
               A real-time chat application demonstrating TinyBase's reactive data management.
             {{else if (eq appType "drawing")}}
               A collaborative drawing canvas showcasing TinyBase's state synchronization.
+            {{else if (eq appType "game")}}
+              A tic-tac-toe game demonstrating turn-based logic and computed game state.
             {{/if}}
             <br><br>
             Built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}{{#if react}} + React{{/if}}.
diff --git a/templates/src/components/Board.tsx.hbs b/templates/src/components/Board.tsx.hbs
@@ -0,0 +1,31 @@
+{{includeFile template="src/components/board.css.hbs" output="src/components/board.css"}}
+import './board.css';
+import {useMemo} from 'react';
+import {useValue} from 'tinybase/ui-react';
+{{includeFile template="src/components/Square.tsx.hbs" output="src/components/Square.{{ext}}"}}
+import {Square} from './Square';
+
+export const Board = () => {
+  const gameStatus = useValue('gameStatus') as string;
+  const winningLine = useValue('winningLine') as string | undefined;
+  
+  const winningPositions = useMemo(() => {
+    if (!winningLine) return new Set();
+    return new Set(winningLine.split(',').map(Number));
+  }, [winningLine]);
+
+  const disabled = gameStatus !== 'playing';
+
+  return (
+    <div id="board">
+      {Array.from({length: 9}, (_, i) => (
+        <Square
+          key={i}
+          position={i}
+          disabled={disabled}
+          winning={winningPositions.has(i)}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/templates/src/components/GameStatus.tsx.hbs b/templates/src/components/GameStatus.tsx.hbs
@@ -0,0 +1,21 @@
+{{includeFile template="src/components/gameStatus.css.hbs" output="src/components/gameStatus.css"}}
+import './gameStatus.css';
+import {useValue} from 'tinybase/ui-react';
+
+export const GameStatus = () => {
+  const gameStatus = useValue('gameStatus') as string;
+  const currentPlayer = useValue('currentPlayer') as string;
+  const winner = useValue('winner') as string | undefined;
+
+  return (
+    <div id="gameStatus">
+      {gameStatus === 'playing' && (
+        <>Player <span className="player">{currentPlayer}</span>'s turn</>
+      )}
+      {gameStatus === 'won' && (
+        <>Player <span className="winner">{winner}</span> wins!</>
+      )}
+      {gameStatus === 'draw' && <>It's a draw!</>}
+    </div>
+  );
+};
diff --git a/templates/src/components/Square.tsx.hbs b/templates/src/components/Square.tsx.hbs
@@ -0,0 +1,27 @@
+{{includeFile template="src/components/square.css.hbs" output="src/components/square.css"}}
+import './square.css';
+import {useCell, useStore, useValue} from 'tinybase/ui-react';
+
+export const Square = ({position, disabled, winning}: {position: number; disabled: boolean; winning: boolean}) => {
+  const store = useStore();
+  const value = useCell('board', position.toString(), 'value') as string | undefined;
+  const currentPlayer = useValue('currentPlayer') as string;
+
+  const isDisabled = disabled || !!value;
+
+  const handleClick = () => {
+    if (!isDisabled) {
+      store.setCell('board', position.toString(), 'value', currentPlayer);
+    }
+  };
+
+  return (
+    <button
+      className={`square${isDisabled ? ' disabled' : ''}${winning ? ' winning' : ''}`}
+      onClick={handleClick}
+      disabled={isDisabled}
+    >
+      {value || ''}
+    </button>
+  );
+};
diff --git a/templates/src/components/board.css.hbs b/templates/src/components/board.css.hbs
@@ -0,0 +1,10 @@
+#board {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  gap: 0;
+  border: 2px solid var(--border);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  margin: 2rem auto;
+}
diff --git a/templates/src/components/board.ts.hbs b/templates/src/components/board.ts.hbs
@@ -0,0 +1,42 @@
+{{includeFile template="src/components/board.css.hbs" output="src/components/board.css"}}
+import './board.css';
+{{includeFile template="src/components/square.ts.hbs" output="src/components/square.{{ext}}"}}
+import {createSquare} from './square';
+
+export const createBoard = (store: any): HTMLDivElement => {
+  const board = document.createElement('div');
+  board.id = 'board';
+
+  const render = () => {
+    const gameStatus = store.getValue('gameStatus');
+    const winningLine = store.getValue('winningLine');
+    const currentPlayer = store.getValue('currentPlayer');
+    const winningPositions = new Set(
+      winningLine ? winningLine.split(',').map(Number) : []
+    );
+    const disabled = gameStatus !== 'playing';
+
+    board.innerHTML = '';
+    for (let i = 0; i < 9; i++) {
+      const cell = store.getCell('board', i.toString(), 'value');
+      const square = createSquare(
+        i,
+        cell,
+        () => {
+          if (gameStatus === 'playing' && !cell) {
+            store.setCell('board', i.toString(), 'value', currentPlayer);
+          }
+        },
+        disabled || !!cell,
+        winningPositions.has(i)
+      );
+      board.appendChild(square);
+    }
+  };
+
+  store.addValuesListener(render);
+  store.addTableListener('board', render);
+  render();
+
+  return board;
+};
diff --git a/templates/src/components/gameStatus.css.hbs b/templates/src/components/gameStatus.css.hbs
@@ -0,0 +1,25 @@
+#gameStatus {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+  min-height: 2rem;
+}
+
+#gameStatus .player {
+  color: var(--accent);
+}
+
+#gameStatus .winner {
+  color: var(--accent);
+  animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
diff --git a/templates/src/components/gameStatus.ts.hbs b/templates/src/components/gameStatus.ts.hbs
@@ -0,0 +1,26 @@
+{{includeFile template="src/components/gameStatus.css.hbs" output="src/components/gameStatus.css"}}
+import './gameStatus.css';
+
+export const createGameStatus = (store: any): HTMLDivElement => {
+  const status = document.createElement('div');
+  status.id = 'gameStatus';
+
+  const render = () => {
+    const gameStatus = store.getValue('gameStatus');
+    const currentPlayer = store.getValue('currentPlayer');
+    const winner = store.getValue('winner');
+
+    if (gameStatus === 'playing') {
+      status.innerHTML = `Player <span class="player">${currentPlayer}</span>'s turn`;
+    } else if (gameStatus === 'won') {
+      status.innerHTML = `Player <span class="winner">${winner}</span> wins!`;
+    } else if (gameStatus === 'draw') {
+      status.textContent = "It's a draw!";
+    }
+  };
+
+  store.addValuesListener(render);
+  render();
+
+  return status;
+};
diff --git a/templates/src/components/square.css.hbs b/templates/src/components/square.css.hbs
@@ -0,0 +1,29 @@
+.square {
+  width: 100px;
+  height: 100px;
+  background: var(--bg2);
+  border: 2px solid var(--border);
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--fg);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.square:hover:not(.square.disabled) {
+  background: var(--bg);
+  border-color: var(--accent);
+}
+
+.square.disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.square.winning {
+  background: var(--accent);
+  color: var(--bg);
+}
diff --git a/templates/src/components/square.ts.hbs b/templates/src/components/square.ts.hbs
@@ -0,0 +1,11 @@
+{{includeFile template="src/components/square.css.hbs" output="src/components/square.css"}}
+import './square.css';
+
+export const createSquare = (position: number, value: string | undefined, onClick: () => void, disabled: boolean, winning: boolean): HTMLButtonElement => {
+  const square = document.createElement('button');
+  square.className = `square${disabled ? ' disabled' : ''}${winning ? ' winning' : ''}`;
+  square.textContent = value || '';
+  square.disabled = disabled;
+  square.addEventListener('click', onClick);
+  return square;
+};
diff --git a/templates/src/game/App.tsx.hbs b/templates/src/game/App.tsx.hbs
@@ -0,0 +1,102 @@
+{{includeFile template="src/game/index.css.hbs" output="src/game/index.css"}}
+import './index.css';
+import {StrictMode, useEffect} from 'react';
+import {createStore} from 'tinybase';
+import {Provider, useCreateStore, useSetValueCallback, useStore} from 'tinybase/ui-react';
+import {Inspector} from 'tinybase/ui-react-inspector';
+{{includeFile template="src/components/Button.tsx.hbs" output="src/components/Button.{{ext}}"}}
+import {Button} from '../components/Button';
+{{includeFile template="src/components/Board.tsx.hbs" output="src/components/Board.{{ext}}"}}
+import {Board} from '../components/Board';
+{{includeFile template="src/components/GameStatus.tsx.hbs" output="src/components/GameStatus.{{ext}}"}}
+import {GameStatus} from '../components/GameStatus';
+
+const WINNING_LINES = [
+  [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
+  [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
+  [0, 4, 8], [2, 4, 6],             // diagonals
+];
+
+const Game = () => {
+  const store = useStore();
+
+  useEffect(() => {
+    const checkGameState = () => {
+      const gameStatus = store.getValue('gameStatus');
+      if (gameStatus !== 'playing') return;
+
+      const board = store.getTable('board');
+      
+      // Check for winner
+      for (const line of WINNING_LINES) {
+        const [a, b, c] = line;
+        const cellA = board[a]?.value;
+        const cellB = board[b]?.value;
+        const cellC = board[c]?.value;
+        
+        if (cellA && cellA === cellB && cellA === cellC) {
+          store.setValue('gameStatus', 'won');
+          store.setValue('winner', cellA);
+          store.setValue('winningLine', line.join(','));
+          return;
+        }
+      }
+
+      // Check for draw
+      const filledCells = Object.values(board).filter((cell: any) => cell.value).length;
+      if (filledCells === 9) {
+        store.setValue('gameStatus', 'draw');
+        return;
+      }
+
+      // Switch player after each move
+      const currentPlayer = store.getValue('currentPlayer');
+      store.setValue('currentPlayer', currentPlayer === 'X' ? 'O' : 'X');
+    };
+
+    const listenerId = store.addTableListener('board', checkGameState, true);
+    return () => store.delListener(listenerId);
+  }, [store]);
+
+  const resetGame = useSetValueCallback(
+    'gameStatus',
+    () => {
+      store.delTable('board');
+      store.setValue('currentPlayer', 'X');
+      store.setValue('gameStatus', 'playing');
+      store.delValue('winner');
+      store.delValue('winningLine');
+      return 'playing';
+    },
+    [],
+  );
+
+  return (
+    <>
+      <GameStatus />
+      <Board />
+      <div style=\{{textAlign: 'center', marginTop: '2rem'}}>
+        <Button onClick={resetGame} variant="primary">New Game</Button>
+      </div>
+      <Inspector />
+    </>
+  );
+};
+
+const App = () => {
+  const store = useCreateStore(() => {
+    return createStore()
+      .setValue('currentPlayer', 'X')
+      .setValue('gameStatus', 'playing');
+  });
+
+  return (
+    <StrictMode>
+      <Provider store={store}>
+        <Game />
+      </Provider>
+    </StrictMode>
+  );
+};
+
+export {App};
diff --git a/templates/src/game/app.ts.hbs b/templates/src/game/app.ts.hbs
diff --git a/templates/src/game/index.css.hbs b/templates/src/game/index.css.hbs
diff --git a/test/__snapshots__/cli.test.js.snap b/test/__snapshots__/cli.test.js.snap
diff --git a/test/cli.test.js b/test/cli.test.js
diff --git a/test/e2e.test.js b/test/e2e.test.js
diff --git a/test/manual-test.sh b/test/manual-test.sh
