\n \n \n \n \n",[],[153,183],{"_104":192,"_95":193,"_154":194,"_156":155,"_157":139,"_158":101,"_160":22,"_106":195,"_100":196,"_163":197,"_165":198,"_166":22,"_167":-5,"_168":199,"_98":200},"76ee4f7c-92fe-11f0-94c2-0224a6c84d84","index.tsx","ae592994-92fb-11f0-ae66-0224a6c84d84",["D",1758028206303],13,"script","document.addEventListener(\"DOMContentLoaded\", () => {\n const root = document.getElementById(\"root\");\n \n // Game state\n const gridSize = 8;\n let playerX = 4;\n let playerY = 4;\n let playerZ = 0;\n \n // Create game container\n const gameContainer = document.createElement(\"div\");\n gameContainer.className = \"game-container\";\n \n // Create instructions\n const instructions = document.createElement(\"div\");\n instructions.className = \"instructions\";\n instructions.innerHTML = `\n

QBAT

Use arrow keys to jump between pillars!

You can only jump to pillars within 1 block height difference.

Position: (4, 4) Height: 0

\n `;\n \n // Create canvas container\n const canvasContainer = document.createElement(\"div\");\n canvasContainer.className = \"canvas-container\";\n \n // Three.js setup\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(600, 600);\n renderer.setClearColor(0x87CEEB); // Sky blue\n canvasContainer.appendChild(renderer.domElement);\n \n // Lighting\n const ambientLight = new THREE.AmbientLight(0x404040, 0.6);\n scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(10, 10, 5);\n scene.add(directionalLight);\n \n // Isometric camera setup - fixed position (zoomed in)\n camera.position.set(8, 8, 8);\n camera.lookAt(0, 0, 0);\n \n // Pillar data and meshes\n const pillars = [];\n const pillarMeshes = [];\n const pillarGeometry = new THREE.BoxGeometry(1, 1, 1);\n const pillarMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });\n \n // Generate random pillar heights\n for (let x = 0; x < gridSize; x++) {\n pillars[x] = [];\n pillarMeshes[x] = [];\n for (let y = 0; y < gridSize; y++) {\n const height = Math.floor(Math.random() * 4) + 1; // Heights 1-4\n pillars[x][y] = height;\n \n // Create pillar mesh\n const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial);\n pillar.position.set(x - gridSize/2, height/2, y - gridSize/2);\n pillar.scale.y = height;\n scene.add(pillar);\n pillarMeshes[x][y] = pillar;\n }\n }\n \n // Player mesh\n const playerGeometry = new THREE.SphereGeometry(0.4, 12, 8);\n const playerMaterial = new THREE.MeshLambertMaterial({ color: 0xFF6B6B });\n const player = new THREE.Mesh(playerGeometry, playerMaterial);\n player.castShadow = true;\n scene.add(player);\n \n // Animation state\n let isAnimating = false;\n let animationStartTime = 0;\n let animationDuration = 500; // milliseconds\n let startPosition = { x: 0, y: 0, z: 0 };\n let targetPosition = { x: 0, y: 0, z: 0 };\n let startHeight = 0;\n let targetHeight = 0;\n let isFailedJump = false;\n \n // Update player position instantly (for initial setup)\n function updatePlayerPosition() {\n const currentHeight = pillars[playerX][playerY];\n player.position.set(\n playerX - gridSize/2, \n currentHeight + 0.5, \n playerY - gridSize/2\n );\n document.getElementById(\"position\").textContent = `(${playerX}, ${playerY})`;\n document.getElementById(\"height\").textContent = currentHeight;\n }\n \n // Animate player jump\n function animateJump(newX, newY) {\n if (isAnimating) return false; // Don't start new animation if already animating\n \n const currentHeight = pillars[playerX][playerY];\n const newHeight = pillars[newX][newY];\n \n // Set up animation parameters\n startPosition = {\n x: playerX - gridSize/2,\n y: currentHeight + 0.5,\n z: playerY - gridSize/2\n };\n \n targetPosition = {\n x: newX - gridSize/2,\n y: newHeight + 0.5,\n z: newY - gridSize/2\n };\n \n startHeight = currentHeight;\n targetHeight = newHeight;\n \n isAnimating = true;\n animationStartTime = Date.now();\n \n return true;\n }\n \n // Update animation\n function updateAnimation() {\n if (!isAnimating) return;\n \n const elapsed = Date.now() - animationStartTime;\n const progress = Math.min(elapsed / animationDuration, 1);\n \n // Easing function for smooth jump\n const easeProgress = 1 - Math.pow(1 - progress, 3);\n \n // Calculate current position\n const currentX = startPosition.x + (targetPosition.x - startPosition.x) * easeProgress;\n const currentZ = startPosition.z + (targetPosition.z - startPosition.z) * easeProgress;\n \n // Calculate jump height with arc\n const jumpHeight = Math.sin(progress * Math.PI) * 2; // Peak height of 2 units\n const currentY = Math.max(startPosition.y, targetPosition.y) + jumpHeight;\n \n // Update player position\n player.position.set(currentX, currentY, currentZ);\n \n // Add a little bounce effect\n const bounceScale = 1 + Math.sin(progress * Math.PI * 4) * 0.1;\n player.scale.set(bounceScale, bounceScale, bounceScale);\n \n // End animation\n if (progress >= 1) {\n isAnimating = false;\n player.scale.set(1, 1, 1);\n player.position.set(targetPosition.x, targetPosition.y, targetPosition.z);\n }\n }\n \n // Check if jump is valid\n function canJumpTo(newX, newY) {\n if (newX < 0 || newX >= gridSize || newY < 0 || newY >= gridSize) {\n return false;\n }\n \n const currentHeight = pillars[playerX][playerY];\n const targetHeight = pillars[newX][newY];\n const heightDiff = Math.abs(currentHeight - targetHeight);\n \n return heightDiff <= 1;\n }\n \n // Handle keyboard input\n document.addEventListener(\"keydown\", (e) => {\n let newX = playerX;\n let newY = playerY;\n \n switch (e.key) {\n case \"ArrowUp\":\n newY = playerY - 1;\n break;\n case \"ArrowDown\":\n newY = playerY + 1;\n break;\n case \"ArrowLeft\":\n newX = playerX - 1;\n break;\n case \"ArrowRight\":\n newX = playerX + 1;\n break;\n default:\n return; // Ignore other keys\n }\n \n // Check if jump is valid\n if (canJumpTo(newX, newY)) {\n // Start jump animation\n if (animateJump(newX, newY)) {\n // Update game state after animation starts\n playerX = newX;\n playerY = newY;\n document.getElementById(\"position\").textContent = `(${playerX}, ${playerY})`;\n document.getElementById(\"height\").textContent = pillars[playerX][playerY];\n }\n }\n });\n \n // Animation loop\n function animate() {\n requestAnimationFrame(animate);\n \n // Update jump animation\n updateAnimation();\n \n // Keep camera steady in isometric position\n camera.position.set(12, 12, 12);\n camera.lookAt(0, 0, 0);\n \n renderer.render(scene, camera);\n }\n \n // Assemble the game\n gameContainer.appendChild(instructions);\n gameContainer.appendChild(canvasContainer);\n root.appendChild(gameContainer);\n \n // Initial player position\n updatePlayerPosition();\n \n // Start animation\n animate();\n});",[],[153,193],{"_104":202,"_95":203,"_154":204,"_156":155,"_157":139,"_158":205,"_160":22,"_106":206,"_100":187,"_163":177,"_165":207,"_166":22,"_167":-5,"_168":208,"_98":209},"bbb21072-92fd-11f0-b796-0224a6c84d84","style.css","08fe6b20-92fc-11f0-bce7-0224a6c84d84",41,["D",1758027892115],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n background-color: #f5f5f5;\n margin: 0;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .game-container {\n text-align: center;\n background: white;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n }\n \n .instructions h1 {\n color: #2c3e50;\n margin-bottom: 10px;\n font-size: 2.5em;\n }\n \n .instructions p {\n margin: 8px 0;\n color: #666;\n }\n \n .canvas-container {\n display: flex;\n justify-content: center;\n margin: 20px 0;\n }\n \n .canvas-container canvas {\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n }\n \n button {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n }\n \n button:hover {\n background-color: #357ae8;\n }",[],[153,203],[153],{"_104":212,"_95":213,"_154":214,"_156":-5,"_157":139,"_158":176,"_160":161,"_106":215,"_100":32,"_163":177,"_165":216,"_166":22,"_167":-5,"_168":217,"_98":218},"2d18d6ba-92f9-11f0-b86e-0224a6c84d84",".vtignore","2d18d75a-92f9-11f0-b86e-0224a6c84d84",["D",1758025934952],".git\n.DS_Store\nnode_modules\nvendor",[],[213],{"_104":220,"_95":221,"_154":222,"_156":-5,"_157":139,"_158":223,"_160":22,"_106":224,"_100":32,"_163":177,"_165":225,"_166":22,"_167":-5,"_168":226,"_98":227},"7597f580-92fc-11f0-89f5-0224a6c84d84","README.md","7597f652-92fc-11f0-89f5-0224a6c84d84",29,["D",1758027344273],"# qbat\n\nqbat is a Q*BERT inspired game where you jump around on a grid of cubes.",[],[221],{"_104":229,"_95":99,"_154":230,"_156":-5,"_157":139,"_158":231,"_160":22,"_106":232,"_100":32,"_163":177,"_165":233,"_166":22,"_167":-5,"_168":234,"_98":235},"2d1e25fc-92f9-11f0-aa6a-0224a6c84d84","2d1e26ba-92f9-11f0-aa6a-0224a6c84d84",2,["D",1758025934953],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[99],{"_104":237,"_95":238,"_154":239,"_156":-5,"_157":139,"_158":240,"_160":22,"_106":241,"_100":176,"_163":242,"_165":243,"_166":22,"_167":96,"_168":244,"_98":245},"b3f20d9e-92fb-11f0-a962-0224a6c84d84","index.ts","995c486e-92fb-11f0-a9af-0224a6c84d84",25,["D",1758027020177],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[238],"files",[151,170,181,191,201,211,219,228,236],"counts",{"_250":32,"_251":187,"_252":32,"_253":32},"pulls","branches","forks","envVars","contents",[],{"_104":229,"_95":99,"_154":230,"_156":-5,"_157":139,"_158":231,"_160":22,"_106":257,"_100":32,"_163":177,"_165":233,"_166":22,"_167":-5,"_98":258},["D",1758025934953],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":267,"_149":272,"_246":300,"_177":301,"_254":303,"_304":-5,"_305":22,"_306":-5,"_307":-5,"_308":-5,"_309":310},{"_104":105,"_95":96,"_106":268,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":269,"_133":270,"_136":271,"_148":22},["D",1758025872359],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_104":139,"_140":105,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[273,288,291,294,297],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_106":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":274,"_98":287},[275,278,281,284],{"_104":171,"_95":172,"_154":173,"_156":155,"_157":139,"_158":174,"_160":22,"_106":175,"_100":176,"_163":177,"_165":178,"_166":22,"_167":-5,"_168":276,"_98":277},[],[153,172],{"_104":182,"_95":183,"_154":184,"_156":155,"_157":139,"_158":185,"_160":22,"_106":186,"_100":187,"_163":177,"_165":188,"_166":22,"_167":-5,"_168":279,"_98":280},[],[153,183],{"_104":192,"_95":193,"_154":194,"_156":155,"_157":139,"_158":101,"_160":22,"_106":195,"_100":196,"_163":197,"_165":198,"_166":22,"_167":-5,"_168":282,"_98":283},[],[153,193],{"_104":202,"_95":203,"_154":204,"_156":155,"_157":139,"_158":205,"_160":22,"_106":206,"_100":187,"_163":177,"_165":207,"_166":22,"_167":-5,"_168":285,"_98":286},[],[153,203],[153],{"_104":212,"_95":213,"_154":214,"_156":-5,"_157":139,"_158":176,"_160":161,"_106":215,"_100":32,"_163":177,"_165":216,"_166":22,"_167":-5,"_168":289,"_98":290},[],[213],{"_104":220,"_95":221,"_154":222,"_156":-5,"_157":139,"_158":223,"_160":22,"_106":224,"_100":32,"_163":177,"_165":225,"_166":22,"_167":-5,"_168":292,"_98":293},[],[221],{"_104":229,"_95":99,"_154":230,"_156":-5,"_157":139,"_158":231,"_160":22,"_106":232,"_100":32,"_163":177,"_165":233,"_166":22,"_167":-5,"_168":295,"_98":296},[],[99],{"_104":237,"_95":238,"_154":239,"_156":-5,"_157":139,"_158":240,"_160":22,"_106":241,"_100":176,"_163":242,"_165":243,"_166":22,"_167":96,"_168":298,"_98":299},[],[238],[273,275,278,281,284,288,291,294,297],{"_104":229,"_95":99,"_154":230,"_156":-5,"_157":139,"_158":231,"_160":22,"_106":257,"_100":32,"_163":177,"_165":233,"_166":22,"_167":-5,"_98":302},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

wilhelm

qbat