feat: Doing more polishing (M8b)

web/js/ui/desk.js

@@ -16,3 +16,22 @@ export const $ = (root, sel) => root.querySelector(sel);
 
 // Escape text for use inside innerHTML templates.
 export const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+// A 12-hour dial whose single hand makes one full turn per in-game day. progress is 0..1.
+export function dialSvg(className = "") {
+  const ticks = Array.from({ length: 12 }, (_, i) => {
+    const long = i % 3 === 0;
+    return `<line x1="50" y1="${long ? 8 : 10}" x2="50" y2="${long ? 18 : 15}" transform="rotate(${i * 30} 50 50)"/>`;
+  }).join("");
+  return `
+    <svg class="dial ${className}" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+      <circle class="dial__face" cx="50" cy="50" r="46"/>
+      <g class="dial__ticks">${ticks}</g>
+      <line class="dial__hand" x1="50" y1="54" x2="50" y2="16" transform="rotate(0 50 50)"/>
+      <circle class="dial__pin" cx="50" cy="50" r="4"/>
+    </svg>`;
+}
+
+export function setDial(svg, progress) {
+  svg?.querySelector(".dial__hand")?.setAttribute("transform", `rotate(${(progress * 360).toFixed(1)} 50 50)`);
+}