Add PPE images, assets, and update game scenarios and avatar logic
This commit is contained in:
Vishva
+108
-84
@@ -16,7 +16,13 @@
|
||||
<!-- Top Navigation / Header Bar -->
|
||||
<header class="top-bar">
|
||||
<div class="brand-badge">
|
||||
<div class="safety-cross-icon">✚</div>
|
||||
<div class="safety-helmet-icon">
|
||||
<svg viewBox="0 0 36 36" class="helmet-svg">
|
||||
<path d="M 6 22 C 6 12 30 12 30 22 L 34 24 C 34 26 2 26 2 24 Z" fill="#facc15" stroke="#ca8a04" stroke-width="1.5"/>
|
||||
<path d="M 14 11 L 22 11 L 21 23 L 15 23 Z" fill="#eab308"/>
|
||||
<rect x="3" y="23" width="30" height="3" rx="1.5" fill="#ca8a04"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<span class="game-title">PPE SAFETY CHALLENGE</span>
|
||||
<span class="game-tagline">CHOOSE RIGHT. WORK SAFE.</span>
|
||||
@@ -29,7 +35,7 @@
|
||||
<span class="step-num">1</span>
|
||||
<span class="step-label">Grinding Ops</span>
|
||||
</div>
|
||||
<div class="step-connector"></div>
|
||||
<div class="step-dots">·······</div>
|
||||
<div class="step-pill" id="step-pill-2">
|
||||
<span class="step-num">2</span>
|
||||
<span class="step-label">Chemical Handling</span>
|
||||
@@ -41,15 +47,19 @@
|
||||
<div class="score-display">
|
||||
<span class="score-label">SAFETY SCORE</span>
|
||||
<span class="score-val" id="hud-score">0</span>
|
||||
<span class="score-stars" id="hud-stars">☆☆</span>
|
||||
<span class="score-star-icon">★</span>
|
||||
<span class="score-stars-sub" id="hud-stars">☆</span>
|
||||
</div>
|
||||
|
||||
<!-- Audio Controls Menu Trigger -->
|
||||
<button id="btn-audio-settings" class="btn-icon" title="Audio Settings (M)" aria-label="Audio Settings">
|
||||
<span id="audio-icon">🔊</span>
|
||||
<!-- Audio & Settings Controls -->
|
||||
<button id="btn-sound-toggle" class="btn-icon-hud" title="Sound Effects (S)" aria-label="Sound Toggle">
|
||||
<span>🔊</span>
|
||||
</button>
|
||||
<button id="btn-restart" class="btn-icon" title="Restart Game (R)" aria-label="Restart">
|
||||
<span>🔄</span>
|
||||
<button id="btn-music-toggle" class="btn-icon-hud" title="Music Toggle (M)" aria-label="Music Toggle">
|
||||
<span>🎵</span>
|
||||
</button>
|
||||
<button id="btn-audio-settings" class="btn-icon-hud" title="Audio Settings (O)" aria-label="Audio Settings">
|
||||
<span>⚙️</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -84,7 +94,7 @@
|
||||
<span class="flow-arrow">➔</span>
|
||||
<span class="flow-item">🦺 SELECT PPE</span>
|
||||
<span class="flow-arrow">➔</span>
|
||||
<span class="flow-item">⚙️ TEST SAFETY</span>
|
||||
<span class="flow-item">⚙️ START TASK</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -94,7 +104,7 @@
|
||||
<span class="btn-text">START CHALLENGE</span>
|
||||
</button>
|
||||
<div class="controls-hint">
|
||||
<span>⌨️ Mouse Click or Number Keys (1-8) to equip • Spacebar to Test Task</span>
|
||||
<span>⌨️ Mouse Click or Number Keys (1-9) to equip • Spacebar to Start Task</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,71 +114,90 @@
|
||||
<section id="screen-game" class="screen-view">
|
||||
<div class="gameplay-grid">
|
||||
|
||||
<!-- Left Column: Hazard Assessment & Task Briefing -->
|
||||
<!-- Left Column: Hazard Assessment & Worker Protection Status -->
|
||||
<aside class="sidebar-hazard-panel card-panel">
|
||||
<div class="panel-header">
|
||||
<div class="scenario-badge" id="scene-badge">SCENARIO 1 OF 2</div>
|
||||
<h2 class="scenario-title" id="scene-title">Metal Grinding Operation</h2>
|
||||
</div>
|
||||
|
||||
<div class="situation-card">
|
||||
<div class="card-subtitle">WORKPLACE ENVIRONMENT</div>
|
||||
<h2 class="scenario-title" id="scene-title">Chemical Handling & Dispensing</h2>
|
||||
<p class="situation-desc" id="scene-desc">
|
||||
An industrial worker is preparing to grind weld seams on structural steel with a high-speed angle grinder (11,000 RPM).
|
||||
An employee is transferring an industrial corrosive solvent between approved containers at a ventilated dispensing station.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Identify Hazards Box -->
|
||||
<div class="hazard-identification-card">
|
||||
<div class="card-subtitle">IDENTIFIED TASK HAZARDS</div>
|
||||
<div class="card-subtitle-small">IDENTIFY THE HAZARDS</div>
|
||||
<ul class="hazard-list" id="hazard-list">
|
||||
<!-- Dynamically populated -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="equipped-status-card">
|
||||
<div class="card-subtitle">PROTECTION COVERAGE</div>
|
||||
<div class="coverage-grid" id="coverage-grid">
|
||||
<div class="coverage-item" data-slot="head">
|
||||
<span class="cov-icon">🧢</span>
|
||||
<span class="cov-label">Head</span>
|
||||
<span class="cov-status missing">Missing</span>
|
||||
<!-- Worker Protection Status with Wireframe Silhouette -->
|
||||
<div class="worker-protection-card">
|
||||
<div class="card-subtitle-small">WORKER PROTECTION STATUS</div>
|
||||
<div class="protection-status-content">
|
||||
<!-- Blue Wireframe Silhouette -->
|
||||
<div class="body-silhouette-box">
|
||||
<svg viewBox="0 0 100 200" class="wireframe-body-svg">
|
||||
<!-- Head -->
|
||||
<circle cx="50" cy="24" r="14" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Neck -->
|
||||
<line x1="50" y1="38" x2="50" y2="46" stroke="#38bdf8" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Shoulders & Torso -->
|
||||
<path d="M 24 55 L 76 55 L 68 115 L 32 115 Z" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Left Arm -->
|
||||
<path d="M 24 55 L 12 105 L 10 140" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Right Arm -->
|
||||
<path d="M 76 55 L 88 105 L 90 140" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Left Leg -->
|
||||
<path d="M 38 115 L 34 165 L 32 195" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Right Leg -->
|
||||
<path d="M 62 115 L 66 165 L 68 195" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0.85"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="coverage-item" data-slot="eyes">
|
||||
<span class="cov-icon">👓</span>
|
||||
<span class="cov-label">Eyes/Face</span>
|
||||
<span class="cov-status missing">Missing</span>
|
||||
</div>
|
||||
<div class="coverage-item" data-slot="ears">
|
||||
<span class="cov-icon">🎧</span>
|
||||
<span class="cov-label">Hearing</span>
|
||||
<span class="cov-status missing">Missing</span>
|
||||
</div>
|
||||
<div class="coverage-item" data-slot="hands">
|
||||
<span class="cov-icon">🧤</span>
|
||||
<span class="cov-label">Hands</span>
|
||||
<span class="cov-status missing">Missing</span>
|
||||
</div>
|
||||
<div class="coverage-item" data-slot="body">
|
||||
<span class="cov-icon">🦺</span>
|
||||
<span class="cov-label">Body</span>
|
||||
<span class="cov-status missing">Missing</span>
|
||||
</div>
|
||||
<div class="coverage-item" data-slot="feet">
|
||||
<span class="cov-icon">🥾</span>
|
||||
<span class="cov-label">Feet</span>
|
||||
<span class="cov-status missing">Missing</span>
|
||||
|
||||
<!-- Status Rows -->
|
||||
<div class="protection-rows" id="coverage-grid">
|
||||
<div class="status-row-item" data-slot="head">
|
||||
<span class="row-icon">🧢</span>
|
||||
<span class="row-label">Head</span>
|
||||
<span class="row-badge status-q">?</span>
|
||||
</div>
|
||||
<div class="status-row-item" data-slot="eyes">
|
||||
<span class="row-icon">👓</span>
|
||||
<span class="row-label">Eyes / Face</span>
|
||||
<span class="row-badge status-q">?</span>
|
||||
</div>
|
||||
<div class="status-row-item" data-slot="ears">
|
||||
<span class="row-icon">🎧</span>
|
||||
<span class="row-label">Hearing</span>
|
||||
<span class="row-badge status-q">?</span>
|
||||
</div>
|
||||
<div class="status-row-item" data-slot="hands">
|
||||
<span class="row-icon">🧤</span>
|
||||
<span class="row-label">Hands</span>
|
||||
<span class="row-badge status-q">?</span>
|
||||
</div>
|
||||
<div class="status-row-item" data-slot="body">
|
||||
<span class="row-icon">🦺</span>
|
||||
<span class="row-label">Body</span>
|
||||
<span class="row-badge status-q">?</span>
|
||||
</div>
|
||||
<div class="status-row-item" data-slot="feet">
|
||||
<span class="row-icon">🥾</span>
|
||||
<span class="row-label">Feet</span>
|
||||
<span class="row-badge status-q">?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-dock">
|
||||
<button id="btn-test-safety" class="btn btn-action btn-full glow-ready">
|
||||
<span class="btn-icon">⚡</span>
|
||||
<span id="btn-test-safety-text">TEST WORKER SAFETY & START</span>
|
||||
</button>
|
||||
<button id="btn-clear-ppe" class="btn btn-ghost btn-small">
|
||||
<span>↺ Clear All Equipped Items</span>
|
||||
</button>
|
||||
<!-- Tip Box -->
|
||||
<div class="tip-card">
|
||||
<div class="tip-title">💡 TIP</div>
|
||||
<p class="tip-text" id="locker-guide-text">
|
||||
Observe the scene, identify the hazards and select the correct PPE before starting the task.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -180,12 +209,7 @@
|
||||
|
||||
<!-- Dynamic Background Scenery Layer -->
|
||||
<div class="scene-backdrop" id="scene-backdrop">
|
||||
<div class="industrial-wall"></div>
|
||||
<div class="workbench">
|
||||
<div class="workpiece-element" id="workpiece-element"></div>
|
||||
<div class="equipment-element" id="equipment-element"></div>
|
||||
</div>
|
||||
<div class="warning-tape"></div>
|
||||
<!-- Dynamically populated based on scenario -->
|
||||
</div>
|
||||
|
||||
<!-- Worker Avatar Interactive SVG Layer -->
|
||||
@@ -239,35 +263,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Status Indicator -->
|
||||
<div class="stage-footer-bar">
|
||||
<div class="status-indicator-light" id="status-light">
|
||||
<span class="light-dot"></span>
|
||||
<span class="light-text" id="status-text">TASK IDLE - EQUIP PPE AND CLICK TEST</span>
|
||||
</div>
|
||||
<div class="audio-feedback-caption" id="audio-caption">
|
||||
[Audio: Workshop Ambience Active]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: PPE Selection Locker / Tool Rack -->
|
||||
<!-- Right Column: PPE Selection Locker (3x3 Grid) & Action Buttons -->
|
||||
<aside class="sidebar-locker-panel card-panel">
|
||||
<div class="panel-header">
|
||||
<h3 class="locker-title">🦺 PPE SAFETY LOCKER</h3>
|
||||
<span class="locker-subtitle">Select correct gear for this task:</span>
|
||||
<div class="panel-header-locker">
|
||||
<div class="locker-title-row">
|
||||
<span class="locker-icon">🦺</span>
|
||||
<h3 class="locker-title">PPE SAFETY LOCKER</h3>
|
||||
</div>
|
||||
<p class="locker-subtitle">Select and equip the correct PPE for this task.</p>
|
||||
<p class="locker-instruction">Click an item to equip on the worker.</p>
|
||||
</div>
|
||||
|
||||
<!-- 3x3 Equipment Grid -->
|
||||
<div class="ppe-locker-grid" id="ppe-locker-grid">
|
||||
<!-- Dynamically populated based on scenario -->
|
||||
<!-- Dynamically populated based on scenario (9 items in 3 columns) -->
|
||||
</div>
|
||||
|
||||
<div class="locker-guide-card">
|
||||
<div class="guide-title">💡 Safety Selection Rule</div>
|
||||
<p class="guide-text" id="locker-guide-text">
|
||||
Some gear offers insufficient protection or introduces new hazards. Choose specifically rated items!
|
||||
</p>
|
||||
<!-- Locker Action Buttons -->
|
||||
<div class="locker-actions-dock">
|
||||
<button id="btn-check-ppe" class="btn btn-check-ppe">
|
||||
<span class="btn-check-icon">✓</span>
|
||||
<span>CHECK MY PPE</span>
|
||||
</button>
|
||||
|
||||
<button id="btn-test-safety" class="btn btn-start-task glow-ready">
|
||||
<span class="btn-play-icon">▶</span>
|
||||
<span id="btn-test-safety-text">START TASK</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user