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>Sickman Survival</title>
  </head>
  <body>
    <!--
      The runtime frames this napplet and shows its name, so the game fills the
      frame from the first pixel. The HUD floats over the scene.
    -->
    <main id="app" class="app" data-mode="title" data-touch="off" data-pad="off" data-split="off" data-sound="on" data-overlay="on">
      <canvas id="scene" class="scene" aria-label="Game world"></canvas>
      <div id="panes" class="panes" aria-hidden="true"></div>

      <div class="hud">
        <div class="readout">
          <span class="hud-label">Alive</span>
          <output id="clock" class="clock">0.0s</output>
        </div>
        <div class="readout readout-best">
          <span id="bestLabel" class="hud-label">Best</span>
          <span id="best" class="best">–</span>
        </div>
        <button id="soundButton" class="hud-button sound" type="button" aria-label="Mute sound" aria-pressed="false">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path class="speaker" d="M4 9h4l5-4v14l-5-4H4z" />
            <path class="waves" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" />
            <path class="cross" d="M16.5 9.5l5 5m0-5l-5 5" />
          </svg>
        </button>
        <button id="pauseButton" class="hud-button pause" type="button" aria-label="Pause">
          <span aria-hidden="true">❚❚</span>
        </button>
      </div>

      <section id="overlay" class="overlay" aria-live="polite">
        <p id="overlayKicker" class="kicker">Meteor storm incoming</p>
        <p id="overlayHeadline" class="headline">Stay alive.</p>
        <p id="overlayDetail" class="detail">
          Meteors fall faster the longer you last. The caves below are shelter, but the moles in
          them explode when you get close.
        </p>
        <button id="overlayButton" class="go" type="button">Start</button>
        <p class="hint hint-keys">←/→ or A/D run · Space jump · C or Shift crawl · ↓ drop through planks · M sound</p>
        <p class="hint hint-pad">Stick or D-pad run · Ⓐ jump · ▼, Ⓧ or LT crawl · ▼ on planks drops · Start pause · Select sound</p>
        <p class="hint hint-join">Up to 4 controllers join automatically for split screen. Press a button if one isn't detected.</p>
        <p class="hint hint-touch">Hold ◀ ▶ to run · ▲ jump · ▂ crawl · ▼ drop through planks</p>
      </section>

      <div id="touchPad" class="touch-pad">
        <div class="pad-group">
          <button type="button" data-action="left" aria-label="Run left"><span aria-hidden="true">◀</span></button>
          <button type="button" data-action="right" aria-label="Run right"><span aria-hidden="true">▶</span></button>
        </div>
        <div class="pad-group">
          <div class="pad-stack">
            <button type="button" data-action="crouch" aria-label="Crouch and crawl"><span aria-hidden="true">▂</span></button>
            <button type="button" data-action="down" aria-label="Drop down"><span aria-hidden="true">▼</span></button>
          </div>
          <button type="button" data-action="jump" class="pad-jump" aria-label="Jump"><span aria-hidden="true">▲</span></button>
        </div>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>