<div class="centered">
{
<p>Choosing safety, you quickly barricade the game room door
with nearby furniture. Settling into a corner, you take deep,
steadying breaths amidst the room's low hum. This short rest
offers a brief reprieve from the chaos outside, allowing you
to gather your strength.</p>
(set: $energy to it + 20)
(replace: ?statsdisplay)[(display: 'stats')]
<p>Feeling slightly rejuvenated, you realize the need to
plan your next move. The room's security is temporary at
best.</p>
(set: $barricadeVisited to true)
<div class="energy-text">
<div class="label">Energy</div>
<div>+ 20</div>
$energyIcon
</div>
<div class="choices">
(if: $exitVisited is false)[[[$arrowForward Head to the exit.|Head to the exit]]]
[[$arrowForward Search nearby rooms.|Search nearby rooms]]
</div>
}
</div><div class="centered">
{
(set: $energy to it - 20)
(replace: ?statsdisplay)[(display: 'stats')]
<p>Janitor, in physical pain:</p>
<p class="dialogue">Alright, Alright, STOP!!!</p>
<p class="dialogue">There's a security room. It's hidden, but that keycard can access it. Not many know about it. There's more than meets the eye there.</p>
<p>(The Janitor will remember that.)</p>
<div class="minus-energy-text">
<div class="label">Energy</div>
<div>- 20</div>
$energyIcon
</div>
<div class="choices">
[[$arrowForward Go to the security room.|Security room]]
</div>
</div>
}
<div><div class="centered">
{
<p>
As the elevator doors creak open, you're immediately enveloped in an oppressive darkness. The underground level is utterly devoid of light, and the palpable silence is unsettling. A sudden spike of anxiety hits; the thought of navigating this unfamiliar terrain blind is daunting.</p>
<p>But then a thought strikes - your phone. Swiftly retrieving it, you activate the flashlight. A narrow beam of light slices through the inky blackness, offering a small circle of clarity in the engulfing void.</p>
<p>You realize it might be wiser to find a light switch and illuminate the entire area.</p>
<div class="choices">
[[Continue.|End]]
</div>
<style>
tw-story {
position: relative;
cursor: none;
--cursorX: 10px;
--cursorY: 10px;
}
tw-story:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
z-index: 100;
top: 0;
pointer-events: none;
background: radial-gradient(
circle 10vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 80%,
rgba(0,0,0,.95) 100%
)
}
</style>
<script>
const element = document.querySelector('tw-story');
element.addEventListener('mousemove', (event) => {
const rect = element.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
console.log(`X: ${x}, Y: ${y}`);
element.style.setProperty('--cursorX', x + 'px')
element.style.setProperty('--cursorY', y + 'px')
});
</script>
}
</div>(replace: ?statsdisplay)[(display: 'no-header')]
<div class="centered">
{
<p>As you desperately try to backtrack to the main floor,
your steps falter, weakened by the draining energy. Just
as you think you're in the clear, a chilling grasp
tightens around your ankle. You glance down to see one of
the creatures, its fingers locked onto you with a
vice-like grip. Panic sets in, but your weakened state
makes it impossible to shake free. The world blurs as the
creature drags you down, and darkness soon engulfs you. </p>
<h3 style="margin-top: 30px;">Your journey ends here.</h3>
<div class="choices" style="text-align: center; justify-content: center; flex-direction: row">
(link: 'Try again')[
(set: $energy to 80)
(set: $inventory to (a:))
(set: $exitVisited to false)
(set: $barricadeVisited to false)
(set: $stairsVisited to false)
(set: $janitorAsked to false)
(goto: 'The Beginning')
]
</div>
}
</div>(replace: ?statsdisplay)[(display: 'no-header')]
<div class="centered">
{
<p>You decide to venture towards the stairs, hoping it could
lead to safety. The echoing sound of your footsteps is the
only thing accompanying you as you descend. The deeper you
go, the more ominous the atmosphere becomes. As you round
a corner, a horde of those creatures suddenly emerges,
blocking your path. Your already exhausted state makes it
impossible to fight them off or retreat in time. The world
fades to black as they close in. </p>
<h3 style="margin-top: 30px;">Your journey ends here.</h3>
<div class="choices" style="text-align: center; justify-content: center; flex-direction: row">
(link: 'Try again')[
(set: $energy to 80)
(set: $inventory to (a:))
(set: $exitVisited to false)
(set: $barricadeVisited to false)
(set: $stairsVisited to false)
(set: $janitorAsked to false)
(goto: 'The Beginning')
]
</div>
}
</div>{
<img src="https://adamgiebl.github.io/twine/images/elevator.png">
(if: $inventory contains 'Key Card')[<p>
Hoping for a safer passage, you approach the elevator and
scan the intricate keycard. For a moment, nothing happens.
But then, the elevator panel flickers, revealing a new
option: a floor marked "-1." This wasn't there before, or
at least you've never noticed it.</p>
<p>Curiosity piqued and with the weight of the janitor's
words in your mind, you decide to press the button for the
floor below zero. The elevator doors close, and you can
feel the slight descent as it takes you to an unknown part
of the university.</p>
<p>You take a deep breath, bracing yourself for whatever
lies ahead. The elevator's soft chime signals its arrival,
and the doors slowly begin to open...</p>
]
<div class="choices">
[[Continue.|Dark]]
</div>
}(replace: ?statsdisplay)[(display: 'no-header')]
<div class="centered">
{
<img src="https://adamgiebl.github.io/twine/images/zombie-hallway.png">
<h3 style="padding-top: 40px;">Thank you for playing!</h3>
<p>That was the end of our prototype. We hope you enjoyed the
game and its different paths and mechanics</p>
}
</div><div class="centered">
{
(set: $stairsVisited to true)
(if: $energy is >= 50)[<p>With a sense of purpose, you head towards the stairs.
As you start your descent, a chilling sound grows louder
— the unmistakable groans of the undead. Suddenly, a group
of them comes into view, cutting off your path forward.
Relying on your remaining energy and adrenaline, you turn
and sprint back up the stairs, narrowly avoiding their
grasping hands. The chase leaves you even more drained,
but you manage to make it back to the main floor, heart
pounding.</p>
(set: $energy to it - 30)
(replace: ?statsdisplay)[(display: 'stats')]
<div class="minus-energy-text">
<div class="label">Energy</div>
<div>- 30</div>
$energyIcon
</div>
<div class="choices">
[[$arrowForward Go to the elevator.|Elevator]]
(if: $janitorAsked is false)[[[$chatIcon Talk to the janitor.|Talk to the janitor]]]
</div>
](else:)[(goto: 'Death2')]
}
</div><div class="centered">
{
<p>You approach the main door of the game room, a faint
draft coming from the hallway outside. As you inch closer,
an unsettling sound seeps in, echoing through the silence—a
slow, labored breathing, punctuated by occasional gurgles
and moans.</p>
You're faced with a choice:
<div class="choices">
[[$arrowForward Open the door and step out.|Hallway]]
[[$arrowForward Go back, close the door, and look around for something to defend yourself with.|GameLab2]]
</div>
}
</div><div class="centered">
{
<p>Not willing to face the unknown just yet, you retreat and
silently push the door shut. You realize you need something,
anything, to defend yourself. You scan the room: There's a
metal bar from a dismantled PC stand, a thick glass bottle
from one of the energy drinks, and a long ethernet cable.
Each could be a potential weapon or tool.</p>
Which do you choose?
<div class="choices">
(link: '<div class="with-icon">$interactionIcon Grab the metal bar.</div>')[
(set: $inventory to it + (a:'Metal Bar'))
(goto: 'Hallway')
]
(link: '<div class="with-icon">$interactionIcon Take the glass bottle.</div>')[
(set: $inventory to it + (a:'Glass Bottle'))
(goto: 'Hallway')
]
(link: '<div class="with-icon">$interactionIcon Take the ethernet cable.</div>')[
(set: $inventory to it + (a:'Ethernet Cable'))
(goto: 'Hallway')
]
</div>
}
</div><div class="centered">
{
<p>Gathering your courage, you decide that hiding won’t do
any good. You need answers, and perhaps whoever or whatever
is in the hallway holds the key to understanding this
surreal nightmare. Carefully, you turn the handle, hoping
not to make a sound, and step into the dim corridor. </p>
<div class="choices">
[[$arrowForward Continue..|Hallway2]]
</div>
}
</div>{
<img src="https://adamgiebl.github.io/twine/images/zombie-hallway.png">
(if: $inventory contains 'Metal Bar')[
<p>As you step into the hallway, the dim light barely
illuminates the figure staggering towards you.
Panic sets in, but you grip the metal bar tightly.
As the creature lunges, you swing, aiming for its head.
The bar connects with a sickening thud, knocking the
creature to the ground, but not before its nails scratch
your arm. The confrontation has cost you some energy.</p>
(set: $energy to it - 20)
(replace: ?statsdisplay)[(display: 'stats')]
<div class="minus-energy-text">
<div class="label">Energy</div>
<div>- 20</div>
$energyIcon
</div>
](elseif: $inventory contains 'Glass Bottle')[
<p>Holding the glass bottle firmly, you tread cautiously
into the hallway. The figure, now close enough to see its
disfigured face, snarls and lunges at you. In a reflexive
motion, you break the bottle against the wall, turning it
into a jagged weapon, and stab the creature. It goes down
, but in the struggle, you get a few cuts from the broken
glass, draining your stamina and causing minor injuries.</p>
(set: $energy to it - 30)
(replace: ?statsdisplay)[(display: 'stats')]
<div class="minus-energy-text">
<div class="label">Energy</div>
<div>- 30</div>
$energyIcon
</div>
](elseif: $inventory contains 'Ethernet Cable')[
<p>Clutching the coiled ethernet cable, you hesitantly
step into the corridor. The creature, hearing your
movement, quickly turns and approaches. As it lunges, you
wrap the cable around its neck, pulling with all your
might. The creature struggles and thrashes but eventually
goes limp. The prolonged fight and the sheer force needed
to keep the creature at bay has taken a considerable toll
on your strength.</p>
(set: $energy to it - 40)
(replace: ?statsdisplay)[(display: 'stats')]
<div class="minus-energy-text">
<div class="label">Energy</div>
<div>- 40</div>
$energyIcon
</div>
](else:)[
<p>Armed with nothing but your own resolve, you bravely
step into the hallway. The silhouette of the creature
becomes clearer, revealing its grotesque and mangled
features. As it lunges at you, you muster all your
strength, ducking and weaving to avoid its grasp. You
manage to land a few solid blows, but the undead is
relentless. The struggle is intense, pushing you to your
physical limits. After a seemingly endless fight, you
finally manage to overpower the creature, pushing it to
the ground and incapacitating it. However, the sheer
exertion, combined with minor injuries sustained during
the scuffle, leaves you gasping for breath and extremely
fatigued.</p>
(set: $energy to it - 60)
(replace: ?statsdisplay)[(display: 'stats')]
<div class="minus-energy-text">
<div class="label">Energy</div>
<div>- 60</div>
$energyIcon
</div>
]
<div class="choices">
[[$arrowForward Continue..|Hallway3]]
</div>
}<div class="centered">
{
<p>Still shaken from the terrifying encounter, the reality of
the situation weighs heavily on you. The quiet of the
university feels suffocating. Your breath is short, and every
sound feels magnified. Your initial shock begins to fade as
survival instincts kick in.</p>
What will you do next?
<div class="choices" style="margin-bottom: 30px;">
[[$arrowForward Head to the exit.|Head to the exit]]
[[$arrowForward Search nearby rooms.|Search nearby rooms]]
[[$arrowForward Barricade yourself in the game room and rest for a while.|Barricade yourself and rest]]
</div>
(Choose wisely. Your decisions shape the path ahead.)
}
</div><div class="centered">
{
<p>As you make your way towards the exit, a sinking feeling
takes hold. The revolving door ahead is barricaded from the
outside, making it impassable. The shadows cast by the dim
light reveal several bodies scattered around the exit, their
stillness painting a grim picture.</p>
<p>But as you stand there, trying to process the sight,
there's an unmistakable twitch among the fallen. One by one,
some of the bodies begin to stir. Limbs contort, and the
muffled groans of the reanimating dead fill the air. It's
clear: escaping won't be as straightforward as you hoped.</p>
<div class="choices">
(link-reveal: '<div class="with-icon">$arrowForward Go back to the main floor.</div>')[
(if: $energy is >= 50)[
<p>Using the remnants of your strength, you turn on your
heels and dash back towards the main floor. Behind you,
the groans and hisses of the undead grow louder. One of
the creatures, quicker than the rest, lunges for you,
just grazing your leg with its rotting fingers. The
close call costs you both in terms of physical energy
and emotional toll. You make it to the main floor, heart
pounding in your chest, but significantly more exhausted
than before.</p>
(set: $exitVisited to true)
(set: $energy to it - 20)
(replace: ?statsdisplay)[(display: 'stats')]
<div class="minus-energy-text">
<div class="label">Energy</div>
<div>- 20</div>
$energyIcon
</div>
[[$arrowForward Search nearby rooms.|Search nearby rooms]]
(if: $barricadeVisited is false)[[[$arrowForward Barricade yourself in the game room and rest for a while.|Barricade yourself and rest]]]
](else:)[(goto: 'Death')]
]
</div>
}
</div>{
<img src="https://adamgiebl.github.io/twine/images/rooms.png">
<p>Navigating the dimly lit hallways, you cautiously peer into
one of the nearby rooms, discovering a panic-stricken janitor.
He clutches a strange, intricate key card adorned with peculiar
symbols, his eyes wide with fear.</p>
<p>Janitor:</p>
<p class="dialogue">"This... this isn't just any key! It opens doors
that should never be opened. I... I shouldn’t have it.”</p>
<div class="choices">
(link-reveal: '<div class="with-icon">$interactionIcon Take the key.</div>')[
(replace: ?statsdisplay)[(display: 'stats')]
<p>He thrusts the key card into your hands, clearly eager to
be rid of it. You examine it, pondering its purpose.</p>
(set: $inventory to it + (a:'Key Card'))
<div class="choices">
[[$arrowForward Talk to the janitor.|Talk to the janitor]]
</div>
]
</div>
}{
<img src="https://adamgiebl.github.io/twine/images/security.png">
<p>You cautiously make your way to the west wing corridor,
the janitor's words echoing in your mind. As you approach
a particularly dark corner, you notice a door discreetly
placed, which leads to the security room.</p>
<p>The room is dim, only lit by the soft glow of multiple
monitors displaying camera feeds from all around the
university. In the corner, there's a small table with a
half-eaten sandwich and a cup of cold coffee, probably
left behind by a security guard during a hurried exit.</p>
<p>As you step inside, a wave of relief washes over you.
This place feels safe, like a temporary haven. You take a
moment to catch your breath, regaining some much-needed
energy.</p>
(set: $energy to it + 20)
(replace: ?statsdisplay)[(display: 'stats')]
<div class="energy-text">
<div class="label">Energy</div>
<div>+ 20</div>
$energyIcon
</div>
<div class="choices">
[[$arrowForward Continue exploring the room.|Security room2]]
</div>
}<div class="centered">
{
<p>As you scan the security room, your attention is caught
by an open logbook on the desk. Flipping through the pages,
most of the entries are mundane - reports of lost student IDs,
minor altercations, and the like. However, a particular entry
from a week ago stands out:</p>
<p class="dialogue">"Received a call from Dr. Sorensen about an alarm tripped
in the basement level. Wasn’t aware we had a basement level.
Checked with management and they were evasive. Need to look
into this further."</p>
<div class="choices">
(link-reveal: '<div class="with-icon">$arrowForward Continue..</div>')[
<p>Beside it, a sticky note reads: "NOTE: Elevator access
restricted to the -1 floor. Keycard required."</p>
<p>Could this be the mysterious floor the janitor hinted at?
An unknown basement level, and now an outbreak? The pieces
seem to connect in a disconcerting way.</p>
<p>The urgency to uncover what's really happening intensifies.</p>
<div class="choices">
[[$arrowForward Go to the elevator.|Elevator]]
</div>
]
</div>
}
</div><div class="centered">
{
<p>You decide to press the janitor for more information,
hoping he might have valuable insights.</p>
<div class="choices">
|1>[(link-reveal: '<div class="with-icon">$chatIcon Did you cause all of this with this keycard?</div>')[
(hide:?2,?3)
(set: $janitorAsked to true)
<p>Janitor, defensive and agitated:</p> <p class="dialogue">"No! I found it, that's all! I didn't ask for any of this to happen!"</p>
<div class="choices">
(if: $energy is > 20)[(link-reveal:'<div class="with-icon">$interactionIcon Beat the information out of him. <div class="energy-option">- 20$energyIcon</div></div>')[(goto: 'Beat the Janitor')]]
(if: $stairsVisited is false)[[[$arrowForward Go explore the stairs.|Explore stairs]]]
[[$arrowForward Go to the elevator.|Elevator]]
</div>
]
]
|2>[
(link-reveal: '<div class="with-icon">$chatIcon Why are you hiding in here? Are you involved in what\'s happening?</div>')[
(hide:?1,?3)
(set: $janitorAsked to true)
<p>Janitor, looking hurt and offended:</p> <p class="dialogue">"Why would you think that? I'm as scared as you are! I just work here."</p>
<div class="choices">
(if: $energy is > 20)[(link-reveal:'<div class="with-icon">$interactionIcon Beat the information out of him. <div class="energy-option">- 20$energyIcon</div></div>')[(goto: 'Beat the Janitor')]]
(if: $stairsVisited is false)[[[$arrowForward Go explore the stairs.|Explore stairs]]]
[[$arrowForward Go to the elevator.|Elevator]]
</div>
]
]
|3>[
(link-reveal: '<div class="with-icon">$chatIcon There must be a reason you have this keycard. Does it lead to a safe place?</div>')[
(hide:?1,?2)
(set: $janitorAsked to true)
<p>Janitor, hesitatingly:</p> <p class="dialogue">"Well... yes. There's a security room. It's hidden, but that keycard can access it. Not many know about it. There's more than meets the eye there."</p>
<div class="choices">
[[$arrowForward Go to the security room.|Security room]]
</div>
]
]
</div>
}
</div>{
<img src="https://adamgiebl.github.io/twine/images/passage.png">
<p>You slowly open your eyes, adjusting to the dimly lit
surroundings of the ITU GameLab. You’re surrounded by rows
of high-end PCs, the hum of the computers and the occasional
flickering fluorescent light. The room is littered with empty
snack packets, energy drink cans, and board games.</p>
<div class="choices">
[[$arrowForward Explore your surroundings|The Beginning.5]]
</div>
}<div class="centered">
{
<p>You don't remember much of what has happened the day before.</p>
<div class="choices">
(link-reveal: '<div class="with-icon">$searchIcon Look at the clock.</div>')[<p>You glance up at the wall clock. It’s 4:37 AM, Saturday. A memory tugs at you – the LAN party, the thrill of the games,
the chatter of your friends. But why is it so silent now?</p>
]
(link-reveal: '<div class="with-icon">$searchIcon Check the smartphone.</div>')[<p>You reach for your smartphone, its screen flashing with a barrage of missed calls and unread messages. Most are from friends and family, their tone growing increasingly frantic, "Are you okay?", "Stay where you are!", "Avoid people!". You have no reception and battery at 20%.</p>
]
[[$arrowForward Investigate the GameLab door.|GameLab - Door]]
</div>
}
</div>{
|statsdisplay>[
<header>
<div>
Inventory:
(if: $inventory's length is 0)[\
Empty..
](else:)[
(for: each _item, ...$inventory)[
_item(unless: $inventory's last is _item)[<span style="padding: 0 5px 0 0">,</span>]
]
]
</div>
(if: $energy is > 100)[(set: $energy to 100)]
<div class="energy-container">
Energy
<div class="energy-wrapper">
<div class="energy">
(for: each _i, ...(range: 1, $energy / 10))[
<div class="bar"></div>
]
</div>
</div>
</div>
</header>
]
<style>
header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
}
.energy-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.energy-wrapper {
padding: 4px;
background: rgb(48, 48, 48);
height: 32px;
}
.energy tw-hook {
--width: 100px;
width: var(--width);
height: 100%;
display: flex;
}
.energy {
height: 100%;
}
.bar {
width: calc(var(--width) / 10);
height: 100%;
background: rgb(240, 227, 55);
border-right: 3px solid rgb(48, 48, 48);
}
</style>
}{
(set: $energy to 80)
(set: $inventory to (a:))
(set: $exitVisited to false)
(set: $barricadeVisited to false)
(set: $stairsVisited to false)
(set: $janitorAsked to false)
(set: $searchIcon to "
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='m21 21-6.05-6.05m0 0a7 7 0 1 0-9.9-9.9 7 7 0 0 0 9.9 9.9Z' />
</svg>")
(set: $arrowForward to "
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M12.051 16a20.335 20.335 0 0 0 3.807-3.604A.626.626 0 0 0 16 12m-3.949-4a20.336 20.336 0 0 1 3.807 3.604A.626.626 0 0 1 16 12m0 0H8m4 9c-2.796 0-4.193 0-5.296-.457a6 6 0 0 1-3.247-3.247C3 16.194 3 14.796 3 12c0-2.796 0-4.193.457-5.296a6 6 0 0 1 3.247-3.247C7.807 3 9.204 3 12 3c2.796 0 4.194 0 5.296.457a6 6 0 0 1 3.247 3.247C21 7.807 21 9.204 21 12c0 2.796 0 4.194-.457 5.296a6 6 0 0 1-3.247 3.247C16.194 21 14.796 21 12 21Z' />
</svg>")
(set: $chatIcon to "
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M8 10h8m-8 4h4m9-2a9 9 0 0 1-10.272 8.91c-1.203-.17-1.805-.255-1.964-.267-.257-.02-.165-.016-.423-.014-.159 0-.34.014-.702.04l-2.153.153c-.857.062-1.286.092-1.607-.06a1.35 1.35 0 0 1-.641-.641c-.152-.32-.122-.75-.06-1.607l.153-2.153c.026-.362.04-.543.04-.702.002-.258.006-.166-.014-.423-.012-.159-.098-.76-.268-1.964A9 9 0 1 1 21 12Z' />
</svg>")
(set: $energyIcon to "
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='m6.054 8.38 5.756-4.513c1.638-1.284 2.457-1.926 3.018-1.863.485.055.912.366 1.136.828.26.533-.003 1.58-.53 3.673l-.44 1.753c-.211.838-.316 1.257-.244 1.62.064.32.221.611.45.83.259.249.652.361 1.438.585l.51.146c1.512.432 2.268.648 2.57 1.087.264.382.348.872.23 1.328-.137.526-.772 1.014-2.041 1.99l-5.652 4.342c-1.628 1.25-2.442 1.876-3 1.81a1.458 1.458 0 0 1-1.129-.831c-.257-.532.003-1.565.522-3.63l.394-1.568c.211-.838.316-1.257.244-1.621a1.575 1.575 0 0 0-.45-.83c-.259-.248-.652-.36-1.438-.585l-.568-.162c-1.496-.427-2.244-.64-2.546-1.077a1.631 1.631 0 0 1-.234-1.322c.132-.524.756-1.013 2.004-1.99Z' />
</svg>")
(set: $interactionIcon to "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M12 11.5v-4m-.008 7.5h.01M8.58 3h6.84c2.127 0 3.191 0 4.004.414a3.8 3.8 0 0 1 1.66 1.66c.416.813.416 1.877.416 4.006v4.56c0 .705 0 1.058-.047 1.353a3.8 3.8 0 0 1-3.16 3.16c-.57.09-1.148 0-1.72.054a1.9 1.9 0 0 0-1.232.616c-.333.37-.61.802-.91 1.2-.823 1.1-1.236 1.651-1.742 1.848a1.9 1.9 0 0 1-1.377 0c-.506-.197-.92-.747-1.745-1.848-.298-.398-.575-.83-.91-1.2a1.9 1.9 0 0 0-1.23-.616c-.572-.053-1.15.035-1.72-.055a3.8 3.8 0 0 1-3.16-3.159c-.047-.295-.047-.648-.047-1.354V9.08c0-2.128 0-3.192.414-4.004a3.8 3.8 0 0 1 1.661-1.66C5.388 3 6.452 3 8.58 3Z' /></svg>")
}{
<header>
<div>
Inventory:
(if: $inventory's length is 0)[\
Empty..
](else:)[
(for: each _item, ...$inventory)[
_item(unless: $inventory's last is _item)[<span style="padding: 0 5px 0 0">,</span>]
]
]
</div>
(if: $energy is > 100)[(set: $energy to 100)]
<div class="energy-container">
Energy
<div class="energy-wrapper">
<div class="energy">
(for: each _i, ...(range: 1, $energy / 10))[
<div class="bar"></div>
]
</div>
</div>
</div>
</header>
}