diff --git a/css/main.css b/css/main.css index c88a9d3..6d2c9e6 100644 --- a/css/main.css +++ b/css/main.css @@ -35,21 +35,15 @@ html { gap: 10px; overflow: hidden; } - #planet-splash { @apply absolute w-full h-full z-0 flex flex-col; } - #planet-info { - @apply flex flex-row self-end flex-grow z-20 justify-end h-1/3 mx-6; -} -.player-screen { - #planet-info { - @apply h-2/3; - } + @apply flex flex-col self-end flex-grow z-20 justify-end mx-6 w-full md:w-2/3; } + #rep { - @apply flex flex-col self-start z-30 mr-6 w-64; + @apply text-center self-start z-30 w-96 mx-auto my-0; } .repName { @@ -57,7 +51,7 @@ html { } .repImage { - @apply w-40; + @apply w-96 h-96 mx-auto justify-center; } .passage-choices { @@ -70,7 +64,7 @@ html { .active-turn img { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); - animation: pulseGlow 2s infinite; + animation: pulseGlow 8s infinite; } .planet-container.active-turn::before { @apply text-4xl text-yellow-400 z-50; @@ -101,13 +95,27 @@ body.crisis #weekPreamble { filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)); } } - +#ui { + @apply flex flex-row justify-between h-full; +} +#ui #playerScreen { + @apply w-64 bg-neutral-900 text-neutral-100 p-6; +} +#ui #playerInfo { + @apply mt-12; +} #passageContainer { - @apply content-end justify-end mr-6 flex-col p-6 overflow-y-auto bg-neutral-100 bg-opacity-75 rounded-t-2xl h-full w-full; + @apply content-end justify-end flex-col p-6 overflow-y-auto bg-neutral-100 bg-opacity-75 rounded-t-2xl h-full w-full md:w-2/3 mx-auto; } #hud #passageContainer #passage { @apply prose prose-xl prose-neutral; } +#hud #planetName { + @apply text-3xl md:text-6xl text-neutral-200 font-display uppercase w-full md:w-2/3 mx-auto; +} +#hud #planetContent { + @apply w-full md:w-2/3 mx-auto; +} #hud #passageContainer #passage p { @apply mt-0; } diff --git a/index.html b/index.html index 09fc29d..dfe9778 100644 --- a/index.html +++ b/index.html @@ -765,10 +765,6 @@ right: 1.5rem; } -.top-0{ - top: 0px; -} - .top-6{ top: 1.5rem; } @@ -830,10 +826,6 @@ width: 1rem; } -.w-auto{ - width: auto; -} - .max-w-3xl{ max-width: 48rem; } @@ -850,10 +842,6 @@ cursor: pointer; } -.items-end{ - align-items: flex-end; -} - .items-center{ align-items: center; } @@ -869,10 +857,6 @@ border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.p-2{ - padding: 0.5rem; -} - .px-4{ padding-left: 1rem; padding-right: 1rem; @@ -887,10 +871,6 @@ padding-top: 1.5rem; } -.font-display{ - font-family: Handjet; -} - .text-2xl{ font-size: 1.5rem; line-height: 2rem; @@ -906,11 +886,6 @@ line-height: 1.25rem; } -.text-xl{ - font-size: 1.25rem; - line-height: 1.75rem; -} - .font-medium{ font-weight: 500; } @@ -1026,26 +1001,28 @@ margin-left: 1.5rem; margin-right: 1.5rem; display: flex; - height: 33.333333%; + width: 100%; flex-grow: 1; - flex-direction: row; + flex-direction: column; justify-content: flex-end; align-self: flex-end; } -.player-screen { +@media (min-width: 768px){ #planet-info{ - height: 66.666667%; + width: 66.666667%; } } #rep{ z-index: 30; - margin-right: 1.5rem; - display: flex; - width: 16rem; - flex-direction: column; + margin-left: auto; + margin-right: auto; + margin-top: 0px; + margin-bottom: 0px; + width: 24rem; align-self: flex-start; + text-align: center; } .repName{ @@ -1060,7 +1037,11 @@ } .repImage{ - width: 10rem; + margin-left: auto; + margin-right: auto; + height: 24rem; + width: 24rem; + justify-content: center; } .passage-choices{ @@ -1084,7 +1065,7 @@ .active-turn img { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); - animation: pulseGlow 2s infinite; + animation: pulseGlow 8s infinite; } .planet-container.active-turn::before{ @@ -1137,8 +1118,29 @@ } } +#ui{ + display: flex; + height: 100%; + flex-direction: row; + justify-content: space-between; +} + +#ui #playerScreen{ + width: 16rem; + --tw-bg-opacity: 1; + background-color: rgb(23 23 23 / var(--tw-bg-opacity)); + padding: 1.5rem; + --tw-text-opacity: 1; + color: rgb(245 245 245 / var(--tw-text-opacity)); +} + +#ui #playerInfo{ + margin-top: 3rem; +} + #passageContainer{ - margin-right: 1.5rem; + margin-left: auto; + margin-right: auto; height: 100%; width: 100%; flex-direction: column; @@ -1152,6 +1154,12 @@ padding: 1.5rem; } +@media (min-width: 768px){ + #passageContainer{ + width: 66.666667%; + } +} + #hud #passageContainer #passage{ color: var(--tw-prose-body); max-width: 65ch; @@ -1940,6 +1948,38 @@ --tw-prose-invert-td-borders: #404040; } +#hud #planetName{ + margin-left: auto; + margin-right: auto; + width: 100%; + font-family: Handjet; + font-size: 1.875rem; + line-height: 2.25rem; + text-transform: uppercase; + --tw-text-opacity: 1; + color: rgb(229 229 229 / var(--tw-text-opacity)); +} + +@media (min-width: 768px){ + #hud #planetName{ + width: 66.666667%; + font-size: 3.75rem; + line-height: 1; + } +} + +#hud #planetContent{ + margin-left: auto; + margin-right: auto; + width: 100%; +} + +@media (min-width: 768px){ + #hud #planetContent{ + width: 66.666667%; + } +} + #hud #passageContainer #passage p{ margin-top: 0px; } @@ -3227,13 +3267,6 @@ } } -@media (min-width: 768px){ - .md\:text-6xl{ - font-size: 3.75rem; - line-height: 1; - } -} - @media (min-width: 1024px){ .lg\:px-8{ padding-left: 2rem; @@ -3448,7 +3481,7 @@ var splashContainer = document.getElementById("planet-splash"); splashContainer.style.backgroundImage = `url(${planet.splashImgSrc})`; splashContainer.innerHTML = - "

" + + "

" + planet.name + "

"; @@ -3669,6 +3702,17 @@ mapScreen.appendChild(playerPlanetContainer); } } + + var playerContent = ""; + setup.game.planets.forEach(function (planet) { + var helpedTimes = + story.state.helpedPlanets.find((p) => p.planet === planet.id) + ?.timesHelped || 0; + playerContent += + "

" + planet.name + ":
" + "❤️".repeat(helpedTimes) + "

"; + }); + + document.getElementById("playerInfo").innerHTML = playerContent; }; function checkAllPlanetsLoaded(loaded, total) { @@ -3683,23 +3727,6 @@ var passageContent = "

" + story.state.playerName + "'s Project

"; passageContent += "

" + story.state.playerPlanet.description + "

"; - passageContent += "

Help Chart

"; - passageContent += "
";
-    setup.game.planets.forEach(function (planet) {
-      var helpedTimes =
-        story.state.helpedPlanets.find((p) => p.planet === planet.id)
-          ?.timesHelped || 0;
-      passageContent += planet.name + ": " + "❤️".repeat(helpedTimes) + "\n";
-    });
-    passageContent += "
"; - - if (passage) { - passage.innerHTML = passageContent; - if (passageContainer) { - passageContainer.style.display = "block"; - } - } - var hud = document.getElementById("hud"); if (hud) hud.classList.add("player-screen"); document @@ -4022,7 +4049,28 @@ }; }); /* twine-user-script #2: "utilities.js" */ -<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> +*KSSHT.* + +*KSSSHHHHT.* + +Unknown Signal: Hello? *KSSHT.* Hello hello? + +Unknown Signal: Dobeedoooo doo doot do doooo! 🎵 + +Unknown Signal: Are you receiving this? + +[[Yes|A.0]] +[[No|B.0]]Unknown Signal: Excellent! I love when things work the way they're supposed to! + +[[Next|Main.1]]Unknown Signal: Hah. You won't fool me that easily. + +Unknown Signal: I'm *only* 13 centuries old. + +[[Next|Main.1]]Unknown Signal: Of course, as your planet's representative, I'll just need you to fill out a quick transmission. + +Unknown Signal: I know, I know. But sometimes community takes a lil' bureaucracy. 🎵 + +[[Download the Document|Customization]]<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="./scripts/1.SplitText.min.js"></script> <% $("body").addClass("customization").removeClass("map") %> @@ -4073,28 +4121,32 @@ [[Next->Map Screen]] <% } %> </div> -</div><% $("body").removeClass("customization").addClass("map") %> +</div><% $("body").removeClass("customization").addClass("map") %> <div id="overlay" class="hidden"></div> + <div id="ui"> + <div id="playerScreen"> + <div class="text-sm"> + <span id="turnCounter"><%= 7 - s.turn %> weeks to the radio show!</span> + </div> + <div id="playerInfo"></div> + </div> <div id="mapScreen"></div> + </div> <div id="tooltips"></div> <div id="weekPreamble"> <p id="modalContent" class="text-2xl mb-4"></p> <button onclick="setup.hideWeekPreamble()">Close</button> </div> - <div id="hudTop" class="flex w-auto items-end h-12 p-2 text-neutral-100 absolute top-0"> - <div class="text-sm"> - <span id="turnCounter"><%= 7 - s.turn %> weeks to the radio show!</span> - </div> - </div> + <div id="hud"> <span onclick="setup.returnToMap()" class="z-50 text-neutral-100 absolute top-6 right-6 uppercase text-base cursor-pointer">&larr; back to map</span> <div id="planet-splash" class="flex-shrink-0 px-6 pt-6"></div> <div id="planet-info"> + <div id="rep" class=""></div> <div id="passageContainer"> <div id="passage"></div> </div> - <div id="rep" class=""></div> </div> </div> @@ -4107,91 +4159,91 @@ <% console.log(story.state) %> <!-- [[Help Planets|HelpPlanets]] -[[Start Radio Show|RadioShow]] --><script> +[[Start Radio Show|RadioShow]] --><script> var planetIndex = story.state.planetIndex; // Retrieve the index from story.state setup.renderPlanetPassage(planetIndex); setup.story.render(planets[planetIndex].passage); -</script>The Intergalactic Orchestra has lost its melody, scattering notes across the cosmos. Retrieve the musical fragments to restore harmony to the galaxy. +</script>The Intergalactic Orchestra has lost its melody, scattering notes across the cosmos. Retrieve the musical fragments to restore harmony to the galaxy. -[[Next...->Melodic Quest 2]]Let's see if I can find the notes… +[[Next...->Melodic Quest 2]]Let's see if I can find the notes… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>A quantum computer has gone haywire, creating chaos in the time-space continuum. Solve complex puzzles to recalibrate the machine and stabilize reality. +</div>A quantum computer has gone haywire, creating chaos in the time-space continuum. Solve complex puzzles to recalibrate the machine and stabilize reality. -[[Next...->Quantum Conundrum 2]]I have no idea how to solve these puzzles, but i'll give it my best shot… +[[Next...->Quantum Conundrum 2]]I have no idea how to solve these puzzles, but i'll give it my best shot… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>A newborn nebula is struggling to form stars. Gather stardust and cosmic energy to nurture its growth and witness the birth of new suns. +</div>A newborn nebula is struggling to form stars. Gather stardust and cosmic energy to nurture its growth and witness the birth of new suns. -[[Next...->Stellar Cradle 2]]Gathering stardust might be fun? +[[Next...->Stellar Cradle 2]]Gathering stardust might be fun? <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>The Great Library of Andromeda is in disarray, with knowledge scattered across the stars. Reorganize the cosmic archives and unlock ancient wisdom. +</div>The Great Library of Andromeda is in disarray, with knowledge scattered across the stars. Reorganize the cosmic archives and unlock ancient wisdom. -[[Next...->Galactic Restoration 2]]Time to sort through the astral archives… +[[Next...->Galactic Restoration 2]]Time to sort through the astral archives… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>A celestial entity has lost its voice, rendering the galaxy silent. Find the harmonious chords to give voice back to the stars. +</div>A celestial entity has lost its voice, rendering the galaxy silent. Find the harmonious chords to give voice back to the stars. -[[Next...->Cosmic Symphony 2]]Let's tune into the cosmic frequencies… +[[Next...->Cosmic Symphony 2]]Let's tune into the cosmic frequencies… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>A labyrinth of cosmic dust and gas clouds has appeared. Navigate through the maze to discover hidden celestial treasures. +</div>A labyrinth of cosmic dust and gas clouds has appeared. Navigate through the maze to discover hidden celestial treasures. -[[Next...->Nebula Maze 2]]This maze is intricate, but I'm up for the challenge… +[[Next...->Nebula Maze 2]]This maze is intricate, but I'm up for the challenge… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>A constellation has lost its rhythm, causing disarray in the night sky. Choreograph the celestial dance to restore order. +</div>A constellation has lost its rhythm, causing disarray in the night sky. Choreograph the celestial dance to restore order. -[[Next...->Starlit Dance 2]]Time to get these stars dancing again… +[[Next...->Starlit Dance 2]]Time to get these stars dancing again… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>A wandering comet carries secrets from the edge of the universe. Chart its course and uncover the mysteries it holds. +</div>A wandering comet carries secrets from the edge of the universe. Chart its course and uncover the mysteries it holds. -[[Next...->Comet's Tale 2]]Chasing comets is no easy task, but it's worth it… +[[Next...->Comet's Tale 2]]Chasing comets is no easy task, but it's worth it… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>The Aurora Borealis has dimmed, losing its vibrant colors. Reignite the auroral lights to paint the sky with dazzling hues. +</div>The Aurora Borealis has dimmed, losing its vibrant colors. Reignite the auroral lights to paint the sky with dazzling hues. -[[Next...->Aurora's Whisper 2]]Let's bring color back to the skies… +[[Next...->Aurora's Whisper 2]]Let's bring color back to the skies… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>An ancient star has posed a riddle, locking away a cosmic secret. Solve the riddle to gain access to hidden cosmic knowledge. +</div>An ancient star has posed a riddle, locking away a cosmic secret. Solve the riddle to gain access to hidden cosmic knowledge. -[[Next...->Celestial Riddle 2]]Riddles in space? This should be interesting… +[[Next...->Celestial Riddle 2]]Riddles in space? This should be interesting… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div>The Sun's song has become erratic, affecting planetary orbits. Compose a new solar melody to bring stability back to the solar system. +</div>The Sun's song has become erratic, affecting planetary orbits. Compose a new solar melody to bring stability back to the solar system. -[[Next...->Solar Serenade 2]]Time to compose a symphony for the Sun… +[[Next...->Solar Serenade 2]]Time to compose a symphony for the Sun… <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> <span onclick="setup.returnToMap()">Move on…</span> -</div><%= setup.getPlanet(s.currentPlanet) %> offers to help me find the source of the problem. Let's go! +</div><%= setup.getPlanet(s.currentPlanet) %> offers to help me find the source of the problem. Let's go! -[[Next...->Week 4 crisis 2]]<%= setup.getPlanet(s.currentPlanet) %> is so great. I'm glad we're friends. +[[Next...->Week 4 crisis 2]]<%= setup.getPlanet(s.currentPlanet) %> is so great. I'm glad we're friends. <div class="passage-choices"> <span onclick='setup.completeScenario();'>Connect</span> @@ -4200,7 +4252,7 @@ -<!-- Week/turn preambles -->Whew, helping planets is hard! Let's do it again this week.A week goes by… Wow, helping <%= setup.getPlanet(s.currentPlanet) %> was the right call. Our connection is stronger than ever!<%= setup.getPlanet(s.currentPlanet) %> indicates I'm getting pretty good at this. Let's help some more planets!The Sun has been blotted out by a mysterious force. The solar system is in chaos, and the planets are in danger.Time flies in the cosmos. Each planet, including <%= setup.getPlanet(s.currentPlanet) %>, has its own story.With every planet helped, I feel more connected to the universe. What new wonders will this week bring?Time for a big radio broadcast. But what is this around the corner!? A black hole is approaching the solar system! +<!-- Week/turn preambles -->Whew, helping planets is hard! Let's do it again this week.A week goes by… Wow, helping <%= setup.getPlanet(s.currentPlanet) %> was the right call. Our connection is stronger than ever!<%= setup.getPlanet(s.currentPlanet) %> indicates I'm getting pretty good at this. Let's help some more planets!The Sun has been blotted out by a mysterious force. The solar system is in chaos, and the planets are in danger.Time flies in the cosmos. Each planet, including <%= setup.getPlanet(s.currentPlanet) %>, has its own story.With every planet helped, I feel more connected to the universe. What new wonders will this week bring?Time for a big radio broadcast. But what is this around the corner!? A black hole is approaching the solar system! <% $("body").addClass("customization").removeClass("map") %> @@ -67,26 +104,30 @@ Jammy Jam :: Map Screen [scripted] <% $("body").removeClass("customization").addClass("map") %> +
+
+
+ <%= 7 - s.turn %> weeks to the radio show! +
+
+
+

-
-
- <%= 7 - s.turn %> weeks to the radio show! -
-
+
← back to map
+
-