🏎️ F1 Rainbow Racing

Race Time: 00:00

Leader: Player 1

\n \n

Camera: Chase

C - Change Camera

R - Reset Race

Space - Pause

\n \n \n

Player 1

km/h

\n \n

AI Racer 1

km/h

\n \n

AI Racer 2

km/h

\n \n

AI Racer 3

km/h

\n \n \n

🏎️

Loading F1 Rainbow Racing...

Preparing the rainbow track

\n \n \n

🏎️ F1 Rainbow Racing

Race on the most colorful track in the universe!

\n \n

Use Arrow Keys or WASD to control your car

Press C to change camera angles

\n\n \n \n \n\n","label",[168,65],"frontend","pulls","branches",1,"forks","envVars",{"_177":26,"_179":26},"connections",{"_177":26,"_178":26},"count","unfilledCount","emptyCount",{"_34":279,"_13":278,"_63":271,"_44":-5,"_36":37,"_160":280,"_161":100,"_38":281,"_40":26,"_66":243,"_164":-5,"_67":24,"_166":-5,"_199":282,"_17":283},{"_34":269,"_13":270,"_63":98,"_44":271,"_36":37,"_160":272,"_161":100,"_38":273,"_40":163,"_66":274,"_164":275,"_67":24,"_166":-5,"_199":276,"_17":277},{"_34":265,"_13":168,"_63":159,"_44":-5,"_36":37,"_160":41,"_161":100,"_38":266,"_40":26,"_66":243,"_164":-5,"_67":24,"_166":-5,"_199":267,"_17":268},{"_34":257,"_13":258,"_63":259,"_44":159,"_36":37,"_160":123,"_161":100,"_38":260,"_40":261,"_66":207,"_164":262,"_67":24,"_166":-5,"_199":263,"_17":264},{"_34":158,"_13":65,"_63":64,"_44":159,"_36":37,"_160":81,"_161":100,"_38":254,"_40":163,"_66":21,"_164":165,"_67":24,"_166":-5,"_199":255,"_17":256},{"_34":246,"_13":247,"_63":248,"_44":159,"_36":37,"_160":249,"_161":100,"_38":250,"_40":26,"_66":21,"_164":251,"_67":24,"_166":-5,"_199":252,"_17":253},{"_34":241,"_13":240,"_63":234,"_44":-5,"_36":37,"_160":235,"_161":100,"_38":242,"_40":26,"_66":243,"_164":-5,"_67":24,"_166":-5,"_199":244,"_17":245},{"_34":231,"_13":232,"_63":233,"_44":234,"_36":37,"_160":235,"_161":100,"_38":236,"_40":26,"_66":207,"_164":237,"_67":24,"_166":-5,"_199":238,"_17":239},{"_34":223,"_13":224,"_63":225,"_44":-5,"_36":37,"_160":226,"_161":100,"_38":227,"_40":171,"_66":21,"_164":228,"_67":24,"_166":-5,"_199":229,"_17":230},{"_34":217,"_13":218,"_63":219,"_44":-5,"_36":37,"_160":171,"_161":100,"_38":220,"_40":26,"_66":207,"_164":208,"_67":24,"_166":-5,"_199":221,"_17":222},{"_34":211,"_13":212,"_63":213,"_44":-5,"_36":37,"_160":163,"_161":100,"_38":214,"_40":26,"_66":207,"_164":208,"_67":24,"_166":-5,"_199":215,"_17":216},{"_34":202,"_13":203,"_63":204,"_44":-5,"_36":37,"_160":205,"_161":100,"_38":206,"_40":26,"_66":207,"_164":208,"_67":24,"_166":-5,"_199":209,"_17":210},{"_34":193,"_13":194,"_63":195,"_44":-5,"_36":37,"_160":196,"_161":100,"_38":197,"_40":26,"_66":21,"_164":198,"_67":24,"_166":-5,"_199":200,"_17":201},"e3fa6750-c17e-11f0-ad6d-42dde27851f2","test.html","e3fa6836-c17e-11f0-ad6d-42dde27851f2",16,["D",1763141118329],"\n\n\n \n \n Test\n\n\n

F1 Rainbow Racing - Test Page

\n \n \n \n\n","children",[],[194],"4830eb74-c1af-11f0-b4e3-42dde27851f2","new-file-8620.ts","4830ec3c-c1af-11f0-b4e3-42dde27851f2",17,["D",1763161902304],"script","",[],[203],"eeb2b366-c17c-11f0-9b65-42dde27851f2","new-file-8283.ts","eeb2b406-c17c-11f0-9b65-42dde27851f2",["D",1763140277305],[],[212],"7f1ad83c-c08f-11f0-88b1-42dde27851f2","main.ts","7f1ad8fa-c08f-11f0-88b1-42dde27851f2",["D",1763038299373],[],[218],"cdbc5954-c17d-11f0-a81e-42dde27851f2","README.md","6fd0a4a8-c17d-11f0-b16d-42dde27851f2",10,["D",1763140651512],"# F1 Rainbow Racing Game 🏎️🌈\n\nAn interactive 3D F1 racing game featuring cars racing on a spectacular rainbow track in space! Built with Three.js and featuring realistic physics, multiple camera angles, and competitive AI opponents.\n\n## 🎮 Game Features\n\n### Core Racing Features\n- **4 F1 Cars**: 1 player-controlled + 3 AI opponents\n- **Rainbow Track**: Colorful circular track with elevation changes\n- **Realistic Physics**: Acceleration, deceleration, and steering mechanics\n- **Real-time Speedometers**: Individual speed displays for all participants\n- **Dynamic Lighting**: Rainbow-colored point lights that pulse and change\n\n### Camera System\n- **Chase Camera**: Follow behind your car (default)\n- **Overhead Camera**: Top-down strategic view\n- **Cockpit Camera**: First-person driving experience\n- **Trackside Camera**: Fixed position watching the action\n\n### Visual Effects\n- **Rainbow Track**: Each segment cycles through rainbow colors\n- **Dynamic Shadows**: Realistic shadow casting\n- **Particle Effects**: Environmental atmosphere\n- **Responsive UI**: Speedometers with animated progress bars\n\n## 🎯 How to Play\n\n### Controls\n- **Arrow Keys / WASD**: Accelerate, brake, and steer your car\n- **C**: Cycle through camera angles\n- **R**: Reset the race\n- **Space**: Pause/Resume the game\n\n### Objective\nRace against 3 AI opponents on the rainbow track. Try to maintain the highest speed while navigating the curved track with elevation changes.\n\n## 🏗️ Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with static file serving\n├── frontend/\n│ ├── index.html # Game HTML with UI overlay\n│ ├── game.js # Three.js game engine and logic\n│ └── style.css # Responsive styling with animations\n├── shared/\n│ └── types.ts # TypeScript interfaces\n└── README.md # This file\n```\n\n## 🚀 Technical Implementation\n\n### Backend (Hono)\n- Serves static files using Val Town utilities\n- Injects initial game data into HTML\n- Provides API endpoints for potential multiplayer features\n\n### Frontend (Three.js)\n- **Scene Management**: 3D world with lighting and shadows\n- **Car Physics**: Realistic movement and collision detection\n- **Track Generation**: Procedural rainbow track with barriers\n- **AI System**: Intelligent opponents that follow the track\n- **Camera System**: Multiple viewing angles with smooth transitions\n\n### Styling (CSS + TailwindCSS)\n- Responsive design that works on desktop and mobile\n- Animated speedometers with color-coded progress bars\n- Rainbow loading screen with CSS animations\n- Glassmorphism UI elements with backdrop blur\n\n## 🎨 Visual Design\n\nThe game features a vibrant rainbow aesthetic with:\n- **Track Colors**: Each segment cycles through ROYGBIV colors\n- **Car Colors**: Red (Player), Blue, Green, Purple (AI)\n- **Lighting**: Dynamic rainbow point lights around the track\n- **UI**: Semi-transparent panels with neon accents\n\n## 🔧 Customization\n\nThe game is easily customizable:\n- Modify `rainbowColors` array to change track colors\n- Adjust `maxSpeed` and `acceleration` for different physics\n- Change track radius and elevation in `createTrack()`\n- Add more cars by extending the `carConfigs` array\n\n## 🌟 Future Enhancements\n\nPotential additions:\n- Lap counting and race completion\n- Power-ups and boost pads\n- Multiplayer support\n- More track layouts\n- Sound effects and music\n- Particle trails behind cars\n\n---\n\n**Ready to race?** Click \"START RACE\" and experience the most colorful F1 racing game in the universe! 🏁",[],[224],"77a259c4-c17d-11f0-bbde-42dde27851f2","types.ts","77a25a8c-c17d-11f0-bbde-42dde27851f2","a8d34dd7-d1f4-4bb8-a7b2-61735b95f928",5,["D",1763140507056],"export interface Car {\n id: number;\n name: string;\n color: string;\n position: { x: number; y: number; z: number };\n rotation: { x: number; y: number; z: number };\n speed: number;\n maxSpeed: number;\n acceleration: number;\n isPlayer: boolean;\n lapTime: number;\n currentLap: number;\n}\n\nexport interface GameState {\n cars: Car[];\n raceStarted: boolean;\n raceTime: number;\n currentLeader: number;\n cameraMode: 'overhead' | 'chase' | 'cockpit' | 'trackside';\n}\n\nexport interface TrackPoint {\n x: number;\n y: number;\n z: number;\n color: string;\n}\n\nexport interface RainbowTrack {\n points: TrackPoint[];\n width: number;\n length: number;\n}",[],[240,232],"shared","77a265a4-c17d-11f0-bbde-42dde27851f2",["D",1763140507056],"directory",[187],[240],"8c8c9ae8-c17d-11f0-a97f-42dde27851f2","style.css","8c8c9b88-c17d-11f0-a97f-42dde27851f2",7,["D",1763140542153],"/* F1 Rainbow Racing Styles */\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n background: #000;\n color: #fff;\n overflow: hidden;\n user-select: none;\n}\n\n#gameCanvas {\n display: block;\n cursor: none;\n}\n\n.speedometer {\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n transition: all 0.3s ease;\n}\n\n.speedometer:hover {\n transform: scale(1.05);\n border-color: rgba(255, 255, 255, 0.3);\n}\n\n.speed-bar {\n transition: width 0.2s ease-out;\n}\n\n#loadingScreen {\n background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);\n background-size: 400% 400%;\n animation: rainbow 3s ease infinite;\n}\n\n@keyframes rainbow {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n#startButton {\n box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);\n transition: all 0.3s ease;\n}\n\n#startButton:hover {\n box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);\n transform: scale(1.05);\n}\n\n/* HUD Styling */\n.absolute {\n z-index: 10;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .grid-cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .speedometer {\n padding: 0.5rem;\n }\n \n .speedometer .text-3xl {\n font-size: 1.5rem;\n }\n \n .speedometer .text-lg {\n font-size: 1rem;\n }\n}\n\n/* Custom scrollbar for any overflow */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n}\n\n::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}",[],[168,247],["D",1763162968837],[],[168,65],"f26608a2-c1b1-11f0-a89a-42dde27851f2","game.js","b4f73c9a-c17d-11f0-b2df-42dde27851f2",["D",1763163046838],11,"// F1 Rainbow Racing Game\nclass F1RainbowRacing {\n constructor() {\n this.scene = null;\n this.camera = null;\n this.renderer = null;\n this.cars = [];\n this.track = null;\n this.trackPoints = [];\n this.gameState = {\n raceStarted: false,\n raceTime: 0,\n paused: false,\n cameraMode: 'chase', // chase, overhead, cockpit, trackside\n currentCameraIndex: 0\n };\n this.keys = {};\n this.playerCarIndex = 0;\n this.cameras = [];\n this.rainbowColors = [\n 0xff0000, 0xff7f00, 0xffff00, 0x00ff00, \n 0x0000ff, 0x4b0082, 0x9400d3\n ];\n \n this.init();\n }\n\n init() {\n try {\n console.log('Initializing F1 Rainbow Racing...');\n console.log('THREE.js available:', typeof THREE !== 'undefined');\n \n this.setupScene();\n console.log('Scene setup complete');\n \n this.createTrack();\n console.log('Track created');\n \n this.createCars();\n console.log('Cars created');\n \n this.setupCameras();\n console.log('Cameras setup');\n \n this.setupControls();\n console.log('Controls setup');\n \n this.setupUI();\n console.log('UI setup');\n \n this.animate();\n console.log('Animation started');\n \n // Hide loading screen after initialization\n setTimeout(() => {\n const loadingScreen = document.getElementById('loadingScreen');\n const startScreen = document.getElementById('startScreen');\n \n if (loadingScreen) {\n loadingScreen.style.display = 'none';\n console.log('Loading screen hidden');\n } else {\n console.error('Loading screen element not found');\n }\n \n if (startScreen) {\n startScreen.classList.remove('hidden');\n console.log('Start screen shown');\n } else {\n console.error('Start screen element not found');\n }\n }, 2000);\n } catch (error) {\n console.error('Error during game initialization:', error);\n }\n }\n\n setupScene() {\n try {\n console.log('Setting up scene...');\n \n // Check if THREE is available\n if (typeof THREE === 'undefined') {\n throw new Error('THREE.js is not loaded');\n }\n \n // Create scene\n this.scene = new THREE.Scene();\n this.scene.background = new THREE.Color(0x000011);\n console.log('Scene created');\n \n // Add fog for depth\n this.scene.fog = new THREE.Fog(0x000011, 50, 500);\n\n // Setup renderer\n const canvas = document.getElementById('gameCanvas');\n if (!canvas) {\n throw new Error('Game canvas element not found');\n }\n \n this.renderer = new THREE.WebGLRenderer({ \n canvas: canvas, \n antialias: true \n });\n this.renderer.setSize(window.innerWidth, window.innerHeight);\n this.renderer.shadowMap.enabled = true;\n this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n console.log('Renderer created');\n\n // Add lights\n const ambientLight = new THREE.AmbientLight(0x404040, 0.3);\n this.scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(50, 100, 50);\n directionalLight.castShadow = true;\n directionalLight.shadow.mapSize.width = 2048;\n directionalLight.shadow.mapSize.height = 2048;\n this.scene.add(directionalLight);\n console.log('Lights added');\n\n // Add rainbow lighting\n this.addRainbowLights();\n console.log('Rainbow lights added');\n \n // Add ground plane for reference\n const groundGeometry = new THREE.PlaneGeometry(400, 400);\n const groundMaterial = new THREE.MeshLambertMaterial({ \n color: 0x001122, \n transparent: true, \n opacity: 0.3 \n });\n const ground = new THREE.Mesh(groundGeometry, groundMaterial);\n ground.rotation.x = -Math.PI / 2;\n ground.position.y = -5;\n ground.receiveShadow = true;\n this.scene.add(ground);\n console.log('Ground plane added');\n } catch (error) {\n console.error('Error in setupScene:', error);\n throw error;\n }\n }\n\n addRainbowLights() {\n for (let i = 0; i < this.rainbowColors.length; i++) {\n const light = new THREE.PointLight(this.rainbowColors[i], 0.5, 100);\n const angle = (i / this.rainbowColors.length) * Math.PI * 2;\n light.position.set(\n Math.cos(angle) * 80,\n 20,\n Math.sin(angle) * 80\n );\n this.scene.add(light);\n }\n }\n\n createTrack() {\n const trackRadius = 100;\n const trackWidth = 20;\n const segments = 64;\n \n // Create track points\n this.trackPoints = [];\n for (let i = 0; i <= segments; i++) {\n const angle = (i / segments) * Math.PI * 2;\n const x = Math.cos(angle) * trackRadius;\n const z = Math.sin(angle) * trackRadius;\n const y = Math.sin(angle * 3) * 10; // Add some elevation changes\n \n this.trackPoints.push(new THREE.Vector3(x, y, z));\n }\n\n // Create rainbow track geometry\n const trackGeometry = new THREE.BufferGeometry();\n const positions = [];\n const colors = [];\n const indices = [];\n\n // Generate track mesh with rainbow colors\n for (let i = 0; i < segments; i++) {\n const current = this.trackPoints[i];\n const next = this.trackPoints[i + 1];\n \n // Calculate perpendicular vector for track width\n const direction = new THREE.Vector3().subVectors(next, current).normalize();\n const perpendicular = new THREE.Vector3(-direction.z, 0, direction.x).multiplyScalar(trackWidth / 2);\n \n // Create track vertices\n const leftCurrent = current.clone().add(perpendicular);\n const rightCurrent = current.clone().sub(perpendicular);\n const leftNext = next.clone().add(perpendicular);\n const rightNext = next.clone().sub(perpendicular);\n \n // Add positions\n positions.push(leftCurrent.x, leftCurrent.y, leftCurrent.z);\n positions.push(rightCurrent.x, rightCurrent.y, rightCurrent.z);\n positions.push(leftNext.x, leftNext.y, leftNext.z);\n positions.push(rightNext.x, rightNext.y, rightNext.z);\n \n // Add rainbow colors\n const colorIndex = i % this.rainbowColors.length;\n const color = new THREE.Color(this.rainbowColors[colorIndex]);\n for (let j = 0; j < 4; j++) {\n colors.push(color.r, color.g, color.b);\n }\n \n // Add indices for triangles\n const baseIndex = i * 4;\n indices.push(baseIndex, baseIndex + 1, baseIndex + 2);\n indices.push(baseIndex + 1, baseIndex + 3, baseIndex + 2);\n }\n\n trackGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));\n trackGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));\n trackGeometry.setIndex(indices);\n trackGeometry.computeNormals();\n\n const trackMaterial = new THREE.MeshLambertMaterial({ \n vertexColors: true,\n transparent: true,\n opacity: 0.9\n });\n \n this.track = new THREE.Mesh(trackGeometry, trackMaterial);\n this.track.receiveShadow = true;\n this.scene.add(this.track);\n\n // Add track barriers\n this.createTrackBarriers();\n }\n\n createTrackBarriers() {\n const barrierHeight = 5;\n const barrierGeometry = new THREE.BoxGeometry(2, barrierHeight, 2);\n const barrierMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });\n\n for (let i = 0; i < this.trackPoints.length; i += 4) {\n const point = this.trackPoints[i];\n \n // Inner barrier\n const innerBarrier = new THREE.Mesh(barrierGeometry, barrierMaterial);\n const innerRadius = 80;\n const angle = (i / this.trackPoints.length) * Math.PI * 2;\n innerBarrier.position.set(\n Math.cos(angle) * innerRadius,\n point.y + barrierHeight / 2,\n Math.sin(angle) * innerRadius\n );\n this.scene.add(innerBarrier);\n \n // Outer barrier\n const outerBarrier = new THREE.Mesh(barrierGeometry, barrierMaterial);\n const outerRadius = 120;\n outerBarrier.position.set(\n Math.cos(angle) * outerRadius,\n point.y + barrierHeight / 2,\n Math.sin(angle) * outerRadius\n );\n this.scene.add(outerBarrier);\n }\n }\n\n createCars() {\n const carConfigs = [\n { name: 'Player 1', color: 0xff0000, isPlayer: true },\n { name: 'AI Racer 1', color: 0x0000ff, isPlayer: false },\n { name: 'AI Racer 2', color: 0x00ff00, isPlayer: false },\n { name: 'AI Racer 3', color: 0xff00ff, isPlayer: false }\n ];\n\n carConfigs.forEach((config, index) => {\n const car = this.createCar(config.color, index);\n car.userData = {\n name: config.name,\n isPlayer: config.isPlayer,\n speed: 0,\n maxSpeed: 250,\n acceleration: 0,\n trackPosition: index * 0.25, // Spread cars around track\n lapTime: 0,\n currentLap: 0\n };\n \n this.cars.push(car);\n this.scene.add(car);\n });\n\n this.playerCarIndex = 0;\n }\n\n createCar(color, index) {\n const carGroup = new THREE.Group();\n \n // Car body\n const bodyGeometry = new THREE.BoxGeometry(4, 1, 8);\n const bodyMaterial = new THREE.MeshLambertMaterial({ color: color });\n const body = new THREE.Mesh(bodyGeometry, bodyMaterial);\n body.position.y = 1;\n body.castShadow = true;\n carGroup.add(body);\n \n // Car cockpit\n const cockpitGeometry = new THREE.BoxGeometry(2, 1, 3);\n const cockpitMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });\n const cockpit = new THREE.Mesh(cockpitGeometry, cockpitMaterial);\n cockpit.position.set(0, 2, -1);\n cockpit.castShadow = true;\n carGroup.add(cockpit);\n \n // Wheels\n const wheelGeometry = new THREE.CylinderGeometry(0.8, 0.8, 0.5, 8);\n const wheelMaterial = new THREE.MeshLambertMaterial({ color: 0x222222 });\n \n const wheelPositions = [\n [-1.5, 0.8, 2.5], // Front left\n [1.5, 0.8, 2.5], // Front right\n [-1.5, 0.8, -2.5], // Rear left\n [1.5, 0.8, -2.5] // Rear right\n ];\n \n wheelPositions.forEach(pos => {\n const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);\n wheel.position.set(pos[0], pos[1], pos[2]);\n wheel.rotation.z = Math.PI / 2;\n wheel.castShadow = true;\n carGroup.add(wheel);\n });\n \n // Position car on track\n const startAngle = (index / 4) * Math.PI * 2;\n const trackRadius = 100;\n const trackY = Math.sin(startAngle * 3) * 10 + 5; // Match track elevation\n carGroup.position.set(\n Math.cos(startAngle) * trackRadius,\n trackY,\n Math.sin(startAngle) * trackRadius\n );\n \n // Set initial rotation to face forward on track\n carGroup.rotation.y = startAngle + Math.PI / 2;\n \n return carGroup;\n }\n\n setupCameras() {\n // Main camera\n this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n \n // Create different camera modes\n this.cameras = {\n chase: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),\n overhead: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),\n cockpit: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),\n trackside: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)\n };\n \n this.updateCamera();\n }\n\n updateCamera() {\n if (!this.cars[this.playerCarIndex]) return;\n \n const playerCar = this.cars[this.playerCarIndex];\n const cameraDistance = 25; // Increased distance\n const cameraHeight = 12; // Increased height\n \n switch (this.gameState.cameraMode) {\n case 'chase':\n // Follow behind the car with smooth interpolation\n const chaseOffset = new THREE.Vector3(0, cameraHeight, -cameraDistance);\n chaseOffset.applyQuaternion(playerCar.quaternion);\n \n const targetPosition = playerCar.position.clone().add(chaseOffset);\n \n // Smooth camera movement\n this.camera.position.lerp(targetPosition, 0.1);\n this.camera.lookAt(playerCar.position);\n break;\n \n case 'overhead':\n // Top-down view\n this.camera.position.set(0, 200, 0); // Higher up\n this.camera.lookAt(0, 0, 0);\n break;\n \n case 'cockpit':\n // Inside the car\n const cockpitOffset = new THREE.Vector3(0, 4, 2); // Higher cockpit position\n cockpitOffset.applyQuaternion(playerCar.quaternion);\n this.camera.position.copy(playerCar.position).add(cockpitOffset);\n \n const lookAhead = new THREE.Vector3(0, 0, 15);\n lookAhead.applyQuaternion(playerCar.quaternion);\n this.camera.lookAt(playerCar.position.clone().add(lookAhead));\n break;\n \n case 'trackside':\n // Fixed position watching the track\n this.camera.position.set(180, 40, 0); // Further out and higher\n this.camera.lookAt(playerCar.position);\n break;\n }\n }\n\n setupControls() {\n // Keyboard event listeners\n document.addEventListener('keydown', (event) => {\n this.keys[event.code] = true;\n \n // Handle special keys\n switch (event.code) {\n case 'KeyC':\n this.cycleCameraMode();\n break;\n case 'KeyR':\n this.resetRace();\n break;\n case 'Space':\n event.preventDefault();\n this.togglePause();\n break;\n }\n });\n \n document.addEventListener('keyup', (event) => {\n this.keys[event.code] = false;\n });\n \n // Window resize handler\n window.addEventListener('resize', () => {\n this.camera.aspect = window.innerWidth / window.innerHeight;\n this.camera.updateProjectionMatrix();\n this.renderer.setSize(window.innerWidth, window.innerHeight);\n });\n }\n\n setupUI() {\n const startButton = document.getElementById('startButton');\n startButton.addEventListener('click', () => {\n this.startRace();\n });\n }\n\n startRace() {\n document.getElementById('startScreen').classList.add('hidden');\n this.gameState.raceStarted = true;\n this.gameState.raceTime = 0;\n }\n\n cycleCameraMode() {\n const modes = ['chase', 'overhead', 'cockpit', 'trackside'];\n const currentIndex = modes.indexOf(this.gameState.cameraMode);\n const nextIndex = (currentIndex + 1) % modes.length;\n this.gameState.cameraMode = modes[nextIndex];\n \n document.getElementById('cameraMode').textContent = \n this.gameState.cameraMode.charAt(0).toUpperCase() + this.gameState.cameraMode.slice(1);\n }\n\n resetRace() {\n this.gameState.raceStarted = false;\n this.gameState.raceTime = 0;\n this.gameState.paused = false;\n \n // Reset car positions\n this.cars.forEach((car, index) => {\n const startAngle = (index / 4) * Math.PI * 2;\n const trackRadius = 100;\n const trackY = Math.sin(startAngle * 3) * 10 + 5; // Match track elevation\n car.position.set(\n Math.cos(startAngle) * trackRadius,\n trackY,\n Math.sin(startAngle) * trackRadius\n );\n car.rotation.y = startAngle + Math.PI / 2; // Face forward on track\n car.userData.speed = 0;\n car.userData.trackPosition = index * 0.25;\n });\n \n document.getElementById('startScreen').classList.remove('hidden');\n }\n\n togglePause() {\n this.gameState.paused = !this.gameState.paused;\n }\n\n updateCars(deltaTime) {\n if (!this.gameState.raceStarted || this.gameState.paused) return;\n \n this.cars.forEach((car, index) => {\n if (car.userData.isPlayer) {\n this.updatePlayerCar(car, deltaTime);\n } else {\n this.updateAICar(car, deltaTime, index);\n }\n \n this.updateCarPosition(car, deltaTime);\n });\n }\n\n updatePlayerCar(car, deltaTime) {\n const acceleration = 150; // Reduced acceleration\n const deceleration = 100;\n const maxSpeed = car.userData.maxSpeed;\n \n // Handle input\n if (this.keys['ArrowUp'] || this.keys['KeyW']) {\n car.userData.speed = Math.min(maxSpeed, car.userData.speed + acceleration * deltaTime);\n } else if (this.keys['ArrowDown'] || this.keys['KeyS']) {\n car.userData.speed = Math.max(-maxSpeed * 0.5, car.userData.speed - acceleration * deltaTime);\n } else {\n // Natural deceleration\n if (car.userData.speed > 0) {\n car.userData.speed = Math.max(0, car.userData.speed - deceleration * deltaTime);\n } else {\n car.userData.speed = Math.min(0, car.userData.speed + deceleration * deltaTime);\n }\n }\n \n // Handle steering - only when moving\n const steeringSpeed = 1.5; // Reduced steering sensitivity\n const speedFactor = Math.abs(car.userData.speed) / maxSpeed;\n \n if (this.keys['ArrowLeft'] || this.keys['KeyA']) {\n car.rotation.y += steeringSpeed * deltaTime * speedFactor;\n }\n if (this.keys['ArrowRight'] || this.keys['KeyD']) {\n car.rotation.y -= steeringSpeed * deltaTime * speedFactor;\n }\n }\n\n updateAICar(car, deltaTime, index) {\n // Simple AI: maintain speed and follow track\n const targetSpeed = 180 + Math.sin(Date.now() * 0.001 + index) * 30;\n const acceleration = 100;\n \n if (car.userData.speed < targetSpeed) {\n car.userData.speed = Math.min(targetSpeed, car.userData.speed + acceleration * deltaTime);\n } else {\n car.userData.speed = Math.max(targetSpeed, car.userData.speed - acceleration * deltaTime);\n }\n \n // Follow track (simplified)\n car.userData.trackPosition += (car.userData.speed / 1000) * deltaTime;\n if (car.userData.trackPosition >= 1) {\n car.userData.trackPosition -= 1;\n car.userData.currentLap++;\n }\n \n const angle = car.userData.trackPosition * Math.PI * 2;\n const trackRadius = 100;\n const targetX = Math.cos(angle) * trackRadius;\n const targetZ = Math.sin(angle) * trackRadius;\n const targetY = Math.sin(angle * 3) * 10 + 5;\n \n car.position.x = targetX;\n car.position.z = targetZ;\n car.position.y = targetY;\n car.rotation.y = angle + Math.PI / 2;\n }\n\n updateCarPosition(car, deltaTime) {\n if (car.userData.isPlayer) {\n // Move player car based on current rotation and speed\n const direction = new THREE.Vector3(0, 0, 1);\n direction.applyQuaternion(car.quaternion);\n direction.multiplyScalar(car.userData.speed * deltaTime * 0.005); // Reduced speed multiplier\n car.position.add(direction);\n \n // Keep car on track level with some elevation variation\n const distanceFromCenter = Math.sqrt(car.position.x * car.position.x + car.position.z * car.position.z);\n const angle = Math.atan2(car.position.z, car.position.x);\n const trackY = Math.sin(angle * 3) * 10 + 5; // Match track elevation\n car.position.y = trackY;\n \n // Constrain car to reasonable track bounds (soft constraint)\n if (distanceFromCenter > 130) {\n const constrainFactor = 130 / distanceFromCenter;\n car.position.x *= constrainFactor;\n car.position.z *= constrainFactor;\n } else if (distanceFromCenter < 70) {\n const constrainFactor = 70 / distanceFromCenter;\n car.position.x *= constrainFactor;\n car.position.z *= constrainFactor;\n }\n }\n }\n\n updateUI() {\n // Update race time\n if (this.gameState.raceStarted && !this.gameState.paused) {\n this.gameState.raceTime += 0.016; // Approximate 60fps\n }\n \n const minutes = Math.floor(this.gameState.raceTime / 60);\n const seconds = Math.floor(this.gameState.raceTime % 60);\n document.getElementById('raceTime').textContent = \n `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n \n // Update speedometers\n this.cars.forEach((car, index) => {\n const speed = Math.round(Math.abs(car.userData.speed));\n const speedPercent = (speed / car.userData.maxSpeed) * 100;\n \n document.getElementById(`speed-${index}`).textContent = speed;\n document.getElementById(`speedBar-${index}`).style.width = `${speedPercent}%`;\n });\n \n // Update leader\n let leader = this.cars[0];\n let leaderIndex = 0;\n this.cars.forEach((car, index) => {\n if (car.userData.speed > leader.userData.speed) {\n leader = car;\n leaderIndex = index;\n }\n });\n document.getElementById('currentLeader').textContent = leader.userData.name;\n }\n\n animate() {\n requestAnimationFrame(() => this.animate());\n \n const deltaTime = 0.016; // Approximate 60fps\n \n this.updateCars(deltaTime);\n this.updateCamera();\n this.updateUI();\n \n // Animate rainbow lights\n const time = Date.now() * 0.001;\n this.scene.children.forEach((child, index) => {\n if (child.type === 'PointLight') {\n child.intensity = 0.5 + Math.sin(time + index) * 0.3;\n }\n });\n \n this.renderer.render(this.scene, this.camera);\n }\n}\n\n// Initialize game when page loads\nwindow.addEventListener('load', () => {\n console.log('Page loaded, checking for THREE.js...');\n \n // Wait a bit for Three.js to load\n setTimeout(() => {\n if (typeof THREE === 'undefined') {\n console.error('THREE.js failed to load');\n document.body.innerHTML = '

Error: THREE.js failed to load

Please refresh the page

';\n return;\n }\n \n console.log('THREE.js loaded successfully, initializing game...');\n try {\n new F1RainbowRacing();\n } catch (error) {\n console.error('Failed to initialize game:', error);\n document.body.innerHTML = '

Game Initialization Error

' + error.message + '

Check console for details

';\n }\n }, 100);\n});",[],[168,258],"865e0d14-c17d-11f0-8ac9-42dde27851f2",["D",1763140531761],[183,184,185],[168],"c46635dc-c1af-11f0-97b9-42dde27851f2","index.ts","8ba543d6-afa4-40ce-a5fb-2748b96899c1",18,["D",1763162110685],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\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// Main game route\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial game data\n const gameData = {\n players: 4,\n trackLength: 1000,\n maxSpeed: 300,\n timestamp: Date.now()\n };\n \n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API endpoint for game state updates\napp.post(\"/api/race-update\", async c => {\n try {\n const data = await c.req.json();\n // In a real game, you'd store race state here\n return c.json({ success: true, timestamp: Date.now() });\n } catch (error) {\n return c.json({ \n success: false, \n error: \"Invalid JSON data\",\n timestamp: Date.now() \n }, 400);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[278,270],"backend","7408bd8a-c17d-11f0-b628-42dde27851f2",4,["D",1763140501001],[181],[278],["D",1763038299351],{"_11":12,"_136":70},{"_11":12,"_132":-5,"_69":70,"_30":68,"_133":134,"_135":24},{"_40":123,"_13":16,"_34":37,"_124":88,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":14,"_131":12},"ctx",{"_53":-5,"_155":321,"_322":323,"_324":325,"_326":24,"_327":24,"_328":24,"_329":100,"_330":-5,"_331":-7,"_332":-7,"_333":26,"_334":24,"_335":24,"_336":-5,"_337":24,"_338":24,"_339":24,"_340":-5},"ENV",{"_292":293,"_294":295,"_296":16,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","81405aa0531e90dfbb71a5bf473aaa0cf4c8702f","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"]

History · index.html