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>Pickle Rustlers</title>
  </head>
  <body>
    <!-- The runtime shows the napplet's name, so there is no title header.
         The 3D valley fills the frame; the HUD and posters sit on top. -->
    <main id="app" class="app">
      <canvas id="scene" aria-label="Low-poly desert valley with a giant pickle jar"></canvas>

      <div id="hud" class="hud" hidden>
        <div class="hud-top">
          <div class="badge day"><span class="k">Day</span><b id="dayNum">1</b></div>
          <div class="badge pickles" title="Pickles brined today / quota">
            <span class="icon-pickle" aria-hidden="true"></span><b id="brined">0</b><span class="of">/</span><span id="quota">7</span>
          </div>
          <div class="badge score" title="Bounty"><span class="k">$</span><b id="score">0</b></div>
          <div class="badge sun" title="Seconds until sundown">
            <span class="sun-dial" aria-hidden="true"><i id="sunHand"></i></span><b id="clock">100</b>
          </div>
          <div class="tears" id="tears" role="img"></div>
          <button id="pauseBtn" class="icon-btn" type="button" aria-label="Pause">&#10074;&#10074;</button>
          <div class="boss" id="boss" role="img" hidden>
            <span class="boss-name">The Onion King</span>
            <span class="boss-bar"><i id="bossFill"></i></span>
          </div>
        </div>
        <div class="hud-bottom">
          <div class="gear" id="shells" aria-label="Shotgun shells"></div>
          <div class="gear" id="ropes" role="img"></div>
          <div class="power" id="power"></div>
        </div>
        <div class="toast" id="toast" role="status" aria-live="polite"></div>
        <div class="banner" id="banner" aria-live="polite"></div>
        <div class="hurt" id="hurt" aria-hidden="true"></div>
      </div>

      <div class="touch" id="touch" hidden>
        <div class="stick" id="stick" aria-label="Ride: drag to steer and gallop"><div class="knob" id="knob"></div></div>
        <div class="tbuttons">
          <button class="tbtn lasso" id="lassoBtn" type="button" aria-label="Throw lasso">LASSO</button>
          <button class="tbtn bang" id="shootBtn" type="button" aria-label="Fire">BANG</button>
        </div>
      </div>

      <div class="poster-wrap" id="posterWrap">
        <article class="poster" id="poster" aria-live="polite"></article>
      </div>

      <p class="no-gl" id="noGl" hidden>This game needs WebGL, and this browser can't start it. Try another browser or turn on hardware acceleration.</p>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>