Tic Tac Toe

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_259":260,"_261":262},"routes/_app.x.$handle.$name",{"_94":93,"_31":43,"_102":84,"_26":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":56,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/style.css","latestPath","fileId","386a645e-4e00-11f0-b43b-76b3cceeab13","name","style.css","fileType","content","/* Custom styles for tic-tac-toe game */\n\n.game-cell {\n transition: all 0.2s ease;\n}\n\n.game-cell:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.game-cell:active {\n transform: scale(0.95);\n}\n\n.game-cell.disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.game-cell.disabled:hover {\n transform: none;\n box-shadow: none;\n}\n\n.player-x {\n color: #3b82f6; /* blue-500 */\n font-weight: bold;\n}\n\n.player-o {\n color: #ef4444; /* red-500 */\n font-weight: bold;\n}\n\n.winner-highlight {\n animation: pulse 1s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n.game-board {\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n}","createdAt",["D",1750442330188],"branchVersion","branchId","f43726e6-4dff-11f0-9162-76b3cceeab13","id","f436c4d0-4dff-11f0-9162-76b3cceeab13","kebede-and-ben-test",["D",1750442215769],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","04e56ba7-c54a-427f-8070-67219b83ca20","pinnedFileId","2a93193e-4e00-11f0-b4fa-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","2e901eee-3aff-4826-99a0-ea4001a41cef","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},"branch",{"_13":83,"_31":84,"_41":40,"_85":42,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":43,"_92":93},"isOwned",21,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","bmitchinson","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGNycExZSzZneWRkMGZuTGRiSDlsZjNSU3MifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":255,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":256,"_78":257,"_80":258,"_82":24},"tree",[167,174,177,179],"files",[167,168,169,170,171,172,173,174,175,176,177,178,179],"counts",{"_157":60,"_158":132,"_159":60,"_160":161,"_162":163},"contents",[124,125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":151,"_31":152,"_29":153,"_131":-5,"_39":40,"_38":154,"_133":56,"_36":155,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_26":156},{"_41":145,"_31":146,"_29":147,"_131":-5,"_39":40,"_38":148,"_133":56,"_36":149,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_26":150},{"_41":138,"_31":139,"_29":140,"_131":-5,"_39":40,"_38":141,"_133":56,"_36":142,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_26":144},{"_41":128,"_31":129,"_29":130,"_131":-5,"_39":40,"_38":132,"_133":56,"_36":134,"_13":60,"_33":20,"_34":135,"_23":24,"_136":-5,"_26":137},"0704c364-4e00-11f0-be20-76b3cceeab13","README.md","0704c440-4e00-11f0-be20-76b3cceeab13","parentId",1,"latest",["D",1750442247313],"# Tic Tac Toe Game\n\nA multiplayer tic-tac-toe game where two players can play against each other in real-time.\n\n## Features\n\n- Two-player gameplay\n- Real-time game state updates\n- Game history tracking\n- Clean, responsive UI\n- Automatic win detection\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Game queries\n│ └── routes/\n│ └── game.ts # Game API routes\n├── frontend/\n│ ├── index.html # Main page\n│ ├── components/\n│ │ ├── App.tsx # Main React app\n│ │ ├── GameBoard.tsx # Game board component\n│ │ └── GameStatus.tsx # Game status display\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## How to Play\n\n1. Visit the website\n2. Player X starts first\n3. Click on any empty cell to make your move\n4. Players alternate turns\n5. First to get 3 in a row (horizontal, vertical, or diagonal) wins!\n6. Click \"New Game\" to start over\n\n## API Endpoints\n\n- `GET /api/game/:gameId` - Get game state\n- `POST /api/game` - Create new game\n- `PUT /api/game/:gameId/move` - Make a move\n- `GET /api/games` - List recent games","label",[129],"0bb53cd6-4e00-11f0-a65e-76b3cceeab13","shared","1249aecb-3d20-4351-8aac-3be660b3ddf6",2,["D",1750442255172],"directory",[139],"32f315ca-4e00-11f0-993e-76b3cceeab13","frontend","cd3b309d-fc5a-442a-9804-fb0942c91b06",8,["D",1750442321013],[146],"0fc49d26-4e00-11f0-94a1-76b3cceeab13","backend","f3f4c5d5-c451-4871-9530-a06a296698ef",3,["D",1750442261985],[152],"pulls","branches","forks","envVars",{"_164":60,"_166":60},"connections",{"_164":60,"_165":60},"count","unfilledCount","emptyCount",{"_41":151,"_31":152,"_29":153,"_131":-5,"_39":40,"_38":154,"_133":56,"_36":252,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_181":253,"_26":254},{"_41":248,"_31":240,"_29":234,"_131":153,"_39":40,"_38":154,"_133":56,"_36":249,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_181":250,"_26":251},{"_41":241,"_31":242,"_29":243,"_131":234,"_39":40,"_38":154,"_133":56,"_36":244,"_13":60,"_33":188,"_34":245,"_23":24,"_136":-5,"_181":246,"_26":247},{"_41":231,"_31":232,"_29":233,"_131":234,"_39":40,"_38":235,"_133":24,"_36":236,"_13":60,"_33":188,"_34":237,"_23":24,"_136":-5,"_181":238,"_26":239},{"_41":227,"_31":226,"_29":220,"_131":153,"_39":40,"_38":221,"_133":56,"_36":228,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_181":229,"_26":230},{"_41":217,"_31":218,"_29":219,"_131":220,"_39":40,"_38":221,"_133":24,"_36":222,"_13":60,"_33":188,"_34":223,"_23":24,"_136":-5,"_181":224,"_26":225},{"_41":209,"_31":210,"_29":54,"_131":153,"_39":40,"_38":211,"_133":56,"_36":212,"_13":132,"_33":213,"_34":214,"_23":24,"_136":-5,"_181":215,"_26":216},{"_41":145,"_31":146,"_29":147,"_131":-5,"_39":40,"_38":148,"_133":56,"_36":206,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_181":207,"_26":208},{"_41":199,"_31":200,"_29":201,"_131":147,"_39":40,"_38":148,"_133":24,"_36":202,"_13":60,"_33":20,"_34":203,"_23":24,"_136":-5,"_181":204,"_26":205},{"_41":195,"_31":32,"_29":30,"_131":147,"_39":40,"_38":14,"_133":56,"_36":196,"_13":60,"_33":20,"_34":35,"_23":24,"_136":-5,"_181":197,"_26":198},{"_41":138,"_31":139,"_29":140,"_131":-5,"_39":40,"_38":141,"_133":56,"_36":192,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_181":193,"_26":194},{"_41":184,"_31":185,"_29":186,"_131":140,"_39":40,"_38":141,"_133":56,"_36":187,"_13":60,"_33":188,"_34":189,"_23":24,"_136":-5,"_181":190,"_26":191},{"_41":128,"_31":129,"_29":130,"_131":-5,"_39":40,"_38":132,"_133":56,"_36":180,"_13":60,"_33":20,"_34":135,"_23":24,"_136":-5,"_181":182,"_26":183},["D",1750442247313],"children",[],[129],"0bb53060-4e00-11f0-a65e-76b3cceeab13","types.ts","0bb5311e-4e00-11f0-a65e-76b3cceeab13",["D",1750442255172],"script","// Shared types for tic-tac-toe game\n\nexport type Player = 'X' | 'O';\nexport type CellValue = Player | null;\nexport type Board = CellValue[];\nexport type GameStatus = 'playing' | 'won' | 'draw';\n\nexport interface GameState {\n id: string;\n board: Board;\n currentPlayer: Player;\n status: GameStatus;\n winner: Player | null;\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface MoveRequest {\n position: number;\n}\n\nexport interface GameResponse {\n success: boolean;\n game?: GameState;\n error?: string;\n}\n\nexport interface GamesListResponse {\n success: boolean;\n games?: GameState[];\n error?: string;\n}",[],[139,185],["D",1750442255172],[178],[139],"386a638c-4e00-11f0-b43b-76b3cceeab13",["D",1750442330188],[],[146,32],"32f30b2a-4e00-11f0-993e-76b3cceeab13","index.html","32f30da0-4e00-11f0-993e-76b3cceeab13",["D",1750442321013],"\n\n\n \n \n Tic Tac Toe\n \n \n \n\n\n

\n \n \n\n",[],[146,200],["D",1750442321013],[175,176],[146],"2e5d0e12-4e00-11f0-98e9-76b3cceeab13","index.ts",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;",[],[152,210],"25228bb0-4e00-11f0-b4fa-76b3cceeab13","game.ts","25228c82-4e00-11f0-b4fa-76b3cceeab13","b90a5174-caf5-44a1-952c-b045f4de83ac",5,["D",1750442297839],"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;",[],[152,226,218],"routes","2522988a-4e00-11f0-b4fa-76b3cceeab13",["D",1750442297839],[172],[152,226],"1884def8-4e00-11f0-ae38-76b3cceeab13","queries.ts","1884dfb6-4e00-11f0-ae38-76b3cceeab13","82955637-9aad-4ca1-9cd7-9d7a3558547a",4,["D",1750442276672],"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.length === 0) {\n return null;\n }\n\n const row = result[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.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}",[],[152,240,232],"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 };",[],[152,240,242],"0fc49f7e-4e00-11f0-94a1-76b3cceeab13",["D",1750442261985],[169,170],[152,240],["D",1750442261985],[168,171,173],[152],["D",1750442215769],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},{"_13":83,"_31":84,"_41":40,"_85":42,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":43,"_92":93},"ctx",{"_76":-5,"_121":292,"_293":294,"_295":296,"_297":24,"_298":24,"_299":24,"_300":56,"_301":-5,"_302":-7,"_303":-7,"_304":60,"_305":24,"_306":24,"_307":-5,"_308":24,"_309":24,"_310":24,"_311":-5},"ENV",{"_263":264,"_265":266,"_267":84,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291},"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"]

Diff · v9