[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_215":216,"_217":218},"routes/_app.x.$handle.$name",{"_103":102,"_38":50,"_111":93,"_33":105,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_26":-5,"_122":-5,"_123":-5,"_124":31,"_125":126,"_127":128,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":-5,"_62":31,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":31},"version",22,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","311a47be-10d0-49e4-bca9-8bfb3bf37c7b","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","1de895f2-5ad3-11f1-a9a9-ee650bb23af1","name","fileType","content","# damian","# 🐍 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","createdAt",["D",1780000011978],"branchVersion","branchId","f7bfccca-5acc-11f1-ae1e-ee650bb23af1","id","f7bee116-5acc-11f1-ae1e-ee650bb23af1","damian",["D",1779997180149],"deletedAt","legacyEnvVars","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",{"_103":102,"_110":105},"org",{"_103":102,"_104":105,"_106":105,"_19":60,"_107":108,"_109":31},"branch",{"_13":92,"_38":93,"_48":47,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":50,"_101":102},"isOwned",24,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","cvm","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_48":49,"_38":50,"_43":210,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":-5,"_62":31,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":211,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":212,"_87":213,"_89":214,"_91":31},"tree",[169,173,174],"files",[169,170,171,172,173,174],"counts",{"_159":66,"_160":150,"_161":66,"_162":163,"_164":165},"contents",[133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_48":152,"_38":153,"_36":154,"_139":-5,"_46":47,"_45":155,"_141":128,"_43":156,"_13":66,"_39":157,"_40":-5,"_30":31,"_146":-5,"_33":158},{"_48":148,"_38":34,"_36":37,"_139":-5,"_46":47,"_45":14,"_141":128,"_43":149,"_13":150,"_39":26,"_40":42,"_30":31,"_146":-5,"_33":151},{"_48":136,"_38":137,"_36":138,"_139":-5,"_46":47,"_45":140,"_141":31,"_43":142,"_13":143,"_39":144,"_40":145,"_30":31,"_146":-5,"_33":147},"8bb79a06-5ad3-11f1-bb4d-ee650bb23af1","main.ts","f7e68644-5acc-11f1-ae1e-ee650bb23af1","parentId",21,"latest",["D",1780000005374],15,"http","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","label",[137],"8faa5284-5ad3-11f1-bb4d-ee650bb23af1",["D",1780000011978],1,[34],"6b946aec-5ad3-11f1-b2d7-ee650bb23af1","frontend","6b946bd2-5ad3-11f1-b2d7-ee650bb23af1",17,["D",1779999951451],"directory",[153],"pulls","branches","forks","envVars",{"_166":66,"_168":66},"connections",{"_166":66,"_167":66},"count","unfilledCount","emptyCount",{"_48":152,"_38":153,"_36":154,"_139":-5,"_46":47,"_45":155,"_141":128,"_43":207,"_13":66,"_39":157,"_40":-5,"_30":31,"_146":-5,"_176":208,"_33":209},{"_48":199,"_38":200,"_36":201,"_139":154,"_46":47,"_45":202,"_141":31,"_43":203,"_13":66,"_39":187,"_40":204,"_30":31,"_146":-5,"_176":205,"_33":206},{"_48":191,"_38":192,"_36":193,"_139":154,"_46":47,"_45":194,"_141":128,"_43":195,"_13":66,"_39":26,"_40":196,"_30":31,"_146":-5,"_176":197,"_33":198},{"_48":182,"_38":183,"_36":184,"_139":154,"_46":47,"_45":185,"_141":128,"_43":186,"_13":66,"_39":187,"_40":188,"_30":31,"_146":-5,"_176":189,"_33":190},{"_48":148,"_38":34,"_36":37,"_139":-5,"_46":47,"_45":14,"_141":128,"_43":179,"_13":150,"_39":26,"_40":42,"_30":31,"_146":-5,"_176":180,"_33":181},{"_48":136,"_38":137,"_36":138,"_139":-5,"_46":47,"_45":140,"_141":31,"_43":175,"_13":143,"_39":144,"_40":145,"_30":31,"_146":-5,"_176":177,"_33":178},["D",1780000005374],"children",[],[137],["D",1780000011978],[],[34],"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",[],[153,183],"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",[],[153,192],"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",[],[153,200],["D",1779999951451],[170,171,172],[153],["D",1779997180149],["D",1789504908499],{"_103":102,"_110":105},{"_103":102,"_104":105,"_106":105,"_19":60,"_107":108,"_109":31},{"_13":92,"_38":93,"_48":47,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":50,"_101":102},"ctx",{"_85":-5,"_130":248,"_249":250,"_251":252,"_253":31,"_254":31,"_255":31,"_256":128,"_257":-5,"_258":-7,"_259":-7,"_260":66,"_261":31,"_262":31,"_263":-5,"_264":31,"_265":31,"_266":31,"_267":-5},"ENV",{"_219":220,"_221":222,"_223":93,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v22