Spaces:

jamesbright
/

spacex-simulator

Running

App Files Files Community

jamesbright commited on Apr 7

Commit

0446533

verified ·

1 Parent(s): fea0c59

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +767 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Spacex Simulator
-emoji: 🌖
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: spacex-simulator
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,767 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SpaceX Simulator: Build Like Elon</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&display=swap');
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #0a0a1a;
+            color: #e0e0e0;
+            overflow-x: hidden;
+        }
+        .orbitron {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .space-gradient {
+            background: linear-gradient(135deg, #000428 0%, #004e92 100%);
+        }
+        .rocket-part {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .rocket-part:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 150, 255, 0.3);
+            border-color: rgba(0, 150, 255, 0.5);
+        }
+        .selected-part {
+            box-shadow: 0 0 0 3px rgba(0, 150, 255, 0.7);
+            border-color: rgba(0, 150, 255, 0.9);
+        }
+        .planet-card {
+            transition: all 0.3s ease;
+            background-size: cover;
+            background-position: center;
+        }
+        .planet-card:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 25px rgba(0, 150, 255, 0.4);
+        }
+        .rocket-display {
+            perspective: 1000px;
+        }
+        .rocket-3d {
+            transform-style: preserve-3d;
+            transition: transform 0.5s ease;
+        }
+        .flame {
+            position: absolute;
+            bottom: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40px;
+            height: 60px;
+            background: linear-gradient(to top, #ff4500, #ff8c00, #ffd700);
+            border-radius: 50% 50% 20% 20%;
+            filter: blur(5px);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .launching .flame {
+            opacity: 1;
+            animation: flame-flicker 0.3s infinite alternate;
+        }
+        @keyframes flame-flicker {
+            0% { height: 60px; width: 40px; }
+            100% { height: 80px; width: 50px; }
+        }
+        .stars {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .star {
+            position: absolute;
+            background-color: white;
+            border-radius: 50%;
+            animation: twinkle 5s infinite ease-in-out;
+        }
+        @keyframes twinkle {
+            0% { opacity: 0.2; }
+            50% { opacity: 1; }
+            100% { opacity: 0.2; }
+        }
+        .elon-avatar {
+            transition: all 0.3s ease;
+        }
+        .elon-avatar:hover {
+            transform: scale(1.05);
+            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
+        }
+        .mission-control {
+            background: rgba(10, 20, 30, 0.9);
+            border: 1px solid rgba(0, 150, 255, 0.3);
+            box-shadow: 0 0 30px rgba(0, 150, 255, 0.2);
+        }
+        .console-text {
+            font-family: 'Courier New', monospace;
+            color: #00ff00;
+            text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
+        }
+        .progress-bar {
+            height: 10px;
+            background: linear-gradient(90deg, #004e92, #00b4ff);
+            transition: width 0.5s ease;
+        }
+        .blink {
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+    <div class="stars" id="stars"></div>
+    <div class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="space-gradient py-4 px-6 shadow-lg">
+            <div class="container mx-auto flex justify-between items-center">
+                <div class="flex items-center space-x-4">
+                    <i class="fas fa-rocket text-3xl text-yellow-400"></i>
+                    <h1 class="orbitron text-2xl md:text-3xl font-bold text-white">
+                        <span class="text-yellow-400">SPACEX</span> SIMULATOR
+                    </h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="hidden md:flex items-center space-x-2">
+                        <i class="fas fa-coins text-yellow-400"></i>
+                        <span class="font-bold" id="funds">$10,000,000</span>
+                    </div>
+                    <div class="hidden md:flex items-center space-x-2">
+                        <i class="fas fa-star text-blue-400"></i>
+                        <span class="font-bold" id="reputation">100</span>
+                    </div>
+                    <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg orbitron">
+                        MISSION CONTROL
+                    </button>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <!-- Rocket Builder Panel -->
+                <div class="lg:col-span-2 space-y-8">
+                    <!-- Rocket Display -->
+                    <div class="bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800">
+                        <h2 class="orbitron text-xl text-blue-400 mb-4">ROCKET DESIGN</h2>
+                        <div class="rocket-display flex justify-center items-end h-96">
+                            <div class="rocket-3d relative" id="rocket-model">
+                                <!-- Rocket parts will be added here by JavaScript -->
+                                <div class="flame" id="rocket-flame"></div>
+                            </div>
+                        </div>
+                        <div class="mt-6 grid grid-cols-3 gap-4">
+                            <div class="bg-gray-800 rounded-lg p-3 text-center">
+                                <p class="text-gray-400 text-sm">DELTA-V</p>
+                                <p class="orbitron text-xl" id="delta-v">0 m/s</p>
+                            </div>
+                            <div class="bg-gray-800 rounded-lg p-3 text-center">
+                                <p class="text-gray-400 text-sm">PAYLOAD</p>
+                                <p class="orbitron text-xl" id="payload">0 kg</p>
+                            </div>
+                            <div class="bg-gray-800 rounded-lg p-3 text-center">
+                                <p class="text-gray-400 text-sm">COST</p>
+                                <p class="orbitron text-xl" id="rocket-cost">$0</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Parts Selection -->
+                    <div class="bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800">
+                        <h2 class="orbitron text-xl text-blue-400 mb-4">ROCKET COMPONENTS</h2>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                            <!-- Parts will be added here by JavaScript -->
+                        </div>
+                    </div>
+                </div>
+                <!-- Mission Control Panel -->
+                <div class="space-y-8">
+                    <!-- Elon Musk Avatar -->
+                    <div class="bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800 flex flex-col items-center">
+                        <div class="elon-avatar mb-4 relative">
+                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg/1200px-Elon_Musk_Royal_Society_%28crop2%29.jpg"
+                                 alt="Elon Musk" class="w-32 h-32 rounded-full object-cover border-4 border-blue-500">
+                            <div class="absolute -bottom-2 -right-2 bg-yellow-500 text-black rounded-full w-10 h-10 flex items-center justify-center">
+                                <i class="fas fa-crown"></i>
+                            </div>
+                        </div>
+                        <h3 class="orbitron text-xl text-center">ELON MUSK</h3>
+                        <p class="text-gray-400 text-center mb-4">CEO & Chief Engineer</p>
+                        <div class="w-full bg-gray-800 rounded-full h-2.5 mb-4">
+                            <div class="progress-bar rounded-full h-2.5" style="width: 100%"></div>
+                        </div>
+                        <div class="mission-control w-full bg-gray-800 rounded-lg p-4 h-48 overflow-y-auto">
+                            <p class="console-text">> Welcome to SpaceX Simulator</p>
+                            <p class="console-text">> Initializing systems...</p>
+                            <p class="console-text">> Ready to build some rockets!</p>
+                            <p class="console-text blink">> _</p>
+                        </div>
+                    </div>
+                    <!-- Destination Selector -->
+                    <div class="bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800">
+                        <h2 class="orbitron text-xl text-blue-400 mb-4">MISSION DESTINATION</h2>
+                        <div class="grid grid-cols-2 gap-4" id="destinations">
+                            <!-- Planets will be added here by JavaScript -->
+                        </div>
+                    </div>
+                    <!-- Launch Controls -->
+                    <div class="bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800">
+                        <h2 class="orbitron text-xl text-blue-400 mb-4">MISSION CONTROL</h2>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-gray-400 mb-2">Mission Name</label>
+                                <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                       placeholder="e.g. Mars Colony 1" id="mission-name">
+                            </div>
+                            <div>
+                                <label class="block text-gray-400 mb-2">Payload Type</label>
+                                <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" id="payload-type">
+                                    <option value="satellite">Communication Satellite</option>
+                                    <option value="rover">Planetary Rover</option>
+                                    <option value="probe">Scientific Probe</option>
+                                    <option value="habitat">Colony Habitat</option>
+                                    <option value="crew">Astronaut Crew</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-gray-400 mb-2">Payload Mass (kg)</label>
+                                <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                       value="1000" min="100" max="100000" id="payload-mass">
+                            </div>
+                            <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg orbitron text-lg flex items-center justify-center space-x-2" id="launch-button">
+                                <i class="fas fa-rocket"></i>
+                                <span>INITIATE LAUNCH SEQUENCE</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- Footer -->
+        <footer class="space-gradient py-6 px-6">
+            <div class="container mx-auto">
+                <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="flex items-center space-x-4 mb-4 md:mb-0">
+                        <i class="fab fa-twitter text-blue-400 text-xl"></i>
+                        <i class="fab fa-linkedin text-blue-400 text-xl"></i>
+                        <i class="fab fa-instagram text-purple-400 text-xl"></i>
+                    </div>
+                    <p class="text-gray-300 text-sm">© 2023 SpaceX Simulator. Not affiliated with SpaceX or Elon Musk. For educational purposes only.</p>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script>
+        // Create stars background
+        function createStars() {
+            const stars = document.getElementById('stars');
+            const count = 200;
+            for (let i = 0; i < count; i++) {
+                const star = document.createElement('div');
+                star.className = 'star';
+                // Random position
+                const x = Math.random() * 100;
+                const y = Math.random() * 100;
+                // Random size
+                const size = Math.random() * 2;
+                // Random opacity
+                const opacity = Math.random();
+                // Random animation delay
+                const delay = Math.random() * 5;
+                star.style.left = `${x}%`;
+                star.style.top = `${y}%`;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.opacity = opacity;
+                star.style.animationDelay = `${delay}s`;
+                stars.appendChild(star);
+            }
+        }
+        // Rocket parts data
+        const rocketParts = {
+            firstStages: [
+                { id: 'falcon9', name: 'Falcon 9', cost: 5000000, mass: 25000, thrust: 7607, height: 10, color: 'bg-white', image: 'https://www.spacex.com/static/images/falcon9/falcon9-1.png' },
+                { id: 'falcon-heavy', name: 'Falcon Heavy', cost: 9000000, mass: 40000, thrust: 22819, height: 12, color: 'bg-gray-300', image: 'https://www.spacex.com/static/images/falcon-heavy/falcon-heavy-1.png' },
+                { id: 'starship', name: 'Starship', cost: 15000000, mass: 120000, thrust: 75000, height: 18, color: 'bg-gray-400', image: 'https://www.spacex.com/static/images/starship/starship-1.png' },
+                { id: 'nova', name: 'Nova', cost: 20000000, mass: 150000, thrust: 100000, height: 20, color: 'bg-blue-200', image: '' }
+            ],
+            secondStages: [
+                { id: 'falcon9-upper', name: 'Falcon 9 Upper', cost: 2000000, mass: 5000, thrust: 934, height: 6, color: 'bg-white', image: '' },
+                { id: 'falcon-heavy-upper', name: 'Falcon Heavy Upper', cost: 3000000, mass: 8000, thrust: 934, height: 8, color: 'bg-gray-300', image: '' },
+                { id: 'starship-upper', name: 'Starship Upper', cost: 5000000, mass: 15000, thrust: 3000, height: 12, color: 'bg-gray-400', image: '' },
+                { id: 'nova-upper', name: 'Nova Upper', cost: 7000000, mass: 20000, thrust: 5000, height: 14, color: 'bg-blue-200', image: '' }
+            ],
+            fairings: [
+                { id: 'standard', name: 'Standard Fairing', cost: 1000000, mass: 2000, height: 5, color: 'bg-white', image: '' },
+                { id: 'extended', name: 'Extended Fairing', cost: 1500000, mass: 3000, height: 7, color: 'bg-gray-300', image: '' },
+                { id: 'heavy', name: 'Heavy Fairing', cost: 2000000, mass: 4000, height: 8, color: 'bg-gray-400', image: '' },
+                { id: 'none', name: 'No Fairing', cost: 0, mass: 0, height: 0, color: 'transparent', image: '' }
+            ],
+            engines: [
+                { id: 'merlin', name: 'Merlin', cost: 1000000, thrust: 845, isp: 282, color: 'bg-gray-500', image: '' },
+                { id: 'raptor', name: 'Raptor', cost: 2000000, thrust: 2000, isp: 330, color: 'bg-gray-600', image: '' },
+                { id: 'be-4', name: 'BE-4', cost: 2500000, thrust: 2400, isp: 340, color: 'bg-blue-600', image: '' },
+                { id: 'rs-25', name: 'RS-25', cost: 3000000, thrust: 1860, isp: 366, color: 'bg-red-600', image: '' }
+            ]
+        };
+        // Planets data
+        const destinations = [
+            { id: 'leo', name: 'Low Earth Orbit', distance: 200, difficulty: 1, image: 'https://science.nasa.gov/wp-content/uploads/2023/09/iss067e092866_large.jpg?w=1536' },
+            { id: 'moon', name: 'The Moon', distance: 384400, difficulty: 2, image: 'https://science.nasa.gov/wp-content/uploads/2023/09/webb-southern-ring-nebula-1.jpg?w=1536' },
+            { id: 'mars', name: 'Mars', distance: 225000000, difficulty: 3, image: 'https://science.nasa.gov/wp-content/uploads/2023/09/pia25980-16.jpg?w=1536' },
+            { id: 'jupiter', name: 'Jupiter', distance: 778000000, difficulty: 4, image: 'https://science.nasa.gov/wp-content/uploads/2023/09/jupiter-1.jpg?w=1536' },
+            { id: 'saturn', name: 'Saturn', distance: 1400000000, difficulty: 5, image: 'https://science.nasa.gov/wp-content/uploads/2023/09/saturn-1.jpg?w=1536' },
+            { id: 'pluto', name: 'Pluto', distance: 5900000000, difficulty: 6, image: 'https://science.nasa.gov/wp-content/uploads/2023/09/pluto-1.jpg?w=1536' }
+        ];
+        // Game state
+        let gameState = {
+            funds: 10000000,
+            reputation: 100,
+            currentRocket: {
+                firstStage: null,
+                secondStage: null,
+                fairing: null,
+                engines: null
+            },
+            currentDestination: null,
+            currentPayload: {
+                type: 'satellite',
+                mass: 1000
+            }
+        };
+        // Initialize the game
+        function initGame() {
+            createStars();
+            renderParts();
+            renderDestinations();
+            updateUI();
+            // Set up event listeners
+            document.getElementById('launch-button').addEventListener('click', launchRocket);
+            document.getElementById('payload-type').addEventListener('change', updatePayload);
+            document.getElementById('payload-mass').addEventListener('input', updatePayload);
+        }
+        // Render rocket parts selection
+        function renderParts() {
+            const partsContainer = document.querySelector('.grid.grid-cols-2.md\\:grid-cols-4.gap-4');
+            // First stages
+            rocketParts.firstStages.forEach(part => {
+                const partElement = createPartElement(part, 'firstStage');
+                partsContainer.appendChild(partElement);
+            });
+            // Second stages
+            rocketParts.secondStages.forEach(part => {
+                const partElement = createPartElement(part, 'secondStage');
+                partsContainer.appendChild(partElement);
+            });
+            // Fairings
+            rocketParts.fairings.forEach(part => {
+                const partElement = createPartElement(part, 'fairing');
+                partsContainer.appendChild(partElement);
+            });
+            // Engines
+            rocketParts.engines.forEach(part => {
+                const partElement = createPartElement(part, 'engines');
+                partsContainer.appendChild(partElement);
+            });
+        }
+        // Create a part selection element
+        function createPartElement(part, partType) {
+            const partElement = document.createElement('div');
+            partElement.className = 'rocket-part bg-gray-800 rounded-lg p-4 cursor-pointer flex flex-col items-center';
+            partElement.dataset.partId = part.id;
+            partElement.dataset.partType = partType;
+            partElement.innerHTML = `
+                <div class="w-16 h-16 ${part.color} rounded-full mb-2 flex items-center justify-center">
+                    ${part.image ? `<img src="${part.image}" alt="${part.name}" class="w-full h-full object-contain">` : '<i class="fas fa-rocket text-xl"></i>'}
+                </div>
+                <h3 class="font-bold text-center">${part.name}</h3>
+                <p class="text-sm text-gray-400 text-center">$${part.cost.toLocaleString()}</p>
+            `;
+            partElement.addEventListener('click', () => selectPart(part, partType));
+            return partElement;
+        }
+        // Render destination selection
+        function renderDestinations() {
+            const destinationsContainer = document.getElementById('destinations');
+            destinations.forEach(destination => {
+                const destinationElement = document.createElement('div');
+                destinationElement.className = 'planet-card rounded-lg overflow-hidden cursor-pointer relative h-32';
+                destinationElement.style.backgroundImage = `url(${destination.image})`;
+                destinationElement.dataset.destinationId = destination.id;
+                destinationElement.innerHTML = `
+                    <div class="absolute inset-0 bg-black bg-opacity-50 hover:bg-opacity-30 transition-all duration-300 flex items-end p-3">
+                        <div>
+                            <h3 class="font-bold">${destination.name}</h3>
+                            <p class="text-xs">${destination.distance.toLocaleString()} km</p>
+                        </div>
+                    </div>
+                `;
+                destinationElement.addEventListener('click', () => selectDestination(destination));
+                destinationsContainer.appendChild(destinationElement);
+            });
+        }
+        // Select a rocket part
+        function selectPart(part, partType) {
+            // Deselect all parts of this type
+            document.querySelectorAll(`[data-part-type="${partType}"]`).forEach(el => {
+                el.classList.remove('selected-part');
+            });
+            // Select the clicked part
+            event.currentTarget.classList.add('selected-part');
+            // Update current rocket
+            gameState.currentRocket[partType] = part;
+            // Update rocket display
+            updateRocketDisplay();
+            updateUI();
+        }
+        // Select a destination
+        function selectDestination(destination) {
+            // Deselect all destinations
+            document.querySelectorAll('.planet-card').forEach(el => {
+                el.classList.remove('border-2', 'border-yellow-400');
+            });
+            // Select the clicked destination
+            event.currentTarget.classList.add('border-2', 'border-yellow-400');
+            // Update current destination
+            gameState.currentDestination = destination;
+            updateUI();
+        }
+        // Update payload information
+        function updatePayload() {
+            gameState.currentPayload.type = document.getElementById('payload-type').value;
+            gameState.currentPayload.mass = parseInt(document.getElementById('payload-mass').value);
+            updateUI();
+        }
+        // Update rocket display
+        function updateRocketDisplay() {
+            const rocketModel = document.getElementById('rocket-model');
+            rocketModel.innerHTML = '<div class="flame" id="rocket-flame"></div>';
+            // Add parts to the rocket model
+            if (gameState.currentRocket.firstStage) {
+                const firstStage = document.createElement('div');
+                firstStage.className = `first-stage ${gameState.currentRocket.firstStage.color} w-16 mx-auto`;
+                firstStage.style.height = `${gameState.currentRocket.firstStage.height * 10}px`;
+                rocketModel.appendChild(firstStage);
+            }
+            if (gameState.currentRocket.secondStage) {
+                const secondStage = document.createElement('div');
+                secondStage.className = `second-stage ${gameState.currentRocket.secondStage.color} w-12 mx-auto`;
+                secondStage.style.height = `${gameState.currentRocket.secondStage.height * 10}px`;
+                rocketModel.appendChild(secondStage);
+            }
+            if (gameState.currentRocket.fairing && gameState.currentRocket.fairing.id !== 'none') {
+                const fairing = document.createElement('div');
+                fairing.className = `fairing ${gameState.currentRocket.fairing.color} w-16 mx-auto rounded-t-lg`;
+                fairing.style.height = `${gameState.currentRocket.fairing.height * 10}px`;
+                rocketModel.appendChild(fairing);
+            }
+        }
+        // Update UI elements
+        function updateUI() {
+            // Update funds and reputation
+            document.getElementById('funds').textContent = `$${gameState.funds.toLocaleString()}`;
+            document.getElementById('reputation').textContent = gameState.reputation;
+            // Calculate rocket stats
+            let cost = 0;
+            let payloadCapacity = 0;
+            let deltaV = 0;
+            if (gameState.currentRocket.firstStage) {
+                cost += gameState.currentRocket.firstStage.cost;
+                payloadCapacity += gameState.currentRocket.firstStage.thrust * 10;
+                deltaV += gameState.currentRocket.firstStage.thrust * 5;
+            }
+            if (gameState.currentRocket.secondStage) {
+                cost += gameState.currentRocket.secondStage.cost;
+                payloadCapacity += gameState.currentRocket.secondStage.thrust * 5;
+                deltaV += gameState.currentRocket.secondStage.thrust * 3;
+            }
+            if (gameState.currentRocket.fairing) {
+                cost += gameState.currentRocket.fairing.cost;
+            }
+            if (gameState.currentRocket.engines) {
+                cost += gameState.currentRocket.engines.cost;
+                deltaV += gameState.currentRocket.engines.isp * 100;
+            }
+            // Update stats display
+            document.getElementById('delta-v').textContent = `${deltaV.toLocaleString()} m/s`;
+            document.getElementById('payload').textContent = `${payloadCapacity.toLocaleString()} kg`;
+            document.getElementById('rocket-cost').textContent = `$${cost.toLocaleString()}`;
+            // Update launch button state
+            const launchButton = document.getElementById('launch-button');
+            if (isReadyForLaunch()) {
+                launchButton.disabled = false;
+                launchButton.classList.remove('bg-gray-600', 'cursor-not-allowed');
+                launchButton.classList.add('bg-green-600', 'hover:bg-green-700');
+            } else {
+                launchButton.disabled = true;
+                launchButton.classList.remove('bg-green-600', 'hover:bg-green-700');
+                launchButton.classList.add('bg-gray-600', 'cursor-not-allowed');
+            }
+        }
+        // Check if rocket is ready for launch
+        function isReadyForLaunch() {
+            return gameState.currentRocket.firstStage &&
+                   gameState.currentRocket.secondStage &&
+                   gameState.currentRocket.engines &&
+                   gameState.currentDestination &&
+                   gameState.currentPayload.mass > 0;
+        }
+        // Launch the rocket
+        function launchRocket() {
+            if (!isReadyForLaunch()) return;
+            const rocketModel = document.getElementById('rocket-model');
+            const rocketFlame = document.getElementById('rocket-flame');
+            const missionControl = document.querySelector('.mission-control');
+            const launchButton = document.getElementById('launch-button');
+            // Disable launch button during launch
+            launchButton.disabled = true;
+            launchButton.classList.remove('bg-green-600', 'hover:bg-green-700');
+            launchButton.classList.add('bg-gray-600', 'cursor-not-allowed');
+            // Add launching class for animation
+            rocketModel.classList.add('launching');
+            // Calculate mission success chance (simplified)
+            const rocketPower = (gameState.currentRocket.firstStage.thrust +
+                                gameState.currentRocket.secondStage.thrust) / 1000;
+            const difficulty = gameState.currentDestination.difficulty;
+            const successChance = Math.min(0.9, 0.5 + (rocketPower - difficulty) * 0.1);
+            // Calculate mission cost
+            const missionCost = calculateMissionCost();
+            // Update mission control console
+            updateConsole("> Starting launch sequence...");
+            setTimeout(() => updateConsole("> Engine ignition..."), 1000);
+            setTimeout(() => updateConsole("> Liftoff! We have liftoff!"), 2000);
+            setTimeout(() => updateConsole(`> Rocket is on course for ${gameState.currentDestination.name}`), 3000);
+            // Simulate launch sequence
+            setTimeout(() => {
+                // Random mission outcome
+                const isSuccess = Math.random() < successChance;
+                if (isSuccess) {
+                    // Successful mission
+                    setTimeout(() => updateConsole("> First stage separation successful"), 4000);
+                    setTimeout(() => updateConsole("> Second stage ignition"), 5000);
+                    setTimeout(() => updateConsole("> Payload deployment confirmed"), 6000);
+                    setTimeout(() => updateConsole(`> Mission to ${gameState.currentDestination.name} successful!`), 7000);
+                    // Calculate rewards
+                    const reputationGain = gameState.currentDestination.difficulty * 10;
+                    const financialReward = gameState.currentDestination.difficulty * 500000;
+                    setTimeout(() => {
+                        updateConsole(`> Reputation increased by ${reputationGain}`);
+                        updateConsole(`> Financial reward: $${financialReward.toLocaleString()}`);
+                        updateConsole("> Ready for next mission");
+                        // Update game state
+                        gameState.reputation += reputationGain;
+                        gameState.funds += financialReward - missionCost;
+                        // Reset for next launch
+                        resetAfterLaunch();
+                    }, 8000);
+                } else {
+                    // Failed mission
+                    const failureReason = getRandomFailureReason();
+                    setTimeout(() => updateConsole(`> WARNING: ${failureReason}`), 4000);
+                    setTimeout(() => updateConsole("> Attempting to mitigate..."), 5000);
+                    setTimeout(() => updateConsole("> Mission failure confirmed"), 6000);
+                    setTimeout(() => updateConsole("> Investigating root cause"), 7000);
+                    // Calculate penalties
+                    const reputationLoss = gameState.currentDestination.difficulty * 5;
+                    const financialLoss = missionCost * 0.5;
+                    setTimeout(() => {
+                        updateConsole(`> Reputation decreased by ${reputationLoss}`);
+                        updateConsole(`> Financial loss: $${financialLoss.toLocaleString()}`);
+                        updateConsole("> Preparing for next attempt");
+                        // Update game state
+                        gameState.reputation = Math.max(0, gameState.reputation - reputationLoss);
+                        gameState.funds -= financialLoss;
+                        // Reset for next launch
+                        resetAfterLaunch();
+                    }, 8000);
+                }
+            }, 3000);
+        }
+        // Calculate mission cost
+        function calculateMissionCost() {
+            let cost = 0;
+            if (gameState.currentRocket.firstStage) cost += gameState.currentRocket.firstStage.cost;
+            if (gameState.currentRocket.secondStage) cost += gameState.currentRocket.secondStage.cost;
+            if (gameState.currentRocket.fairing) cost += gameState.currentRocket.fairing.cost;
+            if (gameState.currentRocket.engines) cost += gameState.currentRocket.engines.cost;
+            // Add payload cost
+            cost += gameState.currentPayload.mass * 1000;
+            return cost;
+        }
+        // Get random failure reason
+        function getRandomFailureReason() {
+            const reasons = [
+                "First stage engine failure",
+                "Guidance system malfunction",
+                "Structural integrity compromised",
+                "Fuel leak detected",
+                "Second stage separation failure",
+                "Communication loss",
+                "Payload fairing jettison failure",
+                "Trajectory deviation"
+            ];
+            return reasons[Math.floor(Math.random() * reasons.length)];
+        }
+        // Update mission control console
+        function updateConsole(message) {
+            const consoleElement = document.querySelector('.mission-control');
+            const blinkElement = document.querySelector('.blink');
+            if (blinkElement) {
+                blinkElement.remove();
+            }
+            const newMessage = document.createElement('p');
+            newMessage.className = 'console-text';
+            newMessage.textContent = message;
+            consoleElement.appendChild(newMessage);
+            consoleElement.scrollTop = consoleElement.scrollHeight;
+            // Add new blinking cursor
+            const newBlink = document.createElement('p');
+            newBlink.className = 'console-text blink';
+            newBlink.textContent = '> _';
+            consoleElement.appendChild(newBlink);
+            consoleElement.scrollTop = consoleElement.scrollHeight;
+        }
+        // Reset after launch
+        function resetAfterLaunch() {
+            const rocketModel = document.getElementById('rocket-model');
+            const launchButton = document.getElementById('launch-button');
+            // Remove launching class
+            rocketModel.classList.remove('launching');
+            // Re-enable launch button
+            launchButton.disabled = false;
+            launchButton.classList.remove('bg-gray-600', 'cursor-not-allowed');
+            launchButton.classList.add('bg-green-600', 'hover:bg-green-700');
+            // Update UI
+            updateUI();
+        }
+        // Initialize the game when DOM is loaded
+        document.addEventListener('DOMContentLoaded', initGame);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jamesbright/spacex-simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>