[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match SpaceX/Tesla aesthetic with space-themed colors */ --background: oklch(1 0 0); /* Pure white background */ --foreground: oklch(0.35 0 0); /* Dark gray text */ --card: oklch(0.98 0 0); /* Light gray card background */ --card-foreground: oklch(0.35 0 0); /* Dark gray text on cards */ --popover: oklch(1 0 0); /* White popover background */ --popover-foreground: oklch(0.35 0 0); /* Dark gray popover text */ --primary: oklch(0.55 0.15 200); /* Space cyan primary color */ --primary-foreground: oklch(1 0 0); /* White text on primary */ --secondary: oklch(0.65 0.18 160); /* Emerald secondary color */ --secondary-foreground: oklch(1 0 0); /* White text on secondary */ --muted: oklch(0.96 0 0); /* Light muted background */ --muted-foreground: oklch(0.35 0 0); /* Dark muted text */ --accent: oklch(0.65 0.18 160); /* Emerald accent color */ --accent-foreground: oklch(1 0 0); /* White text on accent */ --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); /* Light border */ --input: oklch(1 0 0); /* White input background */ --ring: oklch(0.55 0.15 200 / 0.5); /* Cyan ring with transparency */ --chart-1: oklch(0.65 0.18 160); /* Emerald chart color */ --chart-2: oklch(0.577 0.245 27.325); /* Orange chart color */ --chart-3: oklch(0.55 0.15 200); /* Cyan chart color */ --chart-4: oklch(0.65 0.18 160); /* Emerald chart color */ --chart-5: oklch(0.35 0 0); /* Dark gray chart color */ --radius: 0.5rem; --sidebar: oklch(0.98 0 0); --sidebar-foreground: oklch(0.35 0 0); --sidebar-primary: oklch(0.55 0.15 200); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.65 0.18 160); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.92 0 0); --sidebar-ring: oklch(0.55 0.15 200 / 0.5); } .dark { /* Updated dark mode colors for space theme */ --background: oklch(0.08 0 0); /* Very dark space background */ --foreground: oklch(0.95 0 0); /* Light text */ --card: oklch(0.12 0 0); /* Dark card background */ --card-foreground: oklch(0.95 0 0); /* Light text on cards */ --popover: oklch(0.08 0 0); /* Dark popover */ --popover-foreground: oklch(0.95 0 0); /* Light popover text */ --primary: oklch(0.65 0.18 200); /* Brighter cyan for dark mode */ --primary-foreground: oklch(0.08 0 0); /* Dark text on primary */ --secondary: oklch(0.25 0 0); /* Dark secondary */ --secondary-foreground: oklch(0.95 0 0); /* Light text on secondary */ --muted: oklch(0.25 0 0); /* Dark muted */ --muted-foreground: oklch(0.7 0 0); /* Medium gray muted text */ --accent: oklch(0.75 0.2 160); /* Bright emerald accent */ --accent-foreground: oklch(0.08 0 0); /* Dark text on accent */ --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.25 0 0); /* Dark border */ --input: oklch(0.25 0 0); /* Dark input */ --ring: oklch(0.65 0.18 200 / 0.5); /* Bright cyan ring */ --chart-1: oklch(0.75 0.2 160); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.65 0.18 200); --chart-4: oklch(0.75 0.2 160); --chart-5: oklch(0.7 0 0); --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.65 0.18 200); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.75 0.2 160); --sidebar-accent-foreground: oklch(0.08 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.65 0.18 200 / 0.5); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useRef } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, Environment, Html } from "@react-three/drei" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Rocket, Globe, MapPin, Zap, Fuel, Gauge, Navigation } from "lucide-react" import type * as THREE from "three" function StarshipRocket({ isLaunching, isLanding, position = [0, 0, 0], showFlames = false, }: { isLaunching: boolean isLanding: boolean position?: [number, number, number] showFlames?: boolean }) { const meshRef = useRef(null) const flameRef = useRef(null) useFrame((state) => { if (meshRef.current) { if (isLaunching) { meshRef.current.position.y += 0.15 meshRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 2) * 0.05 } else if (isLanding) { meshRef.current.position.y -= 0.08 meshRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 3) * 0.08 } else { meshRef.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.1 } } if (flameRef.current && showFlames) { flameRef.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 10) * 0.3 flameRef.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 8) * 0.2 flameRef.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 8) * 0.2 } }) return ( {/* Main Rocket Body - Stainless Steel */} {/* Nose Cone */} {/* Grid Fins */} {[0, 1, 2, 3].map((i) => ( {/* Grid pattern */} {[0, 1, 2].map((j) => ( ))} ))} {/* Raptor Engines */} {[0, 1, 2].map((i) => ( ))} {/* SpaceX Logo */} {/* Engine Flames */} {showFlames && ( {[0, 1, 2].map((i) => ( ))} {/* Inner blue flames */} {[0, 1, 2].map((i) => ( ))} )} ) } function Planet({ name, color, size, position, onClick, isSelected, atmosphere = false, }: { name: string color: string size: number position: [number, number, number] onClick: () => void isSelected: boolean atmosphere?: boolean }) { const meshRef = useRef(null) const atmosphereRef = useRef(null) useFrame((state) => { if (meshRef.current) { meshRef.current.rotation.y += 0.01 if (isSelected) { meshRef.current.scale.setScalar(1 + Math.sin(state.clock.elapsedTime * 4) * 0.15) } } if (atmosphereRef.current && atmosphere) { atmosphereRef.current.rotation.y += 0.005 } }) return ( {/* Atmospheric glow */} {atmosphere && ( )}

{name}

) } function SpaceParticles() { const particlesRef = useRef(null) useFrame((state) => { if (particlesRef.current) { particlesRef.current.rotation.y += 0.0002 particlesRef.current.rotation.x += 0.0001 } }) const particleCount = 2000 const positions = new Float32Array(particleCount * 3) const colors = new Float32Array(particleCount * 3) for (let i = 0; i < particleCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 200 positions[i * 3 + 1] = (Math.random() - 0.5) * 200 positions[i * 3 + 2] = (Math.random() - 0.5) * 200 const color = Math.random() colors[i * 3] = color > 0.8 ? 1 : 0.8 + Math.random() * 0.2 colors[i * 3 + 1] = color > 0.8 ? 1 : 0.8 + Math.random() * 0.2 colors[i * 3 + 2] = 1 } return ( ) } type GameState = "launch-pad" | "launching" | "space-travel" | "planet-selection" | "landing" | "landed" const destinations = [ { name: "Moon", color: "#d1d5db", size: 1.2, distance: 10, atmosphere: false }, { name: "Mars", color: "#dc2626", size: 1.4, distance: 14, atmosphere: true }, { name: "Europa", color: "#3b82f6", size: 1.0, distance: 18, atmosphere: false }, { name: "Titan", color: "#f59e0b", size: 1.1, distance: 22, atmosphere: true }, ] export default function RocketLauncherApp() { const [gameState, setGameState] = useState("launch-pad") const [selectedDestination, setSelectedDestination] = useState(null) const [countdown, setCountdown] = useState(null) const [missionData, setMissionData] = useState({ phase: "Pre-Launch", location: "Earth Launch Pad", fuel: 100, altitude: 0, velocity: 0, }) const handleLaunch = () => { setCountdown(10) setMissionData((prev) => ({ ...prev, phase: "Launch Sequence", location: "Earth Surface" })) const countdownInterval = setInterval(() => { setCountdown((prev) => { if (prev === null || prev <= 1) { clearInterval(countdownInterval) setGameState("launching") setMissionData((prev) => ({ ...prev, phase: "Ascending", location: "Earth Atmosphere", altitude: 50, velocity: 1000, })) setTimeout(() => { setGameState("space-travel") setMissionData((prev) => ({ ...prev, phase: "Space Travel", location: "Low Earth Orbit", altitude: 400, velocity: 7800, })) setTimeout(() => { setGameState("planet-selection") setMissionData((prev) => ({ ...prev, phase: "Destination Selection", location: "Deep Space", altitude: 35786, velocity: 3074, })) }, 3000) }, 4000) return null } return prev - 1 }) }, 1000) } const handleDestinationSelect = (destinationName: string) => { setSelectedDestination(destinationName) setMissionData((prev) => ({ ...prev, phase: "Navigation", location: `En route to ${destinationName}`, fuel: prev.fuel - 10, })) } const handleLand = () => { if (selectedDestination) { setGameState("landing") setCountdown(15) setMissionData((prev) => ({ ...prev, phase: "Landing Sequence", location: `${selectedDestination} Approach`, fuel: prev.fuel - 15, velocity: 500, })) const landingInterval = setInterval(() => { setCountdown((prev) => { if (prev === null || prev <= 1) { clearInterval(landingInterval) setGameState("landed") setMissionData((prev) => ({ ...prev, phase: "Mission Complete", location: `${selectedDestination} Surface`, altitude: 0, velocity: 0, fuel: prev.fuel - 5, })) return null } return prev - 1 }) }, 1000) } } const handleNewMission = () => { setGameState("launch-pad") setSelectedDestination(null) setCountdown(null) setMissionData({ phase: "Pre-Launch", location: "Earth Launch Pad", fuel: 100, altitude: 0, velocity: 0, }) } return (

{/* Mission Control Header */}

SpaceX Mission Control

Starship Deep Space Program

{missionData.phase}

{/* Enhanced Mission Telemetry */}

Live Telemetry

Location: {missionData.location}

Fuel: {missionData.fuel}%

Altitude: {missionData.altitude.toLocaleString()} km

Velocity: {missionData.velocity.toLocaleString()} km/h

{/* Enhanced Control Panel */}

{/* Countdown Display */} {countdown !== null && (

{countdown}

{gameState === "launching" ? "Launch in..." : "Landing in..."}

)} {gameState === "launch-pad" && countdown === null && (

LAUNCH FROM EARTH

Starship is fueled and ready for deep space mission

)} {(gameState === "launching" || gameState === "space-travel") && (

{gameState === "launching" ? "LAUNCHING..." : "SPACE TRAVEL"}

{gameState === "launching" ? "Starship is ascending through Earth's atmosphere" : "Traveling through deep space"}

)} {gameState === "planet-selection" && (

SELECT LANDING DESTINATION

Choose your destination for landing

{destinations.map((destination) => ( ))}

{selectedDestination && ( )}

)} {gameState === "landing" && (

LANDING ON {selectedDestination?.toUpperCase()}

Starship is descending to the surface

)} {gameState === "landed" && (

MISSION COMPLETE!

Successfully landed on {selectedDestination}

🎉 Landing Successful 🎉

All systems nominal

)}

) }