[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_231":232,"_233":234},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":57,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",15,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.ts","latestPath","fileId","cab33b74-18f9-11f0-9d00-569c3dd06744","name","fileType","http","content","import { Hono } from 'https://esm.sh/hono@3.11.12';\nimport { serveFile, readFile } from 'https://esm.town/v/std/utils@85-main/index.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// Serve the main HTML file\napp.get('/', async (c) => {\n const html = await readFile('/frontend/index.html', import.meta.url);\n return c.html(html);\n});\n\n// Serve static files from the frontend directory\napp.get('/frontend/*', async (c) => {\n try {\n // Handle TypeScript and JavaScript files explicitly\n if (c.req.path.endsWith('.ts')) {\n const content = await readFile(c.req.path, import.meta.url);\n return new Response(content, {\n headers: {\n 'Content-Type': 'application/typescript'\n }\n });\n } else if (c.req.path.endsWith('.js')) {\n const content = await readFile(c.req.path, import.meta.url);\n return new Response(content, {\n headers: {\n 'Content-Type': 'application/javascript'\n }\n });\n }\n \n // For other files, use the standard serveFile\n return serveFile(c.req.path, import.meta.url);\n } catch (error) {\n console.error(`Error serving file ${c.req.path}:`, error);\n return c.text(`Failed to load file: ${c.req.path}`, 404);\n }\n});\n\n// Handle 404s\napp.notFound((c) => {\n return c.text('404 Not Found', 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","import { Hono } from 'https://esm.sh/hono@3.11.12';\nimport { serveFile, readFile } from 'https://esm.town/v/std/utils@85-main/index.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// Serve the main HTML file\napp.get('/', async (c) => {\n const html = await readFile('/frontend/index.html', import.meta.url);\n return c.html(html);\n});\n\n// Serve static files from the frontend directory\napp.get('/frontend/*', async (c) => {\n try {\n const path = c.req.path;\n const content = await readFile(path, import.meta.url);\n \n // Set appropriate content type based on file extension\n let contentType = 'text/plain';\n \n if (path.endsWith('.html')) {\n contentType = 'text/html';\n } else if (path.endsWith('.css')) {\n contentType = 'text/css';\n } else if (path.endsWith('.js')) {\n contentType = 'application/javascript';\n } else if (path.endsWith('.ts')) {\n contentType = 'application/typescript';\n } else if (path.endsWith('.json')) {\n contentType = 'application/json';\n } else if (path.endsWith('.svg')) {\n contentType = 'image/svg+xml';\n }\n \n return new Response(content, {\n headers: {\n 'Content-Type': contentType\n }\n });\n } catch (error) {\n console.error(`Error serving file ${c.req.path}:`, error);\n return c.text(`Failed to load file: ${c.req.path}`, 404);\n }\n});\n\n// Handle 404s\napp.notFound((c) => {\n return c.text('404 Not Found', 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","createdAt",["D",1744613333703],"branchVersion","branchId","8947f0ee-18f9-11f0-9f8d-569c3dd06744","id","89479072-18f9-11f0-9f8d-569c3dd06744","testproj",["D",1744612047755],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion",16,"likeCount",0,"orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",23,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","yawnxyz","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":227,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":228,"_80":229,"_82":230,"_84":25},"tree",[160,167,168],"files",[160,161,162,163,164,165,166,167,168],"counts",{"_150":62,"_151":139,"_152":139,"_153":154,"_155":156},"contents",[126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":143,"_32":144,"_30":145,"_130":-5,"_41":42,"_40":146,"_131":57,"_38":147,"_13":62,"_33":148,"_35":-5,"_24":25,"_134":-5,"_27":149},{"_43":136,"_32":137,"_30":138,"_130":-5,"_41":42,"_40":139,"_131":57,"_38":140,"_13":62,"_33":20,"_35":141,"_24":25,"_134":-5,"_27":142},{"_43":129,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_131":25,"_38":132,"_13":133,"_33":34,"_35":37,"_24":25,"_134":-5,"_27":135},"87c50114-18fc-11f0-8f33-569c3dd06744","parentId","latest",["D",1744613333703],5,"label",[28],"9d2a93be-18f9-11f0-9e72-569c3dd06744","README.md","9d2a9490-18f9-11f0-9e72-569c3dd06744",1,["D",1744612081114],"# Pong Game\n\nA classic Pong game implementation for Val Town using HTML5 Canvas and TypeScript.\n\n## How to Play\n\n- Use the **Up** and **Down** arrow keys to move your paddle (left side)\n- Try to hit the ball past the computer's paddle (right side)\n- First player to reach 10 points wins\n\n## Project Structure\n\n- `frontend/index.html` - Main HTML file\n- `frontend/index.ts` - Game initialization\n- `frontend/game.ts` - Game logic and rendering\n- `frontend/style.css` - Basic styling\n\n## Implementation Details\n\nThis game uses:\n- HTML5 Canvas for rendering\n- TypeScript for game logic\n- Keyboard controls for player input\n- Simple AI for the computer opponent\n\n## View Source\n\nThis project was created on Val Town. View the source code to see how it works!",[137],"a2b2275c-18f9-11f0-8e03-569c3dd06744","frontend","778bddeb-06bf-482a-b5e2-c761f1ae537c",2,["D",1744612090390],"directory",[144],"pulls","branches","forks","envVars",{"_157":62,"_159":62},"connections",{"_157":62,"_158":62},"count","unfilledCount","emptyCount",{"_43":143,"_32":144,"_30":145,"_130":-5,"_41":42,"_40":146,"_131":57,"_38":224,"_13":62,"_33":148,"_35":-5,"_24":25,"_134":-5,"_170":225,"_27":226},{"_43":216,"_32":217,"_30":218,"_130":145,"_41":42,"_40":219,"_131":25,"_38":220,"_13":62,"_33":188,"_35":221,"_24":25,"_134":-5,"_170":222,"_27":223},{"_43":208,"_32":209,"_30":210,"_130":145,"_41":42,"_40":211,"_131":25,"_38":212,"_13":62,"_33":188,"_35":213,"_24":25,"_134":-5,"_170":214,"_27":215},{"_43":200,"_32":201,"_30":202,"_130":145,"_41":42,"_40":203,"_131":57,"_38":204,"_13":139,"_33":20,"_35":205,"_24":25,"_134":-5,"_170":206,"_27":207},{"_43":192,"_32":193,"_30":194,"_130":145,"_41":42,"_40":195,"_131":25,"_38":196,"_13":62,"_33":188,"_35":197,"_24":25,"_134":-5,"_170":198,"_27":199},{"_43":184,"_32":28,"_30":185,"_130":145,"_41":42,"_40":186,"_131":25,"_38":187,"_13":139,"_33":188,"_35":189,"_24":25,"_134":-5,"_170":190,"_27":191},{"_43":176,"_32":177,"_30":178,"_130":145,"_41":42,"_40":179,"_131":57,"_38":180,"_13":62,"_33":20,"_35":181,"_24":25,"_134":-5,"_170":182,"_27":183},{"_43":136,"_32":137,"_30":138,"_130":-5,"_41":42,"_40":139,"_131":57,"_38":173,"_13":62,"_33":20,"_35":141,"_24":25,"_134":-5,"_170":174,"_27":175},{"_43":129,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_131":25,"_38":169,"_13":133,"_33":34,"_35":37,"_24":25,"_134":-5,"_170":171,"_27":172},["D",1744613333703],"children",[],[28],["D",1744612081114],[],[137],"a5088e60-18f9-11f0-b916-569c3dd06744","style.css","a5088f28-18f9-11f0-b916-569c3dd06744",3,["D",1744612094315],"/* Additional styles beyond Tailwind */\nbody {\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\n.game-container {\n position: relative;\n}\n\ncanvas {\n background-color: #000;\n display: block;\n}\n\n/* Game message animation */\n@keyframes pulse {\n 0% { opacity: 0.7; }\n 50% { opacity: 1; }\n 100% { opacity: 0.7; }\n}\n\n#gameMessage {\n animation: pulse 1.5s infinite;\n}",[],[144,177],"cc0d1722-18fb-11f0-8a8d-569c3dd06744","c4c54c16-18f9-11f0-90bb-569c3dd06744",8,["D",1744613018765],"script","import { PongGame } from './game.ts';\nimport { parseProject } from 'https://esm.town/v/std/utils@85-main/index.ts';\n\n// Wait for DOM to be fully loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize the game\n const game = new PongGame('pongCanvas');\n \n // Add view source link\n addViewSourceLink();\n});\n\n// Add a view source link to the page\nfunction addViewSourceLink() {\n try {\n const projectInfo = parseProject(import.meta.url);\n const sourceUrl = projectInfo.links.self.project;\n \n const footer = document.createElement('footer');\n footer.className = 'mt-8 text-center text-gray-400';\n \n const link = document.createElement('a');\n link.href = sourceUrl;\n link.target = '_top';\n link.className = 'underline hover:text-white';\n link.textContent = 'View Source on Val Town';\n \n footer.appendChild(link);\n document.body.appendChild(footer);\n } catch (error) {\n console.error('Failed to add view source link:', error);\n }\n}",[],[144,28],"f4ee06c4-18fb-11f0-b537-569c3dd06744","index.js","f4ee078c-18fb-11f0-b537-569c3dd06744",11,["D",1744613087345],"import { PongGame } from './game.js';\nimport { parseProject } from 'https://esm.town/v/std/utils@85-main/index.ts';\n\n// Wait for DOM to be fully loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize the game\n const game = new PongGame('pongCanvas');\n \n // Add view source link\n addViewSourceLink();\n});\n\n// Add a view source link to the page\nfunction addViewSourceLink() {\n try {\n const projectInfo = parseProject(import.meta.url);\n const sourceUrl = projectInfo.links.self.project;\n \n const footer = document.createElement('footer');\n footer.className = 'mt-8 text-center text-gray-400';\n \n const link = document.createElement('a');\n link.href = sourceUrl;\n link.target = '_top';\n link.className = 'underline hover:text-white';\n link.textContent = 'View Source on Val Town';\n \n footer.appendChild(link);\n document.body.appendChild(footer);\n } catch (error) {\n console.error('Failed to add view source link:', error);\n }\n}",[],[144,193],"f7c54286-18fb-11f0-a862-569c3dd06744","index.html","a2b22018-18f9-11f0-8e03-569c3dd06744",12,["D",1744613092114],"\n\n\n \n \n Pong Game\n \n \n \n \n \n\n\n

Pong Game

\n \n

\n Player: 0 | Computer: 0\n

\n \n

\n Press SPACE to start\n

\n \n

Use ↑ and ↓ arrow keys to move your paddle

Press SPACE to start/restart the game

\n \n \n\n",[],[144,201],"bffa5668-18f9-11f0-8f58-569c3dd06744","game.ts","bffa5712-18f9-11f0-8f58-569c3dd06744",4,["D",1744612139519],"// Game constants\nconst PADDLE_HEIGHT = 100;\nconst PADDLE_WIDTH = 15;\nconst PADDLE_SPEED = 8;\nconst BALL_RADIUS = 10;\nconst BALL_SPEED_INITIAL = 5;\nconst BALL_SPEED_INCREMENT = 0.2;\nconst MAX_SCORE = 10;\n\n// Game state interfaces\ninterface GameState {\n player: Paddle;\n computer: Paddle;\n ball: Ball;\n playerScore: number;\n computerScore: number;\n isRunning: boolean;\n keys: { [key: string]: boolean };\n difficulty: number;\n}\n\ninterface Paddle {\n x: number;\n y: number;\n width: number;\n height: number;\n speed: number;\n}\n\ninterface Ball {\n x: number;\n y: number;\n radius: number;\n velocityX: number;\n velocityY: number;\n speed: number;\n}\n\nexport class PongGame {\n private canvas: HTMLCanvasElement;\n private ctx: CanvasRenderingContext2D;\n private state: GameState;\n private scoreDisplay: HTMLElement;\n private gameMessage: HTMLElement;\n private animationFrameId: number | null = null;\n\n constructor(canvasId: string) {\n // Get canvas and context\n this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;\n this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;\n \n // Get DOM elements\n this.scoreDisplay = document.getElementById('scoreDisplay') as HTMLElement;\n this.gameMessage = document.getElementById('gameMessage') as HTMLElement;\n \n // Initialize game state\n this.state = this.getInitialState();\n \n // Set up event listeners\n this.setupEventListeners();\n \n // Show start message\n this.showMessage('Press SPACE to start');\n \n // Start game loop\n this.gameLoop();\n }\n\n private getInitialState(): GameState {\n return {\n player: {\n x: 50,\n y: this.canvas.height / 2 - PADDLE_HEIGHT / 2,\n width: PADDLE_WIDTH,\n height: PADDLE_HEIGHT,\n speed: PADDLE_SPEED\n },\n computer: {\n x: this.canvas.width - 50 - PADDLE_WIDTH,\n y: this.canvas.height / 2 - PADDLE_HEIGHT / 2,\n width: PADDLE_WIDTH,\n height: PADDLE_HEIGHT,\n speed: PADDLE_SPEED * 0.7 // Computer is slightly slower for fairness\n },\n ball: {\n x: this.canvas.width / 2,\n y: this.canvas.height / 2,\n radius: BALL_RADIUS,\n velocityX: BALL_SPEED_INITIAL,\n velocityY: BALL_SPEED_INITIAL * (Math.random() > 0.5 ? 1 : -1),\n speed: BALL_SPEED_INITIAL\n },\n playerScore: 0,\n computerScore: 0,\n isRunning: false,\n keys: {},\n difficulty: 0.85 // AI difficulty (0-1)\n };\n }\n\n private setupEventListeners(): void {\n // Keyboard event listeners\n window.addEventListener('keydown', (e) => {\n this.state.keys[e.key] = true;\n \n // Start/restart game with spacebar\n if (e.key === ' ' && !this.state.isRunning) {\n this.startGame();\n }\n });\n \n window.addEventListener('keyup', (e) => {\n this.state.keys[e.key] = false;\n });\n }\n\n private startGame(): void {\n // Reset ball position and set random direction\n this.state.ball.x = this.canvas.width / 2;\n this.state.ball.y = this.canvas.height / 2;\n this.state.ball.speed = BALL_SPEED_INITIAL;\n \n // Random X direction (towards player or computer)\n this.state.ball.velocityX = BALL_SPEED_INITIAL * (Math.random() > 0.5 ? 1 : -1);\n \n // Random Y direction (up or down)\n this.state.ball.velocityY = BALL_SPEED_INITIAL * (Math.random() > 0.5 ? 1 : -1);\n \n // Start the game\n this.state.isRunning = true;\n this.hideMessage();\n }\n\n private resetGame(): void {\n this.state = this.getInitialState();\n this.updateScoreDisplay();\n this.showMessage('Press SPACE to start');\n }\n\n private showMessage(text: string): void {\n this.gameMessage.textContent = text;\n this.gameMessage.classList.remove('hidden');\n }\n\n private hideMessage(): void {\n this.gameMessage.classList.add('hidden');\n }\n\n private updateScoreDisplay(): void {\n this.scoreDisplay.textContent = `Player: ${this.state.playerScore} | Computer: ${this.state.computerScore}`;\n }\n\n private gameLoop(): void {\n // Clear canvas\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n \n // Update game state\n if (this.state.isRunning) {\n this.update();\n }\n \n // Render game objects\n this.render();\n \n // Continue game loop\n this.animationFrameId = requestAnimationFrame(() => this.gameLoop());\n }\n\n private update(): void {\n // Move player paddle based on keyboard input\n if (this.state.keys['ArrowUp']) {\n this.state.player.y = Math.max(0, this.state.player.y - this.state.player.speed);\n }\n \n if (this.state.keys['ArrowDown']) {\n this.state.player.y = Math.min(\n this.canvas.height - this.state.player.height,\n this.state.player.y + this.state.player.speed\n );\n }\n \n // Move computer paddle (simple AI)\n this.moveComputerPaddle();\n \n // Move ball\n this.state.ball.x += this.state.ball.velocityX;\n this.state.ball.y += this.state.ball.velocityY;\n \n // Ball collision with top and bottom walls\n if (\n this.state.ball.y + this.state.ball.radius > this.canvas.height ||\n this.state.ball.y - this.state.ball.radius < 0\n ) {\n this.state.ball.velocityY = -this.state.ball.velocityY;\n \n // Add a little randomness to the bounce\n this.state.ball.velocityY += (Math.random() * 2 - 1) * 0.2;\n }\n \n // Determine which paddle to check for collision\n const paddle = this.state.ball.velocityX < 0 ? this.state.player : this.state.computer;\n \n // Check for paddle collision\n if (this.checkPaddleCollision(paddle)) {\n // Reverse ball direction\n this.state.ball.velocityX = -this.state.ball.velocityX;\n \n // Increase ball speed\n this.state.ball.speed += BALL_SPEED_INCREMENT;\n \n // Calculate new velocity based on where the ball hit the paddle\n const collisionPoint = (this.state.ball.y - (paddle.y + paddle.height / 2)) / (paddle.height / 2);\n \n // Calculate angle and set new velocities\n const angle = collisionPoint * (Math.PI / 4); // Max 45 degree angle\n const direction = this.state.ball.velocityX > 0 ? -1 : 1;\n \n this.state.ball.velocityX = direction * this.state.ball.speed * Math.cos(angle);\n this.state.ball.velocityY = this.state.ball.speed * Math.sin(angle);\n }\n \n // Check if ball goes out of bounds (scoring)\n if (this.state.ball.x + this.state.ball.radius < 0) {\n // Computer scores\n this.state.computerScore++;\n this.updateScoreDisplay();\n this.checkWinCondition();\n } else if (this.state.ball.x - this.state.ball.radius > this.canvas.width) {\n // Player scores\n this.state.playerScore++;\n this.updateScoreDisplay();\n this.checkWinCondition();\n }\n }\n\n private checkPaddleCollision(paddle: Paddle): boolean {\n return (\n this.state.ball.x + this.state.ball.radius > paddle.x &&\n this.state.ball.x - this.state.ball.radius < paddle.x + paddle.width &&\n this.state.ball.y + this.state.ball.radius > paddle.y &&\n this.state.ball.y - this.state.ball.radius < paddle.y + paddle.height\n );\n }\n\n private moveComputerPaddle(): void {\n // Simple AI: Move towards the ball with some delay based on difficulty\n const computerCenter = this.state.computer.y + this.state.computer.height / 2;\n \n // Only move if the ball is moving towards the computer\n if (this.state.ball.velocityX > 0) {\n // Predict where the ball will be\n const predictedY = this.predictBallY();\n \n // Move towards the predicted position with some randomness\n if (computerCenter < predictedY - 10) {\n this.state.computer.y += this.state.computer.speed * this.state.difficulty;\n } else if (computerCenter > predictedY + 10) {\n this.state.computer.y -= this.state.computer.speed * this.state.difficulty;\n }\n \n // Ensure paddle stays within bounds\n this.state.computer.y = Math.max(\n 0,\n Math.min(this.canvas.height - this.state.computer.height, this.state.computer.y)\n );\n }\n }\n\n private predictBallY(): number {\n // Simple prediction of where the ball will be when it reaches the computer's x position\n if (this.state.ball.velocityX <= 0) return this.canvas.height / 2;\n \n // Calculate how many steps until the ball reaches the computer's x position\n const distanceX = this.state.computer.x - this.state.ball.x;\n const steps = distanceX / this.state.ball.velocityX;\n \n // Predict y position\n let predictedY = this.state.ball.y + this.state.ball.velocityY * steps;\n \n // Account for bounces\n const bounceHeight = this.canvas.height - this.state.ball.radius;\n \n // Simplistic bounce prediction\n while (predictedY < 0 || predictedY > bounceHeight) {\n if (predictedY < 0) {\n predictedY = -predictedY;\n } else if (predictedY > bounceHeight) {\n predictedY = 2 * bounceHeight - predictedY;\n }\n }\n \n return predictedY;\n }\n\n private checkWinCondition(): void {\n if (this.state.playerScore >= MAX_SCORE) {\n this.state.isRunning = false;\n this.showMessage('You Win! Press SPACE to restart');\n } else if (this.state.computerScore >= MAX_SCORE) {\n this.state.isRunning = false;\n this.showMessage('Computer Wins! Press SPACE to restart');\n } else {\n // Continue game with a new ball\n this.state.isRunning = false;\n this.showMessage('Press SPACE to continue');\n }\n }\n\n private render(): void {\n // Set canvas styling\n this.ctx.fillStyle = '#000';\n this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);\n \n // Draw center line\n this.ctx.beginPath();\n this.ctx.setLineDash([10, 15]);\n this.ctx.moveTo(this.canvas.width / 2, 0);\n this.ctx.lineTo(this.canvas.width / 2, this.canvas.height);\n this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';\n this.ctx.lineWidth = 2;\n this.ctx.stroke();\n this.ctx.setLineDash([]);\n \n // Draw paddles\n this.ctx.fillStyle = '#fff';\n \n // Player paddle\n this.ctx.fillRect(\n this.state.player.x,\n this.state.player.y,\n this.state.player.width,\n this.state.player.height\n );\n \n // Computer paddle\n this.ctx.fillRect(\n this.state.computer.x,\n this.state.computer.y,\n this.state.computer.width,\n this.state.computer.height\n );\n \n // Draw ball\n this.ctx.beginPath();\n this.ctx.arc(\n this.state.ball.x,\n this.state.ball.y,\n this.state.ball.radius,\n 0,\n Math.PI * 2\n );\n this.ctx.fill();\n }\n\n // Public method to clean up resources\n public destroy(): void {\n if (this.animationFrameId) {\n cancelAnimationFrame(this.animationFrameId);\n }\n \n // Remove event listeners if needed\n window.removeEventListener('keydown', () => {});\n window.removeEventListener('keyup', () => {});\n }\n}",[],[144,209],"f006c3b2-18fb-11f0-8496-569c3dd06744","game.js","f006c4a2-18fb-11f0-8496-569c3dd06744",10,["D",1744613079124],"// Game constants\nconst PADDLE_HEIGHT = 100;\nconst PADDLE_WIDTH = 15;\nconst PADDLE_SPEED = 8;\nconst BALL_RADIUS = 10;\nconst BALL_SPEED_INITIAL = 5;\nconst BALL_SPEED_INCREMENT = 0.2;\nconst MAX_SCORE = 10;\n\nexport class PongGame {\n constructor(canvasId) {\n // Get canvas and context\n this.canvas = document.getElementById(canvasId);\n this.ctx = this.canvas.getContext('2d');\n \n // Get DOM elements\n this.scoreDisplay = document.getElementById('scoreDisplay');\n this.gameMessage = document.getElementById('gameMessage');\n \n // Initialize game state\n this.state = this.getInitialState();\n \n // Set up event listeners\n this.setupEventListeners();\n \n // Show start message\n this.showMessage('Press SPACE to start');\n \n // Start game loop\n this.gameLoop();\n \n // Animation frame ID for cleanup\n this.animationFrameId = null;\n }\n\n getInitialState() {\n return {\n player: {\n x: 50,\n y: this.canvas.height / 2 - PADDLE_HEIGHT / 2,\n width: PADDLE_WIDTH,\n height: PADDLE_HEIGHT,\n speed: PADDLE_SPEED\n },\n computer: {\n x: this.canvas.width - 50 - PADDLE_WIDTH,\n y: this.canvas.height / 2 - PADDLE_HEIGHT / 2,\n width: PADDLE_WIDTH,\n height: PADDLE_HEIGHT,\n speed: PADDLE_SPEED * 0.7 // Computer is slightly slower for fairness\n },\n ball: {\n x: this.canvas.width / 2,\n y: this.canvas.height / 2,\n radius: BALL_RADIUS,\n velocityX: BALL_SPEED_INITIAL,\n velocityY: BALL_SPEED_INITIAL * (Math.random() > 0.5 ? 1 : -1),\n speed: BALL_SPEED_INITIAL\n },\n playerScore: 0,\n computerScore: 0,\n isRunning: false,\n keys: {},\n difficulty: 0.85 // AI difficulty (0-1)\n };\n }\n\n setupEventListeners() {\n // Keyboard event listeners\n window.addEventListener('keydown', (e) => {\n this.state.keys[e.key] = true;\n \n // Start/restart game with spacebar\n if (e.key === ' ' && !this.state.isRunning) {\n this.startGame();\n }\n });\n \n window.addEventListener('keyup', (e) => {\n this.state.keys[e.key] = false;\n });\n }\n\n startGame() {\n // Reset ball position and set random direction\n this.state.ball.x = this.canvas.width / 2;\n this.state.ball.y = this.canvas.height / 2;\n this.state.ball.speed = BALL_SPEED_INITIAL;\n \n // Random X direction (towards player or computer)\n this.state.ball.velocityX = BALL_SPEED_INITIAL * (Math.random() > 0.5 ? 1 : -1);\n \n // Random Y direction (up or down)\n this.state.ball.velocityY = BALL_SPEED_INITIAL * (Math.random() > 0.5 ? 1 : -1);\n \n // Start the game\n this.state.isRunning = true;\n this.hideMessage();\n }\n\n resetGame() {\n this.state = this.getInitialState();\n this.updateScoreDisplay();\n this.showMessage('Press SPACE to start');\n }\n\n showMessage(text) {\n this.gameMessage.textContent = text;\n this.gameMessage.classList.remove('hidden');\n }\n\n hideMessage() {\n this.gameMessage.classList.add('hidden');\n }\n\n updateScoreDisplay() {\n this.scoreDisplay.textContent = `Player: ${this.state.playerScore} | Computer: ${this.state.computerScore}`;\n }\n\n gameLoop() {\n // Clear canvas\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n \n // Update game state\n if (this.state.isRunning) {\n this.update();\n }\n \n // Render game objects\n this.render();\n \n // Continue game loop\n this.animationFrameId = requestAnimationFrame(() => this.gameLoop());\n }\n\n update() {\n // Move player paddle based on keyboard input\n if (this.state.keys['ArrowUp']) {\n this.state.player.y = Math.max(0, this.state.player.y - this.state.player.speed);\n }\n \n if (this.state.keys['ArrowDown']) {\n this.state.player.y = Math.min(\n this.canvas.height - this.state.player.height,\n this.state.player.y + this.state.player.speed\n );\n }\n \n // Move computer paddle (simple AI)\n this.moveComputerPaddle();\n \n // Move ball\n this.state.ball.x += this.state.ball.velocityX;\n this.state.ball.y += this.state.ball.velocityY;\n \n // Ball collision with top and bottom walls\n if (\n this.state.ball.y + this.state.ball.radius > this.canvas.height ||\n this.state.ball.y - this.state.ball.radius < 0\n ) {\n this.state.ball.velocityY = -this.state.ball.velocityY;\n \n // Add a little randomness to the bounce\n this.state.ball.velocityY += (Math.random() * 2 - 1) * 0.2;\n }\n \n // Determine which paddle to check for collision\n const paddle = this.state.ball.velocityX < 0 ? this.state.player : this.state.computer;\n \n // Check for paddle collision\n if (this.checkPaddleCollision(paddle)) {\n // Reverse ball direction\n this.state.ball.velocityX = -this.state.ball.velocityX;\n \n // Increase ball speed\n this.state.ball.speed += BALL_SPEED_INCREMENT;\n \n // Calculate new velocity based on where the ball hit the paddle\n const collisionPoint = (this.state.ball.y - (paddle.y + paddle.height / 2)) / (paddle.height / 2);\n \n // Calculate angle and set new velocities\n const angle = collisionPoint * (Math.PI / 4); // Max 45 degree angle\n const direction = this.state.ball.velocityX > 0 ? -1 : 1;\n \n this.state.ball.velocityX = direction * this.state.ball.speed * Math.cos(angle);\n this.state.ball.velocityY = this.state.ball.speed * Math.sin(angle);\n }\n \n // Check if ball goes out of bounds (scoring)\n if (this.state.ball.x + this.state.ball.radius < 0) {\n // Computer scores\n this.state.computerScore++;\n this.updateScoreDisplay();\n this.checkWinCondition();\n } else if (this.state.ball.x - this.state.ball.radius > this.canvas.width) {\n // Player scores\n this.state.playerScore++;\n this.updateScoreDisplay();\n this.checkWinCondition();\n }\n }\n\n checkPaddleCollision(paddle) {\n return (\n this.state.ball.x + this.state.ball.radius > paddle.x &&\n this.state.ball.x - this.state.ball.radius < paddle.x + paddle.width &&\n this.state.ball.y + this.state.ball.radius > paddle.y &&\n this.state.ball.y - this.state.ball.radius < paddle.y + paddle.height\n );\n }\n\n moveComputerPaddle() {\n // Simple AI: Move towards the ball with some delay based on difficulty\n const computerCenter = this.state.computer.y + this.state.computer.height / 2;\n \n // Only move if the ball is moving towards the computer\n if (this.state.ball.velocityX > 0) {\n // Predict where the ball will be\n const predictedY = this.predictBallY();\n \n // Move towards the predicted position with some randomness\n if (computerCenter < predictedY - 10) {\n this.state.computer.y += this.state.computer.speed * this.state.difficulty;\n } else if (computerCenter > predictedY + 10) {\n this.state.computer.y -= this.state.computer.speed * this.state.difficulty;\n }\n \n // Ensure paddle stays within bounds\n this.state.computer.y = Math.max(\n 0,\n Math.min(this.canvas.height - this.state.computer.height, this.state.computer.y)\n );\n }\n }\n\n predictBallY() {\n // Simple prediction of where the ball will be when it reaches the computer's x position\n if (this.state.ball.velocityX <= 0) return this.canvas.height / 2;\n \n // Calculate how many steps until the ball reaches the computer's x position\n const distanceX = this.state.computer.x - this.state.ball.x;\n const steps = distanceX / this.state.ball.velocityX;\n \n // Predict y position\n let predictedY = this.state.ball.y + this.state.ball.velocityY * steps;\n \n // Account for bounces\n const bounceHeight = this.canvas.height - this.state.ball.radius;\n \n // Simplistic bounce prediction\n while (predictedY < 0 || predictedY > bounceHeight) {\n if (predictedY < 0) {\n predictedY = -predictedY;\n } else if (predictedY > bounceHeight) {\n predictedY = 2 * bounceHeight - predictedY;\n }\n }\n \n return predictedY;\n }\n\n checkWinCondition() {\n if (this.state.playerScore >= MAX_SCORE) {\n this.state.isRunning = false;\n this.showMessage('You Win! Press SPACE to restart');\n } else if (this.state.computerScore >= MAX_SCORE) {\n this.state.isRunning = false;\n this.showMessage('Computer Wins! Press SPACE to restart');\n } else {\n // Continue game with a new ball\n this.state.isRunning = false;\n this.showMessage('Press SPACE to continue');\n }\n }\n\n render() {\n // Set canvas styling\n this.ctx.fillStyle = '#000';\n this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);\n \n // Draw center line\n this.ctx.beginPath();\n this.ctx.setLineDash([10, 15]);\n this.ctx.moveTo(this.canvas.width / 2, 0);\n this.ctx.lineTo(this.canvas.width / 2, this.canvas.height);\n this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';\n this.ctx.lineWidth = 2;\n this.ctx.stroke();\n this.ctx.setLineDash([]);\n \n // Draw paddles\n this.ctx.fillStyle = '#fff';\n \n // Player paddle\n this.ctx.fillRect(\n this.state.player.x,\n this.state.player.y,\n this.state.player.width,\n this.state.player.height\n );\n \n // Computer paddle\n this.ctx.fillRect(\n this.state.computer.x,\n this.state.computer.y,\n this.state.computer.width,\n this.state.computer.height\n );\n \n // Draw ball\n this.ctx.beginPath();\n this.ctx.arc(\n this.state.ball.x,\n this.state.ball.y,\n this.state.ball.radius,\n 0,\n Math.PI * 2\n );\n this.ctx.fill();\n }\n\n // Public method to clean up resources\n destroy() {\n if (this.animationFrameId) {\n cancelAnimationFrame(this.animationFrameId);\n }\n \n // Remove event listeners if needed\n window.removeEventListener('keydown', () => {});\n window.removeEventListener('keyup', () => {});\n }\n}",[],[144,217],["D",1744612090390],[161,162,163,164,165,166],[144],["D",1744612047755],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":264,"_265":266,"_267":268,"_269":25,"_270":25,"_271":25,"_272":57,"_273":-5,"_274":-7,"_275":-7,"_276":62,"_277":25,"_278":25,"_279":-5,"_280":25,"_281":25,"_282":25,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":86,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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 · v15