<!-- HAWAIIAN-COMPASS · part 5 -->
yxZQUFZLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztBQUM5QyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLE1BQU0sQ0FBQztBQUM5QixDQUFDLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDO0FBQzFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7QUFDL0IsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztBQUMvQixDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7QUFDbkI7In0=

===== FILE: public/hawaiian-compass/index.html =====
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hawaiian compass — 360°</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <header>
        <p class="eyebrow">Navigational instrument</p>
        <h1>Hawaiian compass</h1>
        <p class="lede">
          Thirty-two points on exact eleventh-and-a-quarter degrees, and a limb
          divided to the single degree. North is 000. Gold on black, the way an
          engraved card is read.
        </p>
      </header>

      <div class="board">
        <div class="card-wrap">
          <svg id="card" viewBox="0 0 1000 1000" role="img" aria-label="Hawaiian compass card, north at the top">
            <g id="needle"></g>
          </svg>
          <p class="hint">Drag the card to lay a course. Arrow keys step one degree, shift ten, option a tenth.</p>
        </div>

        <section class="plate" aria-live="polite">
          <p class="plate-kicker">Course</p>
          <p class="bearing" id="bearing">000.0°</p>
          <p class="spoken" id="spoken">Ākau</p>
          <p class="mark" id="mark">A</p>

          <label class="field">
            <span>Bearing</span>
            <input id="bearing-field" inputmode="decimal" autocomplete="off" value="0.0" />
          </label>
          <input id="dial" type="range" min="0" max="359.9" step="0.1" value="0" aria-valuemin="0" aria-valuemax="359.9" aria-valuenow="0.0" aria-label="Bearing in degrees from north" />

          <div class="nudge" id="nudge">
            <button type="button" data-step="-10">−10°</button>
            <button type="button" data-step="-1">−1°</button>
            <button type="button" data-step="-0.1">−0.1°</button>
            <button type="button" data-step="0.1">+0.1°</button>
            <button type="button" data-step="1">+1°</button>
            <button type="button" data-step="10">+10°</button>
          </div>

          <dl>
            <div><dt>Point</dt><dd><span id="point-bearing">000.0°</span></dd></div>
            <div><dt>Offset</dt><dd id="offset">0.0°</dd></div>
            <div><dt>Quadrant</dt><dd id="quadrant">north</dd></div>
            <div><dt>Reciprocal</dt><dd><span id="reciprocal">180.0°</span> <em id="reciprocal-name">Hema</em></dd></div>
            <div><dt>Northing</dt><dd id="northing">1.0000</dd></div>
            <div><dt>Easting</dt><dd id="easting">0.0000</dd></div>
            <div><dt>Radians</dt><dd id="radians">0.0000</dd></div>
          </dl>
        </section>
      </div>

      <section class="notes">
        <h2>How the circle is divided</h2>
        <p>
          000 is Ākau, 090 Hikina, 180 Hema, 270 Komohana. Each quadrant is eight
          equal points of 11.25°. <em>Ma</em> leans a name toward the next;
          <em>me</em> keeps the name and carries the one before it. Northing is
          cos of the course, easting is sin, both on a unit circle.
        </p>
        <p class="source">
          The manuscript drawing this card is taken from is
          <a href="compass-restored.png">the restored scan</a>.
        </p>
      </section>
    </main>
    <script type="module" src="main.js"></script>
  </body>
</html>


===== FILE: public/hawaiian-compass/main.js =====
import { describe, formatDeg, formatSigned, POINTS } from "./bearing.js";

const CX = 500;
const CY = 500;
const R = 458;

const svg = document.getElementById("card");
const needle = document.getElementById("needle");
const readouts = {
  bearing: document.getElementById("bearing"),
  spoken: document.getElementById("spoken"),
  mark: document.getElementById("mark"),
  offset: document.getElementById("offset"),
  quadrant: document.getElementById("quadrant"),
  reciprocal: document.getElementById("reciprocal"),
  reciprocalName: document.getElementById("reciprocal-name"),
  northing: document.getElementById("northing"),
  easting: document.getElementById("easting"),
  radians: document.getElementById("radians"),
  pointBearing: document.getElementById("point-bearing"),
};
const dial = document.getElementById("dial");
const fiel