38 lines
1.5 KiB
JavaScript
38 lines
1.5 KiB
JavaScript
// 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) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[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)`);
|
|
}
|