#+TITLE: The Archive World
#+OPTIONS: num:nil title:nil toc:nil
#+NO_SIDENOTES: t
#+DATE: <2026-07-29 Wed>

#+BEGIN_EXPORT html
<main class="play-root play-page archive-world" data-play-page="archive-world">
  <a class="play-back" href="/play/play.html">Back to Play</a>

  <header class="play-page-head archive-world__heading">
    <p class="play-kicker">09 / Role Playing World</p>
    <h1>The Archive World</h1>
    <p>Walk through the website as a living town. Every lit doorway opens another part of the archive.</p>
  </header>

  <section class="archive-world__shell" aria-labelledby="archive-world-title">
    <div class="archive-world__toolbar">
      <div>
        <span>Traveler</span>
        <strong data-world-player>New arrival</strong>
      </div>
      <div>
        <span>Landmarks</span>
        <strong data-world-discovery-count>0 / 8</strong>
      </div>
      <p class="archive-world__badge" data-world-badge hidden>Archive Cartographer</p>
      <button type="button" data-world-journal-open>Discovery journal</button>
      <button type="button" data-world-sound>Sound: muted</button>
      <button type="button" data-world-reset>Reset traveler</button>
    </div>

    <h2 id="archive-world-title" class="visually-hidden">Archive Town game</h2>
    <div
      id="archive-world-game"
      class="archive-world__game"
      tabindex="0"
      role="application"
      aria-label="The Archive World. Move with arrow keys or WASD and interact with E, Space, or Enter."
    >
      <p class="archive-world__loading">Preparing Archive Town…</p>
    </div>

    <div class="archive-world__controls" aria-label="Touch game controls">
      <div class="archive-world__dpad">
        <button type="button" data-world-move="up" aria-label="Move up">↑</button>
        <button type="button" data-world-move="left" aria-label="Move left">←</button>
        <button type="button" data-world-move="down" aria-label="Move down">↓</button>
        <button type="button" data-world-move="right" aria-label="Move right">→</button>
      </div>
      <button class="archive-world__interact" type="button" data-world-interact>Explore</button>
    </div>

    <p class="archive-world__status" data-world-status aria-live="polite">
      Choose your traveler to enter Archive Town.
    </p>
    <p class="archive-world__instructions">
      Move with arrow keys or WASD. Press E, Space, Enter, or Explore near a glowing landmark.
      Sound remains muted until you enable it.
    </p>
  </section>

  <dialog class="archive-world__dialog archive-world__setup" data-world-setup>
    <form data-world-setup-form>
      <p class="play-kicker">New traveler</p>
      <h2>Who has arrived?</h2>
      <label>
        Traveler name
        <input name="name" type="text" minlength="1" maxlength="20" autocomplete="nickname" required />
      </label>
      <fieldset>
        <legend>Coat palette</legend>
        <label><input type="radio" name="palette" value="brass" checked /> <span class="palette-swatch palette-swatch--brass"></span> Brass</label>
        <label><input type="radio" name="palette" value="moss" /> <span class="palette-swatch palette-swatch--moss"></span> Moss</label>
        <label><input type="radio" name="palette" value="berry" /> <span class="palette-swatch palette-swatch--berry"></span> Berry</label>
      </fieldset>
      <p class="archive-world__error" data-world-setup-error aria-live="polite"></p>
      <button type="submit">Enter the world</button>
    </form>
  </dialog>

  <dialog class="archive-world__dialog" data-world-preview>
    <p class="play-kicker" data-world-preview-eyebrow>Landmark</p>
    <h2 data-world-preview-title>Archive Town</h2>
    <p data-world-preview-description></p>
    <nav class="archive-world__preview-links" data-world-preview-links aria-label="Landmark destinations"></nav>
    <button type="button" data-world-preview-close>Return to town</button>
  </dialog>

  <dialog class="archive-world__dialog" data-world-journal>
    <p class="play-kicker">Discovery journal</p>
    <h2>Archive Town landmarks</h2>
    <ul class="archive-world__journal" data-world-journal-list></ul>
    <button type="button" data-world-journal-close>Close journal</button>
  </dialog>

  <details class="archive-world__directory">
    <summary>Plain directory of Archive Town</summary>
    <div class="archive-world__directory-grid">
      <section><h2>Town Gate</h2><a href="/">Home</a> · <a href="/recently-updated.html">Recently updated</a> · <a href="/home/contact.html">Contact</a></section>
      <section><h2>Grand Library</h2><a href="/posts/posts-list.html">Posts</a> · <a href="/home/categories.html">Categories</a> · <a href="/posts/posts-intro.html">Introduction</a></section>
      <section><h2>Guild Study</h2><a href="/posts/career/career-list.html">Career</a> · <a href="/home/status.html">Competency status</a> · <a href="/posts/career/probation-objectives.html">Objectives</a></section>
      <section><h2>Kitchen Inn</h2><a href="/blogs/blogs-list.html">Blogs</a> · <a href="/tags/review.html">Weekly reviews</a> · <a href="/blogs/blogs-intro.html">Introduction</a></section>
      <section><h2>Workshop</h2><a href="/home/services.html">Services</a> · <a href="/home/wird-tracker.html">Wird tracker</a> · <a href="/home/countdown.html">Countdowns</a> · <a href="/home/backlog.html">Backlog</a></section>
      <section><h2>Playroom</h2><a href="/play/play.html">Play</a> · <a href="/play/the-rain-index.html">Rain Index</a> · <a href="/play/house.html">House of Pages</a></section>
      <section><h2>Lima Museum</h2><a href="/lima/index.html">Lima</a> · <a href="/blogs/2025/2025-list.html">Older writing</a> · <a href="/play/memory.html">Memory Cabinet</a></section>
      <section><h2>Notes Garden</h2><a href="/home/notes.html">Notes wall</a> · <a href="/home/categories.html">Categories</a> · <a href="/recently-updated.html">Recently updated</a> · <a href="/sitemap.html">Sitemap</a></section>
    </div>
  </details>

  <noscript><p class="archive-world__noscript">The game needs JavaScript, but every destination remains available in the plain directory above.</p></noscript>
</main>

<script src="/assets/scripts/vendor/phaser-4.1.0.min.js" defer></script>
<script src="/assets/scripts/pages/archive-world-state.js" defer></script>
<script src="/assets/scripts/pages/archive-world.js" defer></script>
#+END_EXPORT