napplet.soy
Create a napplet
Back to Napcraft
SOURCE / PINNED RELEASE

Made of little things.

Napcraft

Release
ee47ac6a25df…
Author-recorded commit
410dea87e109…
License
LICENSE
Author’s source reference
nostr://npub182jczunncwe0jn6frpqwq3e0qjws7yqqnc3auccqv9nte2dnd63scjm4rf/wss%3A%2F%2Fgit.napplet.soy%2F/n-52f9e22f5ce

Archive hash verified: 9e6e0cabb18d0d46…. The source-to-build association is the author’s claim; it has not been independently rebuilt.

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,viewport-fit=cover"
    />
    <meta name="theme-color" content="#dedcf5" />
    <title>Napcraft</title>
  </head>
  <body>
    <main id="app">
      <canvas
        id="scene"
        tabindex="0"
        aria-label="Creative voxel island. WASD or arrows to walk. Click a block to build, right-click to erase. On touch, tap to aim then use Build or Erase. Space builds, X erases."
      ></canvas>
      <div class="tiny">
        <b>A little more room?</b
        ><span
          >Enlarge Napcraft to at least 300 × 340 to build. Your island will
          still be here.</span
        >
      </div>
      <header class="hud">
        <button id="worldMenu" class="world-chip" aria-label="World menu">
          <span class="logo">▧</span
          ><span
            ><b id="worldName">NAPCRAFT</b
            ><small id="worldMode">A little island. Big ideas.</small></span
          ><span>⌄</span>
        </button>
        <div class="top-right">
          <span id="presence" class="pill">CREATIVE CLUB</span
          ><button id="share" class="small" hidden>↗ Invite</button
          ><button id="help" class="icon" aria-label="How to play">?</button>
        </div>
      </header>
      <div id="playHud" hidden>
        <div class="save-pill" id="saveStatus" role="status">
          All blocks saved
        </div>
        <div class="zoom">
          <button id="zoomIn" class="icon" aria-label="Zoom in">+</button
          ><button id="zoomOut" class="icon" aria-label="Zoom out">−</button>
        </div>
        <div class="bottom">
          <div class="hint" id="hint">
            Click to build · Right-click to erase · WASD to wander · Drag to pan
          </div>
          <div
            class="materials"
            role="toolbar"
            aria-label="Building materials"
          ></div>
          <div class="control-row">
            <div class="dpad" aria-label="Movement">
              <button data-key="KeyW" aria-label="Walk up">↑</button
              ><button data-key="KeyA" aria-label="Walk left">←</button
              ><button data-key="KeyS" aria-label="Walk down">↓</button
              ><button data-key="KeyD" aria-label="Walk right">→</button>
            </div>
            <div class="build-actions">
              <button id="remove" class="erase">− <span>Erase</span></button
              ><button id="place" class="primary">＋ <span>Build</span></button>
            </div>
          </div>
        </div>
      </div>
      <div id="overlay" class="overlay">
        <section
          id="panel"
          class="panel"
          role="dialog"
          aria-modal="true"
          aria-label="World menu"
        ></section>
      </div>
      <div
        id="toast"
        class="toast"
        role="status"
        aria-live="polite"
        hidden
      ></div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>