\n \n \n\n",[],[206,208],"c0413c7c-4e00-11f0-a9ad-76b3cceeab13","GameStatus.tsx","486bb222-4e00-11f0-831d-76b3cceeab13","4026bdd1-bf66-4598-a667-5d5655ccaf1b",15,["D",1750442558085],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { GameState } from \"../../shared/types.ts\";\n\ninterface GameStatusProps {\n game: GameState;\n onNewGame: () => void;\n loading: boolean;\n}\n\nexport default function GameStatus({ game, onNewGame, loading }: GameStatusProps) {\n const getStatusMessage = () => {\n if (game.status === 'won') {\n return (\n \n 🎉 Player {game.winner} Wins! 🎉\n \n );\n } else if (game.status === 'draw') {\n return (\n \n 🤝 It's a Draw! 🤝\n \n );\n } else {\n return (\n \n Current Player: \n \n {game.currentPlayer}\n \n \n );\n }\n };\n\n return (\n

\n {getStatusMessage()}\n

\n \n

\n \n {loading ? '⏳ Starting...' : '🎮 New Game'}\n \n \n

\n Game ID: {game.id}\n

\n );\n}",[],[206,224,216],"components","bd551fd8-4e00-11f0-8a5b-76b3cceeab13","GameBoard.tsx","3fcaf2fe-4e00-11f0-9c7a-76b3cceeab13",14,["D",1750442553181],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { GameState, CellValue } from \"../../shared/types.ts\";\n\ninterface GameBoardProps {\n game: GameState;\n onCellClick: (position: number) => void;\n disabled: boolean;\n}\n\nexport default function GameBoard({ game, onCellClick, disabled }: GameBoardProps) {\n const renderCell = (position: number) => {\n const value = game.board[position];\n const isEmpty = value === null;\n const isDisabled = disabled || !isEmpty || game.status !== 'playing';\n \n return (\n !isDisabled && onCellClick(position)}\n disabled={isDisabled}\n >\n {value}\n \n );\n };\n\n return (\n

\n {Array.from({ length: 9 }, (_, i) => renderCell(i))}\n

\n );\n}",[],[206,224,226],"b98e4c26-4e00-11f0-8570-76b3cceeab13","App.tsx","569c381c-4e00-11f0-8cc5-76b3cceeab13",13,["D",1750442546844],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport GameBoard from \"./GameBoard.tsx\";\nimport GameStatus from \"./GameStatus.tsx\";\nimport type { GameState, GameResponse, MoveRequest } from \"../../shared/types.ts\";\n\nexport default function App() {\n const [game, setGame] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n // Create a new game\n const createNewGame = async () => {\n setLoading(true);\n setError(null);\n \n try {\n const response = await fetch('/api/game', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n \n const data: GameResponse = await response.json();\n \n if (data.success && data.game) {\n setGame(data.game);\n } else {\n setError(data.error || 'Failed to create game');\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Network error');\n } finally {\n setLoading(false);\n }\n };\n\n // Make a move\n const makeMove = async (position: number) => {\n if (!game || loading) return;\n \n setLoading(true);\n setError(null);\n \n try {\n const moveData: MoveRequest = { position };\n \n const response = await fetch(`/api/game/${game.id}/move`, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(moveData),\n });\n \n const data: GameResponse = await response.json();\n \n if (data.success && data.game) {\n setGame(data.game);\n } else {\n setError(data.error || 'Failed to make move');\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Network error');\n } finally {\n setLoading(false);\n }\n };\n\n // Initialize with a new game on mount\n useEffect(() => {\n createNewGame();\n }, []);\n\n if (!game && !error) {\n return (\n

🎮 Loading Tic Tac Toe...

⚡

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n 🎯 Tic Tac Toe\n

\n Two players, one winner!\n

\n\n {/* Error Display */}\n {error && (\n

\n Error: {error}\n setError(null)}\n className=\"ml-2 text-red-500 hover:text-red-700\"\n >\n ✕\n \n

\n )}\n\n {/* Game Content */}\n {game && (\n <>\n \n \n \n \n )}\n\n {/* Instructions */}\n

How to Play:

• Player X goes first
• Click any empty cell to make your move
• Get 3 in a row to win!
• Share the game ID with a friend to play together

\n );\n}",[],[206,224,234],"3fcafc22-4e00-11f0-9c7a-76b3cceeab13",10,["D",1750442342559],[175,176,177],[206,224],"32f315ca-4e00-11f0-993e-76b3cceeab13",8,["D",1750442321013],[174,178,179],[206],"2e5d0e12-4e00-11f0-98e9-76b3cceeab13","index.ts","f3f4c5d5-c451-4871-9530-a06a296698ef",7,["D",1750442313316],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport gameRoutes from \"./routes/game.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Initialize database\nawait runMigrations();\n\n// API routes\napp.route(\"/api/game\", gameRoutes);\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[260,252],"backend","fc7806d0-4e00-11f0-b6d5-76b3cceeab13","game.ts","25228c82-4e00-11f0-b4fa-76b3cceeab13","b90a5174-caf5-44a1-952c-b045f4de83ac",["D",1750442659104],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport type { GameState, Player, MoveRequest, GameResponse, GamesListResponse } from \"../../shared/types.ts\";\nimport { createGame, getGame, updateGame, getRecentGames } from \"../database/queries.ts\";\n\nconst app = new Hono();\n\n// Game logic functions\nfunction checkWinner(board: (Player | null)[]): Player | null {\n const winPatterns = [\n [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows\n [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns\n [0, 4, 8], [2, 4, 6] // diagonals\n ];\n\n for (const pattern of winPatterns) {\n const [a, b, c] = pattern;\n if (board[a] && board[a] === board[b] && board[a] === board[c]) {\n return board[a];\n }\n }\n return null;\n}\n\nfunction isBoardFull(board: (Player | null)[]): boolean {\n return board.every(cell => cell !== null);\n}\n\n// Routes\napp.post(\"/\", async (c) => {\n try {\n const game = await createGame();\n const response: GameResponse = { success: true, game };\n return c.json(response);\n } catch (error) {\n const response: GameResponse = { \n success: false, \n error: error instanceof Error ? error.message : \"Failed to create game\" \n };\n return c.json(response, 500);\n }\n});\n\napp.get(\"/:gameId\", async (c) => {\n try {\n const gameId = c.req.param(\"gameId\");\n const game = await getGame(gameId);\n \n if (!game) {\n const response: GameResponse = { success: false, error: \"Game not found\" };\n return c.json(response, 404);\n }\n\n const response: GameResponse = { success: true, game };\n return c.json(response);\n } catch (error) {\n const response: GameResponse = { \n success: false, \n error: error instanceof Error ? error.message : \"Failed to get game\" \n };\n return c.json(response, 500);\n }\n});\n\napp.put(\"/:gameId/move\", async (c) => {\n try {\n const gameId = c.req.param(\"gameId\");\n const { position }: MoveRequest = await c.req.json();\n \n const game = await getGame(gameId);\n if (!game) {\n const response: GameResponse = { success: false, error: \"Game not found\" };\n return c.json(response, 404);\n }\n\n if (game.status !== 'playing') {\n const response: GameResponse = { success: false, error: \"Game is already finished\" };\n return c.json(response, 400);\n }\n\n if (position < 0 || position > 8) {\n const response: GameResponse = { success: false, error: \"Invalid position\" };\n return c.json(response, 400);\n }\n\n if (game.board[position] !== null) {\n const response: GameResponse = { success: false, error: \"Position already taken\" };\n return c.json(response, 400);\n }\n\n // Make the move\n game.board[position] = game.currentPlayer;\n \n // Check for winner\n const winner = checkWinner(game.board);\n if (winner) {\n game.status = 'won';\n game.winner = winner;\n } else if (isBoardFull(game.board)) {\n game.status = 'draw';\n } else {\n // Switch players\n game.currentPlayer = game.currentPlayer === 'X' ? 'O' : 'X';\n }\n\n await updateGame(game);\n\n const response: GameResponse = { success: true, game };\n return c.json(response);\n } catch (error) {\n const response: GameResponse = { \n success: false, \n error: error instanceof Error ? error.message : \"Failed to make move\" \n };\n return c.json(response, 500);\n }\n});\n\napp.get(\"/\", async (c) => {\n try {\n const games = await getRecentGames(20);\n const response: GamesListResponse = { success: true, games };\n return c.json(response);\n } catch (error) {\n const response: GamesListResponse = { \n success: false, \n error: error instanceof Error ? error.message : \"Failed to get games\" \n };\n return c.json(response, 500);\n }\n});\n\nexport default app;",[],[260,269,262],"routes","2522988a-4e00-11f0-b4fa-76b3cceeab13",5,["D",1750442297839],[171],[260,269],"f77502e6-4e00-11f0-8bd5-76b3cceeab13","queries.ts","1884dfb6-4e00-11f0-ae38-76b3cceeab13","82955637-9aad-4ca1-9cd7-9d7a3558547a",20,["D",1750442650696],3,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME } from \"./migrations.ts\";\nimport type { GameState, Player, Board, GameStatus } from \"../../shared/types.ts\";\n\nexport async function createGame(): Promise {\n const id = crypto.randomUUID();\n const now = new Date().toISOString();\n const board: Board = Array(9).fill(null);\n \n const game: GameState = {\n id,\n board,\n currentPlayer: 'X',\n status: 'playing',\n winner: null,\n createdAt: now,\n updatedAt: now\n };\n\n await sqlite.execute(\n `INSERT INTO ${TABLE_NAME} (id, board, current_player, status, winner, created_at, updated_at) \n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n [id, JSON.stringify(board), 'X', 'playing', null, now, now]\n );\n\n return game;\n}\n\nexport async function getGame(id: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} WHERE id = ?`,\n [id]\n );\n\n if (result.rows.length === 0) {\n return null;\n }\n\n const row = result.rows[0];\n return {\n id: row.id as string,\n board: JSON.parse(row.board as string),\n currentPlayer: row.current_player as Player,\n status: row.status as GameStatus,\n winner: row.winner as Player | null,\n createdAt: row.created_at as string,\n updatedAt: row.updated_at as string\n };\n}\n\nexport async function updateGame(game: GameState): Promise {\n const now = new Date().toISOString();\n \n await sqlite.execute(\n `UPDATE ${TABLE_NAME} \n SET board = ?, current_player = ?, status = ?, winner = ?, updated_at = ?\n WHERE id = ?`,\n [\n JSON.stringify(game.board),\n game.currentPlayer,\n game.status,\n game.winner,\n now,\n game.id\n ]\n );\n}\n\nexport async function getRecentGames(limit: number = 10): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} ORDER BY updated_at DESC LIMIT ?`,\n [limit]\n );\n\n return result.rows.map(row => ({\n id: row.id as string,\n board: JSON.parse(row.board as string),\n currentPlayer: row.current_player as Player,\n status: row.status as GameStatus,\n winner: row.winner as Player | null,\n createdAt: row.created_at as string,\n updatedAt: row.updated_at as string\n }));\n}",[],[260,285,276],"database","0fc49394-4e00-11f0-94a1-76b3cceeab13","migrations.ts","0fc49448-4e00-11f0-94a1-76b3cceeab13",["D",1750442261985],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nconst TABLE_NAME = 'tic_tac_toe_games_1';\n\nexport async function runMigrations() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id TEXT PRIMARY KEY,\n board TEXT NOT NULL,\n current_player TEXT NOT NULL,\n status TEXT NOT NULL,\n winner TEXT,\n created_at TEXT NOT NULL,\n updated_at TEXT NOT NULL\n )`);\n}\n\nexport { TABLE_NAME };",[],[260,285,287],"0fc49f7e-4e00-11f0-94a1-76b3cceeab13",["D",1750442261985],[168,169],[260,285],"0fc49d26-4e00-11f0-94a1-76b3cceeab13",["D",1750442261985],[167,170,172],[260],["D",1750442215769],{"_11":12,"_121":70},{"_11":12,"_117":-5,"_69":70,"_31":68,"_118":119,"_120":30},{"_39":108,"_13":16,"_33":36,"_109":74,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":14,"_116":12},"ctx",{"_52":-5,"_140":338,"_339":340,"_341":342,"_343":30,"_344":30,"_345":30,"_346":24,"_347":-5,"_348":-7,"_349":-7,"_350":26,"_351":30,"_352":30,"_353":-5,"_354":30,"_355":30,"_356":30,"_357":-5},"ENV",{"_309":310,"_311":312,"_313":16,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · shared