Skip to content

Commit

Permalink
Add progress bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jennie
jennie committed Nov 5, 2023
1 parent 120d25e commit 59ef527
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 75 deletions.
8 changes: 6 additions & 2 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
83 changes: 78 additions & 5 deletions twine_src/css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1113,6 +1113,10 @@ video {
position: absolute;
}

.top-0 {
top: 0px;
}

.mx-auto {
margin-left: auto;
margin-right: auto;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -1163,24 +1184,38 @@ 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 {
--tw-bg-opacity: 1;
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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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));
}
}
52 changes: 27 additions & 25 deletions twine_src/main.twee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -76,6 +86,7 @@ What's your planet name?

<script>
setup.showMap();
setup.toggleHUDTop(true)
</script>
<!--
[[Help Planets|HelpPlanets]]
Expand All @@ -94,38 +105,29 @@ 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>


:: 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
Expand Down
54 changes: 11 additions & 43 deletions twine_src/scripts/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -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
}
Expand Down

0 comments on commit 59ef527

Please sign in to comment.