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>Browser Side Quest</title>
  </head>
  <body>
    <!--
      Browser Side Quest: a port of Mozilla's BrowserQuest (2012, Little Workshop).
      Code MPL-2.0, art and maps CC-BY-SA 3.0, music CC BY 3.0. The runtime frames this napplet and
      already shows its name, so the frame is game surface from the first pixel.
    -->
    <main id="app" class="app intro">
      <div id="stage">
        <div id="frame">
          <div id="viewport">
            <canvas id="background"></canvas>
            <canvas id="entities"></canvas>
            <canvas id="foreground" tabindex="0" aria-label="Game world"></canvas>
            <div id="bubbles" aria-live="polite"></div>
            <div id="achievement-notification" aria-live="polite">
              <div class="coin"></div>
              <div class="achievement-info">
                <div class="title">New Achievement Unlocked!</div>
                <div class="name"></div>
              </div>
            </div>
          </div>
          <div id="bar">
            <div id="healthbar" role="meter" aria-label="Health" aria-valuemin="0">
              <div id="hitpoints"></div>
            </div>
            <div id="weapon" class="equip" title="Weapon"></div>
            <div id="armor" class="equip" title="Armor"></div>
            <div id="notifications" aria-live="polite">
              <div><span id="message1"></span><span id="message2"></span></div>
            </div>
            <button id="playercount" type="button" title="Players in this world">
              <span class="count">0</span> <span class="label">players</span>
            </button>
            <div id="barbuttons">
              <button id="chatbutton" class="barbutton" type="button" title="Chat (Enter)" aria-label="Chat"></button>
              <button id="achievementsbutton" class="barbutton" type="button" title="Achievements" aria-label="Achievements"></button>
              <button id="helpbutton" class="barbutton" type="button" title="About" aria-label="About"></button>
              <button id="mutebutton" class="barbutton active" type="button" title="Sound" aria-label="Sound" aria-pressed="true"></button>
            </div>
          </div>
          <div id="chatbox">
            <input id="chatinput" type="text" maxlength="60" autocomplete="off" aria-label="Chat message" placeholder="Say something…" />
          </div>
          <section id="population" aria-live="polite">
            <div class="world-line"><span id="world-name">Solo world</span></div>
            <div id="instance-population"><span class="n">0</span> <span class="w">players</span> in this world</div>
            <ul id="player-list"></ul>
            <div class="world-actions">
              <button id="prev-world" type="button" class="link">◂ world</button>
              <button id="next-world" type="button" class="link">world ▸</button>
            </div>
          </section>
        </div>
      </div>

      <div id="touchpad" aria-hidden="true">
        <button type="button" class="pad up" data-dir="up" tabindex="-1"></button>
        <button type="button" class="pad left" data-dir="left" tabindex="-1"></button>
        <button type="button" class="pad right" data-dir="right" tabindex="-1"></button>
        <button type="button" class="pad down" data-dir="down" tabindex="-1"></button>
        <button type="button" class="pad action" data-dir="action" tabindex="-1">⚔</button>
      </div>

      <section id="intro">
        <div id="logo" role="img" aria-label="Browser Side Quest"><span id="logosparks"></span><span id="logoside" aria-hidden="true">Side</span><span id="logocaret" aria-hidden="true"></span></div>
        <section id="parchment" class="createcharacter">
          <div class="parchment-left"></div>
          <div class="parchment-middle">
            <article id="createcharacter">
              <h2><span class="left-ornament"></span>A Massively Multiplayer Adventure<span class="right-ornament"></span></h2>
              <div id="character" class="disabled"><div></div></div>
              <form id="createform" autocomplete="off">
                <input type="text" id="nameinput" class="stroke" name="player-name" placeholder="Name your character" maxlength="15" />
              </form>
              <button class="play button disabled" type="button" aria-label="Play"><div></div></button>
              <p id="identity-hint" class="hint"></p>
            </article>
            <article id="loadcharacter">
              <h2><span class="left-ornament"></span>Load your character<span class="right-ornament"></span></h2>
              <img id="playerimage" alt="" />
              <div id="playername" class="stroke"></div>
              <button class="play button" type="button" aria-label="Play"><div></div></button>
              <div id="create-new"><button type="button" class="link"><span>or</span> create a new character</button></div>
            </article>
            <article id="confirmation">
              <h2><span class="left-ornament"></span>Delete your character?<span class="right-ornament"></span></h2>
              <p>All your items and achievements will be lost.<br />Are you sure you wish to continue?</p>
              <button class="delete button" type="button" aria-label="Delete"></button>
              <div id="cancel"><button type="button" class="link">cancel</button></div>
            </article>
            <article id="about">
              <h2><span class="left-ornament"></span>What is Browser Side Quest?<span class="right-ornament"></span></h2>
              <p class="desc">
                A multiplayer adventure from your Web browser, revived as a Nostr napplet.
                Adventurers meet peer to peer: up to eight share a world, and more worlds open as they fill.
              </p>
              <p class="credits">
                A port of BrowserQuest, the original game by Little Workshop for Mozilla (2012): pixels by Guillaume Lecollinet,
                code by Franck Lecollinet. Code MPL-2.0, art and maps CC-BY-SA 3.0.
                Music (CC BY 3.0) by Aaron Krogh, Terrel O'Brien, Dan Tilden and Joel Day,
                via the browserquest/BrowserQuest community fork.
              </p>
              <p class="close-hint">- tap or click anywhere to close -</p>
            </article>
            <article id="death">
              <p>You are dead...</p>
              <button id="respawn" class="button" type="button" aria-label="Revive"></button>
            </article>
            <article id="disconnected">
              <p id="disconnect-message">The connection to the world has been lost.</p>
              <button id="rejoin" type="button" class="link big">Rejoin</button>
            </article>
          </div>
          <div class="parchment-right"></div>
        </section>
      </section>

      <article id="instructions">
        <button class="close" type="button" aria-label="Close"></button>
        <h2><span class="left-ornament"></span>How to play<span class="right-ornament"></span></h2>
        <ul>
          <li><span class="icon i1"></span>Click or tap to move, attack and pick up items.</li>
          <li><span class="icon i2"></span>Arrows/WASD or a gamepad also work. Space or A attacks and talks.</li>
          <li><span class="icon i3"></span>Press ENTER to chat. Your character is saved as you play.</li>
        </ul>
        <p>- click anywhere to close -</p>
      </article>

      <article id="achievements" class="page1">
        <button class="close" type="button" aria-label="Close"></button>
        <h2>Achievements</h2>
        <div id="achievements-wrapper"><div id="lists"></div></div>
        <nav>
          <button id="previous" type="button" aria-label="Previous page">◂</button>
          <div id="achievements-count" class="stroke">
            Completed <span id="unlocked-achievements">0</span>/<span id="total-achievements">0</span>
          </div>
          <button id="next" type="button" aria-label="Next page">▸</button>
        </nav>
      </article>

      <div id="too-small" role="status">
        <p>Make this frame a little bigger to play.</p>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>