// hud.js import { DebugPanel } from 'debugPanel'; import { SpawnOptionsMenu } from 'SpawnOptionsMenu'; import { MAX_SLOW_MO_ENERGY_MS } from 'PlayerConfig'; import { updateMouseSensitivity } from 'config'; function applyStyles(el, styles) { Object.assign(el.style, styles); } /** * LoadingIndicator manages the display of a full-screen loading overlay. */ class LoadingIndicator { constructor(container) { this.container = container; this.element = null; } init() { if (this.element) return; this.element = document.createElement('div'); this.element.id = 'loading-indicator'; applyStyles(this.element, { position: 'fixed', top: '0', left: '0', width: '100%', height: '100%', display: 'none', justifyContent: 'center', alignItems: 'center', fontSize: '20px', fontFamily: 'Arial, sans-serif', color: 'white', backgroundColor: 'rgba(0,0,0,0.85)', zIndex: '1000', textAlign: 'center', padding: '1em', }); this.container.appendChild(this.element); } show(message = 'Loading assets... Please wait.', isError = false) { this.init(); this.element.textContent = message; this.element.style.color = isError ? 'red' : 'white'; this.element.style.display = 'flex'; } hide() { if (this.element) { this.element.remove(); this.element = null; } } } /** * HUD manages debugging info, crosshair, and game over screen. */ class HUD { constructor(container) { this.container = container || document.getElementById('renderDiv') || document.body; this.debugPanel = null; this.crosshair = null; this.gameOverScreen = null; this.levelClearScreen = null; // Added for level clear message this.spawnOptionsMenu = null; // Added for SpawnOptionsMenu this.slowMoEnergyBarContainer = null; // For the background/container of the energy bar this.slowMoEnergyBarFill = null; // For the fill part of the energy bar this.fadeScreen = null; // For fade-to-black transitions this.ammoCounterElement = null; // For displaying ammo count this.attackTipElement = null; // For the [LEFT CLICK] TO ATTACK tip this.pickupWeaponTipElement = null; // For the [RIGHT CLICK] TO PICK UP A WEAPON tip this.slideSlowMoTipElement = null; // For the HOLD SHIFT TO SLIDE IN SLOW-MOTION tip this.slideSlowMoTipDelayTimer = 0; // Timer for delaying the slide/slow-mo tip this.slideSlowMoTipDelayDuration = 0; // Duration for the slide/slow-mo tip delay this.attackTipDelayTimer = 0; // Timer for delaying the attack tip this.attackTipDelayDuration = 0; // Duration for the delay this.pickupWeaponTipDelayTimer = 0; // Timer for delaying the pickup weapon tip this.pickupWeaponTipDelayDuration = 0; // Duration for the pickup weapon tip delay this.settingsMenuElement = null; // Main modal element for settings this.settingsMenuContentElement = null; // Inner content area for React component this.isSettingsMenuOpen = false; // State for settings menu visibility this.settingsTipElement = null; // For the "Press CAPS LOCK" tip this.onSpawnOptionConfirmedCallback = null; this._init(); } _init() { this.debugPanel = new DebugPanel(this.container); this._createStyles(); this._createCrosshair(); this._createGameOverScreen(); this._createLevelClearScreen(); // Added call to create level clear screen this._createSpawnOptionsMenu(); // Added call to create spawn options menu this._createSlowMoEnergyBar(); // Add the slow-mo energy bar this._createFadeScreen(); // Add the fade screen this._createAmmoCounter(); // Add the ammo counter this._createAttackTip(); // Add the attack tip this._createPickupWeaponTip(); // Add the pickup weapon tip this._createSlideSlowMoTip(); // Add the slide slow-motion tip this._createSettingsMenu(); // Add the settings menu container this._createSettingsTip(); // Add the settings tip element } _createSpawnOptionsMenu() { this.spawnOptionsMenu = new SpawnOptionsMenu(this.container, (selectedOption) => { // The menu hides itself now due to changes in SpawnOptionsMenu.js if (this.onSpawnOptionConfirmedCallback) { this.onSpawnOptionConfirmedCallback(selectedOption); } }); } _createStyles() { if (document.getElementById('hud-styles')) return; const style = document.createElement('style'); style.id = 'hud-styles'; // Initialize textContent, then append more styles style.textContent = ` /* Base HUD styles */ .crosshair { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; pointer-events: none; z-index: 10; } .crosshair::before, .crosshair::after { content: ''; position: absolute; background-color: rgba(255,255,255,0.8); box-shadow: 0 0 5px rgba(0,0,0,0.5); } .crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .crosshair::after { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } #game-over-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(0,0,0,0.8); color: white; align-items: center; justify-content: center; flex-direction: column; z-index: 1001; text-align: center; } #game-over-screen img { max-width: 70%; max-height: 40vh; margin-bottom: 20px; height: auto; } #level-clear-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(10, 10, 10, 0.85); /* Darker, less transparent than game over */ color: white; align-items: center; justify-content: center; flex-direction: column; z-index: 1002; /* Higher than game over, but below critical UI if any */ text-align: center; font-family: 'Arial Black', Gadget, sans-serif; /* Chunky, bold font */ font-weight: 900; font-size: clamp(3rem, 15vw, 10rem); /* Responsive font size */ text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #fade-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0; pointer-events: none; /* Allow clicks through when invisible */ z-index: 2000; /* Very high, above level clear but below critical UI if any */ transition: opacity 1s ease-in-out; } .slow-mo-energy-bar-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 39%; /* Increased width by approx 30% (30 * 1.3 = 39) */ max-width: 338px; /* Increased max-width by approx 30% (260 * 1.3 = 338) */ min-width: 208px; /* Increased min-width by approx 30% (160 * 1.3 = 208) */ height: 28px; /* Doubled height (14 * 2 = 28) */ background-color: #000000; /* Changed to black for negative space */ border-radius: 14px; /* Adjusted for new height */ padding: 3px; /* Adjusted padding slightly for new height */ box-sizing: border-box; z-index: 100; overflow: hidden; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.3); /* Depth and subtle outer shadow */ } .slow-mo-energy-bar-fill { width: 100%; height: 100%; background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 60%, #dddddd 100%); /* Metallic white gradient */ border-radius: 11px; /* Adjusted for new height and padding */ transition: width 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother, purposeful transition */ position: relative; /* For pseudo-element highlight */ box-shadow: 0 0 10px rgba(210, 210, 255, 0.6), 0 0 5px rgba(255,255,255,0.8); /* Enhanced glow for larger bar */ } .slow-mo-energy-bar-fill::before { content: ''; position: absolute; top: 1px; left: 5%; width: 90%; height: 40%; /* Slightly increased highlight height for taller bar */ background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0)); /* Slightly stronger highlight */ border-radius: 6px; /* Adjusted for new height */ opacity: 0.9; } #ammo-counter { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: none; /* Hidden by default */ flex-direction: column; align-items: center; padding: 10px 20px; border-radius: 8px; color: white; font-family: 'Arial Black', Gadget, sans-serif; text-align: center; z-index: 100; min-width: 100px; } #ammo-counter .ammo-count { font-size: 3.5em; /* Large number for count */ font-weight: 900; line-height: 1; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } #ammo-counter .ammo-label { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px; opacity: 0.8; } #ammo-counter .ammo-underline { width: 60%; height: 4px; background-color: rgba(255, 255, 255, 0.4); border-radius: 2px; margin: 8px 0; } #attack-tip-element { position: fixed; bottom: 25%; /* Adjusted from 10% */ left: 50%; transform: translateX(-50%); display: none; /* Hidden by default */ padding: 10px 20px; color: white; font-family: 'Arial Black', Gadget, sans-serif; font-size: 2em; /* Adjust as needed */ text-align: center; z-index: 100; text-shadow: 0 0 5px rgba(0,0,0,0.7); white-space: nowrap; /* Prevent wrapping */ opacity: 0; /* Start transparent for fade-in */ transition: opacity 0.5s ease-in-out; /* Fade-in animation */ } #attack-tip-element .highlight-attack { color: #FF3030; /* Bright red, matching reference */ font-weight: bold; /* Ensure it stands out */ } #pickup-weapon-tip-element { position: fixed; bottom: 25%; /* Adjusted from 10% */ left: 50%; transform: translateX(-50%); display: none; /* Hidden by default */ padding: 10px 20px; color: white; font-family: 'Arial Black', Gadget, sans-serif; font-size: 2em; /* Adjust as needed */ text-align: center; z-index: 100; text-shadow: 0 0 5px rgba(0,0,0,0.7); white-space: nowrap; /* Prevent wrapping */ opacity: 0; /* Start transparent for fade-in */ transition: opacity 0.5s ease-in-out; /* Fade-in animation */ } #pickup-weapon-tip-element .highlight-pickup-action { color: #FF3030; /* Bright red, matching attack tip */ font-weight: bold; } #pickup-weapon-tip-element .highlight-pickup-object { color: #FF3030; /* Bright red, matching attack tip */ font-weight: bold; } #slide-slowmo-tip-element { position: fixed; bottom: 25%; /* Adjusted from 10% */ left: 50%; transform: translateX(-50%); display: none; /* Hidden by default */ padding: 10px 20px; color: white; font-family: 'Arial Black', Gadget, sans-serif; font-size: 2em; text-align: center; z-index: 100; text-shadow: 0 0 5px rgba(0,0,0,0.7); white-space: nowrap; opacity: 0; /* Start transparent for fade-in */ transition: opacity 0.5s ease-in-out; /* Fade-in animation */ } #slide-slowmo-tip-element .highlight-slowmo { color: #FF3030; /* Bright red */ font-weight: bold; } .settings-menu-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); /* Slightly more transparent modal background */ display: flex; justify-content: center; align-items: center; z-index: 1010; /* Ensure it's above other HUD elements */ font-family: 'Arial', sans-serif; opacity: 0; /* Start hidden for transition */ visibility: hidden; /* Start hidden for transition */ transition: opacity 0.3s ease, visibility 0.3s ease; } .settings-menu-modal.visible { opacity: 1; visibility: visible; } .settings-menu-content { background-color: rgba(20, 20, 20, 0.9); /* Darker and more transparent content background */ padding: 30px 40px; border-radius: 10px; box-shadow: 0 0 30px rgba(0,0,0,0.7); /* Slightly stronger shadow */ color: #E0E0E0; /* Lighter text color for better contrast on darker bg */ border: 2px solid white; /* Added white border */ width: 90%; max-width: 500px; display: flex; flex-direction: column; gap: 25px; } .settings-menu-content h2 { text-align: center; margin-top: 0; margin-bottom: 10px; font-size: 2em; font-weight: bold; color: #FFF; text-transform: uppercase; letter-spacing: 1px; } .settings-slider-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; } .settings-slider-label { flex-basis: 40%; font-size: 0.9em; color: #CCCCCC; /* Slightly brighter label */ text-transform: uppercase; white-space: nowrap; } .settings-slider-control { flex-grow: 1; margin: 0 15px; display: flex; align-items: center; height: 20px; } .settings-custom-slider-input { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; /* Very thin track */ background: rgba(255, 255, 255, 0.4); /* Light, semi-transparent track */ outline: none; border-radius: 0; /* Sharp edges for the track line */ cursor: pointer; transition: background 0.2s ease; } .settings-custom-slider-input:hover { background: rgba(255, 255, 255, 0.6); /* Brighter on hover */ } .settings-custom-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2px; /* Thin vertical bar */ height: 24px; /* Taller than track */ background: #FFF; /* White thumb */ border-radius: 0; /* Sharp edges */ cursor: pointer; margin-top: -11.5px; /* Vertically center (24px thumb H - 1px track H) / 2 */ box-shadow: none; /* Remove existing shadow */ transition: background 0.2s ease; } .settings-custom-slider-input::-webkit-slider-thumb:hover { background: #E0E0E0; /* Slightly off-white on hover */ } .settings-custom-slider-input::-moz-range-thumb { width: 2px; /* Thin vertical bar */ height: 24px; /* Taller than track */ background: #FFF; /* White thumb */ border-radius: 0; /* Sharp edges */ border: none; cursor: pointer; box-shadow: none; /* Remove existing shadow */ transition: background 0.2s ease; } .settings-custom-slider-input::-moz-range-thumb:hover { background: #E0E0E0; /* Slightly off-white on hover */ } .settings-custom-slider-input::-moz-range-track { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.4); border-radius: 0; cursor: pointer; transition: background 0.2s ease; } .settings-custom-slider-input:hover::-moz-range-track { background: rgba(255, 255, 255, 0.6); } .settings-slider-value { flex-basis: 10%; font-size: 0.9em; color: #E0E0E0; /* Match lighter text */ text-align: right; min-width: 35px; /* Ensure space for values like "10.0" or "100" */ } .settings-close-button { background-color: #c0392b; /* A distinct red color */ color: white; border: none; padding: 12px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 1em; margin-top: 20px; cursor: pointer; border-radius: 5px; align-self: center; transition: background-color 0.3s ease, transform 0.1s ease; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; } .settings-close-button:hover { background-color: #e74c3c; /* Brighter red on hover */ } .settings-close-button:active { transform: scale(0.98); } #settings-tip-element { position: fixed; bottom: 20px; left: 20px; /* Position from the left edge */ transform: none; /* Remove horizontal centering */ background-color: rgba(255, 255, 255, 0.9); /* White with slight transparency */ color: #333; /* Dark grey text */ padding: 8px 15px; border-radius: 20px; /* Rounded corners */ font-family: 'Arial', sans-serif; /* Clean font */ font-size: 0.9em; z-index: 99; opacity: 0; /* Start transparent for fade-in */ transition: opacity 0.5s ease-in-out; display: none; /* Start hidden, will be shown by showSettingsTip */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); white-space: nowrap; } #settings-tip-element .highlight-key { font-weight: bold; color: #1a1a1a; /* Slightly darker for emphasis */ padding: 1px 4px; background-color: rgba(0,0,0,0.05); border-radius: 3px; } `; document.head.appendChild(style); } _createCrosshair() { this.crosshair = document.createElement('div'); this.crosshair.className = 'crosshair'; this.container.appendChild(this.crosshair); } _createGameOverScreen() { this.gameOverScreen = document.createElement('div'); this.gameOverScreen.id = 'game-over-screen'; const wrapper = document.createElement('div'); wrapper.style.display = 'flex'; wrapper.style.flexDirection = 'column'; wrapper.style.alignItems = 'center'; const img = document.createElement('img'); img.src = 'https://play.rosebud.ai/assets/YouDead.png?l6rL'; img.alt = 'Game Over'; wrapper.appendChild(img); this.gameOverScreen.appendChild(wrapper); this.container.appendChild(this.gameOverScreen); } _createSettingsMenu() { this.settingsMenuElement = document.createElement('div'); this.settingsMenuElement.className = 'settings-menu-modal'; // Styled by existing CSS this.settingsMenuContentElement = document.createElement('div'); // This class is targeted by existing styles for padding, background etc. this.settingsMenuContentElement.className = 'settings-menu-content'; // Title const titleElement = document.createElement('h2'); titleElement.textContent = 'SETTINGS'; this.settingsMenuContentElement.appendChild(titleElement); // Mouse Sensitivity Slider const msWrapper = document.createElement('div'); msWrapper.className = 'settings-slider-wrapper'; const msLabel = document.createElement('label'); msLabel.className = 'settings-slider-label'; msLabel.htmlFor = 'mouse-sensitivity'; msLabel.textContent = 'MOUSE SENSITIVITY'; msWrapper.appendChild(msLabel); const msControlDiv = document.createElement('div'); msControlDiv.className = 'settings-slider-control'; const msInput = document.createElement('input'); msInput.type = 'range'; msInput.id = 'mouse-sensitivity'; msInput.name = 'mouse-sensitivity'; msInput.min = '0'; msInput.max = '1.0'; msInput.step = '0.01'; msInput.value = '0.5'; msInput.className = 'settings-custom-slider-input'; msControlDiv.appendChild(msInput); msWrapper.appendChild(msControlDiv); const msValueSpan = document.createElement('span'); msValueSpan.className = 'settings-slider-value'; msValueSpan.textContent = '0.50'; msInput.addEventListener('input', () => { // Basic visual feedback for the span const newUiValue = parseFloat(msInput.value); msValueSpan.textContent = newUiValue.toFixed(2); updateMouseSensitivity(msInput.value); }); msWrapper.appendChild(msValueSpan); this.settingsMenuContentElement.appendChild(msWrapper); // Master Volume Slider is removed for now // const volWrapper = document.createElement('div'); // ... (rest of volume slider code removed) ... // this.settingsMenuContentElement.appendChild(volWrapper); // Close Button const closeButton = document.createElement('button'); closeButton.className = 'settings-close-button'; closeButton.textContent = 'CLOSE'; closeButton.onclick = () => { this.hideSettingsMenu(); // If App.js needs to be notified to re-acquire pointer lock, // we might need a callback or event here. For now, just hide. // The InputHandler's attemptPointerLock is more suitable as it checks player state. if (window.inputHandler && typeof window.inputHandler.attemptPointerLock === 'function') { window.inputHandler.attemptPointerLock(); } }; this.settingsMenuContentElement.appendChild(closeButton); this.settingsMenuElement.appendChild(this.settingsMenuContentElement); this.container.appendChild(this.settingsMenuElement); } _createLevelClearScreen() { this.levelClearScreen = document.createElement('div'); this.levelClearScreen.id = 'level-clear-screen'; this.levelClearScreen.textContent = 'LEVEL CLEAR'; this.container.appendChild(this.levelClearScreen); } _createSlowMoEnergyBar() { this.slowMoEnergyBarContainer = document.createElement('div'); this.slowMoEnergyBarContainer.className = 'slow-mo-energy-bar-container'; this.slowMoEnergyBarFill = document.createElement('div'); this.slowMoEnergyBarFill.className = 'slow-mo-energy-bar-fill'; this.slowMoEnergyBarContainer.appendChild(this.slowMoEnergyBarFill); this.container.appendChild(this.slowMoEnergyBarContainer); } _createFadeScreen() { this.fadeScreen = document.createElement('div'); this.fadeScreen.id = 'fade-screen'; this.container.appendChild(this.fadeScreen); } _createAmmoCounter() { this.ammoCounterElement = document.createElement('div'); this.ammoCounterElement.id = 'ammo-counter'; const countSpan = document.createElement('span'); countSpan.className = 'ammo-count'; countSpan.textContent = '0'; // Initial value const underlineDiv = document.createElement('div'); underlineDiv.className = 'ammo-underline'; const labelSpan = document.createElement('span'); labelSpan.className = 'ammo-label'; labelSpan.textContent = 'AMMO'; this.ammoCounterElement.appendChild(countSpan); this.ammoCounterElement.appendChild(underlineDiv); this.ammoCounterElement.appendChild(labelSpan); this.container.appendChild(this.ammoCounterElement); } _createAttackTip() { this.attackTipElement = document.createElement('div'); this.attackTipElement.id = 'attack-tip-element'; this.attackTipElement.innerHTML = `[LEFT CLICK] TO ATTACK`; this.container.appendChild(this.attackTipElement); } _createPickupWeaponTip() { this.pickupWeaponTipElement = document.createElement('div'); this.pickupWeaponTipElement.id = 'pickup-weapon-tip-element'; this.pickupWeaponTipElement.innerHTML = `[RIGHT CLICK] TO PICK UP WEAPON`; this.container.appendChild(this.pickupWeaponTipElement); } _createSlideSlowMoTip() { this.slideSlowMoTipElement = document.createElement('div'); this.slideSlowMoTipElement.id = 'slide-slowmo-tip-element'; this.slideSlowMoTipElement.innerHTML = `[HOLD SHIFT] TO SLIDE IN SLOW-MOTION`; this.container.appendChild(this.slideSlowMoTipElement); } _createSettingsTip() { this.settingsTipElement = document.createElement('div'); this.settingsTipElement.id = 'settings-tip-element'; // Using innerHTML to allow for simple span styling for the key this.settingsTipElement.innerHTML = `Press CAPS LOCK to change your settings`; this.container.appendChild(this.settingsTipElement); this.showSettingsTip(true); // Show by default when HUD initializes } updateSlowMoEnergy(currentEnergy, maxEnergy) { if (!this.slowMoEnergyBarFill) return; const percentage = Math.max(0, Math.min(100, (currentEnergy / maxEnergy) * 100)); this.slowMoEnergyBarFill.style.width = `${percentage}%`; } updateDebugInfo(key, value) { this.debugPanel.updateInfo(key, value); } showGameOverScreen(show) { applyStyles(this.gameOverScreen, { display: show ? 'flex' : 'none', }); } updateGameOverScreen(isGameOver) { // Added method this.showGameOverScreen(isGameOver); } showLevelClearScreen(show, isLastLevel = false) { if (this.levelClearScreen) { this.levelClearScreen.textContent = isLastLevel ? 'COMING SOON' : 'LEVEL CLEAR'; applyStyles(this.levelClearScreen, { display: show ? 'flex' : 'none', }); } } update(dt) { // Future per-frame HUD updates if (window.player && typeof window.player.getSlowMoEnergyRatio === 'function') { const energyRatio = window.player.getSlowMoEnergyRatio(); const currentEnergy = energyRatio * MAX_SLOW_MO_ENERGY_MS; const maxEnergy = MAX_SLOW_MO_ENERGY_MS; this.updateSlowMoEnergy(currentEnergy, maxEnergy); } // Update ammo counter based on current gun if (window.player && window.player.gunController && typeof window.player.gunController.getGun === 'function') { const currentGun = window.player.gunController.getGun(); this.updateAmmoCount(currentGun ? currentGun.currentAmmo : 0, !!currentGun); } else { this.updateAmmoCount(0, false); // Hide if no player or gun controller } // Handle attack tip delay if (this.attackTipDelayTimer > 0) { this.attackTipDelayTimer -= dt * 1000; // dt is in seconds if (this.attackTipDelayTimer <= 0) { this.attackTipDelayTimer = 0; if (this.attackTipElement) { this.attackTipElement.style.display = 'block'; // Force a reflow before changing opacity to trigger transition void this.attackTipElement.offsetWidth; this.attackTipElement.style.opacity = '1'; } } } // Handle pickup weapon tip delay if (this.pickupWeaponTipDelayTimer > 0) { this.pickupWeaponTipDelayTimer -= dt * 1000; // dt is in seconds if (this.pickupWeaponTipDelayTimer <= 0) { this.pickupWeaponTipDelayTimer = 0; if (this.pickupWeaponTipElement) { this.pickupWeaponTipElement.style.display = 'block'; // Force a reflow before changing opacity to trigger transition void this.pickupWeaponTipElement.offsetWidth; this.pickupWeaponTipElement.style.opacity = '1'; } } } } updateAmmoCount(count, hasGun) { if (!this.ammoCounterElement) return; if (hasGun) { this.ammoCounterElement.style.display = 'flex'; const countSpan = this.ammoCounterElement.querySelector('.ammo-count'); if (countSpan) { countSpan.textContent = count; } } else { this.ammoCounterElement.style.display = 'none'; } } showSpawnOptionsMenu() { if (this.spawnOptionsMenu) this.spawnOptionsMenu.show(); } hideSpawnOptionsMenu() { if (this.spawnOptionsMenu) this.spawnOptionsMenu.hide(); } toggleSpawnOptionsMenu() { if (this.spawnOptionsMenu) this.spawnOptionsMenu.toggle(); } getSelectedSpawnOption() { return this.spawnOptionsMenu ? this.spawnOptionsMenu.getSelectedOption() : null; } clearSpawnOptionSelection() { if (this.spawnOptionsMenu) this.spawnOptionsMenu.clearSelection(); } setOnSpawnOptionConfirmedCallback(callback) { this.onSpawnOptionConfirmedCallback = callback; } async fadeInBlackScreen() { if (!this.fadeScreen) return; this.fadeScreen.style.pointerEvents = 'auto'; this.fadeScreen.style.opacity = '1'; return new Promise(resolve => setTimeout(resolve, 1000)); // Duration of transition } async fadeOutBlackScreen() { if (!this.fadeScreen) return; this.fadeScreen.style.opacity = '0'; await new Promise(resolve => setTimeout(resolve, 1000)); // Duration of transition this.fadeScreen.style.pointerEvents = 'none'; } showAttackTip(show, delayMs = 0) { if (!this.attackTipElement) return; if (show && delayMs > 0) { this.attackTipElement.style.display = 'none'; // Ensure it's hidden initially this.attackTipDelayDuration = delayMs; this.attackTipDelayTimer = delayMs; } else if (show) { this.attackTipElement.style.display = 'block'; // Force a reflow before changing opacity to trigger transition void this.attackTipElement.offsetWidth; this.attackTipElement.style.opacity = '1'; this.attackTipDelayTimer = 0; // Clear any pending delay } else { this.attackTipElement.style.opacity = '0'; // Fade out // Optionally, wait for fade-out to complete before setting display to none // For now, we'll set display to none immediately after starting fade-out // If a smooth fade-out before display:none is needed, a setTimeout matching transition duration would be used. this.attackTipElement.style.display = 'none'; this.attackTipDelayTimer = 0; // Clear any pending delay } } isAttackTipVisible() { if (!this.attackTipElement) return false; return this.attackTipElement.style.display === 'block'; } showPickupWeaponTip(show, delayMs = 0) { if (!this.pickupWeaponTipElement) return; if (show && delayMs > 0) { this.pickupWeaponTipElement.style.display = 'none'; // Ensure it's hidden initially this.pickupWeaponTipElement.style.opacity = '0'; // Ensure it starts transparent this.pickupWeaponTipDelayDuration = delayMs; this.pickupWeaponTipDelayTimer = delayMs; } else if (show) { this.pickupWeaponTipElement.style.display = 'block'; // Force a reflow before changing opacity to trigger transition void this.pickupWeaponTipElement.offsetWidth; this.pickupWeaponTipElement.style.opacity = '1'; this.pickupWeaponTipDelayTimer = 0; // Clear any pending delay } else { this.pickupWeaponTipElement.style.opacity = '0'; // Fade out // Consistent with attackTip, hide immediately after starting fade-out. // For a smoother fade-out before display:none, a setTimeout matching transition duration (0.5s) could be used. this.pickupWeaponTipElement.style.display = 'none'; this.pickupWeaponTipDelayTimer = 0; // Clear any pending delay } } isPickupWeaponTipVisible() { if (!this.pickupWeaponTipElement) return false; return this.pickupWeaponTipElement.style.display === 'block'; } showSlideSlowMoTip(show) { if (!this.slideSlowMoTipElement) return; if (show) { this.slideSlowMoTipElement.style.display = 'block'; // Force a reflow before changing opacity to trigger transition void this.slideSlowMoTipElement.offsetWidth; this.slideSlowMoTipElement.style.opacity = '1'; } else { this.slideSlowMoTipElement.style.opacity = '0'; // Fade out // Consistent with attackTip, hide immediately after starting fade-out. // For a smoother fade-out before display:none, a setTimeout matching transition duration (0.5s) could be used. this.slideSlowMoTipElement.style.display = 'none'; } } isSlideSlowMoTipVisible() { if (!this.slideSlowMoTipElement) return false; return this.slideSlowMoTipElement.style.display === 'block'; } hideAllInstructionalTips() { this.showAttackTip(false); this.showPickupWeaponTip(false); this.showSlideSlowMoTip(false); } showSettingsTip(show) { if (!this.settingsTipElement) return; if (show) { this.settingsTipElement.style.display = 'block'; // Force a reflow for transition to take effect void this.settingsTipElement.offsetWidth; this.settingsTipElement.style.opacity = '1'; } else { this.settingsTipElement.style.opacity = '0'; // Wait for fade out transition to complete before setting display to none setTimeout(() => { // Check if the opacity is still 0 (i.e., not shown again quickly) if (this.settingsTipElement && this.settingsTipElement.style.opacity === '0') { this.settingsTipElement.style.display = 'none'; } }, 500); // Must match the CSS transition duration } } isSettingsTipVisible() { if (!this.settingsTipElement) return false; // Considered visible if display is block and opacity is effectively 1 return this.settingsTipElement.style.display === 'block' && parseFloat(this.settingsTipElement.style.opacity) > 0.9; } showSettingsMenu() { if (!this.settingsMenuElement) return; this.settingsMenuElement.classList.add('visible'); this.isSettingsMenuOpen = true; this.showSettingsTip(false); // Hide settings tip when menu opens // Caller (e.g., App.js) should handle pointer lock exit } hideSettingsMenu() { if (!this.settingsMenuElement) return; this.settingsMenuElement.classList.remove('visible'); this.isSettingsMenuOpen = false; this.showSettingsTip(true); // Show settings tip when menu closes // Caller (e.g., App.js) should handle pointer lock attempt } toggleSettingsMenu() { if (this.isSettingsMenuOpen) { this.hideSettingsMenu(); } else { this.showSettingsMenu(); } } getIsSettingsMenuOpen() { return this.isSettingsMenuOpen; } getSettingsMenuContentContainer() { return this.settingsMenuContentElement; } dispose() { if (this.debugPanel) { // Assuming DebugPanel might have its own dispose method in the future // this.debugPanel.dispose(); } if (this.crosshair && this.crosshair.parentElement) { this.crosshair.parentElement.removeChild(this.crosshair); } if (this.gameOverScreen && this.gameOverScreen.parentElement) { this.gameOverScreen.parentElement.removeChild(this.gameOverScreen); } if (this.spawnOptionsMenu) { this.spawnOptionsMenu.dispose(); } if (this.levelClearScreen && this.levelClearScreen.parentElement) { this.levelClearScreen.parentElement.removeChild(this.levelClearScreen); } if (this.slowMoEnergyBarContainer && this.slowMoEnergyBarContainer.parentElement) { this.slowMoEnergyBarContainer.parentElement.removeChild(this.slowMoEnergyBarContainer); this.slowMoEnergyBarContainer = null; this.slowMoEnergyBarFill = null; } if (this.fadeScreen && this.fadeScreen.parentElement) { this.fadeScreen.parentElement.removeChild(this.fadeScreen); this.fadeScreen = null; } if (this.ammoCounterElement && this.ammoCounterElement.parentElement) { this.ammoCounterElement.parentElement.removeChild(this.ammoCounterElement); this.ammoCounterElement = null; } if (this.attackTipElement && this.attackTipElement.parentElement) { this.attackTipElement.parentElement.removeChild(this.attackTipElement); this.attackTipElement = null; } if (this.pickupWeaponTipElement && this.pickupWeaponTipElement.parentElement) { this.pickupWeaponTipElement.parentElement.removeChild(this.pickupWeaponTipElement); this.pickupWeaponTipElement = null; } if (this.slideSlowMoTipElement && this.slideSlowMoTipElement.parentElement) { this.slideSlowMoTipElement.parentElement.removeChild(this.slideSlowMoTipElement); this.slideSlowMoTipElement = null; } if (this.settingsMenuElement && this.settingsMenuElement.parentElement) { this.settingsMenuElement.parentElement.removeChild(this.settingsMenuElement); this.settingsMenuElement = null; this.settingsMenuContentElement = null; } if (this.settingsTipElement && this.settingsTipElement.parentElement) { this.settingsTipElement.parentElement.removeChild(this.settingsTipElement); this.settingsTipElement = null; } const hudStyles = document.getElementById('hud-styles'); if (hudStyles) { hudStyles.parentElement.removeChild(hudStyles); } console.log("HUD disposed."); } } // Singleton instances let loadingIndicator = null; let hudInstance = null; /** * Initialize or retrieve the LoadingIndicator. */ export function createLoadingIndicator(container) { if (!loadingIndicator) { loadingIndicator = new LoadingIndicator(container || document.body); } return loadingIndicator; } export function showLoadingIndicator(message) { createLoadingIndicator().show(message, false); } export function hideLoadingIndicator() { createLoadingIndicator().hide(); loadingIndicator = null; } export function updateLoadingIndicatorMessage(message, isError = false) { createLoadingIndicator().show(message, isError); } /** * Initialize HUD with optional container (defaults to #renderDiv or body). */ export function initializeHUD(container) { if (!hudInstance) { hudInstance = new HUD(container); } return hudInstance; } export function getHUD() { if (!hudInstance) console.warn('HUD not initialized. Call initializeHUD() first.'); return hudInstance; } export function updateGameOverScreen(isGameOver) { getHUD()?.showGameOverScreen(isGameOver); } export function updateLevelClearScreen(isCleared, isLastLevel = false) { getHUD()?.showLevelClearScreen(isCleared, isLastLevel); } export function showAttackTip(show, delayMs = 0) { // Exported function getHUD()?.showAttackTip(show, delayMs); } export function isAttackTipVisible() { // Exported function return getHUD()?.isAttackTipVisible() || false; } export function showPickupWeaponTip(show, delayMs = 0) { // Exported function getHUD()?.showPickupWeaponTip(show, delayMs); } export function isPickupWeaponTipVisible() { // Exported function return getHUD()?.isPickupWeaponTipVisible() || false; } export function showSlideSlowMoTip(show) { // Exported function getHUD()?.showSlideSlowMoTip(show); } export function isSlideSlowMoTipVisible() { // Exported function return getHUD()?.isSlideSlowMoTipVisible() || false; } export function hideAllInstructionalTips() { // Exported function getHUD()?.hideAllInstructionalTips(); } // Exported functions for settings menu control export function showSettingsMenu() { getHUD()?.showSettingsMenu(); } export function hideSettingsMenu() { getHUD()?.hideSettingsMenu(); } export function toggleSettingsMenu() { getHUD()?.toggleSettingsMenu(); } export function getIsSettingsMenuOpen() { return getHUD()?.getIsSettingsMenuOpen() || false; } export function getSettingsMenuContentContainer() { return getHUD()?.getSettingsMenuContentContainer(); } // Exported functions for the new settings tip export function showSettingsTip(show) { getHUD()?.showSettingsTip(show); } export function isSettingsTipVisible() { return getHUD()?.isSettingsTipVisible() || false; }

About SUPERSLIDE

Other games like this