Unicorn Mapping

— brush saved

Map

Name

Width Height

Level Tile px

World Learning notes

</label>
        <div class="chip-row" id="skill-chips">
          <label><input type="checkbox" value="read"> Read</label>
          <label><input type="checkbox" value="count"> Count</label>
          <label><input type="checkbox" value="write"> Write</label>
        </div>
        <button type="button" class="ghost" id="btn-resize">Apply size</button>
        <div class="panel-title">Selected cell</div>
        <div id="cell-info" class="cell-info">Click a cell.</div>
        <form id="link-form" hidden>
          <label>Warp to map
            <select id="link-target"></select>
          </label>
          <div class="two">
            <label>X<input id="link-x" type="number" min="0"></label>
            <label>Y<input id="link-y" type="number" min="0"></label>
          </div>
          <label>Facing
            <select id="link-facing">
              <option>up</option>
              <option>down</option>
              <option>left</option>
              <option>right</option>
            </select>
          </label>
          <label>Kind<input id="link-kind" value="door"></label>
          <div class="row-btns">
            <button type="submit">Save link</button>
            <button type="button" class="ghost danger" id="btn-unlink">Remove</button>
          </div>
        </form>
      </aside>
    </section>
  </div>

<dialog id="new-map-dialog">
    <form id="new-map-form" method="dialog">
      <h3>New map</h3>
      <label>Name<input name="name" required placeholder="Sunny meadow"></label>
      <div class="two">
        <label>Width (cells)<input name="width" type="number" min="4" max="128" value="16" required></label>
        <label>Height (cells)<input name="height" type="number" min="4" max="128" value="11" required></label>
      </div>
      <div class="two">
        <label>Level<input name="level" type="number" min="1" value="1"></label>
        <label>World<input name="world" value="overworld"></label>
      </div>
      <p class="hint">Zelda 3 overworld screens are often 16 × 11 tiles. Interiors can be smaller.</p>
      <div class="row-btns">
        <button type="submit">Create</button>
        <button type="button" class="ghost" id="btn-cancel-new">Cancel</button>
      </div>
    </form>
  </dialog>

<dialog id="help-dialog">
    <h3>Workshop keys</h3>
    <ul class="keys">
      <li><kbd>B</kbd> brush</li>
      <li><kbd>E</kbd> erase</li>
      <li><kbd>F</kbd> fill</li>
      <li><kbd>I</kbd> pick tile</li>
      <li><kbd>C</kbd> walk / block</li>
      <li><kbd>L</kbd> link / warp</li>
      <li><kbd>P</kbd> start point</li>
      <li><kbd>G</kbd> toggle grid</li>
      <li><kbd>1–4</kbd> layers</li>
      <li><kbd>Ctrl+S</kbd> save</li>
      <li>Wheel zoom · Space or middle-drag pan</li>
    </ul>
    <button type="button" id="btn-close-help">Close</button>
  </dialog>

Map workshop

World maps