From df6e844b254c988a38a14ee248417751541d9cfa Mon Sep 17 00:00:00 2001 From: Vishva Date: Fri, 25 Sep 2026 18:45:24 +0530 Subject: [PATCH] Update game logic and styles --- css/styles.css | 105 +------------ js/game.js | 417 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 424 insertions(+), 98 deletions(-) diff --git a/css/styles.css b/css/styles.css index ef2dab8..84bad23 100644 --- a/css/styles.css +++ b/css/styles.css @@ -717,109 +717,18 @@ html, body { right: 0; bottom: 0; z-index: 1; - background: radial-gradient(circle at 50% 30%, #1a2538 0%, #0d121a 80%); + background: #0d121a; + overflow: hidden; } -.industrial-wall { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 65%; - background: - linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), - linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); - background-size: 40px 40px; -} - -.workbench { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 35%; - background: linear-gradient(180deg, #1b2430 0%, #10161f 100%); - border-top: 3px solid #2d3c52; -} - -.warning-tape { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 8px; - background: repeating-linear-gradient( - 45deg, - var(--safety-yellow), - var(--safety-yellow) 15px, - #000 15px, - #000 30px - ); - opacity: 0.7; -} - -.workpiece-element, .equipment-element { - position: absolute; +.env-svg-stage { + width: 100%; + height: 100%; + display: block; + object-fit: cover; pointer-events: none; } -/* Scenario 1 Grinding Props */ -.stage-grinding .workpiece-element { - right: 18%; - bottom: 80px; - width: 160px; - height: 80px; - background: linear-gradient(135deg, #475569 0%, #334155 100%); - border: 2px solid #64748b; - border-radius: 4px; - box-shadow: 0 10px 25px rgba(0,0,0,0.6); -} - -.stage-grinding .equipment-element { - right: 22%; - bottom: 120px; - width: 120px; - height: 45px; - background: #dc2626; - border-radius: 6px; - box-shadow: 0 6px 15px rgba(0,0,0,0.5); - border: 2px solid #991b1b; - transform: rotate(-15deg); -} - -.stage-grinding .equipment-element::after { - content: ""; - position: absolute; - left: -20px; - top: 8px; - width: 32px; - height: 32px; - border-radius: 50%; - background: #94a3b8; - border: 3px solid #475569; -} - -/* Scenario 2 Chemical Props */ -.stage-chemical .workpiece-element { - right: 15%; - bottom: 60px; - width: 220px; - height: 140px; - background: rgba(14, 165, 233, 0.05); - border: 2px solid rgba(14, 165, 233, 0.3); - border-radius: 8px; -} - -.stage-chemical .equipment-element { - right: 20%; - bottom: 80px; - width: 50px; - height: 75px; - background: rgba(16, 185, 129, 0.25); - border: 2px solid #10b981; - border-radius: 4px; -} - /* Worker Avatar Area */ .avatar-wrapper { position: relative; diff --git a/js/game.js b/js/game.js index 0101139..04d5a84 100644 --- a/js/game.js +++ b/js/game.js @@ -44,6 +44,7 @@ class SafetyGame { hazardList: document.getElementById('hazard-list'), coverageGrid: document.getElementById('coverage-grid'), sceneStage: document.getElementById('scene-stage'), + sceneBackdrop: document.getElementById('scene-backdrop'), statusLight: document.getElementById('status-light'), statusText: document.getElementById('status-text'), audioCaption: document.getElementById('audio-caption'), @@ -284,6 +285,9 @@ class SafetyGame { this.dom.statusLight.className = 'status-indicator-light'; this.dom.statusText.textContent = `TASK IDLE - EQUIP WORKER BEFORE STARTING ${this.currentScenario.taskName}`; + // Render Scenario-Specific Realistic Workplace Environment + this.renderScenarioEnvironment(this.currentScenario.id); + // Populate Hazard List this.dom.hazardList.innerHTML = this.currentScenario.hazards.map(h => `
  • @@ -299,6 +303,419 @@ class SafetyGame { window.soundEngine.setAmbientScenario(this.currentScenario.id); } + renderScenarioEnvironment(scenarioId) { + if (!this.dom.sceneBackdrop) return; + + if (scenarioId === 'grinding') { + // SCENARIO 1: Vector Industrial Fabrication & Welding Workshop + this.dom.sceneBackdrop.innerHTML = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ⚡ CAUTION + GRINDING & WELDING + PPE MANDATORY + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } else if (scenarioId === 'chemical') { + // SCENARIO 2: Vector Chemical Laboratory & Dispensing Station (Matching Reference Image) + this.dom.sceneBackdrop.innerHTML = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 🧪 + + + + + `; + } + } + renderLockerItems() { this.dom.lockerGrid.innerHTML = this.currentScenario.lockerItems.map((item, idx) => { const isEquipped = this.equippedItems.has(item.id);