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>Stick Runner</title>
  </head>
  <body>
    <main id="app" class="app">
      <div id="stage" class="stage">
        <div id="screen" class="screen">
          <canvas
            id="game"
            class="game"
            tabindex="0"
            aria-label="Stick Runner. Help Rog the stickman run across the rooftops to the finish flag and jump over the pits."
          ></canvas>
          <button id="menuButton" class="menu-button" type="button" title="Menu (Esc)">☰ Menu</button>
        </div>

        <div id="touch" class="touch" hidden>
          <div class="touch-group">
            <button id="touchLeft" type="button" aria-label="Run left">◀</button>
            <button id="touchRight" type="button" aria-label="Run right">▶</button>
          </div>
          <button id="touchJump" class="touch-jump" type="button" aria-label="Jump">JUMP</button>
        </div>

        <div id="menu" class="menu" role="dialog" aria-modal="true" aria-labelledby="menuTitle">
          <div class="menu-card">
            <div id="menuTitle" class="menu-title">STICK RUNNER</div>
            <div id="menuResult" class="menu-result" hidden></div>
            <div class="how">
              <p>You are <b>Rog</b> the stickman. Help Rog run from roof to roof and reach the flag at the end of <b>Level 1</b>. Then try <b>Level 2</b> and reach the <b>gold flag</b>!</p>
              <p>The gaps between roofs are <b class="pit-word">the pit</b>. If Rog falls in on Level 1, he goes back to the start. On Level 2, he goes <b>all the way back to Level 1</b>!</p>
              <p>Some pits are too wide to jump, but there's a <b>clothesline</b> across them. Land on it and jump again fast: it snaps after half a second!</p>
              <ul class="keys">
                <li><kbd>←</kbd> <kbd>→</kbd> or <kbd>A</kbd> <kbd>D</kbd> run</li>
                <li><kbd>Space</kbd> <kbd>↑</kbd> or <kbd>W</kbd> jump (hold to jump higher)</li>
                <li><kbd>Esc</kbd> or <kbd>M</kbd> open this menu</li>
              </ul>
              <p class="touch-keys">Hold <b>◀</b> <b>▶</b> to run and tap <b>JUMP</b> to jump (hold it to jump higher). Tap <b>☰ Menu</b> to come back here.</p>
            </div>
            <div class="menu-actions">
              <button id="playButton" class="primary" type="button">Play</button>
              <button id="restartButton" type="button" hidden>Restart from Level 1</button>
            </div>
          </div>
        </div>

        <div id="tooSmall" class="too-small" hidden>Make the window bigger to run!</div>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>