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" />
    <title>Super Platformer</title>
  </head>
  <body>
    <!--
      A napplet is an applet framed by a runtime: the runtime already shows this
      napplet's name, so there is no title header here. The frame is the game
      surface from the first pixel and adapts to any frame size.
    -->
    <main id="app" class="app">
      <div id="stage" class="stage">
        <canvas
          id="game"
          tabindex="0"
          aria-label="Platformer. Arrow keys or A and D to move, Space or W to jump."
        ></canvas>

        <div class="hud">
          <div class="hud-stats">
            <span class="stat stat-hearts">
              <span id="hudHearts" class="stat-val hearts" aria-label="Lives">♥♥♥</span>
            </span>
            <span class="stat">
              <span class="stat-key">Level</span>
              <span id="hudLevel" class="stat-val">1/3</span>
            </span>
            <span class="stat">
              <span class="stat-key">Coins</span>
              <span id="hudCoins" class="stat-val">0/0</span>
            </span>
            <span class="stat">
              <span class="stat-key">Time</span>
              <span id="hudTime" class="stat-val">0.0</span>
            </span>
            <span class="stat stat-best">
              <span class="stat-key">Best</span>
              <span id="hudBest" class="stat-val">--</span>
            </span>
            <span id="hudPowerWrap" class="stat stat-power" hidden>
              <span aria-hidden="true">★</span>
              <span id="hudPower" class="stat-val">Power</span>
            </span>
          </div>
          <div class="hud-actions">
            <button id="soundButton" type="button" aria-label="Mute sound" title="Sound">♪</button>
            <button id="pauseButton" type="button" aria-label="Pause" title="Pause (P)">❚❚</button>
            <button id="restartButton" type="button" aria-label="Restart level" title="Restart (R)">↻</button>
          </div>
        </div>

        <div id="touchControls" class="touch">
          <div class="touch-move">
            <button type="button" data-action="left" aria-label="Move left">◀</button>
            <button type="button" data-action="right" aria-label="Move right">▶</button>
          </div>
          <div class="touch-actions">
            <button type="button" data-action="fire" class="touch-fire" aria-label="Shoot">Fire</button>
            <button type="button" data-action="jump" class="touch-jump" aria-label="Jump">Jump</button>
          </div>
        </div>

        <div id="overlay" class="overlay" hidden>
          <div class="overlay-card">
            <p id="overlayTitle" class="overlay-title">Ready</p>
            <p id="overlayText" class="overlay-text"></p>
            <div class="overlay-actions">
              <button id="primaryButton" type="button" class="primary">Play</button>
              <button id="secondaryButton" type="button" hidden>Replay</button>
            </div>
            <p id="overlayHint" class="overlay-hint">← → move · Space jump · X fire · P pause</p>
          </div>
        </div>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>