From 59ef527a4e71a5cd356df414553f54ac748dea98 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 5 Nov 2023 14:47:42 -0500
Subject: [PATCH] Add progress bar

---
 css/main.css              |  8 +++-
 twine_src/css/output.css  | 83 ++++++++++++++++++++++++++++++++++++---
 twine_src/main.twee       | 52 ++++++++++++------------
 twine_src/scripts/init.js | 54 ++++++-------------------
 4 files changed, 122 insertions(+), 75 deletions(-)

diff --git a/css/main.css b/css/main.css
index de497dd..86fc128 100644
--- a/css/main.css
+++ b/css/main.css
@@ -55,9 +55,13 @@ html {
 #rep {
   @apply flex flex-col self-end -ml-6 z-30 relative w-72;
 }
-
-.repImage {
+.passage-choices {
+  @apply flex flex-row justify-between;
+}
+.passage-choices span {
+  @apply underline font-bold cursor-pointer hover:text-neutral-950 text-neutral-800;
 }
+
 #passageContainer {
   @apply self-end flex-col w-full p-6 md:max-h-96 overflow-y-auto bg-neutral-400;
 }
diff --git a/twine_src/css/output.css b/twine_src/css/output.css
index 1022c9f..2f89333 100644
--- a/twine_src/css/output.css
+++ b/twine_src/css/output.css
@@ -1113,6 +1113,10 @@ video {
   position: absolute;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1123,10 +1127,19 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
 .-mb-4 {
   margin-bottom: -1rem;
 }
 
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -1143,10 +1156,18 @@ video {
   height: 10rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .w-40 {
   width: 10rem;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1163,8 +1184,13 @@ video {
   justify-content: center;
 }
 
-.justify-between {
-  justify-content: space-between;
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.bg-neutral-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 229 229 / var(--tw-bg-opacity));
 }
 
 .bg-neutral-300 {
@@ -1172,15 +1198,24 @@ video {
   background-color: rgb(212 212 212 / var(--tw-bg-opacity));
 }
 
-.bg-red-200 {
+.bg-neutral-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(163 163 163 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
 }
 
 .p-1 {
   padding: 0.25rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1200,10 +1235,20 @@ video {
   line-height: 1.25rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
 
+.text-neutral-900 {
+  --tw-text-opacity: 1;
+  color: rgb(23 23 23 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1281,7 +1326,23 @@ html {
   align-self: flex-end;
 }
 
-.repImage {
+.passage-choices {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.passage-choices span {
+  cursor: pointer;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(38 38 38 / var(--tw-text-opacity));
+  text-decoration-line: underline;
+}
+
+.passage-choices span:hover {
+  --tw-text-opacity: 1;
+  color: rgb(10 10 10 / var(--tw-text-opacity));
 }
 
 #passageContainer {
@@ -1394,3 +1455,15 @@ tw-story {
 #sidebar li:hover {
   background-color: #555;
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-neutral-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(115 115 115 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-neutral-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+  }
+}
diff --git a/twine_src/main.twee b/twine_src/main.twee
index 0d0021f..d919a64 100644
--- a/twine_src/main.twee
+++ b/twine_src/main.twee
@@ -46,15 +46,25 @@ What's your planet name?
 
 <% console.log(setup.game) %>
 <% console.log(s) %>
-<!-- <div style="position: absolute; top: 0; left: 0; padding: 20px; color: white; z-index: 200">hello <%= s.playerName %>! Your planet is called <%= s.planetName %>.</div> -->
 
     <div id="mapScreen"></div>
+    <div id="hudTop" class="w-full p-2 bg-neutral-400 text-neutral-900 absolute top-0 flex flex-row">
+        <div class="block text-sm mr-6">Energy:</div>
+    
+        <div id="hudTop" class="w-full block h-6 bg-neutral-200 rounded-full dark:bg-neutral-700">
+            <div class="h-6 bg-neutral-600 rounded-full dark:bg-neutral-500"
+            style="width: <%= setup.game.energy / 700 * 100 %>%">
+            </div>
+        </div>
+        <div class="block text-sm mx-6">Turn:</div>
+        <div class="block text-sm">1</div>
+    </div>
     <div id="hud">
 
         <div id="planet-splash" class="flex-shrink-0"></div>
         <div id="planet-info">
             <div id="rep" class=""></div>
-            <div id="passageContainer" class="bg-red-200">
+            <div id="passageContainer">
                 <div id="passage"  class="prose prose-neutral max-width-full"></div>
             </div>
         </div>
@@ -64,7 +74,7 @@ What's your planet name?
         <div id="planetContent" class="text-base my-2 py-6"></div>
 
         <ul>
-            <li id="">ENERGY: <span id="energy"><%= setup.game.energy %></span></li>
+            <li id="">ENERGY: <span class="energy"><%= setup.game.energy %></span></li>
             <li id="buddyUp">BUDDY UP</li>
             <li id="trackTime">TRACK TIME</li>
             <li id="engageInProject">ENGAGE IN PROJECT</li>
@@ -76,6 +86,7 @@ What's your planet name?
 
 <script>
   setup.showMap();
+  setup.toggleHUDTop(true)
 </script>
 <!-- 
 [[Help Planets|HelpPlanets]]
@@ -94,8 +105,10 @@ What's your planet name?
 :: Melodic Quest
 The Intergalactic Orchestra has lost its melody, scattering notes across the cosmos. Retrieve the musical fragments to restore harmony to the galaxy.
 
-<div class="flex flex-row justify-between">
-    <a onclick='story.state.changeEnergy(10); story.show("Start")'>Help planet</a>
+<div class="passage-choices">
+    <span onclick='story.state.changeEnergy(10); story.show("Start")'>
+        Gather musical fragments (+10 energy)
+    </span>
     [[Move on…|Start]]
 </div>
 
@@ -103,29 +116,18 @@ The Intergalactic Orchestra has lost its melody, scattering notes across the cos
 :: Quantum Conundrum
 A quantum computer has gone haywire, creating chaos in the time-space continuum. Solve complex puzzles to recalibrate the machine and stabilize reality.
 
+<div class="passage-choices">
+    <span onclick='story.state.changeEnergy(200); story.show("Start")'>Solve puzzles (+200 energy)</span>
+    [[Forget it…|Start]]
+</div>
+
 :: Stellar Cradle
 A newborn nebula is struggling to form stars. Gather stardust and cosmic energy to nurture its growth and witness the birth of new suns.
 
-:: Asteroid Deflection
-An asteroid is on a collision course with a peaceful planet. Devise a plan to redirect its trajectory and save the planet's inhabitants from disaster.
-
-:: Horticultural Healing
-A rare space garden is withering due to a mysterious blight. Research alien flora and concoct a remedy to revive the extraterrestrial vegetation.
-
-:: Stellar Cartography
-Star maps have been scrambled by a solar storm, leaving travelers astray. Chart the stars anew to guide lost ships back to safe harbors.
-
-:: Luminous Labyrinth
-Eerie lights have been sighted near a black hole, spooking spacefarers. Investigate the phenomenon to uncover whether it's a natural occurrence or something more.
-
-:: Climate Conundrum
-A planet's weather system has gone rogue, unleashing extreme conditions. Analyze atmospheric data to unravel the cause and restore climatic balance.
-
-:: Android Anarchy
-A fleet of robots has malfunctioned and is causing mayhem on a mining moon. Reprogram the rogue automatons to prevent a full-scale disaster.
-
-:: Warp Wayfarer
-A network of wormholes is malfunctioning, stranding travelers in unknown sectors. Traverse the treacherous paths to repair the wormholes and reunite lost travelers with their destinations.
+<div class="passage-choices">
+    <span onclick='story.state.changeEnergy(100); story.show("Start")'>Gather stardust (+100 energy)</span>
+    [[Forget it…|Start]]
+</div>
 
 
 :: HelpPlanets
diff --git a/twine_src/scripts/init.js b/twine_src/scripts/init.js
index 088660e..8b40e81 100644
--- a/twine_src/scripts/init.js
+++ b/twine_src/scripts/init.js
@@ -72,60 +72,21 @@ setup.game = {
       description:
         "The Intergalactic Orchestra has lost its melody, scattering notes across the cosmos. Retrieve the musical fragments to restore harmony to the galaxy.",
       relatedPassage: "Melodic Quest",
+      complete: false,
     },
     {
       title: "Quantum Quandary",
       description:
         "A quantum computer has gone haywire, creating chaos in the time-space continuum. Solve complex puzzles to recalibrate the machine and stabilize reality.",
       relatedPassage: "Quantum Conundrum",
+      complete: false,
     },
     {
       title: "Nebula Nurturing",
       description:
         "A newborn nebula is struggling to form stars. Gather stardust and cosmic energy to nurture its growth and witness the birth of new suns.",
       relatedPassage: "Stellar Cradle",
-    },
-    {
-      title: "Asteroid Anomaly",
-      description:
-        "An asteroid is on a collision course with a peaceful planet. Devise a plan to redirect its trajectory and save the planet's inhabitants from disaster.",
-      relatedPassage: "Asteroid Deflection",
-    },
-    {
-      title: "Galactic Gardening",
-      description:
-        "A rare space garden is withering due to a mysterious blight. Research alien flora and concoct a remedy to revive the extraterrestrial vegetation.",
-      relatedPassage: "Horticultural Healing",
-    },
-    {
-      title: "Cosmic Cartography",
-      description:
-        "Star maps have been scrambled by a solar storm, leaving travelers astray. Chart the stars anew to guide lost ships back to safe harbors.",
-      relatedPassage: "Stellar Cartography",
-    },
-    {
-      title: "Photon Phantoms",
-      description:
-        "Eerie lights have been sighted near a black hole, spooking spacefarers. Investigate the phenomenon to uncover whether it's a natural occurrence or something more.",
-      relatedPassage: "Luminous Labyrinth",
-    },
-    {
-      title: "Meteorological Mystery",
-      description:
-        "A planet's weather system has gone rogue, unleashing extreme conditions. Analyze atmospheric data to unravel the cause and restore climatic balance.",
-      relatedPassage: "Climate Conundrum",
-    },
-    {
-      title: "Rogue Robotics",
-      description:
-        "A fleet of robots has malfunctioned and is causing mayhem on a mining moon. Reprogram the rogue automatons to prevent a full-scale disaster.",
-      relatedPassage: "Android Anarchy",
-    },
-    {
-      title: "Wormhole Woes",
-      description:
-        "A network of wormholes is malfunctioning, stranding travelers in unknown sectors. Traverse the treacherous paths to repair the wormholes and reunite lost travelers with their destinations.",
-      relatedPassage: "Warp Wayfarer",
+      complete: false,
     },
   ],
   turns: [
@@ -272,14 +233,21 @@ setup.showMap = function () {
     });
   }
 };
-
+setup.toggleHUDTop = function (shouldShow) {
+  var hudTop = document.getElementById("hudTop");
+  if (hudTop) {
+    hudTop.style.display = shouldShow ? "flex" : "none";
+  }
+};
 setup.toggleHUD = function (shouldShow) {
   var hud = document.getElementById("hud");
   if (hud) {
     hud.style.display = shouldShow ? "flex" : "none";
+
     if (!shouldShow) {
       var passageContainer = document.getElementById("passageContainer");
       var passage = document.getElementById("passage");
+
       if (passageContainer) {
         passage.innerHTML = ""; // Clear the passage container
       }