// Desk-level helpers shared by the paper panels.

export function hash(str) {
  let h = 2166136261;
  for (let i = 0; i < str.length; i++) h = Math.imul(h ^ str.charCodeAt(i), 16777619);
  return h >>> 0;
}

// Give a paper a stable slight rotation derived from its id.
export function tilt(el, id, amp = 0.8) {
  const r = ((hash(id) % 1000) / 1000 - 0.5) * 2 * amp;
  el.style.setProperty("--rot", `${r.toFixed(2)}deg`);
}

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)`);
}