-
-
-
-
-
-
-
- PPE SAFETY CHALLENGE
-βChoose Right. Work Safe.β
- -
-
-
- Interactive Workplace Safety Mission
-Select the correct Personal Protective Equipment (PPE) for critical industrial tasks. Learn how proper gear prevents severe workplace injuries before starting dangerous operations.
- - -
-
-
+
- β¨οΈ Mouse Click or Number Keys (1-9) to equip β’ Spacebar to Start Task
-
-
+ 
+
@@ -207,9 +178,16 @@
-
+
+
-
+
diff --git a/js/audio.js b/js/audio.js
index 1cba43f..86c47e6 100644
--- a/js/audio.js
+++ b/js/audio.js
@@ -77,10 +77,19 @@ class SoundEngine {
// VOLUME & MUTE CONTROLS
// ==========================================
+ get isMasterMuted() {
+ return this.isMuted;
+ }
+
+ toggleMasterMute() {
+ this.setMasterMute(!this.isMuted);
+ return this.isMuted;
+ }
+
setMasterMute(muted) {
- this.isMuted = muted;
+ this.isMuted = !!muted;
if (this.masterGain && this.ctx) {
- this.masterGain.gain.setTargetAtTime(muted ? 0 : 1.0, this.ctx.currentTime, 0.05);
+ this.masterGain.gain.setTargetAtTime(this.isMuted ? 0 : 1.0, this.ctx.currentTime, 0.05);
}
}
@@ -173,7 +182,7 @@ class SoundEngine {
];
let step = 0;
- this.musicInterval = setInterval(() => {
+ const playStep = () => {
if (!this.isMusicPlaying || !this.ctx || this.isMuted) return;
const current = progression[step % progression.length];
@@ -247,7 +256,27 @@ class SoundEngine {
});
step++;
- }, 1800);
+ };
+
+ // Play step 0 immediately with zero delay
+ playStep();
+ this.musicInterval = setInterval(playStep, 1800);
+ }
+
+ enableAudioOnFirstGesture() {
+ const unlockAndPlay = () => {
+ this.ensureContext();
+ if (!this.isMusicPlaying) {
+ this.startBackgroundMusic();
+ }
+ ['click', 'keydown', 'pointerdown', 'touchstart'].forEach(evt => {
+ window.removeEventListener(evt, unlockAndPlay);
+ });
+ };
+
+ ['click', 'keydown', 'pointerdown', 'touchstart'].forEach(evt => {
+ window.addEventListener(evt, unlockAndPlay, { once: false, passive: true });
+ });
}
stopBackgroundMusic() {
@@ -265,6 +294,7 @@ class SoundEngine {
setAmbientScenario(scenarioId) {
this.ensureContext();
this.stopAmbient();
+ this.stopAllTaskSFX();
if (!this.ctx || !this.isAmbientEnabled) return;
if (scenarioId === 'grinding') {
@@ -609,19 +639,37 @@ class SoundEngine {
stopGrinderSFX() {
if (this.activeGrinderNode && this.ctx) {
- const t = this.ctx.currentTime;
+ const node = this.activeGrinderNode;
+ this.activeGrinderNode = null;
try {
- this.activeGrinderNode.gain.gain.linearRampToValueAtTime(0.001, t + 0.1);
- this.activeGrinderNode.noiseGain.gain.linearRampToValueAtTime(0.001, t + 0.1);
+ const t = this.ctx.currentTime;
+ if (node.gain && node.gain.gain) {
+ node.gain.gain.cancelScheduledValues(t);
+ node.gain.gain.setValueAtTime(node.gain.gain.value, t);
+ node.gain.gain.linearRampToValueAtTime(0.0001, t + 0.05);
+ }
+ if (node.noiseGain && node.noiseGain.gain) {
+ node.noiseGain.gain.cancelScheduledValues(t);
+ node.noiseGain.gain.setValueAtTime(node.noiseGain.gain.value, t);
+ node.noiseGain.gain.linearRampToValueAtTime(0.0001, t + 0.05);
+ }
setTimeout(() => {
try {
- this.activeGrinderNode.osc.stop();
- this.activeGrinderNode.noise.stop();
+ if (node.osc) {
+ node.osc.stop();
+ node.osc.disconnect();
+ }
+ if (node.noise) {
+ node.noise.stop();
+ node.noise.disconnect();
+ }
} catch (e) {}
- this.activeGrinderNode = null;
- }, 120);
+ }, 60);
} catch (e) {
- this.activeGrinderNode = null;
+ try {
+ if (node.osc) { node.osc.stop(); node.osc.disconnect(); }
+ if (node.noise) { node.noise.stop(); node.noise.disconnect(); }
+ } catch (err) {}
}
}
}
@@ -662,21 +710,36 @@ class SoundEngine {
stopLiquidTransferSFX() {
if (this.activeLiquidNode && this.ctx) {
- const t = this.ctx.currentTime;
+ const node = this.activeLiquidNode;
+ this.activeLiquidNode = null;
try {
- this.activeLiquidNode.gain.gain.linearRampToValueAtTime(0.001, t + 0.1);
+ const t = this.ctx.currentTime;
+ if (node.gain && node.gain.gain) {
+ node.gain.gain.cancelScheduledValues(t);
+ node.gain.gain.setValueAtTime(node.gain.gain.value, t);
+ node.gain.gain.linearRampToValueAtTime(0.0001, t + 0.05);
+ }
setTimeout(() => {
try {
- this.activeLiquidNode.noise.stop();
+ if (node.noise) {
+ node.noise.stop();
+ node.noise.disconnect();
+ }
} catch (e) {}
- this.activeLiquidNode = null;
- }, 120);
+ }, 60);
} catch (e) {
- this.activeLiquidNode = null;
+ try {
+ if (node.noise) { node.noise.stop(); node.noise.disconnect(); }
+ } catch (err) {}
}
}
}
+ stopAllTaskSFX() {
+ this.stopGrinderSFX();
+ this.stopLiquidTransferSFX();
+ }
+
playChemicalSplashSFX() {
this.ensureContext();
if (!this.ctx || this.isMuted) return;
diff --git a/js/avatar.js b/js/avatar.js
index e74d188..f02a21a 100644
--- a/js/avatar.js
+++ b/js/avatar.js
@@ -1,7 +1,7 @@
/**
- * PPE SAFETY CHALLENGE - DYNAMIC 2D WORKER AVATAR SYSTEM
- * Uses the step-by-step transparent character images from ppe_character_steps_transparent_png!
- * Dynamically switches character states as safety gear is equipped.
+ * PPE SAFETY CHALLENGE - REALISTIC 3D WORKER AVATAR SYSTEM
+ * Uses the exact 3D realistic character image provided by the user (images/worker_base.png),
+ * with precision anatomical PPE overlays for both Grinding and Chemical scenarios.
*/
class WorkerAvatar {
@@ -18,7 +18,7 @@ class WorkerAvatar {
equip(itemId) {
this.equippedItems.add(itemId);
- this.updateLayers();
+ this.updateLayers(itemId);
}
unequip(itemId) {
@@ -40,107 +40,165 @@ class WorkerAvatar {
x: relX,
y: relY,
eyeX: relX,
- eyeY: relY - 130,
- handX: relX + 55,
- handY: relY + 30
+ eyeY: relY - 135,
+ handX: relX + 65,
+ handY: relY + 25
};
}
- getStepImagePath() {
- const hasHelmet = this.equippedItems.has('safety_helmet_grind') || this.equippedItems.has('safety_helmet_chem');
- const hasGoggles = this.equippedItems.has('chem_splash_goggles') || this.equippedItems.has('safety_goggles_grind');
- const hasFaceShield = this.equippedItems.has('face_shield_grind') || this.equippedItems.has('face_shield_chem');
- const hasHearing = this.equippedItems.has('hearing_protection_grind') || this.equippedItems.has('hearing_protection_chem');
- const hasLeatherGloves = this.equippedItems.has('leather_grinding_gloves');
- const hasWorkGloves = this.equippedItems.has('work_gloves_grind') || this.equippedItems.has('standard_work_gloves');
- const hasChemGloves = this.equippedItems.has('chem_resistant_gloves');
- const hasVest = this.equippedItems.has('reflective_vest_grind');
- const hasApron = this.equippedItems.has('chem_resistant_apron');
- const hasCottonCoat = this.equippedItems.has('cotton_coat_chem');
- const hasBoots = this.equippedItems.has('steel_toe_boots_grind') || this.equippedItems.has('chem_safety_shoes');
- const hasMask = this.equippedItems.has('dust_mask_grind');
-
- // 10. Full PPE with Mask
- if (hasMask) {
- return 'images/steps/10_full_ppe_with_mask.png';
- }
-
- // 9. Full Grinding Set with Boots
- if (hasHelmet && (hasGoggles || hasFaceShield) && hasHearing && (hasLeatherGloves || hasChemGloves) && (hasVest || hasApron || hasBoots)) {
- return 'images/steps/09_helmet_goggles_hearing_leather_gloves_vest_boots.png';
- }
-
- // 8. With Vest / Body Wear
- if (hasHelmet && (hasGoggles || hasFaceShield) && hasHearing && (hasLeatherGloves || hasChemGloves) && (hasVest || hasApron || hasCottonCoat)) {
- return 'images/steps/08_helmet_goggles_hearing_leather_gloves_vest.png';
- }
-
- // 7. With Leather / Chem Gloves
- if (hasHelmet && (hasGoggles || hasFaceShield) && hasHearing && (hasLeatherGloves || hasChemGloves)) {
- return 'images/steps/07_helmet_goggles_hearing_leather_gloves.png';
- }
-
- // 6. With Work Gloves
- if (hasHelmet && (hasGoggles || hasFaceShield) && hasHearing && hasWorkGloves) {
- return 'images/steps/06_helmet_goggles_hearing_work_gloves.png';
- }
-
- // 5. With Earmuffs / Hearing Protection
- if (hasHelmet && (hasGoggles || hasFaceShield) && hasHearing) {
- return 'images/steps/05_helmet_goggles_hearing.png';
- }
-
- // 4. With Face Shield
- if (hasFaceShield || (hasHelmet && hasFaceShield)) {
- return 'images/steps/04_helmet_goggles_face_shield.png';
- }
-
- // 3. With Goggles & Helmet
- if (hasHelmet && hasGoggles) {
- return 'images/steps/03_helmet_goggles.png';
- }
-
- // 2. Helmet Only
- if (hasHelmet) {
- return 'images/steps/02_helmet.png';
- }
-
- // Individual items
- if (hasFaceShield) return 'images/steps/04_helmet_goggles_face_shield.png';
- if (hasGoggles) return 'images/steps/03_helmet_goggles.png';
- if (hasHearing) return 'images/steps/05_helmet_goggles_hearing.png';
- if (hasLeatherGloves) return 'images/steps/07_helmet_goggles_hearing_leather_gloves.png';
- if (hasWorkGloves) return 'images/steps/06_helmet_goggles_hearing_work_gloves.png';
-
- // 1. Base Worker (No PPE)
- return 'images/steps/01_no_ppe.png';
- }
-
render() {
if (!this.container) return;
this.container.innerHTML = `
-
+ 
+
+
+
+
+ 
+
+
-
-
-
-
- 
-
+
`;
this.updateLayers();
}
- updateLayers() {
+ updateLayers(newlyEquippedId = null) {
if (!this.container) return;
- const imgEl = document.getElementById('avatar-step-img');
- if (imgEl) {
- const targetSrc = this.getStepImagePath();
- if (imgEl.getAttribute('src') !== targetSrc) {
- imgEl.src = targetSrc;
+ const allGearIds = [
+ 'safety_helmet_chem', 'safety_helmet_grind',
+ 'chem_splash_goggles', 'safety_goggles_grind', 'face_shield_chem', 'face_shield_grind', 'tinted_sunglasses', 'dust_mask_grind',
+ 'hearing_protection_chem', 'hearing_protection_grind',
+ 'chem_resistant_gloves', 'standard_work_gloves', 'work_gloves_grind', 'leather_grinding_gloves', 'disposable_latex_gloves',
+ 'chem_resistant_apron', 'cotton_coat_chem', 'flame_resistant_jacket', 'reflective_vest_grind', 'fire_resistant_apron_grind', 'fire_resistant_apron',
+ 'chem_safety_shoes', 'steel_toe_boots_grind', 'running_sneakers'
+ ];
+
+ allGearIds.forEach(gearId => {
+ const el = document.getElementById(`layer-gear-${gearId}`);
+ if (el) {
+ const isEquipped = this.equippedItems.has(gearId);
+ el.style.display = isEquipped ? 'block' : 'none';
+ if (isEquipped && gearId === newlyEquippedId) {
+ el.classList.remove('gear-pop-glow');
+ void el.offsetWidth;
+ el.classList.add('gear-pop-glow');
+ }
}
- }
+ });
}
}
diff --git a/js/game.js b/js/game.js
index 8f6187c..af70dae 100644
--- a/js/game.js
+++ b/js/game.js
@@ -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 = `
-
- `;
- } else {
- // SCENARIO 2: Vector Industrial Chemical Transfer Station
- this.dom.sceneBackdrop.innerHTML = `
-
- `;
+ 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();
diff --git a/js/scenarios.js b/js/scenarios.js
index cfd7493..97e7248 100644
--- a/js/scenarios.js
+++ b/js/scenarios.js
@@ -28,6 +28,7 @@ const SCENARIO_DATA = [
"safety_helmet_grind",
"face_shield_grind",
"hearing_protection_grind",
+ "fire_resistant_apron_grind",
"leather_grinding_gloves",
"steel_toe_boots_grind"
],
@@ -47,6 +48,13 @@ const SCENARIO_DATA = [
consequenceDesc: "Angle grinding routinely exceeds 100 dB. Operating without acoustic earmuffs causes irreversible inner-ear cochlear damage and permanent tinnitus.",
missingLabel: "Hearing Protection (NRR 30 Earmuffs)"
},
+ {
+ slot: "body",
+ requiredItem: "fire_resistant_apron_grind",
+ consequenceTitle: "Thermal Spark Clothing Burn Hazard",
+ consequenceDesc: "Without a heavy split cowhide flame-resistant apron, 1000Β°C angle grinder spark streams ignite clothing and cause severe upper-body thermal burns.",
+ missingLabel: "Fire Resistant Leather Apron"
+ },
{
slot: "hands",
requiredItem: "leather_grinding_gloves",
@@ -128,14 +136,13 @@ const SCENARIO_DATA = [
spec: "Heavy split cowhide heat/spark resistant"
},
{
- id: "reflective_vest_grind",
- name: "Reflective Vest",
+ id: "fire_resistant_apron_grind",
+ name: "Leather Apron",
slot: "body",
iconType: "leather_jacket",
- iconImg: "grinding_ppe_icons_png/07_reflective_vest.png",
- isCorrect: false,
- rejectReason: "Synthetic high-visibility vests melt or ignite from dense grinder spark streams.",
- spec: "Synthetic mesh hi-vis vest"
+ iconImg: "grinding_ppe_icons_png/07_fire_resistant_apron.png",
+ isCorrect: true,
+ spec: "Heavy split cowhide heat/spark & flame resistant apron"
},
{
id: "steel_toe_boots_grind",
@@ -149,12 +156,22 @@ const SCENARIO_DATA = [
{
id: "dust_mask_grind",
name: "Dust Mask",
- slot: "body",
- iconType: "cotton_coat",
+ slot: "mouth",
+ iconType: "respirator",
iconImg: "grinding_ppe_icons_png/09_dust_mask.png",
isCorrect: false,
- rejectReason: "A simple dust mask does not protect the face or body from high-speed thermal sparks.",
- spec: "N95 particulate filter mask"
+ rejectReason: "A basic nuisance dust mask provides no impact, eye, or face protection against high-speed 1000Β°C abrasive sparks and disc shattering debris.",
+ spec: "Particulate nuisance dust mask (Non-impact)"
+ },
+ {
+ id: "reflective_vest_grind",
+ name: "Reflective Vest",
+ slot: "body",
+ iconType: "leather_jacket",
+ iconImg: "grinding_ppe_icons_png/09_reflective_vest.png",
+ isCorrect: false,
+ rejectReason: "Synthetic high-visibility vests melt and catch fire instantly from dense 1000Β°C angle grinder spark streams. Heavy leather apron is required.",
+ spec: "Synthetic mesh hi-vis vest (Non-FR)"
}
],
diff --git a/ppe_icons_png/02_chemical_splash_goggles.png b/ppe_icons_png/02_chemical_splash_goggles.png
index bb86609..b122532 100644
Binary files a/ppe_icons_png/02_chemical_splash_goggles.png and b/ppe_icons_png/02_chemical_splash_goggles.png differ
diff --git a/ppe_icons_png/05_chemical_resistant_gloves.png b/ppe_icons_png/05_chemical_resistant_gloves.png
index f14d4ec..0797fa0 100644
Binary files a/ppe_icons_png/05_chemical_resistant_gloves.png and b/ppe_icons_png/05_chemical_resistant_gloves.png differ
diff --git a/ppe_icons_png/07_chemical_resistant_apron.png b/ppe_icons_png/07_chemical_resistant_apron.png
index 77feed4..6718315 100644
Binary files a/ppe_icons_png/07_chemical_resistant_apron.png and b/ppe_icons_png/07_chemical_resistant_apron.png differ
diff --git a/ppe_icons_png/09_cotton_coat.png b/ppe_icons_png/09_cotton_coat.png
index 5cc2f88..faf3091 100644
Binary files a/ppe_icons_png/09_cotton_coat.png and b/ppe_icons_png/09_cotton_coat.png differ
-