Spaces:

jamesbright
/

spacex-simulator

Running

App Files Files Community

jamesbright commited on Apr 7

Commit

5db2c16

verified ·

1 Parent(s): d6002c5

Add 1 files

Browse files

Files changed (1) hide show

index.html +273 -98

index.html CHANGED Viewed

@@ -56,6 +56,44 @@
             position: relative;
             height: 400px;
             overflow: hidden;
         }
         .rocket-3d {
@@ -65,6 +103,7 @@
             bottom: 0;
             left: 50%;
             transform: translateX(-50%);
         }
         .flame {
@@ -150,7 +189,7 @@
             100% { opacity: 1; }
         }
-        /* New launch effects */
         .launch-smoke {
             position: absolute;
             bottom: 0;
@@ -162,6 +201,7 @@
             border-radius: 50%;
             filter: blur(10px);
             opacity: 0;
         }
         .launching .launch-smoke {
@@ -274,6 +314,7 @@
             justify-content: center;
             opacity: 0;
             transform: scale(0);
         }
         .success-animate {
@@ -285,6 +326,50 @@
             50% { transform: scale(1.2); opacity: 1; }
             100% { transform: scale(1); opacity: 1; }
         }
     </style>
 </head>
 <body>
@@ -303,7 +388,7 @@
                 <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>
@@ -325,8 +410,11 @@
                     <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" id="rocket-display">
                             <div class="rocket-3d" id="rocket-model">
-                                <!-- Rocket parts will be added here by JavaScript -->
                                 <div class="flame" id="rocket-flame"></div>
                                 <div class="launch-smoke"></div>
                             </div>
@@ -477,47 +565,75 @@
             }
         }
-        // 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,
@@ -582,7 +698,7 @@
             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>
@@ -669,22 +785,34 @@
             // 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);
             }
         }
@@ -754,6 +882,10 @@
             const rocketModel = document.getElementById('rocket-model');
             const rocketDisplay = document.getElementById('rocket-display');
             const countdownElement = document.getElementById('countdown');
             const stageSeparation = document.getElementById('stage-separation');
             const successMarker = document.getElementById('success-marker');
@@ -761,6 +893,14 @@
             const launchButton = document.getElementById('launch-button');
             const missionName = document.getElementById('mission-name').value || `Mission ${Math.floor(Math.random() * 1000)}`;
             // Disable launch button during launch
             launchButton.disabled = true;
             launchButton.classList.remove('bg-green-600', 'hover:bg-green-700');
@@ -774,6 +914,7 @@
             // Reset rocket position
             rocketModel.style.bottom = '0';
             rocketModel.style.transform = 'translateX(-50%)';
             // Play launch sound
             playSound('launch');
@@ -832,93 +973,117 @@
                     rocketModel.classList.add('rocket-ascent');
                     rocketModel.classList.remove('launch-shake');
-                    // Random mission outcome
-                    const isSuccess = Math.random() < successChance;
-                    if (isSuccess) {
-                        // Successful mission
-                        setTimeout(() => {
-                            updateConsole("> First stage separation successful");
-                            // Show stage separation effect
-                            stageSeparation.classList.add('separate');
-                            playSound('separation');
                             setTimeout(() => {
-                                stageSeparation.classList.remove('separate');
-                                updateConsole("> Second stage ignition");
                                 setTimeout(() => {
-                                    updateConsole("> Payload deployment confirmed");
                                     setTimeout(() => {
-                                        updateConsole(`> Mission to ${gameState.currentDestination.name} successful!`);
-                                        // Show success marker
-                                        successMarker.classList.add('success-animate');
-                                        playSound('success');
-                                        // 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();
                                         }, 2000);
                                     }, 2000);
-                                }, 2000);
-                            }, 1000);
-                        }, 3000);
-                    } else {
-                        // Failed mission
-                        const failureTime = 2000 + Math.random() * 3000;
-                        const failureReason = getRandomFailureReason();
-                        setTimeout(() => {
-                            // Show explosion
-                            explosion.style.left = rocketModel.style.left;
-                            explosion.style.top = rocketModel.style.top;
-                            explosion.classList.add('explode');
-                            playSound('explosion');
-                            // Hide rocket
-                            rocketModel.style.opacity = '0';
-                            updateConsole(`> WARNING: ${failureReason}`);
-                            updateConsole("> Attempting to mitigate...");
                             setTimeout(() => {
-                                updateConsole("> Mission failure confirmed");
-                                updateConsole("> Investigating root cause");
-                                // 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();
                                 }, 2000);
-                            }, 2000);
-                        }, failureTime);
-                    }
                 }, 1000);
             }
         }
@@ -1001,6 +1166,10 @@
         // Reset after launch
         function resetAfterLaunch() {
             const rocketModel = document.getElementById('rocket-model');
             const launchButton = document.getElementById('launch-button');
             const explosion = document.getElementById('explosion');
             const successMarker = document.getElementById('success-marker');
@@ -1014,6 +1183,12 @@
             stageSeparation.classList.remove('separate');
             countdownElement.classList.remove('countdown-animate');
             // Reset rocket position and visibility
             rocketModel.style.bottom = '0';
             rocketModel.style.transform = 'translateX(-50%)';

             position: relative;
             height: 400px;
             overflow: hidden;
+            background: linear-gradient(to bottom, #000000 0%, #000428 100%);
+        }
+        .space-view {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('https://images.unsplash.com/photo-1506318137071-a8e06380a023?q=80&w=3000') no-repeat center center;
+            background-size: cover;
+            opacity: 0;
+            transition: opacity 1s ease;
+        }
+        .space-view.active {
+            opacity: 1;
+        }
+        .planet-arrival {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background-size: cover;
+            background-position: center;
+            box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
+            opacity: 0;
+            transition: all 1s ease;
+            z-index: 15;
+        }
+        .planet-arrival.active {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1.5);
         }
         .rocket-3d {
             bottom: 0;
             left: 50%;
             transform: translateX(-50%);
+            z-index: 10;
         }
         .flame {
             100% { opacity: 1; }
         }
+        /* Launch effects */
         .launch-smoke {
             position: absolute;
             bottom: 0;
             border-radius: 50%;
             filter: blur(10px);
             opacity: 0;
+            z-index: 5;
         }
         .launching .launch-smoke {
             justify-content: center;
             opacity: 0;
             transform: scale(0);
+            z-index: 25;
         }
         .success-animate {
             50% { transform: scale(1.2); opacity: 1; }
             100% { transform: scale(1); opacity: 1; }
         }
+        .rocket-component {
+            width: 100%;
+            height: 100%;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .rocket-in-space {
+            position: absolute;
+            width: 100px;
+            height: 200px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            opacity: 0;
+            transition: all 1s ease;
+            z-index: 15;
+        }
+        .rocket-in-space.active {
+            opacity: 1;
+        }
+        .arrival-message {
+            position: absolute;
+            top: 70%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            text-align: center;
+            opacity: 0;
+            transition: opacity 1s ease;
+            z-index: 30;
+            width: 80%;
+            max-width: 500px;
+        }
+        .arrival-message.active {
+            opacity: 1;
+        }
     </style>
 </head>
 <body>
                 <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">$100,000,000</span>
                     </div>
                     <div class="hidden md:flex items-center space-x-2">
                         <i class="fas fa-star text-blue-400"></i>
                     <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" id="rocket-display">
+                            <div class="space-view" id="space-view"></div>
+                            <div class="planet-arrival" id="planet-arrival"></div>
+                            <div class="rocket-in-space" id="rocket-in-space"></div>
+                            <div class="arrival-message" id="arrival-message"></div>
                             <div class="rocket-3d" id="rocket-model">
                                 <div class="flame" id="rocket-flame"></div>
                                 <div class="launch-smoke"></div>
                             </div>
             }
         }
+        // Rocket parts data with actual images
         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: 'https://www.nasa.gov/wp-content/uploads/2023/06/sls_artistconcept_0.jpg?w=1536' }
             ],
             secondStages: [
+                { id: 'falcon9-upper', name: 'Falcon 9 Upper', cost: 2000000, mass: 5000, thrust: 934, height: 6,
+                  color: 'bg-white', image: 'https://www.spacex.com/static/images/falcon9/falcon9-upper-stage.png' },
+                { id: 'falcon-heavy-upper', name: 'Falcon Heavy Upper', cost: 3000000, mass: 8000, thrust: 934, height: 8,
+                  color: 'bg-gray-300', image: 'https://www.spacex.com/static/images/falcon-heavy/falcon-heavy-upper-stage.png' },
+                { id: 'starship-upper', name: 'Starship Upper', cost: 5000000, mass: 15000, thrust: 3000, height: 12,
+                  color: 'bg-gray-400', image: 'https://www.spacex.com/static/images/starship/starship-upper-stage.png' },
+                { id: 'nova-upper', name: 'Nova Upper', cost: 7000000, mass: 20000, thrust: 5000, height: 14,
+                  color: 'bg-blue-200', image: 'https://www.nasa.gov/wp-content/uploads/2023/06/sls_upperstage_0.jpg?w=1536' }
             ],
             fairings: [
+                { id: 'standard', name: 'Standard Fairing', cost: 1000000, mass: 2000, height: 5,
+                  color: 'bg-white', image: 'https://www.spacex.com/static/images/falcon9/fairing.png' },
+                { id: 'extended', name: 'Extended Fairing', cost: 1500000, mass: 3000, height: 7,
+                  color: 'bg-gray-300', image: 'https://www.spacex.com/static/images/falcon-heavy/extended-fairing.png' },
+                { id: 'heavy', name: 'Heavy Fairing', cost: 2000000, mass: 4000, height: 8,
+                  color: 'bg-gray-400', image: 'https://www.spacex.com/static/images/starship/heavy-fairing.png' },
+                { 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: 'https://www.spacex.com/static/images/falcon9/merlin-engine.png' },
+                { id: 'raptor', name: 'Raptor', cost: 2000000, thrust: 2000, isp: 330,
+                  color: 'bg-gray-600', image: 'https://www.spacex.com/static/images/starship/raptor-engine.png' },
+                { id: 'be-4', name: 'BE-4', cost: 2500000, thrust: 2400, isp: 340,
+                  color: 'bg-blue-600', image: 'https://www.blueorigin.com/assets/engines/be4/be4-engine.jpg' },
+                { id: 'rs-25', name: 'RS-25', cost: 3000000, thrust: 1860, isp: 366,
+                  color: 'bg-red-600', image: 'https://www.nasa.gov/wp-content/uploads/2023/06/rs25-engine.jpg?w=1536' }
             ]
         };
+        // Planets data with actual images
         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',
+              arrivalImage: 'https://science.nasa.gov/wp-content/uploads/2023/09/earth-from-space.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',
+              arrivalImage: 'https://science.nasa.gov/wp-content/uploads/2023/09/moon-surface.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',
+              arrivalImage: 'https://science.nasa.gov/wp-content/uploads/2023/09/mars-surface.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',
+              arrivalImage: 'https://science.nasa.gov/wp-content/uploads/2023/09/jupiter-closeup.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',
+              arrivalImage: 'https://science.nasa.gov/wp-content/uploads/2023/09/saturn-rings.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',
+              arrivalImage: 'https://science.nasa.gov/wp-content/uploads/2023/09/pluto-surface.jpg?w=1536' }
         ];
         // Game state
         let gameState = {
+            funds: 100000000, // $100,000,000 initial balance
             reputation: 100,
             currentRocket: {
                 firstStage: null,
             partElement.dataset.partType = partType;
             partElement.innerHTML = `
+                <div class="w-16 h-16 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>
             // Add parts to the rocket model
             if (gameState.currentRocket.firstStage) {
                 const firstStage = document.createElement('div');
+                firstStage.className = `first-stage w-16 mx-auto`;
                 firstStage.style.height = `${gameState.currentRocket.firstStage.height * 10}px`;
+                firstStage.style.backgroundImage = `url(${gameState.currentRocket.firstStage.image})`;
+                firstStage.style.backgroundSize = 'contain';
+                firstStage.style.backgroundRepeat = 'no-repeat';
+                firstStage.style.backgroundPosition = 'center';
                 rocketModel.appendChild(firstStage);
             }
             if (gameState.currentRocket.secondStage) {
                 const secondStage = document.createElement('div');
+                secondStage.className = `second-stage w-12 mx-auto`;
                 secondStage.style.height = `${gameState.currentRocket.secondStage.height * 10}px`;
+                secondStage.style.backgroundImage = `url(${gameState.currentRocket.secondStage.image})`;
+                secondStage.style.backgroundSize = 'contain';
+                secondStage.style.backgroundRepeat = 'no-repeat';
+                secondStage.style.backgroundPosition = 'center';
                 rocketModel.appendChild(secondStage);
             }
             if (gameState.currentRocket.fairing && gameState.currentRocket.fairing.id !== 'none') {
                 const fairing = document.createElement('div');
+                fairing.className = `fairing w-16 mx-auto rounded-t-lg`;
                 fairing.style.height = `${gameState.currentRocket.fairing.height * 10}px`;
+                fairing.style.backgroundImage = `url(${gameState.currentRocket.fairing.image})`;
+                fairing.style.backgroundSize = 'contain';
+                fairing.style.backgroundRepeat = 'no-repeat';
+                fairing.style.backgroundPosition = 'center';
                 rocketModel.appendChild(fairing);
             }
         }
             const rocketModel = document.getElementById('rocket-model');
             const rocketDisplay = document.getElementById('rocket-display');
+            const spaceView = document.getElementById('space-view');
+            const planetArrival = document.getElementById('planet-arrival');
+            const rocketInSpace = document.getElementById('rocket-in-space');
+            const arrivalMessage = document.getElementById('arrival-message');
             const countdownElement = document.getElementById('countdown');
             const stageSeparation = document.getElementById('stage-separation');
             const successMarker = document.getElementById('success-marker');
             const launchButton = document.getElementById('launch-button');
             const missionName = document.getElementById('mission-name').value || `Mission ${Math.floor(Math.random() * 1000)}`;
+            // Reset space view elements
+            spaceView.classList.remove('active');
+            planetArrival.classList.remove('active');
+            rocketInSpace.classList.remove('active');
+            arrivalMessage.classList.remove('active');
+            planetArrival.style.backgroundImage = '';
+            rocketInSpace.style.backgroundImage = '';
             // Disable launch button during launch
             launchButton.disabled = true;
             launchButton.classList.remove('bg-green-600', 'hover:bg-green-700');
             // Reset rocket position
             rocketModel.style.bottom = '0';
             rocketModel.style.transform = 'translateX(-50%)';
+            rocketModel.style.opacity = '1';
             // Play launch sound
             playSound('launch');
                     rocketModel.classList.add('rocket-ascent');
                     rocketModel.classList.remove('launch-shake');
+                    // Show space view after rocket leaves the screen
+                    setTimeout(() => {
+                        spaceView.classList.add('active');
+                        // Show rocket in space
+                        rocketInSpace.style.backgroundImage = `url(${gameState.currentRocket.firstStage.image})`;
+                        rocketInSpace.style.left = '50%';
+                        rocketInSpace.style.top = '50%';
+                        rocketInSpace.style.transform = 'translate(-50%, -50%)';
+                        rocketInSpace.classList.add('active');
+                        // Random mission outcome
+                        const isSuccess = Math.random() < successChance;
+                        if (isSuccess) {
+                            // Successful mission
                             setTimeout(() => {
+                                updateConsole("> First stage separation successful");
+                                // Show stage separation effect
+                                stageSeparation.classList.add('separate');
+                                playSound('separation');
                                 setTimeout(() => {
+                                    stageSeparation.classList.remove('separate');
+                                    updateConsole("> Second stage ignition");
                                     setTimeout(() => {
+                                        updateConsole("> Payload deployment confirmed");
+                                        // Show destination planet
+                                        planetArrival.style.backgroundImage = `url(${gameState.currentDestination.arrivalImage})`;
+                                        planetArrival.classList.add('active');
+                                        // Show arrival message
+                                        arrivalMessage.innerHTML = `
+                                            <h3 class="orbitron text-xl text-green-400 mb-2">MISSION SUCCESS</h3>
+                                            <p>${missionName} has successfully reached ${gameState.currentDestination.name}!</p>
+                                            <p class="mt-2 text-sm">Payload delivered: ${gameState.currentPayload.type}</p>
+                                        `;
+                                        arrivalMessage.classList.add('active');
                                         setTimeout(() => {
+                                            updateConsole(`> Mission to ${gameState.currentDestination.name} successful!`);
+                                            // Show success marker
+                                            successMarker.classList.add('success-animate');
+                                            playSound('success');
+                                            // 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();
+                                            }, 2000);
                                         }, 2000);
                                     }, 2000);
+                                }, 1000);
+                            }, 3000);
+                        } else {
+                            // Failed mission
+                            const failureTime = 2000 + Math.random() * 3000;
+                            const failureReason = getRandomFailureReason();
                             setTimeout(() => {
+                                // Show explosion
+                                explosion.style.left = rocketInSpace.style.left;
+                                explosion.style.top = rocketInSpace.style.top;
+                                explosion.classList.add('explode');
+                                playSound('explosion');
+                                // Hide rocket
+                                rocketInSpace.style.opacity = '0';
+                                updateConsole(`> WARNING: ${failureReason}`);
+                                updateConsole("> Attempting to mitigate...");
                                 setTimeout(() => {
+                                    updateConsole("> Mission failure confirmed");
+                                    updateConsole("> Investigating root cause");
+                                    // 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();
+                                    }, 2000);
                                 }, 2000);
+                            }, failureTime);
+                        }
+                    }, 3000);
                 }, 1000);
             }
         }
         // Reset after launch
         function resetAfterLaunch() {
             const rocketModel = document.getElementById('rocket-model');
+            const spaceView = document.getElementById('space-view');
+            const planetArrival = document.getElementById('planet-arrival');
+            const rocketInSpace = document.getElementById('rocket-in-space');
+            const arrivalMessage = document.getElementById('arrival-message');
             const launchButton = document.getElementById('launch-button');
             const explosion = document.getElementById('explosion');
             const successMarker = document.getElementById('success-marker');
             stageSeparation.classList.remove('separate');
             countdownElement.classList.remove('countdown-animate');
+            // Reset space view elements
+            spaceView.classList.remove('active');
+            planetArrival.classList.remove('active');
+            rocketInSpace.classList.remove('active');
+            arrivalMessage.classList.remove('active');
             // Reset rocket position and visibility
             rocketModel.style.bottom = '0';
             rocketModel.style.transform = 'translateX(-50%)';