Add 1 files

index.html

@@ -53,11 +53,18 @@
         
         .rocket-display {
             perspective: 1000px;
+            position: relative;
+            height: 400px;
+            overflow: hidden;
         }
         
         .rocket-3d {
             transform-style: preserve-3d;
             transition: transform 0.5s ease;
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
         }
         
         .flame {
@@ -142,6 +149,142 @@
             50% { opacity: 0.5; }
             100% { opacity: 1; }
         }
+        
+        /* New launch effects */
+        .launch-smoke {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 200px;
+            height: 100px;
+            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(200,200,200,0.5) 50%, rgba(100,100,100,0) 100%);
+            border-radius: 50%;
+            filter: blur(10px);
+            opacity: 0;
+        }
+        
+        .launching .launch-smoke {
+            opacity: 1;
+            animation: smoke-expand 2s forwards;
+        }
+        
+        @keyframes smoke-expand {
+            0% { transform: translateX(-50%) scale(0.5); opacity: 1; }
+            100% { transform: translateX(-50%) scale(3); opacity: 0; }
+        }
+        
+        .launch-shake {
+            animation: shake 0.5s linear infinite;
+        }
+        
+        @keyframes shake {
+            0% { transform: translateX(-50%) translateY(0); }
+            25% { transform: translateX(-50%) translateY(-2px) translateX(2px); }
+            50% { transform: translateX(-50%) translateY(0); }
+            75% { transform: translateX(-50%) translateY(2px) translateX(-2px); }
+            100% { transform: translateX(-50%) translateY(0); }
+        }
+        
+        .rocket-ascent {
+            animation: rocket-fly 8s forwards;
+        }
+        
+        @keyframes rocket-fly {
+            0% { bottom: 0; transform: translateX(-50%); }
+            20% { bottom: 20%; transform: translateX(-50%); }
+            40% { bottom: 40%; transform: translateX(-50%); }
+            60% { bottom: 60%; transform: translateX(-50%); }
+            80% { bottom: 80%; transform: translateX(-50%); }
+            100% { bottom: 120%; transform: translateX(-50%); }
+        }
+        
+        .explosion {
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            background: radial-gradient(circle, rgba(255,100,0,0.8) 0%, rgba(255,50,0,0) 70%);
+            border-radius: 50%;
+            filter: blur(20px);
+            opacity: 0;
+            transform: scale(0);
+            z-index: 10;
+        }
+        
+        .explode {
+            animation: explosion 1s forwards;
+        }
+        
+        @keyframes explosion {
+            0% { transform: scale(0); opacity: 1; }
+            100% { transform: scale(1); opacity: 0; }
+        }
+        
+        .countdown {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 5rem;
+            color: white;
+            text-shadow: 0 0 10px red;
+            opacity: 0;
+            z-index: 20;
+        }
+        
+        .countdown-animate {
+            animation: countdown 1s forwards;
+        }
+        
+        @keyframes countdown {
+            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
+            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+        }
+        
+        .stage-separation {
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            background: white;
+            opacity: 0.8;
+            z-index: 5;
+            transform: scaleX(0);
+        }
+        
+        .separate {
+            animation: separate 0.5s forwards;
+        }
+        
+        @keyframes separate {
+            0% { transform: scaleX(0); opacity: 0; }
+            100% { transform: scaleX(1); opacity: 0.8; }
+        }
+        
+        .success-marker {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            background: rgba(0, 255, 0, 0.2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transform: scale(0);
+        }
+        
+        .success-animate {
+            animation: success 1s forwards;
+        }
+        
+        @keyframes success {
+            0% { transform: scale(0); opacity: 0; }
+            50% { transform: scale(1.2); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+        }
     </style>
 </head>
 <body>
@@ -181,10 +324,17 @@
                     <!-- 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">
+                        <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>
+                            <div class="explosion" id="explosion"></div>
+                            <div class="countdown" id="countdown"></div>
+                            <div class="stage-separation" id="stage-separation"></div>
+                            <div class="success-marker" id="success-marker">
+                                <i class="fas fa-check-circle text-3xl text-green-500"></i>
                             </div>
                         </div>
                         <div class="mt-6 grid grid-cols-3 gap-4">
@@ -206,7 +356,7 @@
                     <!-- 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">
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="parts-container">
                             <!-- Parts will be added here by JavaScript -->
                         </div>
                     </div>
@@ -228,7 +378,7 @@
                         <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">
+                        <div class="mission-control w-full bg-gray-800 rounded-lg p-4 h-48 overflow-y-auto" id="mission-console">
                             <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>
@@ -397,7 +547,7 @@
         
         // Render rocket parts selection
         function renderParts() {
-            const partsContainer = document.querySelector('.grid.grid-cols-2.md\\:grid-cols-4.gap-4');
+            const partsContainer = document.getElementById('parts-container');
             
             // First stages
             rocketParts.firstStages.forEach(part => {
@@ -514,7 +664,7 @@
         // Update rocket display
         function updateRocketDisplay() {
             const rocketModel = document.getElementById('rocket-model');
-            rocketModel.innerHTML = '<div class="flame" id="rocket-flame"></div>';
+            rocketModel.innerHTML = '<div class="flame" id="rocket-flame"></div><div class="launch-smoke"></div>';
             
             // Add parts to the rocket model
             if (gameState.currentRocket.firstStage) {
@@ -603,17 +753,30 @@
             if (!isReadyForLaunch()) return;
             
             const rocketModel = document.getElementById('rocket-model');
-            const rocketFlame = document.getElementById('rocket-flame');
-            const missionControl = document.querySelector('.mission-control');
+            const rocketDisplay = document.getElementById('rocket-display');
+            const countdownElement = document.getElementById('countdown');
+            const stageSeparation = document.getElementById('stage-separation');
+            const successMarker = document.getElementById('success-marker');
+            const explosion = document.getElementById('explosion');
             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');
             launchButton.classList.add('bg-gray-600', 'cursor-not-allowed');
             
-            // Add launching class for animation
-            rocketModel.classList.add('launching');
+            // Clear previous animations
+            rocketModel.classList.remove('launching', 'launch-shake', 'rocket-ascent');
+            explosion.classList.remove('explode');
+            successMarker.classList.remove('success-animate');
+            
+            // Reset rocket position
+            rocketModel.style.bottom = '0';
+            rocketModel.style.transform = 'translateX(-50%)';
+            
+            // Play launch sound
+            playSound('launch');
             
             // Calculate mission success chance (simplified)
             const rocketPower = (gameState.currentRocket.firstStage.thrust + 
@@ -625,66 +788,158 @@
             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;
+            updateConsole(`> Starting ${missionName} launch sequence...`);
+            
+            // Countdown sequence
+            let count = 5;
+            const countdownInterval = setInterval(() => {
+                countdownElement.textContent = count;
+                countdownElement.classList.add('countdown-animate');
                 
-                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;
+                // Play countdown sound
+                playSound('countdown');
+                
+                setTimeout(() => {
+                    countdownElement.classList.remove('countdown-animate');
+                }, 900);
+                
+                if (count === 0) {
+                    clearInterval(countdownInterval);
+                    countdownElement.textContent = 'LIFTOFF!';
+                    countdownElement.classList.add('countdown-animate');
                     
                     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();
+                        countdownElement.classList.remove('countdown-animate');
+                        startLaunchSequence();
+                    }, 1000);
+                }
+                
+                count--;
+            }, 1000);
+            
+            function startLaunchSequence() {
+                // Add launching effects
+                rocketModel.classList.add('launching', 'launch-shake');
+                
+                // Update console
+                updateConsole("> Engine ignition...");
+                updateConsole("> All systems nominal");
+                
+                setTimeout(() => {
+                    updateConsole("> Liftoff! We have liftoff!");
                     
-                    setTimeout(() => updateConsole(`> WARNING: ${failureReason}`), 4000);
-                    setTimeout(() => updateConsole("> Attempting to mitigate..."), 5000);
-                    setTimeout(() => updateConsole("> Mission failure confirmed"), 6000);
-                    setTimeout(() => updateConsole("> Investigating root cause"), 7000);
+                    // Start ascent animation
+                    rocketModel.classList.add('rocket-ascent');
+                    rocketModel.classList.remove('launch-shake');
                     
-                    // Calculate penalties
-                    const reputationLoss = gameState.currentDestination.difficulty * 5;
-                    const financialLoss = missionCost * 0.5;
+                    // Random mission outcome
+                    const isSuccess = Math.random() < successChance;
                     
-                    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;
+                    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();
                         
-                        // Reset for next launch
-                        resetAfterLaunch();
-                    }, 8000);
-                }
-            }, 3000);
+                        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);
+            }
+        }
+        
+        // Play sound effects
+        function playSound(type) {
+            // In a real implementation, you would use the Web Audio API or preloaded audio elements
+            // This is a placeholder that would be replaced with actual sound effects
+            console.log(`Playing sound: ${type}`);
+            
+            // For demonstration purposes, we'll just log the sound that would play
+            const sounds = {
+                'countdown': 'beep.mp3',
+                'launch': 'rocket_launch.mp3',
+                'separation': 'stage_separation.mp3',
+                'success': 'mission_success.mp3',
+                'explosion': 'explosion.mp3'
+            };
+            
+            // In a real app, you would play the corresponding sound file
+            // new Audio(sounds[type]).play();
         }
         
         // Calculate mission cost
@@ -720,8 +975,8 @@
         
         // Update mission control console
         function updateConsole(message) {
-            const consoleElement = document.querySelector('.mission-control');
-            const blinkElement = document.querySelector('.blink');
+            const consoleElement = document.getElementById('mission-console');
+            const blinkElement = consoleElement.querySelector('.blink');
             
             if (blinkElement) {
                 blinkElement.remove();
@@ -747,9 +1002,25 @@
         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');
+            const stageSeparation = document.getElementById('stage-separation');
+            const countdownElement = document.getElementById('countdown');
+            
+            // Remove all animation classes
+            rocketModel.classList.remove('launching', 'launch-shake', 'rocket-ascent');
+            explosion.classList.remove('explode');
+            successMarker.classList.remove('success-animate');
+            stageSeparation.classList.remove('separate');
+            countdownElement.classList.remove('countdown-animate');
+            
+            // Reset rocket position and visibility
+            rocketModel.style.bottom = '0';
+            rocketModel.style.transform = 'translateX(-50%)';
+            rocketModel.style.opacity = '1';
             
-            // Remove launching class
-            rocketModel.classList.remove('launching');
+            // Clear countdown text
+            countdownElement.textContent = '';
             
             // Re-enable launch button
             launchButton.disabled = false;