Fix energy update text

GammaSpace · Nov 6, 2023 · a648330 · a648330
1 parent db4572a
commit a648330
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/twine_src/main.twee b/twine_src/main.twee
@@ -53,7 +53,7 @@ What's your planet name?
 
         <div class="relative w-2/3 block h-6 bg-neutral-200 rounded-full dark:bg-neutral-700">
             <div id="energyChangeText" class="h-6 flex items-center text-white text-sm z-40 energy-change-text absolute left-2"></div>
-            <div class="h-6 relative bg-neutral-600 rounded-full dark:bg-neutral-500 max-w-full"
+            <div class="h-6 relative bg-neutral-600 rounded-full dark:bg-neutral-500 max-w-full energy-bar"
             style="width: <%= setup.game.energy / 700 * 100 %>%"></div>
         </div>
         <div class="ml-6 block text-sm">Turn: <span id="turnCounter"><%= setup.game.turn %></span></div>

diff --git a/twine_src/scripts/init.js b/twine_src/scripts/init.js
@@ -174,9 +174,7 @@ story.state.setIt = function () {
 story.state.changeEnergy = function (change) {
   setup.game.energy += change;
   console.log("Energy is now ", setup.game.energy);
-  setup.updateEnergy(setup.game.energy);
-
-  // Animate the energy change text
+  setup.updateEnergyBar();
   var energyChangeText = document.getElementById("energyChangeText");
   if (change >= 0) {
     energyChangeText.innerText = `+${change}`;
@@ -252,7 +250,7 @@ setup.returnToMap = function () {
 
   story.state.currentPlanetIndex = null;
 
-  setup.updateEnergy();
+  // setup.updateEnergy();
 };
 
 setup.showRandomIncompleteScenario = function () {
@@ -344,12 +342,14 @@ setup.toggleHUD = function (shouldShow) {
     console.error("HUD element not found");
   }
 };
-setup.updateEnergy = function (change) {
-  var energy = document.getElementById("energy");
-  if (energy) {
-    energy.innerHTML = setup.game.energy;
+setup.updateEnergyBar = function () {
+  var energyBar = document.querySelector(".energy-bar"); // Assuming you add a class "energy-bar" to the div
+  if (energyBar) {
+    var newWidth = (setup.game.energy / 700) * 100;
+    newWidth = Math.min(Math.max(newWidth, 0), 100); // Clamp the value between 0 and 100
+    energyBar.style.width = newWidth + "%";
   } else {
-    console.error("Energy element not found");
+    console.error("Energy bar element not found");
   }
 };