Add 1 files

index.html

@@ -63,6 +63,12 @@
             position: relative;
             overflow: hidden;
             box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
+            opacity: 0;
+            transition: opacity 0.5s ease;
+        }
+
+        #terminal.active {
+            opacity: 1;
         }
 
         #terminal::before {
@@ -180,10 +186,6 @@
             color: var(--secondary);
         }
 
-        .hidden {
-            display: none;
-        }
-
         #start-screen {
             position: fixed;
             top: 0;
@@ -198,6 +200,12 @@
             z-index: 200;
             text-align: center;
             pointer-events: all;
+            transition: opacity 0.5s ease;
+        }
+
+        #start-screen.hidden {
+            opacity: 0;
+            pointer-events: none;
         }
 
         #start-title {
@@ -248,6 +256,15 @@
             transform: translateY(1px);
         }
 
+        #start-button.loading {
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; }
+        }
+
         /* Scrollbar styling */
         #output::-webkit-scrollbar {
             width: 5px;
@@ -306,11 +323,11 @@
         <button id="start-button">INITIALIZE SIMULATION</button>
     </div>
 
-    <div id="terminal" class="hidden">
+    <div id="terminal">
         <div id="output"></div>
         <div id="input-container">
             <span id="prompt">></span>
-            <input type="text" id="input" autocomplete="off">
+            <input type="text" id="input" autocomplete="off" disabled>
         </div>
     </div>
 
@@ -592,50 +609,54 @@
         const startButton = document.getElementById('start-button');
         const terminal = document.getElementById('terminal');
         const output = document.getElementById('output');
-        const input = document.getElementById('input');
+        const inputElement = document.getElementById('input');
         const prompt = document.getElementById('prompt');
 
         // Initialize game with enhanced effects
         function initGame() {
+            // Clear any existing typing
+            state.typing = false;
+            
             // Disable button to prevent multiple clicks
             startButton.disabled = true;
-            startButton.style.opacity = '0.5';
-            startButton.style.cursor = 'not-allowed';
             startButton.textContent = "INITIALIZING...";
+            startButton.classList.add('loading');
             
             // Create power effect
             const powerEffect = document.createElement('div');
             powerEffect.className = 'power-on-effect';
             document.body.appendChild(powerEffect);
             
-            // Set timeout for transition to ensure it completes
+            // Hide start screen after animation begins
             setTimeout(() => {
-                // Hide start screen after animation
                 startScreen.classList.add('hidden');
+            }, 200);
+            
+            // Set timeout for transition to ensure it completes
+            setTimeout(() => {
+                // Show terminal
+                terminal.classList.add('active');
+                inputElement.disabled = false;
+                inputElement.focus();
+                state.gameActive = true;
                 
-                // Ensure terminal is properly initialized before showing
-                setTimeout(() => {
-                    terminal.classList.remove('hidden');
-                    input.focus();
-                    state.gameActive = true;
-                    
-                    // Begin typing animation
-                    typeText(`SYSTEM OVERRIDE INITIALIZED\n`, 20, () => {
-                        typeText(`CAREER CRISIS SIMULATION v4.3.1\n\n`, 30, () => {
-                            typeText(`Assessment indicates professional existential threat:\n`, 30, () => {
-                                typeText(`AI counterpart demonstrates superior capabilities\n\n`, 30, () => {
-                                    typeText(`This simulation will challenge your professional identity\n\n`, 30, showJobSelect);
-                                });
+                // Begin typing animation
+                typeText(`SYSTEM OVERRIDE INITIALIZED\n`, 30, () => {
+                    typeText(`CAREER CRISIS SIMULATION v4.3.1\n\n`, 30, () => {
+                        typeText(`Assessment indicates professional existential threat:\n`, 30, () => {
+                            typeText(`AI counterpart demonstrates superior capabilities\n\n`, 30, () => {
+                                typeText(`This simulation will challenge your professional identity\n\n`, 30, showJobSelect);
                             });
                         });
                     });
-                    
-                    // Remove power effect after full transition
-                    setTimeout(() => {
-                        powerEffect.remove();
-                    }, 1000);
-                }, 300); // Added slight delay to ensure CSS transition
-            }, 100);
+                });
+                
+                // Remove power effect after full transition
+                setTimeout(() => {
+                    powerEffect.remove();
+                    startButton.classList.remove('loading');
+                }, 1200);
+            }, 500); // This delay helps with transition timing
         }
 
         // Show job selection with more personality
@@ -655,10 +676,10 @@
                         
                         const tempHandler = (e) => {
                             if (e.key === 'Enter') {
-                                const choice = input.value.trim();
+                                const choice = inputElement.value.trim();
                                 if (['1', '2', '3'].includes(choice)) {
-                                    input.removeEventListener('keypress', tempHandler);
-                                    input.value = '';
+                                    inputElement.removeEventListener('keypress', tempHandler);
+                                    inputElement.value = '';
                                     
                                     const jobsList = Object.keys(jobs);
                                     state.job = jobs[jobsList[choice-1]];
@@ -670,7 +691,7 @@
                             }
                         };
                         
-                        input.addEventListener('keypress', tempHandler);
+                        inputElement.addEventListener('keypress', tempHandler);
                     });
                 });
             });
@@ -708,12 +729,12 @@
                     typeText(`\nSELECT RESPONSE (1-${challenge.options.length}) > `, 50, () => {
                         const tempHandler = (e) => {
                             if (e.key === 'Enter') {
-                                const choice = input.value.trim();
+                                const choice = inputElement.value.trim();
                                 const validChoices = Array.from({length: challenge.options.length}, (_, i) => (i+1).toString());
                                 
                                 if (validChoices.includes(choice)) {
-                                    input.removeEventListener('keypress', tempHandler);
-                                    input.value = '';
+                                    inputElement.removeEventListener('keypress', tempHandler);
+                                    inputElement.value = '';
                                     handleChoice(parseInt(choice), taskIndex);
                                 } else {
                                     output.innerHTML += `<div class="error">INVALID SELECTION. CHOOSE 1-${challenge.options.length}</div>`;
@@ -722,7 +743,7 @@
                             }
                         };
                         
-                        input.addEventListener('keypress', tempHandler);
+                        inputElement.addEventListener('keypress', tempHandler);
                     });
                 });
             });
@@ -858,7 +879,7 @@
                 typeText(`\nDAY ${state.day}: FINAL ANALYSIS\n`, 30, () => {
                     typeText(`Your skills have deteriorated below viable thresholds.\n`, 30, () => {
                         typeText(`Even basic tasks are now managed by ${state.aiName}.\n`, 30, () => {
-                            typeText(`You're kept on staff for "ethical oversight".\n\n`, 30, () => {
+                        typeText(`You're kept on staff for "ethical oversight".\n\n`, 30, () => {
                                 typeText(`<span class="warning">FINAL DIAGNOSIS: FUNCTIONAL OBSOLESCENCE</span>\n`, 40, () => {
                                     endGame();
                                 });
@@ -933,17 +954,23 @@
                 typeText(`Press ENTER to restart existential crisis loop`, 30);
             });
             
-            input.addEventListener('keypress', (e) => {
+            inputElement.addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
-                    location.reload();
+                    window.location.reload();
                 }
             });
         }
 
         // Cyberpunk typing effect
         function typeText(text, speed = 30, callback = null) {
+            if (state.typing) {
+                // Finish current typing before starting new one
+                setTimeout(() => typeText(text, speed, callback), 100);
+                return;
+            }
+            
             state.typing = true;
-            input.disabled = true;
+            inputElement.disabled = true;
             let i = 0;
             const typingEffect = setInterval(() => {
                 if (i < text.length) {
@@ -964,22 +991,27 @@
                     clearInterval(typingEffect);
                     output.innerHTML += '<br>';
                     state.typing = false;
-                    input.disabled = false;
+                    inputElement.disabled = false;
                     if (callback) callback();
-                    input.focus();
+                    inputElement.focus();
                 }
             }, speed);
         }
 
         // Initialize button with improved UX
-        window.addEventListener('DOMContentLoaded', () => {
-            startButton.addEventListener('click', (e) => {
+        document.addEventListener('DOMContentLoaded', () => {
+            // Clean start button event listeners to prevent duplicates
+            const newButton = startButton.cloneNode(true);
+            startButton.parentNode.replaceChild(newButton, startButton);
+            const cleanButton = document.getElementById('start-button');
+            
+            cleanButton.addEventListener('click', (e) => {
                 e.preventDefault();
                 initGame();
             });
             
             // Keyboard support
-            startButton.addEventListener('keypress', (e) => {
+            cleanButton.addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
                     e.preventDefault();
                     initGame();
@@ -987,13 +1019,16 @@
             });
             
             // Focus visual
-            startButton.addEventListener('focus', () => {
-                startButton.style.boxShadow = '0 0 10px rgba(0, 255, 65, 0.7)';
+            cleanButton.addEventListener('focus', () => {
+                cleanButton.style.boxShadow = '0 0 10px rgba(0, 255, 65, 0.7)';
             });
             
-            startButton.addEventListener('blur', () => {
-                startButton.style.boxShadow = '';
+            cleanButton.addEventListener('blur', () => {
+                cleanButton.style.boxShadow = '';
             });
+            
+            // Pre-focus the button for better keyboard UX
+            cleanButton.focus();
         });
     </script>
 </body>