Manual changes saved

index.html

@@ -2507,7 +2507,409 @@
     feather.replace();
     resizeCanvas();
   </script>
-  <!-- LOBBY NAME EDIT + CHEAT CODE APPEND START -->
+  <!-- LOBBY APPEND START -->
+<style>
+  #lobbyInjectBtn {
+    position: fixed;
+    top: 12px;
+    right: 12px;
+    z-index: 9999;
+    background: linear-gradient(180deg,#ffd86b,#f0c84a);
+    color:#071021;
+    border: none;
+    padding:8px 12px;
+    border-radius:10px;
+    font-weight:800;
+    cursor:pointer;
+    box-shadow:0 8px 20px rgba(0,0,0,0.45);
+  }
+  #lobbyScreenInjected {
+    position: fixed;
+    inset: 0;
+    z-index: 9998;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(6,10,18,0.85);
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  #lobbyCardInjected {
+    width: min(960px, 96%);
+    background: rgba(8,12,20,0.96);
+    border-radius: 12px;
+    padding: 18px;
+    border: 1px solid rgba(255,255,255,0.04);
+    color:#eaf6ff;
+    box-shadow: 0 14px 48px rgba(0,0,0,0.7);
+    display:flex;
+    gap:16px;
+    align-items:flex-start;
+    flex-wrap:wrap;
+  }
+  #lobbyLeftInjected { width:220px; display:flex; flex-direction:column; gap:10px; align-items:center; }
+  #lobbyPlayerImgInjected { width:180px; height:180px; border-radius:10px; object-fit:cover; background:#071021; }
+  .lobbyStatInjected { background:rgba(255,255,255,0.03); padding:8px 10px; border-radius:8px; font-weight:700; color:#fff; font-size:14px; }
+  .lobbyBtnInjected {
+    background: linear-gradient(180deg,#ffd86b,#f0c84a);
+    color:#071021;
+    border:none;
+    padding:10px 14px;
+    border-radius:10px;
+    cursor:pointer;
+    font-weight:800;
+  }
+  .lobbyAltBtnInjected {
+    background: rgba(255,255,255,0.03);
+    color:#e2eeff;
+    border:1px solid rgba(255,255,255,0.04);
+    padding:8px 10px;
+    border-radius:8px;
+    cursor:pointer;
+  }
+  .lobbyModalInjected { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:10000; background: rgba(0,0,0,0.45); }
+  .lobbyModalCardInjected { width:min(720px,96%); background: rgba(8,12,20,0.98); padding:14px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); color:#dff4ff; }
+  .lobbyListInjected { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
+  .lobbyItemInjected { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.02); padding:10px; border-radius:8px; }
+  .smallMutedInjected { font-size:13px; color:#9fb0c9; }
+  @media (max-width:720px){
+    #lobbyLeftInjected { width:100%; flex-direction:row; gap:10px; }
+    #lobbyPlayerImgInjected { width:84px; height:84px; }
+  }
+</style>
+
+<!-- Inject open button (fixed) -->
+<button id="lobbyInjectBtn" aria-controls="lobbyScreenInjected" title="Open Lobby">Lobby</button>
+
+<!-- Lobby Overlay -->
+<div id="lobbyScreenInjected" role="dialog" aria-modal="true" aria-hidden="true">
+  <div id="lobbyCardInjected">
+    <div id="lobbyLeftInjected">
+      <img id="lobbyPlayerImgInjected" src="https://www.vhv.rs/dpng/d/17-179278_fortnite-default-skin-blonde-hair-hd-png-download.png" alt="Player" />
+      <div style="text-align:center;">
+        <div style="font-weight:900; font-size:18px;" id="lobbyPlayerNameInjected">You</div>
+        <div class="smallMutedInjected" id="lobbyPlayerSkinInjected">Skin: Default</div>
+      </div>
+    </div>
+
+    <div style="flex:1; min-width:220px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;">
+        <div>
+          <div style="font-size:20px;font-weight:900;color:#ffd86b">Lobby</div>
+          <div class="smallMutedInjected">Open the shop, change room, or return to the landing screen</div>
+        </div>
+        <div style="display:flex;gap:8px;align-items:center">
+          <div class="lobbyStatInjected">B-Bucks: <span id="lobbyBBucksInjected" style="margin-left:8px;color:#fff">0</span></div>
+          <div class="lobbyStatInjected">Wins: <span id="lobbyWinsInjected" style="margin-left:8px;color:#fff">0</span></div>
+          <div class="lobbyStatInjected">All Kills: <span id="lobbyKillsInjected" style="margin-left:8px;color:#fff">0</span></div>
+        </div>
+      </div>
+
+      <div style="margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;">
+        <button id="lobbyStartInjected" class="lobbyBtnInjected" title="Return to landing screen">Start (choose landing)</button>
+        <button id="lobbyChangeRoomInjected" class="lobbyAltBtnInjected">Changing Room</button>
+        <button id="lobbyShopInjected" class="lobbyAltBtnInjected">Shop</button>
+        <button id="lobbyCloseInjected" class="lobbyAltBtnInjected">Close</button>
+      </div>
+
+      <div style="margin-top:12px;">
+        <div style="font-weight:800">Cosmetics & Skins</div>
+        <div class="smallMutedInjected" id="lobbyOwnedInjected">No cosmetics owned</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Change Room Modal -->
+<div class="lobbyModalInjected" id="lobbyChangeRoomModalInjected" aria-hidden="true">
+  <div class="lobbyModalCardInjected" role="dialog" aria-modal="true" aria-label="Changing Room">
+    <div style="display:flex;justify-content:space-between;align-items:center">
+      <div>
+        <div style="font-weight:900">Changing Room</div>
+        <div class="smallMutedInjected">Equip cosmetics or skins</div>
+      </div>
+      <div><button class="lobbyAltBtnInjected" id="lobbyChangeRoomCloseInjected">Close</button></div>
+    </div>
+    <div class="lobbyListInjected" id="lobbyChangeRoomListInjected"></div>
+  </div>
+</div>
+
+<!-- Shop Modal -->
+<div class="lobbyModalInjected" id="lobbyShopModalInjected" aria-hidden="true">
+  <div class="lobbyModalCardInjected" role="dialog" aria-modal="true" aria-label="Shop">
+    <div style="display:flex;justify-content:space-between;align-items:center">
+      <div>
+        <div style="font-weight:900">Shop</div>
+        <div class="smallMutedInjected">Buy cosmetics with B-Bucks (demo items)</div>
+      </div>
+      <div><button class="lobbyAltBtnInjected" id="lobbyShopCloseInjected">Close</button></div>
+    </div>
+    <div class="lobbyListInjected" id="lobbyShopItemListInjected"></div>
+  </div>
+</div>
+
+<script>
+(function(){
+  // Local storage key and default state
+  const LS_KEY = 'battlezone_lobby_v1';
+  const defaultState = { bBucks:0, wins:0, allKills:0, equippedSkin:'Default', cosmetics:[] };
+
+  function loadState(){
+    try {
+      const raw = localStorage.getItem(LS_KEY);
+      if (!raw) return { ...defaultState };
+      return { ...defaultState, ...JSON.parse(raw) };
+    } catch(e){
+      console.error('lobby load error', e);
+      return { ...defaultState };
+    }
+  }
+  function persistState(s){
+    try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch(e){ console.error('lobby save error', e); }
+  }
+
+  const state = loadState();
+
+  // Elements
+  const openBtn = document.getElementById('lobbyInjectBtn');
+  const screen = document.getElementById('lobbyScreenInjected');
+  const startBtn = document.getElementById('lobbyStartInjected');
+  const changeRoomBtn = document.getElementById('lobbyChangeRoomInjected');
+  const shopBtn = document.getElementById('lobbyShopInjected');
+  const closeBtn = document.getElementById('lobbyCloseInjected');
+
+  const playerImg = document.getElementById('lobbyPlayerImgInjected');
+  const playerSkinEl = document.getElementById('lobbyPlayerSkinInjected');
+  const bbucksEl = document.getElementById('lobbyBBucksInjected');
+  const winsEl = document.getElementById('lobbyWinsInjected');
+  const killsEl = document.getElementById('lobbyKillsInjected');
+  const ownedEl = document.getElementById('lobbyOwnedInjected');
+
+  const changeModal = document.getElementById('lobbyChangeRoomModalInjected');
+  const changeModalClose = document.getElementById('lobbyChangeRoomCloseInjected');
+  const changeList = document.getElementById('lobbyChangeRoomListInjected');
+
+  const shopModal = document.getElementById('lobbyShopModalInjected');
+  const shopModalClose = document.getElementById('lobbyShopCloseInjected');
+  const shopList = document.getElementById('lobbyShopItemListInjected');
+
+  // Demo shop catalog, edit as desired
+  const catalog = [
+    { id:'skin_neon', type:'skin', name:'Neon Suit', price:3, desc:'Bright neon suit' },
+    { id:'skin_stealth', type:'skin', name:'Stealth Camo', price:2, desc:'Dark camo' },
+    { id:'cos_banner', type:'cosmetic', name:'Victory Banner', price:1, desc:'Small victory banner' }
+  ];
+
+  function updateUI(){
+    bbucksEl.textContent = state.bBucks || 0;
+    winsEl.textContent = state.wins || 0;
+    killsEl.textContent = state.allKills || 0;
+    playerSkinEl.textContent = 'Skin: ' + (state.equippedSkin || 'Default');
+    ownedEl.textContent = state.cosmetics && state.cosmetics.length ? 'Owned: ' + state.cosmetics.join(', ') : 'No cosmetics owned';
+  }
+
+  function showLobby(){ screen.style.display = 'flex'; screen.setAttribute('aria-hidden','false'); updateUI(); }
+  function hideLobby(){ screen.style.display = 'none'; screen.setAttribute('aria-hidden','true'); }
+
+  openBtn.addEventListener('click', ()=> { showLobby(); });
+
+  closeBtn.addEventListener('click', ()=> { hideLobby(); });
+
+  // Start: hide lobby and attempt to show existing landing screen if present
+  startBtn.addEventListener('click', ()=>{
+    hideLobby();
+    const landing = document.getElementById('landingScreen');
+    if (landing){
+      // try to show landing (best-effort)
+      landing.classList.remove('hidden');
+      landing.style.display = '';
+      // hide gameScreen if present
+      const gs = document.getElementById('gameScreen');
+      if (gs) gs.classList.add('hidden');
+    } else if (typeof startGame === 'function') {
+      // fallback to calling startGame if it exists
+      try { startGame(); } catch(e){ console.warn('startGame invocation failed', e); }
+    } else {
+      // no landing, inform user
+      alert('Landing screen not found in page — lobby closed.');
+    }
+  });
+
+  // Change Room modal
+  changeRoomBtn.addEventListener('click', ()=>{
+    buildChangeList();
+    changeModal.style.display = 'flex';
+    changeModal.setAttribute('aria-hidden','false');
+  });
+  changeModalClose.addEventListener('click', ()=>{
+    changeModal.style.display = 'none';
+    changeModal.setAttribute('aria-hidden','true');
+  });
+
+  function buildChangeList(){
+    changeList.innerHTML = '';
+    if (!(state.cosmetics && state.cosmetics.length)){
+      const div = document.createElement('div');
+      div.className = 'lobbyItemInjected';
+      div.textContent = 'No cosmetics available. Visit the Shop to purchase.';
+      changeList.appendChild(div);
+      return;
+    }
+    state.cosmetics.forEach(cid => {
+      const item = catalog.find(c=>c.id===cid) || { id:cid, name:cid, type:'cosmetic' };
+      const wrap = document.createElement('div');
+      wrap.className = 'lobbyItemInjected';
+      const left = document.createElement('div');
+      left.innerHTML = `<div style="font-weight:800">${item.name}</div><div class="smallMutedInjected">${item.desc||''}</div>`;
+      const right = document.createElement('div');
+      const equip = document.createElement('button');
+      equip.className = 'lobbyAltBtnInjected';
+      equip.textContent = 'Equip';
+      equip.addEventListener('click', ()=>{
+        if (item.type === 'skin') state.equippedSkin = item.name;
+        persistState(state);
+        updateUI();
+        alert('Equipped: ' + item.name);
+      });
+      right.appendChild(equip);
+      wrap.appendChild(left); wrap.appendChild(right);
+      changeList.appendChild(wrap);
+    });
+  }
+
+  // Shop modal build
+  shopBtn.addEventListener('click', ()=> {
+    buildShopList();
+    shopModal.style.display = 'flex';
+    shopModal.setAttribute('aria-hidden','false');
+  });
+  shopModalClose.addEventListener('click', ()=> {
+    shopModal.style.display = 'none';
+    shopModal.setAttribute('aria-hidden','true');
+  });
+
+  function buildShopList(){
+    shopList.innerHTML = '';
+    catalog.forEach(item => {
+      const wrap = document.createElement('div');
+      wrap.className = 'lobbyItemInjected';
+      const left = document.createElement('div');
+      left.innerHTML = `<div style="font-weight:800">${item.name}</div><div class="smallMutedInjected">${item.desc}</div>`;
+      const right = document.createElement('div');
+      right.style.display = 'flex';
+      right.style.gap = '8px';
+      const price = document.createElement('div');
+      price.className = 'smallMutedInjected';
+      price.textContent = item.price + ' B-Bucks';
+      const buy = document.createElement('button');
+      buy.className = 'lobbyAltBtnInjected';
+      buy.textContent = 'Buy';
+      buy.addEventListener('click', ()=> {
+        if (state.bBucks >= item.price){
+          state.bBucks -= item.price;
+          state.cosmetics = state.cosmetics || [];
+          state.cosmetics.push(item.id);
+          if (item.type === 'skin') state.equippedSkin = item.name;
+          persistState(state);
+          updateUI();
+          alert('Purchased: ' + item.name);
+        } else {
+          alert('Not enough B-Bucks. Earn them by winning (1 B-Buck per win).');
+        }
+      });
+      right.appendChild(price);
+      right.appendChild(buy);
+      wrap.appendChild(left);
+      wrap.appendChild(right);
+      shopList.appendChild(wrap);
+    });
+  }
+
+  // Function to credit a win (idempotent guard per invocation optionally)
+  let lastWinTimestamp = 0;
+  function creditWin(fromPlayerKills){
+    const now = Date.now();
+    if (now - lastWinTimestamp < 1500) return; // simple debounce
+    lastWinTimestamp = now;
+    state.wins = (state.wins || 0) + 1;
+    state.bBucks = (state.bBucks || 0) + 1; // 1 B-Buck per win
+    if (typeof fromPlayerKills === 'number') state.allKills = (state.allKills || 0) + fromPlayerKills;
+    persistState(state);
+    updateUI();
+  }
+
+  // Observe victory screen presence (if exists). Will attempt to detect show events and credit a win.
+  (function hookVictoryDetection(){
+    const victoryEl = document.getElementById('victoryScreen');
+    if (victoryEl){
+      const observer = new MutationObserver((mutations)=>{
+        for (const m of mutations){
+          if (m.type === 'attributes'){
+            // visible detection: not hidden, display not 'none', opacity > 0
+            const comp = window.getComputedStyle(victoryEl);
+            const visible = comp && comp.display !== 'none' && comp.visibility !== 'hidden' && parseFloat(comp.opacity||'1') > 0;
+            if (visible) {
+              // attempt to get player.kills if present
+              let kills = undefined;
+              try { if (typeof player !== 'undefined' && player && typeof player.kills === 'number') kills = player.kills; } catch(e){}
+              creditWin(kills);
+            }
+          }
+        }
+      });
+      observer.observe(victoryEl, { attributes:true, attributeFilter:['class','style','aria-hidden'] });
+    } else {
+      // fallback: if continueBtn exists, hook click
+      const cont = document.getElementById('continueBtn');
+      if (cont){
+        cont.addEventListener('click', ()=> {
+          let kills = undefined;
+          try { if (typeof player !== 'undefined' && player && typeof player.kills === 'number') kills = player.kills; } catch(e){}
+          creditWin(kills);
+        });
+      }
+    }
+  })();
+
+  // Hook goHomeBtn if exists to auto-open lobby (optional behavior)
+  const goHome = document.getElementById('goHomeBtn');
+  if (goHome){
+    goHome.addEventListener('click', ()=> {
+      persistState(state);
+      // show lobby so user sees updated B-Bucks
+      showLobby();
+    });
+  }
+
+  // Expose show/hide in case you want to call them externally
+  window.showLobbyInjected = showLobby;
+  window.hideLobbyInjected = hideLobby;
+
+  // Update UI initial
+  updateUI();
+
+  // Keep UI in-sync if localStorage changed in another tab
+  window.addEventListener('storage', (ev)=>{
+    if (ev.key === LS_KEY){
+      Object.assign(state, loadState());
+      updateUI();
+    }
+  });
+
+  // Make sure that if your page dynamically replaces DOM, our open button still available
+  const topLevelObserver = new MutationObserver(()=> {
+    if (!document.getElementById('lobbyInjectBtn')) {
+      document.body.appendChild(openBtn);
+    }
+  });
+  topLevelObserver.observe(document.documentElement, { childList:true, subtree:true });
+
+  // Helpful console info
+  console.log('Lobby injection loaded. Use the yellow "Lobby" button at top-right to open.');
+})();
+</script>
+<!-- LOBBY APPEND END -->
+<!-- LOBBY NAME EDIT + CHEAT CODE APPEND START -->
 <style>
   /* Simple styles for inline name edit and cheat modal */
   #lobbyNameInput {