Update game UI, add 3D gear assets, backgrounds, icons, and audio enhancements
This commit is contained in:
Vishva
+45
-307
@@ -94,6 +94,9 @@ class SafetyGame {
|
||||
this.bindEvents();
|
||||
this.updateHUD();
|
||||
|
||||
// Enable background music starting from home page on first gesture
|
||||
window.soundEngine.enableAudioOnFirstGesture();
|
||||
|
||||
// Listen for freeze frame event from particle collision
|
||||
window.addEventListener('hazard-freeze-triggered', (e) => {
|
||||
this.handleFreezeFrameAlert(e.detail.projectile);
|
||||
@@ -101,17 +104,14 @@ class SafetyGame {
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// Start Game from Intro
|
||||
// Start Game from Intro (Instantaneous Transition, Zero Delay)
|
||||
if (this.dom.btnStartGame) {
|
||||
this.dom.btnStartGame.addEventListener('click', () => {
|
||||
window.soundEngine.ensureContext();
|
||||
window.soundEngine.playStartIntroSting();
|
||||
window.soundEngine.startBackgroundMusic();
|
||||
this.loadScenario(0);
|
||||
this.switchScreen('game');
|
||||
|
||||
setTimeout(() => {
|
||||
window.soundEngine.startBackgroundMusic();
|
||||
this.loadScenario(0);
|
||||
}, 800);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -141,6 +141,7 @@ class SafetyGame {
|
||||
if (this.dom.btnNextScenario) {
|
||||
this.dom.btnNextScenario.addEventListener('click', () => {
|
||||
window.soundEngine.playButtonClick();
|
||||
window.soundEngine.stopAllTaskSFX();
|
||||
this.dom.successOverlay.classList.remove('active');
|
||||
this.particles.stopMode();
|
||||
|
||||
@@ -175,13 +176,13 @@ class SafetyGame {
|
||||
});
|
||||
}
|
||||
|
||||
// Audio & Settings Header Controls
|
||||
// Audio & Settings Header Controls (Toggle Mute / Unmute continuously)
|
||||
if (this.dom.btnSoundToggle) {
|
||||
this.dom.btnSoundToggle.addEventListener('click', () => {
|
||||
window.soundEngine.ensureContext();
|
||||
const isMuted = !window.soundEngine.isMasterMuted;
|
||||
window.soundEngine.setMasterMute(isMuted);
|
||||
this.dom.btnSoundToggle.querySelector('span').textContent = isMuted ? '🔇' : '🔊';
|
||||
const isMuted = window.soundEngine.toggleMasterMute();
|
||||
const iconSpan = this.dom.btnSoundToggle.querySelector('span') || this.dom.btnSoundToggle;
|
||||
iconSpan.textContent = isMuted ? '🔇' : '🔊';
|
||||
if (this.dom.toggleMasterMute) this.dom.toggleMasterMute.checked = !isMuted;
|
||||
});
|
||||
}
|
||||
@@ -192,7 +193,8 @@ class SafetyGame {
|
||||
const currentVol = window.soundEngine.musicVolume;
|
||||
const newVol = currentVol > 0.01 ? 0 : 0.25;
|
||||
window.soundEngine.setMusicVolume(newVol);
|
||||
this.dom.btnMusicToggle.querySelector('span').textContent = newVol > 0 ? '🎵' : '🔇';
|
||||
const iconSpan = this.dom.btnMusicToggle.querySelector('span') || this.dom.btnMusicToggle;
|
||||
iconSpan.textContent = newVol > 0 ? '🎵' : '🔇';
|
||||
if (this.dom.sliderMusicVol) this.dom.sliderMusicVol.value = Math.round(newVol * 100);
|
||||
if (this.dom.musicVolNum) this.dom.musicVolNum.textContent = `${Math.round(newVol * 100)}%`;
|
||||
});
|
||||
@@ -247,16 +249,23 @@ class SafetyGame {
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard Shortcuts (1-9 for Locker, Space for Start Task, Esc to close modals)
|
||||
// Keyboard Shortcuts (1-9 and 0 for 10 Locker items, Space for Start Task, Esc to close modals)
|
||||
window.addEventListener('keydown', (e) => {
|
||||
const num = parseInt(e.key);
|
||||
if (!isNaN(num) && num >= 1 && num <= 9) {
|
||||
if (!isNaN(num)) {
|
||||
const cards = document.querySelectorAll('.ppe-item-card');
|
||||
if (cards[num - 1]) {
|
||||
cards[num - 1].click();
|
||||
const cardIndex = num === 0 ? 9 : num - 1;
|
||||
if (cards[cardIndex]) {
|
||||
cards[cardIndex].click();
|
||||
}
|
||||
}
|
||||
|
||||
if ((e.code === 'Space' || e.code === 'Enter') && this.dom.screenStart.classList.contains('active')) {
|
||||
e.preventDefault();
|
||||
if (this.dom.btnStartGame) this.dom.btnStartGame.click();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.code === 'Space' && this.dom.screenGame.classList.contains('active')) {
|
||||
if (!this.dom.consequenceOverlay.classList.contains('active') && !this.dom.successOverlay.classList.contains('active')) {
|
||||
e.preventDefault();
|
||||
@@ -285,6 +294,7 @@ class SafetyGame {
|
||||
}
|
||||
|
||||
loadScenario(index) {
|
||||
window.soundEngine.stopAllTaskSFX();
|
||||
this.currentScenarioIndex = index;
|
||||
this.currentScenario = SCENARIO_DATA[index];
|
||||
this.scenarioFirstAttempt = true;
|
||||
@@ -305,6 +315,11 @@ class SafetyGame {
|
||||
if (this.dom.sceneDesc) this.dom.sceneDesc.textContent = this.currentScenario.environmentDesc;
|
||||
if (this.dom.lockerGuideText) this.dom.lockerGuideText.textContent = this.currentScenario.guideTip;
|
||||
|
||||
// Apply stage scene class for background framing
|
||||
if (this.dom.sceneStage) {
|
||||
this.dom.sceneStage.className = 'scene-environment-container ' + (this.currentScenario.sceneClass || '');
|
||||
}
|
||||
|
||||
// Render Scenario Background
|
||||
this.renderScenarioEnvironment(this.currentScenario.id);
|
||||
|
||||
@@ -326,298 +341,16 @@ class SafetyGame {
|
||||
}
|
||||
|
||||
renderScenarioEnvironment(scenarioId) {
|
||||
if (!this.dom.sceneBackdrop) return;
|
||||
|
||||
if (scenarioId === 'grinding') {
|
||||
// SCENARIO 1: Vector Industrial Fabrication & Grinding Workshop (Matching Reference Image)
|
||||
this.dom.sceneBackdrop.innerHTML = `
|
||||
<svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice" class="env-svg-stage">
|
||||
<defs>
|
||||
<linearGradient id="grindSkyGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#3b6998"/>
|
||||
<stop offset="60%" stop-color="#5486b8"/>
|
||||
<stop offset="100%" stop-color="#72a1d2"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grindLampGlow" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="rgba(254, 240, 138, 0.55)"/>
|
||||
<stop offset="60%" stop-color="rgba(254, 240, 138, 0.22)"/>
|
||||
<stop offset="100%" stop-color="rgba(254, 240, 138, 0.0)"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grindBenchGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#94a3b8"/>
|
||||
<stop offset="100%" stop-color="#64748b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grindFloorGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#475569"/>
|
||||
<stop offset="50%" stop-color="#334155"/>
|
||||
<stop offset="100%" stop-color="#1e293b"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 1. BLUE FACTORY WALL & TALL MULTI-PANE WINDOWS -->
|
||||
<rect width="1000" height="380" fill="url(#grindSkyGrad)"/>
|
||||
|
||||
<!-- Distant Sky & Structure Silhouettes Through Windows -->
|
||||
<g fill="#2c527c" opacity="0.4">
|
||||
<rect x="80" y="120" width="140" height="260"/>
|
||||
<rect x="280" y="90" width="180" height="290"/>
|
||||
<rect x="520" y="140" width="120" height="240"/>
|
||||
<rect x="700" y="100" width="220" height="280"/>
|
||||
</g>
|
||||
|
||||
<!-- Window Framework Mullions -->
|
||||
<g stroke="#1e3a5f" stroke-width="4" opacity="0.8">
|
||||
<line x1="0" y1="70" x2="1000" y2="70"/>
|
||||
<line x1="0" y1="180" x2="1000" y2="180"/>
|
||||
<line x1="0" y1="280" x2="1000" y2="280"/>
|
||||
<line x1="160" y1="0" x2="160" y2="380"/>
|
||||
<line x1="320" y1="0" x2="320" y2="380"/>
|
||||
<line x1="610" y1="0" x2="610" y2="380"/>
|
||||
<line x1="860" y1="0" x2="860" y2="380"/>
|
||||
</g>
|
||||
|
||||
<!-- Overhead Gantry & Ceiling Beams -->
|
||||
<rect x="0" y="24" width="1000" height="30" fill="#1e293b"/>
|
||||
<rect x="0" y="54" width="1000" height="8" fill="#0f172a"/>
|
||||
|
||||
<!-- 2. STRUCTURAL PILLARS WITH HAZARD CHEVRONS & PPE SIGN -->
|
||||
<!-- Left Column with Hazard Stripes -->
|
||||
<rect x="240" y="30" width="56" height="350" fill="#334155"/>
|
||||
<g transform="translate(240, 260)">
|
||||
<rect width="56" height="120" fill="#18181b"/>
|
||||
<!-- Yellow/Black Chevrons -->
|
||||
<polygon points="0,0 28,0 56,28 56,56 0,0" fill="#facc15"/>
|
||||
<polygon points="0,35 56,91 56,119 0,63" fill="#facc15"/>
|
||||
<polygon points="0,95 25,120 0,120" fill="#facc15"/>
|
||||
</g>
|
||||
|
||||
<!-- Green "WEAR PPE" Sign on Pillar (From Reference) -->
|
||||
<g transform="translate(155, 170)">
|
||||
<rect width="90" height="90" rx="8" fill="#059669" stroke="#ffffff" stroke-width="3"/>
|
||||
<!-- PPE Helmet/Goggles Symbol -->
|
||||
<circle cx="45" cy="38" r="22" fill="#ffffff" opacity="0.2"/>
|
||||
<path d="M 28 36 C 28 22 62 22 62 36 Z" fill="#ffffff"/>
|
||||
<rect x="25" y="36" width="40" height="4" rx="2" fill="#ffffff"/>
|
||||
<ellipse cx="37" cy="45" rx="6" ry="4" fill="none" stroke="#ffffff" stroke-width="2"/>
|
||||
<ellipse cx="53" cy="45" rx="6" ry="4" fill="none" stroke="#ffffff" stroke-width="2"/>
|
||||
<text x="45" y="66" fill="#ffffff" font-size="11" font-weight="900" font-family="sans-serif" text-anchor="middle">WEAR</text>
|
||||
<text x="45" y="78" fill="#ffffff" font-size="11" font-weight="900" font-family="sans-serif" text-anchor="middle">PPE</text>
|
||||
</g>
|
||||
|
||||
<!-- Right Background Storage Racks with Hazard Stripes -->
|
||||
<g transform="translate(875, 140)">
|
||||
<rect width="110" height="240" fill="#1e293b" stroke="#334155" stroke-width="3"/>
|
||||
<line x1="0" y1="60" x2="110" y2="60" stroke="#475569" stroke-width="4"/>
|
||||
<line x1="0" y1="120" x2="110" y2="120" stroke="#475569" stroke-width="4"/>
|
||||
<line x1="0" y1="180" x2="110" y2="180" stroke="#475569" stroke-width="4"/>
|
||||
<!-- Column hazard chevrons -->
|
||||
<g fill="#facc15">
|
||||
<polygon points="0,0 20,0 0,20"/>
|
||||
<polygon points="0,40 20,20 20,40 0,60"/>
|
||||
<polygon points="0,80 20,60 20,80 0,100"/>
|
||||
<polygon points="0,120 20,100 20,120 0,140"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Red Tool Cabinet (Left) -->
|
||||
<g transform="translate(0, 255)">
|
||||
<rect width="150" height="125" rx="4" fill="#dc2626" stroke="#991b1b" stroke-width="3"/>
|
||||
<!-- Drawers with Silver Handles -->
|
||||
<rect x="10" y="15" width="130" height="22" rx="2" fill="#b91c1c"/>
|
||||
<rect x="45" y="24" width="60" height="4" rx="2" fill="#e2e8f0"/>
|
||||
<rect x="10" y="44" width="130" height="22" rx="2" fill="#b91c1c"/>
|
||||
<rect x="45" y="53" width="60" height="4" rx="2" fill="#e2e8f0"/>
|
||||
<rect x="10" y="73" width="130" height="22" rx="2" fill="#b91c1c"/>
|
||||
<rect x="45" y="82" width="60" height="4" rx="2" fill="#e2e8f0"/>
|
||||
<!-- Top Tool Box -->
|
||||
<rect x="15" y="-22" width="55" height="22" rx="3" fill="#eab308" stroke="#ca8a04" stroke-width="2"/>
|
||||
<rect x="80" y="-26" width="40" height="26" rx="3" fill="#0284c7" stroke="#0369a1" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- 3. PENDANT CONICAL LAMPS & BRIGHT LIGHT CONES (From Reference) -->
|
||||
<!-- Left Lamp & Glow Cone -->
|
||||
<g transform="translate(190, 50)">
|
||||
<line x1="0" y1="0" x2="0" y2="40" stroke="#0f172a" stroke-width="3"/>
|
||||
<polygon points="0,35 -32,60 32,60" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1.5"/>
|
||||
<!-- Spotlight Cone -->
|
||||
<polygon points="-32,60 32,60 100,380 -100,380" fill="url(#grindLampGlow)"/>
|
||||
<ellipse cx="0" cy="60" rx="30" ry="7" fill="#ffffff"/>
|
||||
</g>
|
||||
|
||||
<!-- Right Lamp & Glow Cone -->
|
||||
<g transform="translate(790, 50)">
|
||||
<line x1="0" y1="0" x2="0" y2="40" stroke="#0f172a" stroke-width="3"/>
|
||||
<polygon points="0,35 -32,60 32,60" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1.5"/>
|
||||
<!-- Spotlight Cone -->
|
||||
<polygon points="-32,60 32,60 100,380 -100,380" fill="url(#grindLampGlow)"/>
|
||||
<ellipse cx="0" cy="60" rx="30" ry="7" fill="#ffffff"/>
|
||||
</g>
|
||||
|
||||
<!-- 4. WORKSHOP FLOOR & YELLOW HAZARD BOUNDARY LINES -->
|
||||
<rect x="0" y="380" width="1000" height="220" fill="url(#grindFloorGrad)"/>
|
||||
<line x1="0" y1="380" x2="1000" y2="380" stroke="#334155" stroke-width="3"/>
|
||||
|
||||
<!-- Yellow Floor Safety Line Markings (From Reference) -->
|
||||
<g fill="none" stroke="#facc15" stroke-width="12" opacity="0.95">
|
||||
<line x1="0" y1="560" x2="300" y2="430"/>
|
||||
<line x1="280" y1="430" x2="550" y2="600"/>
|
||||
<line x1="550" y1="600" x2="550" y2="380"/>
|
||||
</g>
|
||||
|
||||
<!-- Stacks of Rectangular Steel Hollow Tubing on Left Floor -->
|
||||
<g transform="translate(0, 420)">
|
||||
<rect x="0" y="0" width="110" height="40" fill="#94a3b8" stroke="#475569" stroke-width="3"/>
|
||||
<rect x="10" y="8" width="90" height="24" fill="#334155"/>
|
||||
<rect x="90" y="42" width="55" height="40" fill="#94a3b8" stroke="#475569" stroke-width="3"/>
|
||||
<rect x="98" y="50" width="39" height="24" fill="#334155"/>
|
||||
</g>
|
||||
|
||||
<!-- 5. HEAVY INDUSTRIAL WORKBENCH, BLUE VISE & ANGLE GRINDER (Right) -->
|
||||
<!-- Anti-slip Textured Floor Mat under Table -->
|
||||
<rect x="490" y="430" width="450" height="85" rx="4" fill="#1e293b" stroke="#334155" stroke-width="2"/>
|
||||
<g fill="#0f172a" opacity="0.7">
|
||||
<circle cx="530" cy="450" r="4"/><circle cx="570" cy="450" r="4"/><circle cx="610" cy="450" r="4"/>
|
||||
<circle cx="650" cy="450" r="4"/><circle cx="690" cy="450" r="4"/><circle cx="730" cy="450" r="4"/>
|
||||
<circle cx="770" cy="450" r="4"/><circle cx="810" cy="450" r="4"/><circle cx="850" cy="450" r="4"/>
|
||||
<circle cx="530" cy="480" r="4"/><circle cx="570" cy="480" r="4"/><circle cx="610" cy="480" r="4"/>
|
||||
<circle cx="650" cy="480" r="4"/><circle cx="690" cy="480" r="4"/><circle cx="730" cy="480" r="4"/>
|
||||
<circle cx="770" cy="480" r="4"/><circle cx="810" cy="480" r="4"/><circle cx="850" cy="480" r="4"/>
|
||||
</g>
|
||||
|
||||
<!-- Workbench Legs & Frame -->
|
||||
<g transform="translate(560, 310)">
|
||||
<!-- Heavy Steel Frame -->
|
||||
<rect x="20" y="60" width="400" height="200" fill="none" stroke="#1e293b" stroke-width="16"/>
|
||||
<!-- Metal Bench Top -->
|
||||
<rect x="0" y="52" width="440" height="20" rx="3" fill="url(#grindBenchGrad)" stroke="#334155" stroke-width="2"/>
|
||||
|
||||
<!-- Steel I-Beam Clamped for Grinding (From Reference) -->
|
||||
<g transform="translate(90, -10)">
|
||||
<rect x="0" y="0" width="350" height="62" fill="#cbd5e1" stroke="#475569" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="350" height="12" fill="#e2e8f0"/>
|
||||
<rect x="0" y="50" width="350" height="12" fill="#94a3b8"/>
|
||||
</g>
|
||||
|
||||
<!-- Blue Industrial Bench Vise Clamp -->
|
||||
<g transform="translate(5, 0)">
|
||||
<!-- Base clamped to bench -->
|
||||
<rect x="55" y="50" width="40" height="45" rx="3" fill="#1d4ed8" stroke="#1e40af" stroke-width="2"/>
|
||||
<!-- Vise Body -->
|
||||
<path d="M 25 15 L 85 15 L 85 55 L 45 55 Z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/>
|
||||
<!-- Clamp Jaws holding I-beam -->
|
||||
<rect x="85" y="8" width="18" height="42" fill="#94a3b8" stroke="#475569" stroke-width="1.5"/>
|
||||
<rect x="10" y="24" width="20" height="12" rx="2" fill="#cbd5e1"/>
|
||||
</g>
|
||||
|
||||
<!-- Yellow Angle Grinder on Tabletop (From Reference) -->
|
||||
<g transform="translate(190, 18)">
|
||||
<!-- Black Grinding Disc -->
|
||||
<ellipse cx="40" cy="22" rx="24" ry="24" fill="#27272a" stroke="#09090b" stroke-width="2"/>
|
||||
<ellipse cx="40" cy="22" rx="8" ry="8" fill="#94a3b8"/>
|
||||
<!-- Metal Spindle Flange -->
|
||||
<circle cx="40" cy="22" r="3" fill="#ffffff"/>
|
||||
<!-- Yellow Motor Housing -->
|
||||
<rect x="60" y="10" width="75" height="24" rx="6" fill="#facc15" stroke="#ca8a04" stroke-width="2"/>
|
||||
<rect x="110" y="13" width="20" height="18" fill="#eab308"/>
|
||||
<!-- Black Rear Handle -->
|
||||
<path d="M 135 15 L 165 18 L 165 26 L 135 29 Z" fill="#18181b"/>
|
||||
<!-- Black Power Cord trailing down -->
|
||||
<path d="M 165 22 Q 210 30 200 90 Q 190 150 240 240" fill="none" stroke="#09090b" stroke-width="4"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
} else {
|
||||
// SCENARIO 2: Vector Industrial Chemical Transfer Station
|
||||
this.dom.sceneBackdrop.innerHTML = `
|
||||
<svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice" class="env-svg-stage">
|
||||
<defs>
|
||||
<linearGradient id="chemSkyGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#bae6fd"/>
|
||||
<stop offset="60%" stop-color="#e0f2fe"/>
|
||||
<stop offset="100%" stop-color="#f0fdf4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="chemTableGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#ffffff"/>
|
||||
<stop offset="50%" stop-color="#f1f5f9"/>
|
||||
<stop offset="100%" stop-color="#cbd5e1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="chemFloorGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#334155"/>
|
||||
<stop offset="100%" stop-color="#1e293b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="liquidCyanGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#38bdf8"/>
|
||||
<stop offset="100%" stop-color="#0284c7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Clean Laboratory Tile Wall -->
|
||||
<rect width="1000" height="380" fill="url(#chemSkyGrad)"/>
|
||||
<g stroke="#cbd5e1" stroke-width="1.5" opacity="0.6">
|
||||
<line x1="0" y1="80" x2="1000" y2="80"/>
|
||||
<line x1="0" y1="160" x2="1000" y2="160"/>
|
||||
<line x1="0" y1="240" x2="1000" y2="240"/>
|
||||
<line x1="0" y1="320" x2="1000" y2="320"/>
|
||||
<line x1="120" y1="0" x2="120" y2="380"/>
|
||||
<line x1="240" y1="0" x2="240" y2="380"/>
|
||||
<line x1="360" y1="0" x2="360" y2="380"/>
|
||||
<line x1="480" y1="0" x2="480" y2="380"/>
|
||||
<line x1="600" y1="0" x2="600" y2="380"/>
|
||||
<line x1="720" y1="0" x2="720" y2="380"/>
|
||||
<line x1="840" y1="0" x2="840" y2="380"/>
|
||||
</g>
|
||||
|
||||
<!-- Fume Extraction Hood Canopy -->
|
||||
<rect x="180" y="0" width="640" height="40" fill="#475569"/>
|
||||
<polygon points="180,40 240,110 760,110 820,40" fill="#64748b"/>
|
||||
<rect x="240" y="110" width="520" height="8" fill="#facc15"/>
|
||||
|
||||
<!-- Emergency Eye Wash Station (Left Wall) -->
|
||||
<g transform="translate(45, 180)">
|
||||
<rect width="40" height="60" rx="4" fill="#059669"/>
|
||||
<text x="20" y="24" fill="#fff" font-size="9" font-weight="bold" text-anchor="middle">EYE</text>
|
||||
<text x="20" y="36" fill="#fff" font-size="9" font-weight="bold" text-anchor="middle">WASH</text>
|
||||
<circle cx="20" cy="48" r="6" fill="#38bdf8"/>
|
||||
<line x1="20" y1="60" x2="20" y2="120" stroke="#94a3b8" stroke-width="4"/>
|
||||
</g>
|
||||
|
||||
<!-- Industrial Lab Chemical Floor -->
|
||||
<rect x="0" y="380" width="1000" height="220" fill="url(#chemFloorGrad)"/>
|
||||
|
||||
<!-- Heavy Chemical Dispensing Workbench -->
|
||||
<g transform="translate(380, 320)">
|
||||
<rect x="0" y="60" width="540" height="150" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>
|
||||
<rect x="0" y="60" width="540" height="22" rx="3" fill="url(#chemTableGrad)" stroke="#64748b" stroke-width="1.5"/>
|
||||
|
||||
<!-- Chemical Glassware on Bench -->
|
||||
<!-- Round Bottom Flask -->
|
||||
<g transform="translate(70, -10)">
|
||||
<circle cx="30" cy="46" r="26" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="2"/>
|
||||
<circle cx="30" cy="48" r="22" fill="url(#liquidCyanGrad)"/>
|
||||
<rect x="26" y="6" width="8" height="20" fill="none" stroke="#fff" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- Erlenmeyer Conical Flask -->
|
||||
<g transform="translate(140, 10)">
|
||||
<polygon points="14,0 22,0 34,48 2,48" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="2"/>
|
||||
<polygon points="5,48 31,48 26,24 10,24" fill="url(#liquidCyanGrad)"/>
|
||||
</g>
|
||||
|
||||
<!-- 50L Chemical Drum -->
|
||||
<g transform="translate(230, -30)">
|
||||
<rect width="65" height="90" rx="8" fill="#0284c7" stroke="#0369a1" stroke-width="2"/>
|
||||
<line x1="0" y1="30" x2="65" y2="30" stroke="#38bdf8" stroke-width="3"/>
|
||||
<line x1="0" y1="60" x2="65" y2="60" stroke="#38bdf8" stroke-width="3"/>
|
||||
<!-- Hazard Diamond -->
|
||||
<g transform="translate(24, 38) rotate(45)">
|
||||
<rect width="18" height="18" fill="#fff" stroke="#ef4444" stroke-width="2"/>
|
||||
<text x="9" y="13" font-size="9" text-anchor="middle" transform="rotate(-45 9 9)">🧪</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
const bgGrind = document.getElementById('backdrop-grinding');
|
||||
const bgChem = document.getElementById('backdrop-chemical');
|
||||
if (bgGrind && bgChem) {
|
||||
if (scenarioId === 'grinding') {
|
||||
bgGrind.style.display = 'block';
|
||||
bgChem.style.display = 'none';
|
||||
} else {
|
||||
bgGrind.style.display = 'none';
|
||||
bgChem.style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -888,6 +621,9 @@ class SafetyGame {
|
||||
|
||||
// Play Success Chime & Star sound after short operational run
|
||||
setTimeout(() => {
|
||||
window.soundEngine.stopAllTaskSFX();
|
||||
this.particles.stopMode();
|
||||
|
||||
window.soundEngine.playSuccessChime();
|
||||
window.soundEngine.playSafetyStarSound();
|
||||
|
||||
@@ -1054,6 +790,7 @@ class SafetyGame {
|
||||
}
|
||||
|
||||
dismissConsequenceModal() {
|
||||
window.soundEngine.stopAllTaskSFX();
|
||||
if (this.dom.consequenceOverlay) this.dom.consequenceOverlay.classList.remove('active');
|
||||
this.particles.clear();
|
||||
this.particles.setFrozen(false);
|
||||
@@ -1071,6 +808,7 @@ class SafetyGame {
|
||||
// =========================================================================
|
||||
|
||||
showFinalSummary() {
|
||||
window.soundEngine.stopAllTaskSFX();
|
||||
this.switchScreen('summary');
|
||||
window.soundEngine.playVictorySting();
|
||||
this.particles.spawnConfetti();
|
||||
|
||||
Reference in New Issue
Block a user