/** * PPE SAFETY CHALLENGE - DYNAMIC WORKER AVATAR SYSTEM * Generates an SVG industrial worker avatar with modular layered PPE gear. */ class WorkerAvatar { constructor(containerId) { this.container = document.getElementById(containerId); this.equippedItems = new Set(); this.render(); } setEquipped(itemIds) { this.equippedItems = new Set(itemIds); this.updateLayers(); } equip(itemId) { this.equippedItems.add(itemId); this.updateLayers(); } unequip(itemId) { this.equippedItems.delete(itemId); this.updateLayers(); } has(itemId) { return this.equippedItems.has(itemId); } getAvatarCenterCoordinates() { if (!this.container) return { x: 150, y: 200, eyeX: 140, eyeY: 100, handX: 190, handY: 220 }; const rect = this.container.getBoundingClientRect(); const parentRect = this.container.parentElement.getBoundingClientRect(); const relX = rect.left - parentRect.left + (rect.width * 0.5); const relY = rect.top - parentRect.top + (rect.height * 0.5); return { x: relX, y: relY, eyeX: relX - 10, eyeY: relY - 110, handX: relX + 45, handY: relY + 15 }; } render() { if (!this.container) return; this.container.innerHTML = ` `; this.updateLayers(); } updateLayers() { if (!this.container) return; // All gear IDs configured across scenarios const allGearIds = [ 'hard_hat_cap', 'hard_hat_chemical', 'faceshield_glasses', 'chemical_splash_goggles', 'regular_sunglasses', 'standard_safety_glasses', 'earmuffs_heavy', 'wireless_earbuds', 'organic_vapor_respirator', 'cloth_dust_mask', 'heavy_leather_jacket', 'chemical_resistant_apron', 'cotton_lab_coat', 'leather_grinding_gloves', 'nitrile_gauntlet_gloves', 'thin_latex_gloves', 'leather_work_gloves', 'steel_toe_boots', 'chemical_rubber_boots', 'regular_sneakers' ]; allGearIds.forEach(gearId => { const el = document.getElementById(`layer-gear-${gearId}`); if (el) { el.style.display = this.equippedItems.has(gearId) ? 'block' : 'none'; } }); // Toggle bare hands layer if gloves equipped const bareHandsEl = document.getElementById('layer-hands-bare'); const hasAnyGloves = ['leather_grinding_gloves', 'nitrile_gauntlet_gloves', 'thin_latex_gloves', 'leather_work_gloves'] .some(g => this.equippedItems.has(g)); if (bareHandsEl) { bareHandsEl.style.display = hasAnyGloves ? 'none' : 'block'; } // Toggle base feet layer if special boots equipped const baseFeetEl = document.getElementById('layer-feet-base'); const hasAnyBoots = ['steel_toe_boots', 'chemical_rubber_boots', 'regular_sneakers'] .some(b => this.equippedItems.has(b)); if (baseFeetEl) { baseFeetEl.style.display = hasAnyBoots ? 'none' : 'block'; } } }