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>Dine and Dash</title>
    <meta name="description" content="Sneak around the diner, eat every plate of food, then dash out the door before a waiter catches you! Or play as the waiter and catch both dine and dashers before they escape." />
  </head>
  <body>
    <main id="app" class="app">
      <div id="stage" class="stage">
        <div id="screen" class="screen">
          <canvas id="world" class="world" aria-hidden="true"></canvas>
          <canvas
            id="game"
            class="game"
            tabindex="0"
            aria-label="Dine and Dash. Play as the dasher and escape with a full belly, or as the waiter and catch both dashers."
          ></canvas>
          <button id="menuButton" class="menu-button" type="button" title="Menu (Esc)" hidden>☰ Menu</button>
          <button id="fullButton" class="full-button" type="button" title="Full screen" aria-label="Full screen" hidden>⛶</button>
        </div>

        <div id="touch" class="touch" hidden>
          <div class="dpad">
            <button data-dir="up" class="up" type="button" aria-label="Walk forward">▲</button>
            <button data-dir="left" class="left" type="button" aria-label="Turn left">◀</button>
            <button data-dir="right" class="right" type="button" aria-label="Turn right">▶</button>
            <button data-dir="down" class="down" type="button" aria-label="Walk backward">▼</button>
          </div>
        </div>

        <div id="menu" class="menu" role="dialog" aria-modal="true" aria-labelledby="menuTitle">
          <div class="menu-card">
            <div id="menuTitle" class="menu-title">DINE <span>&amp;</span> DASH</div>
            <div id="menuResult" class="menu-result" hidden></div>
            <div class="how">
              <p>You're <b>hungry</b> and you have <b>no money</b>. 🤫</p>
              <p>Sneak to the tables and walk into them to <b>eat the food</b>. Fill your belly, then <b>dash out the door</b>!</p>
              <p>Stay out of the waiters' <b class="seen">yellow light</b> on the floor. If they spot you, they chase you and the screen glows red. Lose them by getting out of sight!</p>
              <p>Or <b>be the waiter</b>! Two dine and dashers are sneaking around eating 10 plates of food. <b>Catch them both</b> before one gets out the door!</p>
              <ul class="keys">
                <li><kbd>W</kbd> <kbd>S</kbd> or <kbd>↑</kbd> <kbd>↓</kbd> walk forward and back</li>
                <li><kbd>A</kbd> <kbd>D</kbd> step sideways, <kbd>←</kbd> <kbd>→</kbd> turn</li>
                <li>Mouse: move it over the game to look around. Keep it near the edge to keep turning</li>
                <li><kbd>Esc</kbd> open this menu</li>
                <li>Controller: stick or D-pad up/down to walk, left/right to turn, <kbd>A</kbd> pick a button, <kbd>Start</kbd> open this menu</li>
              </ul>
              <p class="touch-keys">▲ ▼ walk forward and back, ◀ ▶ turn. Hold one to keep going. Drag on the game to look around.</p>
            </div>
            <div class="menu-actions">
              <button id="resumeButton" class="primary" type="button" hidden>Keep playing</button>
              <button id="dasherButton" type="button">🤫 Play as Dasher</button>
              <button id="waiterButton" type="button">🍽️ Play as Waiter</button>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>