Made of little things.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Big Rig Rush</title>
  </head>
  <body>
    <!--
      A napplet is an applet framed by a runtime: the runtime already shows this
      napplet's name, so the game fills the frame from the first pixel.
    -->
    <main id="app" class="app" tabindex="-1">
      <canvas id="view" class="view" role="img" aria-label="Top-down city streets with your truck and traffic"></canvas>

      <div class="hud" aria-label="Dashboard">
        <div class="gauge gauge-clock" title="Time of day">
          <span id="clockIcon" class="gauge-key" aria-hidden="true">☀</span><span id="clock" class="gauge-value">07:30</span>
        </div>
        <div class="gauge gauge-score" title="Score">
          <span class="gauge-key" aria-hidden="true">$</span><span id="score" class="gauge-value">0</span>
        </div>
        <div class="gauge gauge-drive" title="Gear, engine speed and road speed">
          <span id="gear" class="gear" aria-label="Gear">1</span>
          <span class="tach" role="meter" id="tachMeter" aria-label="Engine RPM" aria-valuemin="0" aria-valuemax="2100" aria-valuenow="650"><i id="tachBar"></i></span>
          <span id="speed" class="gauge-value speed">0</span><span class="gauge-key unit">KM/H</span>
        </div>
        <div id="jobGauge" class="gauge gauge-job" data-kind="pickup" title="Current job and distance to it">
          <span class="gauge-key"><span id="jobLabel">PICK UP</span><span id="jobDistrict" class="job-district"></span></span><span id="distance" class="gauge-value">0 m</span>
        </div>
        <div class="gauge gauge-damage" title="Truck damage">
          <span class="gauge-key" id="damageKey">DMG</span>
          <span class="bar" role="meter" id="damageMeter" aria-label="Truck damage" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <i id="damageBar"></i>
          </span>
        </div>
        <button id="favorButton" class="gauge gauge-favor" type="button" hidden title="Favors the family owes you: press F (or tap) to call a hit"><span class="gauge-key">FAVORS</span><span id="favors" class="gauge-value">0</span></button>
        <button id="pauseButton" class="pause" type="button" aria-label="Pause">II</button>
      </div>

      <canvas id="minimap" class="minimap" aria-label="City map with your truck and the next stop"></canvas>

      <output id="toast" class="toast" aria-live="polite"></output>

      <div class="touch-pad" aria-label="Touch controls">
        <div class="pad-side">
          <div class="pad-group">
            <button type="button" class="pad pad-small pad-ground" data-action="horn" aria-label="Horn">HONK</button>
            <button type="button" class="pad pad-small pad-air" data-action="weapon" aria-label="Next bomb mode">WPN</button>
            <button type="button" class="pad pad-small pad-air" data-action="hit" aria-label="Pop flares">FLR</button>
            <button type="button" class="pad pad-small" data-action="tow" data-label-a10="ARM" aria-label="Call a tow truck, or re-arm the A-10">TOW</button>
          </div>
          <div class="pad-group">
            <button type="button" class="pad" data-control="left" aria-label="Steer left">◀</button>
            <button type="button" class="pad" data-control="right" aria-label="Steer right">▶</button>
          </div>
        </div>
        <div class="pad-side pad-right">
          <div class="pad-group">
            <button type="button" class="pad pad-small" data-action="shiftDown" aria-label="Shift down">▼ N</button>
            <button type="button" class="pad pad-small" data-action="shiftUp" aria-label="Shift up">M ▲</button>
            <button type="button" class="pad pad-small pad-fire" data-action="fire" aria-label="Fire a missile">FIRE</button>
            <button type="button" class="pad pad-small pad-air" data-action="bomb" aria-label="Drop a bomb">BOMB</button>
            <button type="button" class="pad pad-small pad-air" data-control="gun" aria-label="Fire the cannon (hold)">GUN</button>
          </div>
          <div class="pad-group">
            <button type="button" class="pad pad-brake" data-control="down" data-label-a10="THR−" aria-label="Brake, or throttle back in the A-10">BRK</button>
            <button type="button" class="pad pad-gas" data-control="up" data-label-a10="THR+" aria-label="Gas, or throttle up in the A-10">GAS</button>
          </div>
        </div>
      </div>

      <section id="choice" class="overlay choice" hidden aria-labelledby="choiceTitle">
        <div class="sign">
          <p id="choiceTab" class="sign-tab">DISPATCH</p>
          <p id="choiceTitle" class="sign-title">CALL</p>
          <p id="choiceBody" class="sign-body"></p>
          <div id="choiceButtons" class="choice-buttons"></div>
          <p class="sign-hint">Press 1–4 or tap · Esc to cancel</p>
        </div>
      </section>

      <section id="overlay" class="overlay" aria-labelledby="overlayTitle">
        <div class="sign">
          <p id="overlayTab" class="sign-tab">EXIT 1</p>
          <p id="overlayTitle" class="sign-title">BIG RIG RUSH</p>
          <p id="overlayBody" class="sign-body"></p>
          <div id="vehiclePick" class="vehicle-pick" role="radiogroup" aria-label="Choose your ride">
            <button type="button" class="pick" role="radio" data-vehicle="rig" aria-checked="true"><b>1</b> BIG RIG<span>heavy · 8-speed</span></button>
            <button type="button" class="pick" role="radio" data-vehicle="sports" aria-checked="false"><b>2</b> SPORTS CAR<span>light · automatic</span></button>
            <button type="button" class="pick" role="radio" data-vehicle="dozer" aria-checked="false"><b>3</b> BULLDOZER<span>tracks · smashes</span></button>
            <button type="button" class="pick" role="radio" data-vehicle="a10" aria-checked="false"><b>4</b> A-10<span>flies · gun · bombs</span></button>
          </div>
          <button id="raidToggle" class="raid-toggle" type="button" aria-pressed="false">A-10 AIR RAID: <b>OFF</b> <span>key 5</span></button>
          <button id="overlayButton" class="plate" type="button">START SHIFT</button>
          <p id="overlayHint" class="sign-hint"></p>
        </div>
      </section>

      <div class="too-small" role="status">Make the frame a little bigger to drive.</div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>