deploy: 3d9aec4

GammaSpace · Nov 12, 2023 · ff56a41 · ff56a41
1 parent 2b69765
commit ff56a41
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 33 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,3 @@
+always-auth=true
+//npm.greensock.com/:_authToken=40211386-6c8f-4a85-badf-15f3046db122
+@gsap:registry=https://npm.greensock.com
diff --git a/css/main.css b/css/main.css
@@ -61,7 +61,7 @@ html {
 }
 
 .passage-choices span {
-  @apply underline font-bold cursor-pointer hover:text-neutral-950 text-neutral-800;
+  @apply block font-bold cursor-pointer hover:text-neutral-950 text-neutral-800 border-b-2 border-b-neutral-800;
 }
 
 .active-turn img {

diff --git a/index.html b/index.html
@@ -1852,11 +1852,14 @@
 }
 
 .passage-choices span{
+  display: block;
   cursor: pointer;
+  border-bottom-width: 2px;
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(38 38 38 / var(--tw-border-opacity));
   font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(38 38 38 / var(--tw-text-opacity));
-  text-decoration-line: underline;
 }
 
 .passage-choices span:hover{
@@ -2334,9 +2337,12 @@
     padding-right: 2rem;
   }
 }
-</style><script role="script" id="twine-user-script" type="text/twine-javascript">/* twine-user-script #1: "init.js" */
+</style><script role="script" id="twine-user-script" type="text/twine-javascript">/* twine-user-script #1: "2.init.js" */
 window.setup = window.setup || {};
+
 $(document).ready(function () {
+  $.getScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js");
+
   setup.game = {
     planets: [
       {
@@ -2429,24 +2435,42 @@
   $(document).on("click", "div[data-next]", function (e) {
     var passageName = $(this).attr("data-next");
     renderToSelector("#passage", passageName);
+    setup.typewriter();
   });
 
   setup.startObserving = function () {
-    var targetNode = document.getElementById("passageContainer");
-    if (targetNode) {
-      var config = { childList: true, subtree: true };
-      var callback = function (mutationsList, observer) {
+    var passageContainerNode = document.getElementById("passageContainer");
+    var passageNode = document.getElementById("passage");
+
+    if (passageContainerNode) {
+      var containerConfig = { childList: true, subtree: true };
+      var containerCallback = function (mutationsList, observer) {
         for (var mutation of mutationsList) {
           if (mutation.type === "childList") {
             setup.modifyLinks();
             break;
           }
         }
       };
-      var observer = new MutationObserver(callback);
-      observer.observe(targetNode, config);
+      var containerObserver = new MutationObserver(containerCallback);
+      containerObserver.observe(passageContainerNode, containerConfig);
     } else {
-      setTimeout(startObserving, 500);
+      setTimeout(setup.startObserving, 500);
+    }
+
+    if (passageNode) {
+      var passageConfig = { childList: true, subtree: true };
+      var passageCallback = function (mutationsList, observer) {
+        for (var mutation of mutationsList) {
+          if (mutation.type === "childList") {
+            console.log("A child node has been added or removed.");
+            // setup.typewriter();
+            break;
+          }
+        }
+      };
+      var passageObserver = new MutationObserver(passageCallback);
+      passageObserver.observe(passageNode, passageConfig);
     }
   };
 
@@ -2573,6 +2597,8 @@
       if (hud) hud.style.display = "flex";
       if (passageContainer) {
         passage.innerHTML = passageContent;
+        setup.typewriter();
+
         if (planetContentContainer) {
           planetContentContainer.innerHTML = planetContent;
         }
@@ -2630,7 +2656,6 @@
         const planetContainer = document.createElement("div");
         planetContainer.className = `planet-container planet-container${planet.id}`;
 
-        // Check if the planet has been helped
         const hasBeenHelped = story.state.helpedPlanets.some(
           (helpedPlanet) =>
             helpedPlanet.planet === planet.id && helpedPlanet.timesHelped > 0
@@ -2674,10 +2699,10 @@
         playerPlanetImg.src = story.state.playerPlanet.imgSrc;
 
         playerPlanetImg.onload = function () {
-          playerPlanetImg.addEventListener("click", function () {
-            setup.renderPlanetPassage("player");
-            setup.toggleHUD(true);
-          });
+          playerPlanetImg.addEventListener(
+            "click",
+            setup.handlePlanetClick("player")
+          );
           playerPlanetContainer.appendChild(playerPlanetImg);
           setup.appendTooltip(story.state.playerPlanet, playerPlanetContainer);
           mapScreen.appendChild(playerPlanetContainer);
@@ -2879,13 +2904,26 @@
   setup.handlePlanetClick = function (planetIndex) {
     return function (event) {
       if (!story.state.scenarioCompletedThisTurn) {
-        setup.renderPlanetPassage(planetIndex);
-        setup.toggleHUD(true);
+        if (planetIndex === "player") {
+          var passage = document.getElementById("passage");
+          if (passage) {
+            passage.innerHTML = `<div class="uppercase text-sm">
+            ${story.state.playerName}'s Project</div>
+            <p>${story.state.playerPlanet.description}</p>
+            `;
+            setup.toggleHUD(true);
+            setup.typewriter();
+          }
+        } else {
+          setup.renderPlanetPassage(planetIndex);
+          setup.toggleHUD(true);
+        }
       } else {
         console.log("A scenario has already been completed this turn.");
       }
     };
   };
+
   setup.attachEventListenersToPlanets = function () {
     document.querySelectorAll(".planet").forEach((planetElement, index) => {
       const planetIndex = planet.id;
@@ -2907,9 +2945,24 @@
     const planet = setup.game.planets.find((p) => p.id === planetId);
     return planet ? planet.name : null;
   };
+  setup.typewriter = function () {
+    var passage = document.getElementById("passage");
+    if (passage && passage.textContent.trim() !== "") {
+      var split = new SplitText("#passage", {
+        type: "words",
+      });
+      gsap.from(split.words, {
+        autoAlpha: 0,
+        ease: "power3",
+        stagger: 0.1,
+      });
+    }
+  };
 });
 /* twine-user-script #2: "utilities.js" */
-</script><tw-passagedata pid="1" name="Start" tags="" position="100,100" size="100,100">&lt;% $(&quot;body&quot;).toggleClass(&quot;customization&quot;) %&gt;
+</script><tw-passagedata pid="1" name="Start" tags="" position="100,100" size="100,100">&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;/scripts/1.SplitText.min.js&quot;&gt;&lt;/script&gt;
+&lt;% $(&quot;body&quot;).toggleClass(&quot;customization&quot;) %&gt;
 
 &lt;div class=&quot;mx-auto max-w-7xl px-4 sm:px-6 lg:px-8&quot;&gt;
   &lt;div class=&quot;mx-auto max-w-3xl customization-form&quot;&gt;

diff --git a/package-lock.json b/package-lock.json