napplet.soy
Create a napplet
Back to Limb Race
SOURCE / PINNED RELEASE

Made of little things.

Limb Race

Release
6a8ae4fc626e…
Author-recorded commit
008c01ee6454…
License
LICENSE
Author’s source reference
nostr://npub182jczunncwe0jn6frpqwq3e0qjws7yqqnc3auccqv9nte2dnd63scjm4rf/wss%3A%2F%2Fgit.napplet.soy%2F/n-c2869f12ad8

Archive hash verified: 7be8492d1f89b891…. 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="#eff1e9" /><title>Limb Race</title></head>
<body>
<div id="app">
  <div class="too-small">A little more room to race.<br>Enlarge this pane to at least 240 × 320.</div>
  <main class="game">
    <nav class="toolbar" aria-label="Race controls">
      <button id="track-picker" class="track-picker" aria-haspopup="dialog"><span class="track-icon">⚑</span><span id="track-name">Meadow Run</span><span class="chevron">⌄</span></button>
      <div class="segmented modes" aria-label="Race mode"><button id="classic" aria-pressed="true">Classic</button><button id="live" aria-pressed="false"><span class="live-dot"></span>Live Draw</button></div>
      <button id="scores-toggle" class="icon-button mobile-scores" aria-label="Show scores" title="Scores">☷</button>
      <button id="pause" class="icon-button" aria-label="Pause race" title="Pause race" disabled>Ⅱ</button>
      <button id="restart" class="icon-button" aria-label="Restart race" title="Restart race">↻</button>
    </nav>
    <section class="race-view" aria-label="Racetrack">
      <canvas id="track-canvas" aria-label="Physics racetrack with your red-hub racer"></canvas>
      <div class="track-info"><span id="track-number">01 / 10</span><span id="difficulty">EASY RIDER</span></div>
      <div class="timer"><span id="race-state">READY WHEN YOU ARE</span><strong id="time">00.00<span>s</span></strong><span id="best">PERSONAL BEST —</span></div>
      <div id="race-message" class="race-message" hidden><strong id="message-title"></strong><span id="message-detail"></span><button id="message-action">Keep going</button><button id="share-result" hidden>Share time</button></div>
      <div class="progress"><i id="progress-fill"></i></div>
    </section>
    <section class="workbench">
      <div class="drawing-panel">
        <div class="panel-heading"><span><b class="step-number">1</b> Draw limbs</span><div class="drawing-actions"><button id="material" aria-pressed="false" title="Limb physics: rigid. Switch to bendy.">Rigid</button><button id="undo" class="icon-button" title="Undo stroke" aria-label="Undo stroke">↶</button><button id="clear" title="Clear drawing">Clear</button></div></div>
        <div class="pad-wrap"><canvas id="draw-canvas" tabindex="0" aria-label="Draw limbs around the red dot. Use a starter shape below as a keyboard alternative."></canvas><span id="pad-badge" class="pad-badge">YOUR SKETCH → YOUR RACER</span><span id="ink-count" class="ink-count">0 / 8 strokes</span></div>
        <div class="drawing-bottom"><div class="presets"><span>Try a shape</span><button data-preset="runner" title="Three curved legs">⌁<span>Runner</span></button><button data-preset="star" title="Five-point spinner">✳<span>Star</span></button></div><button id="race" class="race-button">Let it roll <span>→</span></button></div>
        <div id="hint" class="hint" role="status">Draw a shape, then send it spinning. The ground does the rest.</div>
      </div>
      <aside class="score-panel" aria-label="Leaderboard">
        <div class="panel-heading"><span>Fastest inventions <span class="small-flag">⚑</span></span><button id="refresh" class="icon-button" aria-label="Refresh scores" title="Refresh scores">↻</button></div>
        <div class="board-controls"><div class="segmented"><button id="personal" aria-pressed="true">Your runs</button><button id="shared" aria-pressed="false">Shared</button></div><span id="board-mode">CLASSIC</span></div>
        <div id="score-list" class="score-list"></div>
        <div id="score-status" class="score-status" role="status">Race the clock. Keep the drawing.</div>
        <label class="racer-label"><span>Racing as</span><input id="racer-name" aria-label="Racer display name" maxlength="24" value="Guest racer" /><span id="identity-status" title="Shared scores use a scoped session identity">guest</span></label>
      </aside>
    </section>
  </main>
  <dialog id="tracks-dialog">
    <div class="dialog-heading"><strong>Pick your playground</strong><button class="icon-button" data-close="tracks-dialog" aria-label="Close tracks">×</button></div>
    <div class="level-tabs"><div class="segmented"><button id="levels-builtin" aria-pressed="true">Courses</button><button id="levels-yours" aria-pressed="false">Your levels</button><button id="levels-community" aria-pressed="false">Community</button></div><button id="create-level">+ Create</button></div>
    <div id="track-options"></div>
    <div id="level-library" hidden><div class="library-tools"><span>Player-made levels</span><button id="refresh-levels">Refresh</button></div><div id="level-list"></div><p id="level-list-status" role="status"></p><button id="more-levels" hidden>Load older levels</button></div>
    <p id="track-picker-note">Same physics. Different problems to draw your way out of.</p>
  </dialog>
  <dialog id="level-editor">
    <div class="dialog-heading"><strong>Build a track</strong><button class="icon-button" data-close="level-editor" aria-label="Close level editor">×</button></div>
    <div class="level-editor-body">
      <label class="level-name-label">Name<input id="level-name" maxlength="60" value="My new track" /></label>
      <canvas id="level-canvas" aria-label="Level terrain preview. Tap a piece to select it, or use its numbered button below."></canvas>
      <div class="level-editor-meta"><span id="level-length"></span><button id="copy-level">Make a copy</button></div>
      <div id="piece-palette" aria-label="Add terrain"></div><div id="piece-list" aria-label="Select terrain piece"></div>
      <form id="piece-form"><label>Piece<select id="piece-kind"><option value="flat">Flat</option><option value="uphill">Uphill</option><option value="downhill">Downhill</option><option value="step">Step up</option><option value="drop">Drop</option><option value="trench">Trench</option></select></label><label>Width<input id="piece-width" type="number" min="40" max="600" step="1" required /></label><label>Height<input id="piece-height" type="number" min="0" max="130" step="1" required /></label><button type="submit">Apply</button></form>
      <div class="piece-actions"><button id="piece-left">← Earlier</button><button id="piece-right">Later →</button><button id="piece-remove">Remove piece</button></div>
      <p>Start and finish are added automatically. Test your layout before sharing it. Published levels and their authors are public; custom race times stay personal.</p>
      <button id="unpublish-level" hidden>Unpublish level</button>
    </div>
    <div class="level-editor-footer"><p id="level-status" role="status"></p><div><button id="save-level">Save draft</button><button id="test-level">Test track →</button><button id="publish-level" class="race-button">Publish level</button></div></div>
  </dialog>
  <dialog id="design-dialog"><div class="dialog-heading"><strong id="design-title">A closer look</strong><button class="icon-button" data-close="design-dialog" aria-label="Close design">×</button></div><canvas id="inspect-canvas" aria-label="Saved limb design"></canvas><div id="edit-controls" hidden><label>Drawing at <output id="edit-time">0.00s</output><input id="edit-slider" type="range" min="0" max="0" value="0" /></label></div><p id="design-detail"></p><button id="use-design" class="race-button">Try these limbs <span>→</span></button></dialog>
</div><script type="module" src="/src/main.ts"></script>
</body></html>