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>Poly Dogfight</title>
  </head>
  <body>
    <main id="app" class="app">
      <canvas id="scene" class="scene" tabindex="-1" aria-label="Flight view"></canvas>

      <div id="views" class="views"></div>
      <div id="spareView" class="spare" hidden>
        <p>Connect another controller; press a button if it is not detected</p>
      </div>

      <template id="viewTemplate">
        <section class="view">
          <div class="hud">
            <div class="gauges">
              <div class="chip chip-pilot" data-ref="pilot" hidden>
                <span class="chip-label">Pilot</span>
                <span class="chip-value" data-ref="pilotName">P1</span>
              </div>
              <div class="chip">
                <span class="chip-label">Speed</span>
                <span class="chip-value"><span data-ref="speed">0</span><small>km/h</small></span>
              </div>
              <div class="chip">
                <span class="chip-label">Alt</span>
                <span class="chip-value"><span data-ref="alt">0</span><small>m</small></span>
              </div>
            </div>
            <span class="beginner-label" data-ref="beginner" hidden>Beginner</span>
            <div class="meters">
              <div class="meter" aria-label="Throttle">
                <span class="chip-label">Thr</span>
                <span class="meter-track"><span data-ref="throttle" class="meter-fill meter-throttle"></span></span>
              </div>
              <div class="meter" aria-label="Boost">
                <span class="chip-label">Boost</span>
                <span class="meter-track"><span data-ref="boost" class="meter-fill meter-boost"></span></span>
              </div>
              <div class="meter" data-ref="rocketMeter" aria-label="Rockets ready: 2">
                <span class="chip-label">Rkt</span>
                <span class="rocket-pips">
                  <span class="rocket-pip"><span class="rocket-fill" data-ref="rocketPip"></span></span>
                  <span class="rocket-pip"><span class="rocket-fill" data-ref="rocketPip"></span></span>
                </span>
              </div>
            </div>
            <div data-ref="stall" class="stall" role="status" hidden>
              <span class="stall-icon" aria-hidden="true">▲</span> STALL <small>nose down</small>
            </div>
            <div data-ref="incoming" class="incoming" role="status" hidden>
              <span class="stall-icon" aria-hidden="true">◆</span> ROCKET LOCK <small>bank hard!</small>
            </div>
          </div>
          <div class="reticle" data-ref="reticle" aria-label="Gun sight" hidden>
            <span class="reticle-dot"></span><span class="hit-marker" data-ref="hitMarker" hidden></span>
          </div>
          <div class="aim-point" data-ref="aimPoint" aria-label="Predicted assisted shot" hidden></div>
          <div class="flight-path" data-ref="flightPath" aria-label="Flight path" hidden></div>
          <div class="lock-box" data-ref="lockBox" aria-label="Rocket seeker has a target" hidden><span>LOCK</span></div>
          <div class="indicators" data-ref="indicators" aria-hidden="true"></div>
          <div data-ref="crash" class="crash" role="status" hidden>
            <p class="crash-title" data-ref="crashTitle">Crashed!</p>
            <p class="crash-sub">Back in the air in <span data-ref="respawn">5</span></p>
          </div>
          <div class="beginner-offer" data-ref="offer" hidden role="group" aria-label="Easier flight controls">
            <p>Want easier controls? Beginner mode handles throttle. Up climbs, down dives; left/right rolls and turns.</p>
            <button type="button" data-ref="accept">Try beginner mode (A)</button>
            <button type="button" data-ref="decline">Keep current controls (B)</button>
          </div>
        </section>
      </template>

      <div id="touchControls" class="touch" aria-hidden="true">
        <div id="stick" class="stick"><div id="stickKnob" class="stick-knob"></div></div>
        <div class="touch-right">
          <div class="touch-buttons">
            <button id="yawLeft" class="tbtn" type="button" tabindex="-1">◁</button>
            <button id="yawRight" class="tbtn" type="button" tabindex="-1">▷</button>
            <button id="fireButton" class="tbtn tbtn-fire" type="button" tabindex="-1">Fire</button>
            <button id="rocketButton" class="tbtn tbtn-rocket" type="button" tabindex="-1">Rocket</button>
            <button id="boostButton" class="tbtn tbtn-boost" type="button" tabindex="-1">Boost</button>
          </div>
          <div id="throttleSlider" class="throttle">
            <div id="throttleKnob" class="throttle-knob"></div>
          </div>
        </div>
      </div>

      <div class="corner">
        <button id="cameraButton" class="icon-btn" type="button" title="Camera (C)" aria-label="Change camera">◉</button>
        <button id="pauseButton" class="icon-btn" type="button" title="Pause (Esc)" aria-label="Pause">❚❚</button>
      </div>

      <div id="menu" class="menu">
        <div class="card" role="dialog" aria-labelledby="menuTitle">
          <section class="card-brief">
            <h2 id="menuTitle" class="card-title">Ready for take-off</h2>
            <p class="card-sub" id="menuSub">Fly anywhere around the little planet. Keep your speed up — slow too much and the wings stall.</p>
            <p class="card-sub card-goal">Plug in more controllers to dogfight friends: shoot their wings and tail with guns and rockets, and shake off what they fire back.</p>
            <div class="card-options" role="group" aria-label="Game options">
              <div id="flightModes" class="flight-modes"></div>
              <p class="hint" id="modeHint">Beginner: stick up climbs, down dives; left/right rolls and turns. Full maneuvering speed; release to level out. Gamepad: LB switches mode, A flies.</p>
              <div class="toggles">
                <label class="toggle"><input id="invertToggle" type="checkbox" /> Invert normal pitch</label>
                <label class="toggle"><input id="muteToggle" type="checkbox" /> Mute</label>
              </div>
            </div>
            <button id="flyButton" class="fly-btn" type="button">Fly</button>
            <p class="hint" id="startHint">or press a key / gamepad A</p>
            <p class="pilots" id="pilotsNote">Up to 4 pilots: each extra controller joins in split screen.</p>
            <p class="save-note" id="saveNote" hidden></p>
          </section>
          <section class="card-setup" aria-label="Controls">
            <div class="controls" id="controlsPanel" data-device="keyboard">
              <h3 class="controls-title">Controls <span class="controls-device" id="controlsDevice">Keyboard</span></h3>
              <dl class="controls-list" data-for="keyboard">
                <dt>Pitch / roll</dt><dd>W S A D · arrows</dd>
                <dt>Rudder</dt><dd>Q E</dd>
                <dt>Throttle</dt><dd>T / Shift up · G down</dd>
                <dt>Boost</dt><dd>Space</dd>
                <dt>Guns</dt><dd>F / Enter</dd>
                <dt>Rocket</dt><dd>R</dd>
                <dt>Camera</dt><dd>C</dd>
                <dt>Pause</dt><dd>Esc / P</dd>
                <dt>Sound</dt><dd>M</dd>
              </dl>
              <dl class="controls-list" data-for="gamepad" hidden>
                <dt>Pitch / roll</dt><dd>Left stick · D-pad</dd>
                <dt>Rudder</dt><dd>LT / RT · right stick</dd>
                <dt>Throttle</dt><dd>RB up · LB down</dd>
                <dt>Boost</dt><dd>A</dd>
                <dt>Guns</dt><dd>B</dd>
                <dt>Rocket</dt><dd>Y</dd>
                <dt>Camera</dt><dd>X</dd>
                <dt>Pause</dt><dd>Start</dd>
                <dt>Beginner mode</dt><dd>LB in this menu</dd>
                <dt>Pilots</dt><dd>Connect another controller to join (up to 4)</dd>
              </dl>
              <p class="hint" id="flightHint">Stick back / S pulls the nose up. Stalled? Push the nose down and add power.</p>
              <p class="hint">Holed wings pull the plane toward them and a shot-up tail drops the nose. Lose a whole wing or the tail and you're going down.</p>
              <p class="hint">Rockets lock onto a plane just ahead of their nose. Two on the wings, one reloads every 8 seconds; two hits on a part bring a plane down. Locked on? Bank hard and pull to shake it. A rocket that misses keeps flying round the planet.</p>
            </div>
          </section>
        </div>
      </div>

      <div id="errorNotice" class="error" hidden>
        <p>Poly Dogfight needs WebGL to draw the planet, and it isn't available here.</p>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>