Manual changes saved

index.html

@@ -11,7 +11,7 @@
     #canvasContainer { position:relative; flex:1; display:flex; justify-content:center; align-items:center; height:100vh; overflow:hidden; }
     #gameCanvas { display:block; user-select:none; cursor:crosshair; box-shadow:0 0 20px rgba(0,0,0,.5); width:100%; height:100%; }
     #stormWarning { z-index:10; }
-    #deathScreen { z-index:20; }
+    #deathScreen, #victoryScreen { z-index:20; }
 
     /* HUD */
     #hudHealth { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,0.55); padding:6px 8px; border-radius:8px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; z-index:30; }
@@ -63,7 +63,7 @@
         <li><strong>E</strong> — Use medkit in selected slot OR Interact / Loot</li>
         <li><strong>Q</strong> — Build (costs 10 materials)</li>
         <li><strong>R</strong> — Reload selected weapon</li>
-        <li><strong>1-5</strong> — Select inventory slot</li>
+        <li><strong>1-5</strong> — Select inventory slot (also equips it)</li>
         <li><strong>F</strong> — Equip / Unequip selected slot (pickaxe is the default)</li>
       </ul>
     </div>
@@ -98,6 +98,19 @@
           </button>
         </div>
 
+        <div id="victoryScreen" class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center rounded-xl">
+          <h2 class="text-5xl font-bold text-green-400 mb-4">VICTORY</h2>
+          <p class="text-xl mb-6">You are the last player standing!</p>
+          <div class="flex gap-4">
+            <button id="goHomeBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-lg flex items-center">
+              <i data-feather="home" class="mr-2"></i> Go to Home
+            </button>
+            <button id="continueBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg flex items-center">
+              <i data-feather="repeat" class="mr-2"></i> Play Again
+            </button>
+          </div>
+        </div>
+
         <div id="hudHealth" class="hidden">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffd86b" stroke-width="1.6"><path d="M20.8 8.6a5.5 5.5 0 0 0-7.8 0L12 10.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 22l7.8-3.6 1-1a5.5 5.5 0 0 0 0-7.8z"></path></svg>
           <span id="hudHealthText">100%</span>
@@ -124,6 +137,9 @@
     const pickaxeSlot = document.getElementById('pickaxeSlot');
     const stormWarning = document.getElementById('stormWarning');
     const deathScreen = document.getElementById('deathScreen');
+    const victoryScreen = document.getElementById('victoryScreen');
+    const goHomeBtn = document.getElementById('goHomeBtn');
+    const continueBtn = document.getElementById('continueBtn');
 
     // World (bigger)
     const WORLD = { width: 6000, height: 4000 };
@@ -151,32 +167,46 @@
     const keys = { w:false,a:false,s:false,d:false,e:false,q:false,r:false,f:false };
     const mouse = { canvasX:0, canvasY:0, worldX:0, worldY:0, down:false };
 
-    // Consolidated key handlers (single source of truth to avoid double toggles)
+    // Helper: equip slot index (or -1 for pickaxe)
+    function equipSlot(index){
+      // index: -1 for pickaxe, 0-4 for inventory
+      player.equippedIndex = index;
+      // if equipping a slot that is empty, still equip it (shows nothing but slot is 'equipped')
+      updateHUD();
+    }
+
     window.addEventListener('keydown',(e)=>{
       const k = e.key.toLowerCase();
-      // movement keys should work only while game active
+
+      // Movement & action keys only processed when game active
       if (gameActive){
         if (k in keys) keys[k] = true;
+
         if (['1','2','3','4','5'].includes(k)) {
-          player.selectedSlot = parseInt(k)-1;
-          // If pickaxe was equipped and user presses a number, unequip pickaxe and equip the slot
-          if (player.equippedIndex === -1) {
-            player.equippedIndex = player.selectedSlot;
-          }
+          const idx = parseInt(k)-1;
+          player.selectedSlot = idx;
+          // Equip the pressed slot (this ensures weapons swap immediately)
+          equipSlot(idx);
           updateHUD();
         }
+
         if (k === 'f') {
-          // toggle between pickaxe (-1) and selected slot
-          player.equippedIndex = (player.equippedIndex === player.selectedSlot) ? -1 : player.selectedSlot;
+          // toggle between pickaxe and selected slot
+          if (player.equippedIndex === player.selectedSlot) equipSlot(-1);
+          else equipSlot(player.selectedSlot);
           updateHUD();
         }
+
         if (k === 'r') keys.r = true;
       } else {
-        // allow selecting slots on landing screen (optional)
-        if (['1','2','3','4','5'].includes(k)) { player.selectedSlot = parseInt(k)-1; updateHUD(); }
-        // don't change equip state outside game
+        // allow selection on landing screen
+        if (['1','2','3','4','5'].includes(k)) {
+          player.selectedSlot = parseInt(k)-1;
+          updateHUD();
+        }
       }
     });
+
     window.addEventListener('keyup',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = false;
@@ -193,7 +223,6 @@
       player.angle = Math.atan2(mouse.worldY - player.y, mouse.worldX - player.x);
     });
     canvas.addEventListener('mousedown', (e)=>{
-      // update mouse coords immediately and set down
       const rect = canvas.getBoundingClientRect();
       mouse.canvasX = e.clientX - rect.left;
       mouse.canvasY = e.clientY - rect.top;
@@ -281,16 +310,23 @@
         slot.className = 'gear-slot';
         slot.dataset.index = i;
         slot.addEventListener('click', ()=> {
-          player.selectedSlot = i;
-          // If pickaxe equipped and user clicks a slot, equip that slot
-          if (player.equippedIndex === -1) player.equippedIndex = player.selectedSlot;
+          const idx = parseInt(slot.dataset.index);
+          player.selectedSlot = idx;
+          // if clicking currently equipped slot -> toggle unequip to pickaxe
+          if (player.equippedIndex === idx) equipSlot(-1);
+          else equipSlot(idx);
           updateHUD();
         });
         hudGear.appendChild(slot);
       }
       // pickaxe click toggles equip (explicit: clicking pickaxe equips/unequips it)
       pickaxeSlot.onclick = () => {
-        player.equippedIndex = (player.equippedIndex === -1) ? player.selectedSlot : -1;
+        if (player.equippedIndex === -1) {
+          // pickaxe already equipped -> equip selected slot instead
+          equipSlot(player.selectedSlot);
+        } else {
+          equipSlot(-1);
+        }
         updateHUD();
       };
       updateHUD();
@@ -333,7 +369,6 @@
       const angle = Math.atan2(targetY-originY, targetX-originX);
       // decrement ammo if present
       if (typeof weaponObj.ammoInMag === 'number') weaponObj.ammoInMag -= 1;
-      // weaponObj may be an inventory item (with .weapon) or weaponPickup (with .weapon) — both consistent
       const dmg = weaponObj.weapon && weaponObj.weapon.dmg ? weaponObj.weapon.dmg : (weaponObj.dmg || 10);
       const color = (weaponObj.weapon && weaponObj.weapon.color) || weaponObj.color || '#fff';
       bullets.push({
@@ -378,7 +413,7 @@
     }
 
     // Interact: use medkit in selected slot OR loot chests / pickup items.
-    // IMPORTANT: builds (objects) are NOT harvested via E anymore; only via pickaxe melee or shooting.
+    // Builds (objects) are NOT harvested via E anymore; only via pickaxe melee or shooting.
     function interactNearby(){
       // use medkit in selected slot
       const sel = player.selectedSlot;
@@ -658,8 +693,16 @@
 
     // Utility
     function updatePlayerCount(){
-      const alive = enemies.filter(e => e.health > 0).length;
-      document.getElementById('playerCount').textContent = `${1 + alive}/20`;
+      const aliveEnemies = enemies.filter(e => e.health > 0).length;
+      document.getElementById('playerCount').textContent = `${1 + aliveEnemies}/20`;
+
+      // Victory check: if all enemies dead and player alive & game active -> show victory
+      if (gameActive && aliveEnemies === 0 && player.health > 0){
+        // stop game loop and show victory UI
+        gameActive = false;
+        victoryScreen.classList.remove('hidden');
+        clearInterval(timerInterval);
+      }
     }
 
     // Drawing (chests no text; glow; pickups visible)
@@ -925,6 +968,9 @@
     let gameActive = false;
 
     function startGame(){
+      victoryScreen.classList.add('hidden');
+      deathScreen.classList.add('hidden');
+
       gameActive = true;
       landingScreen.classList.add('hidden');
       gameScreen.classList.remove('hidden');
@@ -968,6 +1014,8 @@
     function playerDeath(){ gameActive = false; deathScreen.classList.remove('hidden'); }
 
     document.getElementById('respawnBtn').addEventListener('click', ()=>{ deathScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
+    goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
+    continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(); });
 
     document.querySelectorAll('.biome-selector').forEach(el => el.addEventListener('click', ()=> startGame()));