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 Brawl</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 Brawl. You are the green stickman. Fight off the enemy stickmen."
          ></canvas>
          <button id="menuButton" class="menu-button" type="button" title="Menu (Esc)" hidden>☰ Menu</button>
        </div>

        <div id="touch" class="touch" hidden>
          <div class="touch-group">
            <button id="touchLeft" type="button" aria-label="Move left">◀</button>
            <button id="touchRight" type="button" aria-label="Move right">▶</button>
          </div>
          <div class="touch-grid">
            <button id="touchBlock" type="button" aria-label="Block">🛡</button>
            <button id="touchShoot" type="button" aria-label="Shoot">🔫</button>
            <button id="touchSword" type="button" aria-label="Sword">⚔</button>
            <button id="touchKick" type="button" aria-label="Kick">🦶</button>
            <span></span>
            <button id="touchRoll" type="button" aria-label="Roll">▼</button>
            <button id="touchJump" type="button" aria-label="Jump">▲</button>
            <button id="touchAttack" class="touch-attack" type="button" aria-label="Attack">HIT</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">STICK BRAWL</div>
            <div class="how">
              <p>You are the <b class="green">green stickman</b>. Enemy stickmen keep coming to get you, and there is no limit to how many! Knock them out before they swarm you!</p>
              <p>The fight is in a <b>5-floor building</b> with 4 rooms on each floor. Every room has <b>doors</b> that smash with one hit (enemies can smash them too). Enemies climb in from the <b>balconies</b> and the <b>street</b>, and use the <b>stairs</b> to find you.</p>
              <p>A <b>fire escape</b> runs from the apartment balconies across to the old <b>warehouse</b> next door. It has crates to jump over and a roof with a water tower.</p>
              <p>Enemies go down after <b>2 hits</b>. Big <b>Brutes</b> take <b>3 hits</b> and punch really fast! Little <b>Runts</b> go down after <b>1½ hits</b> and only do half a hit, but there are lots of them. And every 2 minutes a big <b>gang of 10</b> stickmen shows up together! You can take <b>100 hits</b> before the fight starts over. Watch out: when an enemy pulls his fist back, he's about to punch!</p>
              <ul class="keys">
                <li><kbd>←</kbd> <kbd>→</kbd> move</li>
                <li><kbd>↑</kbd> jump, or climb up the stairs when you see <b>↑</b></li>
                <li><kbd>Space</kbd> punch (press faster to punch faster!)</li>
                <li><kbd>Z</kbd> kick, or <b>drop-kick</b> if you're in the air</li>
                <li>hold <kbd>Ctrl</kbd> block punches from the front</li>
                <li><kbd>Left Alt</kbd> quick-draw your revolver and shoot (one shot per press). Shoot an enemy in the <b>head</b> to knock him out at once!</li>
                <li><kbd>Left Shift</kbd> pull the sword off your back and swing it (worth 1½ hits!)</li>
                <li>tap <kbd>↓</kbd> roll (you can't be hit while rolling), or go down the stairs when you see <b>↓</b></li>
                <li>hold <kbd>↓</kbd> slide along the floor (the faster you run, the farther you go). Punches go over your head, and you can attack while sliding!</li>
                <li><kbd>Esc</kbd> open this menu</li>
              </ul>
              <p class="touch-keys">Use <b>◀ ▶</b> to move, <b>▲</b> to jump or climb stairs, tap <b>▼</b> to roll or go down stairs (hold it to slide), hold <b>🛡</b> to block, <b>🔫</b> to shoot, <b>⚔</b> to swing your sword, <b>HIT</b> to punch and <b>🦶</b> to kick (in the air it's a drop-kick).</p>
            </div>
            <div class="menu-actions">
              <button id="playButton" class="primary" type="button">Fight!</button>
              <button id="restartButton" type="button" hidden>Start over</button>
            </div>
          </div>
        </div>

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