Outpost Mars

{# Add your imports here as the nunjucks is initialized inside #main #} {% from "templates/pill-button.twig.html" import pillButton %} {% from "templates/edl/frame-animation.twig.html" import frameAnimation %} {% from "templates/edl/bg-lines.twig.html" import bgLines %} {# Design SVGs inlined once for JS to clone at runtime (see SvgBank.js), never shown directly #}

{% include "images/edl/timing-button.svg" %}

{% include "images/edl/timing-button-success.svg" %}

{% include "images/edl/timing-button-error.svg" %}

{% include "images/edl/align-joystick-button.svg" %}

{% include "images/edl/rotate-joystick-button.svg" %}

{% include "images/edl/circle-timer.svg" %}

{% include "images/edl/spacer-arrow.svg" %}

{% include "images/edl/sequence-slot.svg" %}

{% include "images/edl/sequence-button-orange.svg" %}

{% include "images/edl/sequence-button-blue.svg" %}

{% include "images/edl/sequence-button-yellow.svg" %}

{% include "images/edl/sequence-button-red.svg" %}

{% include "images/edl/sequence-button-green.svg" %}

{% include "images/edl/sequence-button-white.svg" %}

{% include "images/edl/sequence-button-success.svg" %}

{% include "images/edl/sequence-button-error.svg" %}

{# One sky for the whole descent, outside the stages: it travels from the moment the atmosphere shows up until the ship lands, and a copy per stage would break that travel at every cross-fade. Nothing about it is staged, it fades in and thickens on its own, see EDL.fadeSkyToAtmosphere. #}

{% include "images/edl/stage-2-bg.svg" %}

{# Nothing of its own, it is what the arcs of stage 1 are cross-faded out against when the atmosphere takes over. #}

{# Empty too: the ground of this stage is the image below, which moves into place instead of fading in with a stage. #}

{# The ground of Mars. It is outside the stages because it does not fade in: it comes up from the bottom right during the landing and stays there for the rest of the run. See EDL.landOnMars. #}

{# One ship for the whole run. It is the same capsule from the moment it undocks to the moment it stands on Mars: the sequences take the frame over from one another inside it, and the beats of the run move, scale and turn it. Nothing here is ever cross-faded against a copy of itself, which is what used to dim the picture and cut the burn in half at every stage boundary. Three boxes, because three different things move it and they must not fight over one transform: .ship what the align action steers, in screen units .ship-placement where the run has put it, its position and its size .ship-assembly the ship itself and everything burning around it, tilted #}

{# The path the entry is flown along. It stays put, it is what the ship is being lined up with. Only up for the align run. #}

{% include "images/edl/align-ship-lines.svg" %}

{# Outside the steered box on purpose, so it bends the trajectory lines behind it rather than the ship in front of it. Steered by the same numbers from the align action. #}

{# Rides with the ship, so what the player lines up is this against the path behind it. Only up for the align run. #}

{% include "images/edl/align-ship-circle.svg" %}

{# The air burning around the shield once it is deployed, one canvas on each side of the capsule: the fire behind it and the cooled smoke washing over it. #}

{# Every sequence of the run, all drawn on the same canvas so they line up on their own. One shows at a time and hands the frame to the next, see EDL.SEQUENCE_TAKEOVERS. #} {{ frameAnimation("deorbit-burn", 4, fps=4) }} {{ frameAnimation("deploy-heat-shield", 4, fps=4, classes="start-hidden") }} {{ frameAnimation("descent-thruster-doors", 4, fps=4, classes="start-hidden") }} {{ frameAnimation("descent-landing-legs", 5, fps=4, classes="start-hidden") }} {{ frameAnimation("deflate-heat-shield", 7, fps=4, classes="start-hidden") }} {{ frameAnimation("crew-landed", 9, fps=4, classes="start-hidden") }} {# Over the capsule art, so the vehicle covers it at the dock. #}

{# The three engines, one per pod of the shield. They fire for the deorbit burn, go out for the entry, and come back for the descent. #}

{% include "images/edl/ground-distance-gauge.svg" %}

{% for icon in data.content.game.gauge_icons %} {# Through data-src, not src: the browser reads this page before nunjucks has rendered it and would go asking for the literal template as a filename. BaseGame.replaceImgDataSrc puts the real one in after. #}

{% endfor %}

0 km

{% include "images/edl/speed-gauge.svg" %}

0.0

KM/S

{{ pillButton(data.content.screen1.step1.cta, "goToNextStep", width="1368px", height="338px", fontSize="63px", icon="arrow-down") }}

{# Raised by the actions that ask for it in the JSON, up before the instruction it warns about. #}

{% include "images/edl/warning-sign.svg" %}

{# The same sign again, under the line it marks. This one belongs to the align run, which raises it whenever the ship leaves its parameters, and being last it can come and go mid action without pushing the instructions around. #}

{% include "images/edl/warning-sign.svg" %}

{# The conclusion is laid over the flight, which never fades out. This is what covers it, so it has to stay opaque and fill the screen. #}

{{ pillButton(data.content.screen3.play_again, "tryAgain", width="827px", height="374px", fontSize="69px", iconSize="207px", gap="20px",padding="0 140px 0 80px", shape="left", icon="custom", iconPath="images/edl/timing-button-blue.svg", glowColors=["#F4EEE6"], consoleAction="round_blue") }} {{ pillButton(data.content.screen3.close, "reset", theme="black", width="827px", height="374px", fontSize="69px",iconSize="207px",gap="20px",padding="0 80px 0 100px", shape="right", icon="custom", iconPath="images/edl/timing-button-red.svg", glow=false, consoleAction="round_pink") }}

{% include "templates/still-there.twig.html" %}