${isEquipped ? 'โ' : ''}
${iconContent}
${item.name}
`;
}).join('');
// Bind click handlers to 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() {
if (!this.dom.coverageGrid) return;
const rows = this.dom.coverageGrid.querySelectorAll('.status-row-item');
rows.forEach(row => {
const slot = row.dataset.slot;
const badge = row.querySelector('.row-badge');
if (!badge) return;
// Check if this body slot has an equipped item
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) {
badge.className = 'row-badge status-check';
badge.textContent = 'โ';
} else {
badge.className = 'row-badge status-q';
badge.textContent = '?';
}
});
}
// =========================================================================
// CHECK MY PPE (GUIDANCE & FEEDBACK)
// =========================================================================
checkPpeStatus() {
window.soundEngine.playButtonClick();
const equippedCount = this.equippedItems.size;
if (equippedCount === 0) {
alert("No PPE selected yet! Click equipment cards in the PPE Safety Locker to protect the worker.");
return;
}
// Check how many of 6 slots are covered
const slots = ['head', 'eyes', 'ears', 'hands', 'body', 'feet'];
const coveredSlots = slots.filter(slot => {
return Array.from(this.equippedItems).some(itemId => {
const it = this.currentScenario.lockerItems.find(x => x.id === itemId);
return it && it.slot === slot;
});
});
if (coveredSlots.length < 6) {
alert(`Worker Status: ${coveredSlots.length}/6 protection zones covered. Please review the missing body areas in the Worker Protection Status checklist before starting the task.`);
} else {
alert(`All 6 protection zones covered! Click START TASK to begin the operation.`);
}
}
// =========================================================================
// 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() {
// 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');
}
// 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
if (this.dom.successTitle) this.dom.successTitle.textContent = this.currentScenario.successMessage.title;
if (this.dom.successDesc) this.dom.successDesc.textContent = this.currentScenario.successMessage.body;
if (this.dom.awardedPointsText) this.dom.awardedPointsText.textContent = `+${points} Safety Points โญ`;
if (this.dom.btnNextScenarioText) {
if (this.currentScenarioIndex === SCENARIO_DATA.length - 1) {
this.dom.btnNextScenarioText.textContent = 'VIEW FINAL RESULTS โ';
} else {
this.dom.btnNextScenarioText.textContent = 'NEXT SCENARIO โ';
}
}
if (this.dom.successOverlay) this.dom.successOverlay.classList.add('active');
}, 1200);
}
handleUnsafeConsequence(allMissingChecks, allEquippedDistractors) {
this.scenarioFirstAttempt = false;
// Start task machine momentarily
if (this.currentScenario.id === 'grinding') {
window.soundEngine.startGrinderSFX();
this.particles.startMode('sparks');
} else {
window.soundEngine.startLiquidTransferSFX();
this.particles.startMode('chemical');
}
// Determine target position for incoming projectile
const avatarCoords = this.avatar.getAvatarCenterCoordinates();
const stageWidth = this.dom.sceneStage ? this.dom.sceneStage.clientWidth : 600;
const stageHeight = this.dom.sceneStage ? this.dom.sceneStage.clientHeight : 450;
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;
const slotIcons = {
head: '๐งข',
eyes: '๐',
ears: '๐ง',
hands: '๐งค',
body: '๐ฆบ',
feet: '๐ฅพ'
};
// 4. Update Header & Badges
if (this.dom.hazardFlasherBadge) {
this.dom.hazardFlasherBadge.textContent = `โ ๏ธ STOP! ${totalIssues} SAFETY ${totalIssues === 1 ? 'HAZARD' : 'HAZARDS'} DETECTED`;
}
if (this.dom.missingCountNum) this.dom.missingCountNum.textContent = totalIssues;
if (totalIssues === 1) {
if (allEquippedDistractors.length > 0) {
const d = allEquippedDistractors[0];
if (this.dom.consequenceTitle) this.dom.consequenceTitle.textContent = "Incorrect / Ineffective PPE Detected";
if (this.dom.consequenceDesc) this.dom.consequenceDesc.textContent = d.rejectReason;
} else {
const m = allMissingChecks[0];
if (this.dom.consequenceTitle) this.dom.consequenceTitle.textContent = m.consequenceTitle;
if (this.dom.consequenceDesc) this.dom.consequenceDesc.textContent = m.consequenceDesc;
}
} else {
if (this.dom.consequenceTitle) this.dom.consequenceTitle.textContent = "Critical Protection Gaps Detected";
if (this.dom.consequenceDesc) 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 = '';
allMissingChecks.forEach(chk => {
const icon = slotIcons[chk.slot] || 'โ ๏ธ';
cardsHtml += `