fixed pack opening game

Author: Im2008

navigation/Minigames/pack.md

@@ -7,7 +7,7 @@ Author: Aarush & Ian
 ---
 
 <meta charset="UTF-8" />
-<title>:feet: TGDP Pack Opening Game</title>
+<title>👣 TGDP Pack Opening Game</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
 <style>
   body {
@@ -58,7 +58,7 @@ Author: Aarush & Ian
   @keyframes explode {
     0% {transform: scale(0); opacity: 0;}
     50% {transform: scale(1.5); opacity: 1;}
-    100% {transform: scale(1);}
+    100% {transform: scale(1); opacity: 1;}
   }
   .pack-opening {
     font-size: 2em;
@@ -85,22 +85,25 @@ Author: Aarush & Ian
   }
 </style>
 <div class="container mt-5">
-  <h1>:feet: TGDP Pack Opening</h1>
+  <h1>👣 TGDP Pack Opening</h1>
   <div id="coinBalance">Coins: 100</div>
   <p>Each pack costs 5 coins.</p>
   <p>Choose a pack to open:</p>
   <button class="btn btn-success pack-btn" id="jungleBtn" onclick="openPack('jungle')">Jungle Pack</button>
   <button class="btn btn-primary pack-btn" id="oceanBtn" onclick="openPack('ocean')">Ocean Pack</button>
   <button class="btn btn-warning pack-btn" id="desertBtn" onclick="openPack('desert')">Desert Pack</button>
   <button class="btn btn-info pack-btn" id="arcticBtn" onclick="openPack('arctic')">Arctic Pack</button>
-  <button class="btn btn-warning binder-btn" onclick="showBinder()">:ledger: Binder</button>
+  <button class="btn btn-warning binder-btn" onclick="showBinder()">📓 Binder</button>
   <div id="openingText" class="pack-opening d-none">Opening Pack...</div>
   <div id="cardArea" class="card-container"></div>
   <div id="binderArea" class="card-container d-none"></div>
 </div>
 <script>
   let coins = 100;
   const packCost = 5;
+  let isOpening = false;
+  const collectedCards = JSON.parse(localStorage.getItem('collectedCards') || '[]');
+
   const packs = {
     jungle: [
       { name: 'Leafy Lemur', rarity: 'common' },
@@ -131,39 +134,37 @@ Author: Aarush & Ian
       { name: 'Frost Wolf', rarity: 'rare' }
     ]
   };
+
   const cardImageMap = {
-    'Leafy Lemur': 'https://upload.wikimedia.org/wikipedia/commons/4/46/Blue-eyed_lemur.jpg',
-    'Jungle Squirrel': 'https://upload.wikimedia.org/wikipedia/commons/6/6b/Red-bellied_Squirrel.JPG',
-    'Tree Tamarin': 'https://upload.wikimedia.org/wikipedia/commons/1/11/Golden_Lion_Tamarin_Rio_de_Janeiro_Zoo.jpg',
-    'Vine Panther': 'https://upload.wikimedia.org/wikipedia/commons/e/e3/Jaguar_1.jpg',
-    'Jungle King': 'https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg',
-    'Bubble Fish': 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Blue_tang_fish_2.jpg',
-    'Sea Otter': 'https://upload.wikimedia.org/wikipedia/commons/1/1a/Sea_otter_with_kelp.jpg',
-    'Coral Crab': 'https://upload.wikimedia.org/wikipedia/commons/9/98/Xanthidae_Crab.jpg',
-    'Sharkfin Ray': 'https://upload.wikimedia.org/wikipedia/commons/d/d8/Sharkray_Cephalopterus_latirostris_2.jpg',
-    'Leviathan': 'https://upload.wikimedia.org/wikipedia/commons/3/37/Blue_Whale_2008-10-24_11-31-57.jpg',
-    'Sand Scorpion': 'https://upload.wikimedia.org/wikipedia/commons/e/e3/Desert_Scorpion.jpg',
-    'Dune Lizard': 'https://upload.wikimedia.org/wikipedia/commons/8/84/Dune_lizard.jpg',
-    'Cactus Hare': 'https://upload.wikimedia.org/wikipedia/commons/1/1a/Desert_Jackrabbit.jpg',
-    'Desert Fox': 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Fennec_Fox_2010_2.JPG',
-    'Sand Serpent': 'https://upload.wikimedia.org/wikipedia/commons/5/5c/Sidewinder_Mojave_desert.jpg',
-    'Snow Hare': 'https://upload.wikimedia.org/wikipedia/commons/e/e1/Lepus_timidus.jpg',
-    'Ice Owl': 'https://upload.wikimedia.org/wikipedia/commons/e/e5/Snowy_Owl_-_Alaska.jpg',
-    'Polar Fox': 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Arctic_Fox_-_Alaska.jpg',
-    'Glacier Bear': 'https://upload.wikimedia.org/wikipedia/commons/1/1b/Polar_bear_-_Alaska.jpg',
-    'Frost Wolf': 'https://upload.wikimedia.org/wikipedia/commons/9/98/Wolf_on_Snow.jpg'
+    'Leafy Lemur': '{{site.baseurl}}/images/icon1.png',
+    'Jungle Squirrel': '{{site.baseurl}}/images/icon2.png',
+    'Tree Tamarin': '{{site.baseurl}}/images/icon3.png',
+    'Vine Panther': '{{site.baseurl}}/images/icon4.png',
+    'Jungle King': '{{site.baseurl}}/images/icon5.png',
+    'Bubble Fish': '{{site.baseurl}}/images/icon6.png',
+    'Sea Otter': '{{site.baseurl}}/images/icon7.png',
+    'Coral Crab': '{{site.baseurl}}/images/icon8.png',
+    'Sharkfin Ray': '{{site.baseurl}}/images/icon9.png',
+    'Leviathan': '{{site.baseurl}}/images/icon10.png',
+    'Sand Scorpion': '{{site.baseurl}}/images/icon11.png',
+    'Dune Lizard': '{{site.baseurl}}/images/icon12.png',
+    'Cactus Hare': '{{site.baseurl}}/images/icon13.png',
+    'Desert Fox': '{{site.baseurl}}/images/icon14.png',
+    'Sand Serpent': '{{site.baseurl}}/images/icon15.png',
+    'Snow Hare': '{{site.baseurl}}/images/icon16.png',
+    'Ice Owl': '{{site.baseurl}}/images/icon17.png',
+    'Polar Fox': '{{site.baseurl}}/images/icon18.png',
+    'Glacier Bear': '{{site.baseurl}}/images/icon19.png',
+    'Frost Wolf': '{{site.baseurl}}/images/icon20.png'
   };
-  const collectedCards = [];
-  function getImageUrlForName(name) {
-    return cardImageMap[name] || 'https://via.placeholder.com/150?text=No+Image';
-  }
-  // Coin rewards per rarity
+
   const coinRewards = {
     common: 1,
     uncommon: 3,
     rare: 7,
     legendary: 15
   };
+
   function getRandomCard(pack) {
     const rand = Math.random();
     let rarity;
@@ -174,39 +175,48 @@ Author: Aarush & Ian
     const candidates = pack.filter(c => c.rarity === rarity);
     return candidates[Math.floor(Math.random() * candidates.length)];
   }
+
   function updateCoinDisplay() {
     document.getElementById('coinBalance').textContent = `Coins: ${coins}`;
-    // Disable buttons if coins are insufficient
     ['jungleBtn', 'oceanBtn', 'desertBtn', 'arcticBtn'].forEach(id => {
-      document.getElementById(id).disabled = coins < packCost;
+      document.getElementById(id).disabled = coins < packCost || isOpening;
     });
   }
+
   function openPack(type) {
+    if (isOpening) return;
     if (coins < packCost) {
       alert("You don't have enough coins to open this pack!");
       return;
     }
+
+    isOpening = true;
     coins -= packCost;
     updateCoinDisplay();
-    disableButtons();
+
     const cardArea = document.getElementById('cardArea');
     const openingText = document.getElementById('openingText');
     const binderArea = document.getElementById('binderArea');
+
     binderArea.classList.add('d-none');
     cardArea.innerHTML = '';
     openingText.classList.remove('d-none');
+
     setTimeout(() => {
       openingText.classList.add('d-none');
+
       const cards = [];
       for (let i = 0; i < 6; i++) {
         cards.push(getRandomCard(packs[type]));
       }
+
       let totalReward = 0;
+
       cards.forEach((card, index) => {
         setTimeout(() => {
           const cardDiv = document.createElement('div');
           cardDiv.className = `card game-card ${card.rarity}`;
-          const imgUrl = getImageUrlForName(card.name);
+          const imgUrl = cardImageMap[card.name] || '{{site.baseurl}}/images/placeholder.png';
           cardDiv.innerHTML = `
             <img src="${imgUrl}" class="card-img-top" alt="${card.name}" width="150" height="150" />
             <div class="card-body">
@@ -216,40 +226,36 @@ Author: Aarush & Ian
           cardArea.appendChild(cardDiv);
           saveToBinder(card);
           totalReward += coinRewards[card.rarity] || 0;
-          // After last card shown, add reward coins and update display
-          if(index === cards.length - 1) {
+
+          if (index === cards.length - 1) {
             coins += totalReward;
             setTimeout(() => {
               alert(`You earned ${totalReward} coins from this pack!`);
+              isOpening = false;
               updateCoinDisplay();
-              enableButtons();
-            }, 400);
+            }, 800); // wait for animation to complete before alert
           }
-        }, index * 400);
+        }, index * 500);
       });
     }, 1000);
   }
+
   function rarityColor(rarity) {
     return {
       common: 'secondary',
       uncommon: 'success',
-      rare: 'info',
-      legendary: 'warning'
-    }[rarity];
-  }
-  function disableButtons() {
-    ['jungleBtn', 'oceanBtn', 'desertBtn', 'arcticBtn'].forEach(id => {
-      document.getElementById(id).disabled = true;
-    });
-  }
-  function enableButtons() {
-    updateCoinDisplay();
+      rare: 'primary',
+      legendary: 'danger'
+    }[rarity] || 'secondary';
   }
+
   function saveToBinder(card) {
     if (!collectedCards.find(c => c.name === card.name)) {
       collectedCards.push(card);
+      localStorage.setItem('collectedCards', JSON.stringify(collectedCards));
     }
   }
+
   function showBinder() {
     const cardArea = document.getElementById('cardArea');
     const binderArea = document.getElementById('binderArea');
@@ -259,7 +265,7 @@ Author: Aarush & Ian
     collectedCards.forEach(card => {
       const cardDiv = document.createElement('div');
       cardDiv.className = `card game-card ${card.rarity}`;
-      const imgUrl = getImageUrlForName(card.name);
+      const imgUrl = cardImageMap[card.name] || '{{site.baseurl}}/images/placeholder.png';
       cardDiv.innerHTML = `
         <img src="${imgUrl}" class="card-img-top" alt="${card.name}" width="150" height="150" />
         <div class="card-body">
@@ -269,25 +275,22 @@ Author: Aarush & Ian
       binderArea.appendChild(cardDiv);
     });
   }
-  // Initialize coin display on load
+
+  // Initialize
   updateCoinDisplay();
 </script>
 
 <script>
-// filepath: /home/kasm-user/nighthawk/GenomeGamersFrontend/navigation/Worlds/world0.md
-// ...existing code...
+  // --- Background Music ---
+  const music = new Audio('{{site.baseurl}}/assets/audio/11confrontingmyself.mp3');
+  music.loop = true;
+  music.volume = 0.5;
 
-// --- Background Music ---
-const music = new Audio('{{site.baseurl}}/assets/audio/11confrontingmyself.mp3'); // Change path as needed
-music.loop = true;
-music.volume = 0.5;
-
-// Play music after first user interaction (required by browsers)
-function startMusicOnce() {
-  music.play().catch(() => {});
-  window.removeEventListener('click', startMusicOnce);
-  window.removeEventListener('keydown', startMusicOnce);
-}
-window.addEventListener('click', startMusicOnce);
-window.addEventListener('keydown', startMusicOnce);
-</script>
+  function startMusicOnce() {
+    music.play().catch(() => {});
+    window.removeEventListener('click', startMusicOnce);
+    window.removeEventListener('keydown', startMusicOnce);
+  }
+  window.addEventListener('click', startMusicOnce);
+  window.addEventListener('keydown', startMusicOnce);
+</script>