[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_199":200,"_201":202},"routes/_app.x.$handle.$name",{"_98":97,"_32":44,"_106":88,"_27":100,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":48,"_120":121,"_122":48,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":48,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":48},"version",23,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",true,"deletedHere","path","main.ts","latestPath","fileId","f7e68644-5acc-11f1-ae1e-ee650bb23af1","name","fileType","http","content","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve the game at root\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap Hono errors\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","createdAt",["D",1780000461373],"branchVersion","branchId","f7bfccca-5acc-11f1-ae1e-ee650bb23af1","id","f7bee116-5acc-11f1-ae1e-ee650bb23af1","damian",["D",1779997180149],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","h","imageUrl","f0a80c12-7765-45a5-97e5-94a00e79fd0d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019e7019-1384-706c-9400-44ff984c9a5c","tursoName","f7bee1165acc11f1ae1eee650bb23af1","tursoHostname","f7bee1165acc11f1ae1eee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789504908499],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":100},"org",{"_98":97,"_99":100,"_101":100,"_18":55,"_102":103,"_104":48},"branch",{"_13":87,"_32":88,"_42":41,"_89":43,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":44,"_96":97},"isOwned",24,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","cvm","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_32":44,"_37":194,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":48,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":195,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":196,"_82":197,"_84":198,"_86":48},"tree",[157,161],"files",[157,158,159,160,161],"counts",{"_147":61,"_148":136,"_149":61,"_150":151,"_152":153},"contents",[127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":140,"_32":141,"_30":142,"_132":-5,"_40":41,"_39":143,"_134":25,"_37":144,"_13":61,"_33":145,"_35":-5,"_24":48,"_138":-5,"_27":146},{"_42":129,"_32":130,"_30":131,"_132":-5,"_40":41,"_39":133,"_134":25,"_37":135,"_13":136,"_33":20,"_35":137,"_24":48,"_138":-5,"_27":139},"8faa5284-5ad3-11f1-bb4d-ee650bb23af1","README.md","1de895f2-5ad3-11f1-a9a9-ee650bb23af1","parentId",22,"latest",["D",1780000011978],1,"# 🐍 Snake Game\n\nA classic Snake game built with React and TypeScript.\n\n## How to Play\n\n- **Arrow keys** or **WASD** to move\n- **Space** to pause/resume\n- **Swipe** on mobile\n- Eat 🍎 to grow and score points\n- Don't hit the walls or yourself!\n\n## Features\n- Speed increases as you score\n- High score saved locally\n- Mobile-friendly with touch controls and D-pad\n- Smooth animations\n","label",[130],"6b946aec-5ad3-11f1-b2d7-ee650bb23af1","frontend","6b946bd2-5ad3-11f1-b2d7-ee650bb23af1",17,["D",1779999951451],"directory",[141],"pulls","branches","forks","envVars",{"_154":61,"_156":61},"connections",{"_154":61,"_155":61},"count","unfilledCount","emptyCount",{"_42":140,"_32":141,"_30":142,"_132":-5,"_40":41,"_39":143,"_134":25,"_37":191,"_13":61,"_33":145,"_35":-5,"_24":48,"_138":-5,"_163":192,"_27":193},{"_42":183,"_32":184,"_30":185,"_132":142,"_40":41,"_39":186,"_134":48,"_37":187,"_13":61,"_33":171,"_35":188,"_24":48,"_138":-5,"_163":189,"_27":190},{"_42":175,"_32":176,"_30":177,"_132":142,"_40":41,"_39":178,"_134":25,"_37":179,"_13":61,"_33":20,"_35":180,"_24":48,"_138":-5,"_163":181,"_27":182},{"_42":166,"_32":167,"_30":168,"_132":142,"_40":41,"_39":169,"_134":25,"_37":170,"_13":61,"_33":171,"_35":172,"_24":48,"_138":-5,"_163":173,"_27":174},{"_42":129,"_32":130,"_30":131,"_132":-5,"_40":41,"_39":133,"_134":25,"_37":162,"_13":136,"_33":20,"_35":137,"_24":48,"_138":-5,"_163":164,"_27":165},["D",1780000011978],"children",[],[130],"6ee83296-5ad3-11f1-bb4d-ee650bb23af1","index.tsx","6ee83340-5ad3-11f1-bb4d-ee650bb23af1",19,["D",1779999957037],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { SnakeGame } from \"./SnakeGame.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\ncreateRoot(root).render();\n",[],[141,167],"6e3e1e78-5ad3-11f1-9648-ee650bb23af1","index.html","6e3e1f5e-5ad3-11f1-9648-ee650bb23af1",18,["D",1779999955927],"\n\n \n \n \n 🐍 Snake Game\n \n \n \n \n

\n \n \n \n",[],[141,176],"876f1a46-5ad3-11f1-85b4-ee650bb23af1","SnakeGame.tsx","876f1b2c-5ad3-11f1-85b4-ee650bb23af1",20,["D",1779999998189],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\n\nconst GRID_SIZE = 20;\nconst CELL_SIZE = 24;\nconst INITIAL_SPEED = 150;\nconst SPEED_INCREMENT = 3;\n\ntype Point = { x: number; y: number };\ntype Direction = \"UP\" | \"DOWN\" | \"LEFT\" | \"RIGHT\";\n\nfunction randomFood(snake: Point[]): Point {\n let food: Point;\n do {\n food = {\n x: Math.floor(Math.random() * GRID_SIZE),\n y: Math.floor(Math.random() * GRID_SIZE),\n };\n } while (snake.some((s) => s.x === food.x && s.y === food.y));\n return food;\n}\n\nconst OPPOSITE: Record = {\n UP: \"DOWN\",\n DOWN: \"UP\",\n LEFT: \"RIGHT\",\n RIGHT: \"LEFT\",\n};\n\nexport function SnakeGame() {\n const [snake, setSnake] = useState([{ x: 10, y: 10 }]);\n const [food, setFood] = useState({ x: 15, y: 10 });\n const [direction, setDirection] = useState(\"RIGHT\");\n const [gameOver, setGameOver] = useState(false);\n const [score, setScore] = useState(0);\n const [highScore, setHighScore] = useState(() => {\n try { return parseInt(localStorage.getItem(\"snake-high\") || \"0\"); } catch { return 0; }\n });\n const [started, setStarted] = useState(false);\n const [paused, setPaused] = useState(false);\n\n const dirRef = useRef(direction);\n const queueRef = useRef([]);\n\n useEffect(() => { dirRef.current = direction; }, [direction]);\n\n const resetGame = useCallback(() => {\n const initial = [{ x: 10, y: 10 }];\n setSnake(initial);\n setFood(randomFood(initial));\n setDirection(\"RIGHT\");\n dirRef.current = \"RIGHT\";\n queueRef.current = [];\n setGameOver(false);\n setScore(0);\n setStarted(true);\n setPaused(false);\n }, []);\n\n // Keyboard controls\n useEffect(() => {\n const handler = (e: KeyboardEvent) => {\n if (e.key === \" \") {\n e.preventDefault();\n if (gameOver) { resetGame(); return; }\n if (!started) { setStarted(true); return; }\n setPaused((p) => !p);\n return;\n }\n const keyMap: Record = {\n ArrowUp: \"UP\", ArrowDown: \"DOWN\", ArrowLeft: \"LEFT\", ArrowRight: \"RIGHT\",\n w: \"UP\", s: \"DOWN\", a: \"LEFT\", d: \"RIGHT\",\n W: \"UP\", S: \"DOWN\", A: \"LEFT\", D: \"RIGHT\",\n };\n const newDir = keyMap[e.key];\n if (newDir) {\n e.preventDefault();\n if (!started) setStarted(true);\n const lastQueued = queueRef.current.length > 0 ? queueRef.current[queueRef.current.length - 1] : dirRef.current;\n if (newDir !== OPPOSITE[lastQueued] && newDir !== lastQueued) {\n queueRef.current.push(newDir);\n }\n }\n };\n window.addEventListener(\"keydown\", handler);\n return () => window.removeEventListener(\"keydown\", handler);\n }, [gameOver, started, resetGame]);\n\n // Game loop\n useEffect(() => {\n if (!started || gameOver || paused) return;\n\n const speed = Math.max(60, INITIAL_SPEED - score * SPEED_INCREMENT);\n const interval = setInterval(() => {\n // Process direction queue\n if (queueRef.current.length > 0) {\n const next = queueRef.current.shift()!;\n setDirection(next);\n dirRef.current = next;\n }\n\n setSnake((prev) => {\n const head = { ...prev[0] };\n const dir = dirRef.current;\n if (dir === \"UP\") head.y--;\n if (dir === \"DOWN\") head.y++;\n if (dir === \"LEFT\") head.x--;\n if (dir === \"RIGHT\") head.x++;\n\n // Wall collision\n if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {\n setGameOver(true);\n return prev;\n }\n // Self collision\n if (prev.some((s) => s.x === head.x && s.y === head.y)) {\n setGameOver(true);\n return prev;\n }\n\n const newSnake = [head, ...prev];\n\n // Eat food\n if (head.x === food.x && head.y === food.y) {\n setScore((s) => {\n const ns = s + 1;\n setHighScore((h) => {\n const nh = Math.max(h, ns);\n try { localStorage.setItem(\"snake-high\", String(nh)); } catch {}\n return nh;\n });\n return ns;\n });\n setFood(randomFood(newSnake));\n } else {\n newSnake.pop();\n }\n\n return newSnake;\n });\n }, speed);\n\n return () => clearInterval(interval);\n }, [started, gameOver, paused, food, score]);\n\n // Touch controls\n const touchStart = useRef<{ x: number; y: number } | null>(null);\n const handleTouchStart = (e: React.TouchEvent) => {\n touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n };\n const handleTouchEnd = (e: React.TouchEvent) => {\n if (!touchStart.current) return;\n const dx = e.changedTouches[0].clientX - touchStart.current.x;\n const dy = e.changedTouches[0].clientY - touchStart.current.y;\n if (Math.abs(dx) < 20 && Math.abs(dy) < 20) return;\n let newDir: Direction;\n if (Math.abs(dx) > Math.abs(dy)) {\n newDir = dx > 0 ? \"RIGHT\" : \"LEFT\";\n } else {\n newDir = dy > 0 ? \"DOWN\" : \"UP\";\n }\n if (!started) setStarted(true);\n const lastQueued = queueRef.current.length > 0 ? queueRef.current[queueRef.current.length - 1] : dirRef.current;\n if (newDir !== OPPOSITE[lastQueued] && newDir !== lastQueued) {\n queueRef.current.push(newDir);\n }\n };\n\n const boardPx = GRID_SIZE * CELL_SIZE;\n\n return (\n

\n 🐍 Snake\n

\n\n

\n Score: {score}\n Best: {highScore}\n

\n\n \n {/* Grid dots */}\n {Array.from({ length: GRID_SIZE * GRID_SIZE }).map((_, i) => {\n const x = i % GRID_SIZE;\n const y = Math.floor(i / GRID_SIZE);\n return (\n \n );\n })}\n\n {/* Food */}\n \n 🍎\n

\n\n {/* Snake */}\n {snake.map((seg, i) => (\n \n ))}\n\n {/* Overlays */}\n {!started && !gameOver && (\n

🐍 Snake

Press Space or swipe to start

Arrow keys / WASD to move

\n )}\n {gameOver && (\n

Game Over!

Score: {score}

\n {score === highScore && score > 0 && (\n

🏆 New High Score!

\n )}\n \n Play Again\n \n

or press Space

\n )}\n {paused && !gameOver && (\n

⏸ Paused

Press Space to resume

\n )}\n \n\n {/* Mobile D-pad */}\n

\n \n

\n \n \n \n

\n \n

\n\n view source\n

\n );\n}\n",[],[141,184],["D",1779999951451],[158,159,160],[141],["D",1779997180149],["D",1789504908499],{"_98":97,"_105":100},{"_98":97,"_99":100,"_101":100,"_18":55,"_102":103,"_104":48},{"_13":87,"_32":88,"_42":41,"_89":43,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":44,"_96":97},"ctx",{"_80":-5,"_124":232,"_233":234,"_235":236,"_237":48,"_238":48,"_239":48,"_240":25,"_241":-5,"_242":-7,"_243":-7,"_244":61,"_245":48,"_246":48,"_247":-5,"_248":48,"_249":48,"_250":48,"_251":-5},"ENV",{"_203":204,"_205":206,"_207":88,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v23