adding potion inventory count when brewing potions

css/game.css

@@ -174,6 +174,11 @@ button {
     color: #7E674F;
     font-family: 'Quicksand', sans-serif;
     font-weight: bold;
+    transition: opacity 2s;
+}
+
+#game-status-container:hover {
+    /* opacity: 0.3; */
 }
 
 #game-status-panel {
@@ -207,6 +212,7 @@ button {
 }
 
 #currency-progress {
+    width: 170px;
     height: 10px;
     border-radius: 8px;
     background-color: #dcd4ca;
@@ -409,6 +415,7 @@ button {
     padding: 4px;
     text-align: center;
     vertical-align: middle;
+    position: relative;
 }
 
 #potion-icon {
@@ -425,6 +432,20 @@ button {
     border-radius: 40px;
 }
 
+#potion-icon-container .potion-inventory-count {
+    position: absolute;
+    border-radius: 50%;
+    color: white;
+    text-align: right;
+    line-height: 24px;
+    right: 0;
+    bottom: 0;
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    padding: 8px 12px;
+}
+
 #potion-description {
     margin-left: 0;
 }

index.html

@@ -88,7 +88,7 @@
             <div id="currency-meter-container">
                 <div id="currency-meter-icon"><img src="./images/coin.svg" /></div>
                     <span>0</span>
-                    <progress id="currency-progress" max="1000" value="500"></progress>
+                    <progress id="currency-progress" max="1000" value="500" title="500"></progress>
                     <span>1000</span>
                 </div>
             <div id="current-day-container">
@@ -146,6 +146,7 @@
             <div id="brew-potion-summary-container">
                 <div id="potion-icon-container">
                     <div id="potion-icon"></div>
+                    <div class="potion-inventory-count">1</div>
                 </div>
                 <div id="potion-description">
                     <h2 id="potion-name">Unknown</h2>

ui/gamestatusui.js

@@ -13,6 +13,7 @@ export function hideGameStatusUI(game, stageData) {
 export function updateGameStatusUI(game, stageData) {
     console.log("updating game currency", stageData.currency)
     document.getElementById("currency-progress").value = stageData.currency
+    document.getElementById("currency-progress").title = stageData.currency
 
     document.getElementById("current-day-text").innerHTML = `day ${stageData.currentDay}`
 }

ui/gameui.js

@@ -21,6 +21,7 @@ function displaySelectedIngredients(game, stageData) {
         selectedIngredient.style.display = "flex"
 
         selectedIngredient.getElementsByClassName("selected-ingredient-image")[0].getElementsByTagName('img')[0].src = ingredientData.image
+        
         selectedIngredient.getElementsByClassName("selected-ingredient-description")[0].getElementsByTagName('h2')[0].innerText = ingredientData.title
         selectedIngredient.getElementsByClassName("selected-ingredient-description")[0].getElementsByTagName('p')[0].innerText = ingredientData.description
     }
@@ -40,6 +41,24 @@ function displayBrewPotion(game, stageData) {
     potionIcon.src = potionToBrew.image
     document.getElementById('potion-icon').appendChild(potionIcon)
 
+    const groupedPotionInventory = {}
+    stageData.potionInventory.forEach(potionName => {
+        if (!groupedPotionInventory[potionName]) {
+            groupedPotionInventory[potionName] = 1
+        } else {
+            groupedPotionInventory[potionName]++
+        }
+    })
+
+    const potionCount = groupedPotionInventory[potionToBrew.name] ?? 0
+
+    const potionCountElement = document.getElementById('potion-icon-container').getElementsByClassName("potion-inventory-count")[0]
+    if(potionCount == 0) {
+        potionCountElement.style.display = "none"
+    } else {
+        potionCountElement.style.display = "block"
+        potionCountElement.innerHTML = potionCount
+    }
     document.getElementById('potion-name').innerText = potionToBrew.title
     document.getElementById('potion-properties-list').innerHTML = ''
     potionToBrew.properties.forEach(property => {