${idx + 1}
${isEquipped ? 'โ' : ''}
${item.icon}
${item.name}
`;
}).join('');
// Bind click events on cards
this.dom.lockerGrid.querySelectorAll('.ppe-item-card').forEach(card => {
card.addEventListener('click', () => {
const itemId = card.dataset.itemId;
const slot = card.dataset.slot;
this.toggleItem(itemId, slot);
});
});
}
toggleItem(itemId, slot) {
if (this.equippedItems.has(itemId)) {
// Unequip
this.equippedItems.delete(itemId);
this.avatar.unequip(itemId);
window.soundEngine.playDeselectSFX();
} else {
// If equipping, replace any existing item occupying the same slot
const existingInSlot = this.currentScenario.lockerItems.find(
it => it.slot === slot && this.equippedItems.has(it.id)
);
if (existingInSlot) {
this.equippedItems.delete(existingInSlot.id);
this.avatar.unequip(existingInSlot.id);
}
this.equippedItems.add(itemId);
this.avatar.equip(itemId);
window.soundEngine.playEquipSFX();
}
this.renderLockerItems();
this.updateCoverageIndicators();
}
updateCoverageIndicators() {
const coverageItems = this.dom.coverageGrid.querySelectorAll('.coverage-item');
coverageItems.forEach(itemEl => {
const slot = itemEl.dataset.slot;
const statusEl = itemEl.querySelector('.cov-status');
// Find if any item is equipped in this slot
const isSlotEquipped = Array.from(this.equippedItems).some(itemId => {
const itemObj = this.currentScenario.lockerItems.find(it => it.id === itemId);
return itemObj && itemObj.slot === slot;
});
if (isSlotEquipped) {
statusEl.className = 'cov-status protected';
statusEl.textContent = 'Equipped';
} else {
statusEl.className = 'cov-status missing';
statusEl.textContent = 'Missing';
}
});
}
// =========================================================================
// SAFETY CHECK EXECUTION & CONSEQUENCE DETECTION
// =========================================================================
executeSafetyTest() {
window.soundEngine.playButtonClick();
// 1. Identify ALL equipped distractors / incorrect items
const allEquippedDistractors = this.currentScenario.lockerItems.filter(
it => this.equippedItems.has(it.id) && !it.isCorrect
);
// 2. Identify ALL missing required critical gear checks
const allMissingChecks = this.currentScenario.criticalChecks.filter(
chk => !this.equippedItems.has(chk.requiredItem)
);
const isSafe = allEquippedDistractors.length === 0 && allMissingChecks.length === 0;
if (isSafe) {
// 100% SAFE SUCCESS PATH
this.handleSafeSuccess();
} else {
// UNSAFE FAILURE / CONSEQUENCE NEAR-MISS PATH (Collect all issues)
this.handleUnsafeConsequence(allMissingChecks, allEquippedDistractors);
}
}
handleSafeSuccess() {
// 1. Update visual state
this.dom.statusLight.className = 'status-indicator-light running';
this.dom.statusText.textContent = `OPERATION RUNNING SAFELY - ALL HAZARDS MITIGATED`;
// 2. Start Task Simulation SFX & Particles
if (this.currentScenario.id === 'grinding') {
window.soundEngine.startGrinderSFX();
this.particles.startMode('sparks');
} else {
window.soundEngine.startLiquidTransferSFX();
this.particles.startMode('chemical');
}
// 3. Play Success Chime & Star sound after short operational run
setTimeout(() => {
window.soundEngine.playSuccessChime();
window.soundEngine.playSafetyStarSound();
// Award points (100 on first try, 80 on retry)
const points = this.scenarioFirstAttempt ? 100 : 80;
this.score += points;
this.scenarioCompleted[this.currentScenarioIndex] = true;
this.updateHUD();
// Show Success Modal Overlay
this.dom.successTitle.textContent = this.currentScenario.successMessage.title;
this.dom.successDesc.textContent = this.currentScenario.successMessage.body;
this.dom.awardedPointsText.textContent = `+${points} Safety Points โญ`;
if (this.currentScenarioIndex === SCENARIO_DATA.length - 1) {
this.dom.btnNextScenarioText.textContent = 'VIEW FINAL RESULTS โ';
} else {
this.dom.btnNextScenarioText.textContent = 'NEXT SCENARIO โ';
}
this.dom.successOverlay.classList.add('active');
}, 1200);
}
handleUnsafeConsequence(allMissingChecks, allEquippedDistractors) {
this.scenarioFirstAttempt = false;
const totalIssues = allMissingChecks.length + allEquippedDistractors.length;
// 1. Start task machine momentarily
this.dom.statusLight.className = 'status-indicator-light danger';
this.dom.statusText.textContent = `CRITICAL HAZARD DETECTED (${totalIssues} ISSUES) - FREEZING OPERATION!`;
if (this.currentScenario.id === 'grinding') {
window.soundEngine.startGrinderSFX();
this.particles.startMode('sparks');
} else {
window.soundEngine.startLiquidTransferSFX();
this.particles.startMode('chemical');
}
// 2. Determine target position for incoming projectile (prioritize eye/face if missing, otherwise hand/body)
const avatarCoords = this.avatar.getAvatarCenterCoordinates();
const stageWidth = this.dom.sceneStage.clientWidth;
const stageHeight = this.dom.sceneStage.clientHeight;
const originX = stageWidth * 0.72;
const originY = stageHeight * 0.65;
const hasEyeFaceIssue = allMissingChecks.some(chk => chk.slot === 'eyes' || chk.slot === 'head');
const targetX = hasEyeFaceIssue ? avatarCoords.eyeX : avatarCoords.handX;
const targetY = hasEyeFaceIssue ? avatarCoords.eyeY : avatarCoords.handY;
setTimeout(() => {
window.soundEngine.playWhooshImpact();
this.particles.spawnHazardProjectile(
this.currentScenario.id === 'grinding' ? 'spark' : 'chemical_drop',
originX, originY, targetX, targetY
);
}, 400);
// Store consequence context for freeze overlay
this.activeConsequenceData = { allMissingChecks, allEquippedDistractors };
}
handleFreezeFrameAlert(projectile) {
// 1. Freeze particle engine & stop machine motors
this.particles.setFrozen(true);
window.soundEngine.stopGrinderSFX();
window.soundEngine.stopLiquidTransferSFX();
// 2. Duck background music
window.soundEngine.duckMusic(true);
// 3. Play warning tones
window.soundEngine.playWarningTone();
window.soundEngine.playCriticalStopAlert();
const { allMissingChecks, allEquippedDistractors } = this.activeConsequenceData;
const totalIssues = allMissingChecks.length + allEquippedDistractors.length;
// Slot icons mapping
const slotIcons = {
head: '๐งข',
eyes: '๐',
ears: '๐ง',
hands: '๐งค',
body: '๐ฆบ',
feet: '๐ฅพ'
};
// 4. Update Header & Badges
this.dom.hazardFlasherBadge.textContent = `โ ๏ธ STOP! ${totalIssues} SAFETY ${totalIssues === 1 ? 'HAZARD' : 'HAZARDS'} DETECTED`;
this.dom.missingCountNum.textContent = totalIssues;
if (totalIssues === 1) {
if (allEquippedDistractors.length > 0) {
const d = allEquippedDistractors[0];
this.dom.consequenceTitle.textContent = "Incorrect / Ineffective PPE Detected";
this.dom.consequenceDesc.textContent = d.rejectReason;
} else {
const m = allMissingChecks[0];
this.dom.consequenceTitle.textContent = m.consequenceTitle;
this.dom.consequenceDesc.textContent = m.consequenceDesc;
}
} else {
this.dom.consequenceTitle.textContent = "Multiple Critical Protection Gaps Detected";
this.dom.consequenceDesc.textContent = "Operating without complete PPE exposes multiple body zones to direct, severe workplace injuries. All required safety equipment must be equipped before starting.";
}
// 5. Build HTML for ALL Missing & Incorrect Items Simultaneously
let cardsHtml = '';
// Render all missing critical checks
allMissingChecks.forEach(chk => {
const icon = slotIcons[chk.slot] || 'โ ๏ธ';
cardsHtml += `