Refactor frontend to use HTMX, and do most rendering serverside

src/view/board-renderer.ts

@@ -0,0 +1,55 @@
+import { GameInstance } from '../game/GameInstance';
+
+export type GameStateType = Pick<
+  GameInstance,
+  'id' | 'board' | 'currentPlayer' | 'status' | 'winner' | 'players'
+>;
+
+export function renderGameBoardHtml(
+  gameState: GameStateType,
+  playerId: string,
+): string {
+  let boardHtml = '<div id="game-board" class="game-board-grid">';
+
+  const currentPlayerColor =
+    Object.entries(gameState.players).find(
+      ([_, id]) => id === playerId,
+    )?.[0] || null;
+  const isPlayersTurn =
+    gameState.status === 'playing' &&
+    gameState.currentPlayer === currentPlayerColor;
+
+  for (let row = 0; row < gameState.board.length; row++) {
+    for (let col = 0; col < gameState.board[row].length; col++) {
+      const stone = gameState.board[row][col];
+      const cellId = `cell-${row}-${col}`;
+      let stoneHtml = '';
+      if (stone) {
+        const color = stone === 'black' ? 'black' : 'white';
+        stoneHtml = `<div style="background-color: ${color};"></div>`;
+      }
+
+      // HTMX attributes for making a move
+      const wsAttrs = isPlayersTurn && !stone
+        ? `ws-send="click"` 
+        : '';
+
+      boardHtml += `
+                <div 
+                    id="${cellId}" 
+                    class="board-cell" 
+                    data-row="${row}" 
+                    data-col="${col}"
+                    ${wsAttrs}
+                >
+                    ${stoneHtml}
+                </div>`;
+    }
+  }
+  boardHtml += `</div>`;
+  return boardHtml;
+}
+
+export function renderPlayerInfoHtml(gameId: string, playerId: string): string {
+  return `<div id="player-info">You are: ${playerId}<br/>Game ID: ${gameId}</div>`;
+}