display.js

import { FOUR_BIT_WEIGHTS, HELP_WEIGHTS, TRANSITION_EASINGS } from "./config.js";
import { allBitNodes, helpRowNodes, meridiemBadge, sixBitNodes, digitalNodes } from "./dom.js";
import { state } from "./state.js";

const rollingTimers = new WeakMap();
const bitSpinTimers = new WeakMap();
const UNIT_COLUMN_OFFSETS = {
	hours: "0ms",
	seconds: "45ms",
	minutes: "90ms"
};
const SLINKY_SPIN_THEMES = new Set(["bit-boring", "boring-bit"]);

function randomDelayMs(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

function applyRandomTransitionVars(node, index) {
	const wave = (index % 3) * 18;
	const inDelay = randomDelayMs(0, 170) + wave;
	const outDelay = randomDelayMs(0, 180) + ((2 - (index % 3)) * 14);
	const easeIn = TRANSITION_EASINGS[Math.floor(Math.random() * TRANSITION_EASINGS.length)];
	const easeOut = TRANSITION_EASINGS[Math.floor(Math.random() * TRANSITION_EASINGS.length)];
	node.style.setProperty("--rand-delay-in", `${inDelay}ms`);
	node.style.setProperty("--rand-delay-out", `${outDelay}ms`);
	node.style.setProperty("--rand-ease-in", easeIn);
	node.style.setProperty("--rand-ease-out", easeOut);
}

export function applyModeJitterDelays() {
	allBitNodes.forEach((node, index) => {
		applyRandomTransitionVars(node, index);
	});

	helpRowNodes.forEach((node, index) => {
		applyRandomTransitionVars(node, index);
		const unit = node.closest(".timeGroup")?.dataset.unit;
		node.style.setProperty("--column-offset", UNIT_COLUMN_OFFSETS[unit] || "0ms");
	});
}

export function getCurrentTimeValues() {
	const now = new Date();
	const hours24 = now.getHours();
	const hours = state.show24HourFormat ? hours24 : (hours24 % 12 || 12);
	return {
		hours,
		minutes: now.getMinutes(),
		seconds: now.getSeconds(),
		meridiem: hours24 >= 12 ? "PM" : "AM"
	};
}

function updateMeridiemBadge(values) {
	if (!meridiemBadge) {
		return;
	}

	const showMeridiem = !state.show24HourFormat;
	meridiemBadge.textContent = values.meridiem;
	meridiemBadge.classList.toggle("is-visible", showMeridiem);
	meridiemBadge.setAttribute("aria-hidden", showMeridiem ? "false" : "true");
}

function shouldRunSlinkySpin() {
	if (state.modeTransitioning) {
		return false;
	}
	return SLINKY_SPIN_THEMES.has(document.documentElement.dataset.theme || "");
}

function triggerBitSlinkySpin(node) {
	const pendingTimer = bitSpinTimers.get(node);
	if (pendingTimer) {
		window.clearTimeout(pendingTimer);
		bitSpinTimers.delete(node);
	}

	node.classList.remove("slinky-spin");
	void node.offsetWidth;
	node.classList.add("slinky-spin");

	const timerId = window.setTimeout(() => {
		node.classList.remove("slinky-spin");
		bitSpinTimers.delete(node);
	}, 520);

	bitSpinTimers.set(node, timerId);
}

function setBitState(node, isOn) {
	const wasOn = node.classList.contains("on");
	if (wasOn === isOn) {
		return;
	}

	node.classList.toggle("on", isOn);
	if (shouldRunSlinkySpin()) {
		triggerBitSlinkySpin(node);
	}
}

function applySixBit(unit, value) {
	const list = sixBitNodes[unit];
	for (let i = 0; i < 6; i++) {
		const bitValue = 1 << (5 - i);
		setBitState(list[i], (value & bitValue) !== 0);
	}
}

function applyFourBit(prefix, value) {
	const tens = Math.floor(value / 10);
	const units = value % 10;
	for (let i = 0; i < 4; i++) {
		const bitValue = 1 << (3 - i);
		setBitState(document.getElementById(prefix + "Tens" + bitValue), (tens & bitValue) !== 0);
		setBitState(document.getElementById(prefix + bitValue), (units & bitValue) !== 0);
	}
}

function setBitHelpData(bitNode, contribution, weightLabel) {
	bitNode.dataset.help = String(contribution);
	bitNode.dataset.weight = String(weightLabel);
	bitNode.dataset.activeHelp = contribution > 0 ? "true" : "false";
}

function ensureRollingSlots(node, seedValue) {
	const slots = Array.from(node.querySelectorAll(".digitSlot"));
	if (slots.length === 2) {
		return slots;
	}

	const seed = String(seedValue || "00").padStart(2, "0").slice(-2);
	node.textContent = "";

	for (let i = 0; i < 2; i++) {
		const slot = document.createElement("span");
		slot.className = "digitSlot";
		slot.dataset.digit = seed[i];
		slot.textContent = seed[i];
		node.appendChild(slot);
	}

	return Array.from(node.querySelectorAll(".digitSlot"));
}

function setRollingDigit(slot, nextDigit) {
	const current = slot.dataset.digit;
	if (current === undefined) {
		slot.dataset.digit = nextDigit;
		slot.textContent = nextDigit;
		return;
	}

	if (current === nextDigit) {
		return;
	}

	const pendingTimer = rollingTimers.get(slot);
	if (pendingTimer) {
		window.clearTimeout(pendingTimer);
		rollingTimers.delete(slot);
	}

	slot.querySelectorAll(".digitLayer").forEach((layer) => layer.remove());

	slot.dataset.digit = nextDigit;
	slot.innerHTML = `<span class="digitLayer out">${current}</span><span class="digitLayer in">${nextDigit}</span>`;
	const timerId = window.setTimeout(() => {
		slot.textContent = nextDigit;
		rollingTimers.delete(slot);
	}, 380);
	rollingTimers.set(slot, timerId);
}

function setRollingText(node, nextValue) {
	if (!node) {
		return;
	}

	const next = String(nextValue).slice(-2).padStart(2, " ");
	const current = node.dataset.rollValue;
	const slots = ensureRollingSlots(node, current || next);

	if (current === undefined) {
		node.dataset.rollValue = next;
		slots[0].dataset.digit = next[0];
		slots[0].textContent = next[0];
		slots[1].dataset.digit = next[1];
		slots[1].textContent = next[1];
		return;
	}

	if (current === next) {
		return;
	}

	node.dataset.rollValue = next;
	setRollingDigit(slots[0], next[0]);
	setRollingDigit(slots[1], next[1]);
}

function setHelpdigital(values) {
	const hoursText = state.show24HourFormat
		? String(values.hours).padStart(2, "0")
		: String(values.hours).padStart(2, " ");
	setRollingText(digitalNodes.sixBit.hours, hoursText);
	setRollingText(digitalNodes.sixBit.minutes, String(values.minutes).padStart(2, "0"));
	setRollingText(digitalNodes.sixBit.seconds, String(values.seconds).padStart(2, "0"));
}

function updateInlineBitHelp(values, mode) {
	if (mode === "6-bit") {
		Object.keys(sixBitNodes).forEach((unit) => {
			sixBitNodes[unit].forEach((node, index) => {
				const weight = HELP_WEIGHTS[index];
				const contribution = (values[unit] & weight) !== 0 ? weight : 0;
				setBitHelpData(node, contribution, weight);
			});
		});
		setHelpdigital(values);
		return;
	}

	["hours", "minutes", "seconds"].forEach((unit) => {
		const value = values[unit];
		const tens = Math.floor(value / 10);
		const units = value % 10;

		FOUR_BIT_WEIGHTS.forEach((weight) => {
			const tensNode = document.getElementById(`${unit}Tens${weight}`);
			const unitsNode = document.getElementById(`${unit}${weight}`);
			const tensContribution = (tens & weight) !== 0 ? weight : 0;
			const unitsContribution = (units & weight) !== 0 ? weight : 0;
			setBitHelpData(tensNode, tensContribution, weight);
			setBitHelpData(unitsNode, unitsContribution, weight);
		});
	});

	setHelpdigital(values);
}

export function updateTimeDisplayForMode(values, mode) {
	const skipSeconds = state.gameActive && (state.gameMode === "bit-clicking" || state.gameMode === "quiz");
	const skipHours = state.gameActive;
	const skipMinutes = state.gameActive;
	if (mode === "6-bit") {
		if (!skipHours) applySixBit("hours", values.hours);
		if (!skipMinutes) applySixBit("minutes", values.minutes);
		if (!skipSeconds) applySixBit("seconds", values.seconds);
	} else {
		if (!skipHours) applyFourBit("hours", values.hours);
		if (!skipMinutes) applyFourBit("minutes", values.minutes);
		if (!skipSeconds) applyFourBit("seconds", values.seconds);
	}
	updateMeridiemBadge(values);
	updateInlineBitHelp(values, mode);
}

export function clearClockBitsForGame() {
	applySixBit("hours", 0);
	applySixBit("minutes", 0);
}

export function updateTimeDisplay(values) {
	updateTimeDisplayForMode(values, state.mode);
}

export function runTick() {
	const values = getCurrentTimeValues();
	if (state.modeTransitioning) {
		state.pendingTick = values;
		if (state.transitionTargetMode) {
			updateTimeDisplayForMode(values, state.transitionTargetMode);
		}
		return;
	}
	updateTimeDisplay(values);
}