react-raffle-picker 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,151 @@
+import * as _$react from "react";
+import { CSSProperties, ElementType, ReactNode, RefObject } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/types.d.ts
+type AnimationType = 'roll' | 'fade' | 'blur' | 'reel';
+type RafflePickValue$1 = number | string;
+interface RafflePickRootProps {
+  items?: string[];
+  min?: number;
+  max?: number;
+  interval?: number;
+  random?: boolean;
+  inertia?: boolean;
+  autoStart?: boolean;
+  onSelect?: (value: RafflePickValue$1) => void;
+  as?: ElementType;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+interface RafflePickValueProps {
+  animation?: AnimationType;
+  className?: string;
+  style?: CSSProperties;
+  as?: ElementType;
+}
+interface RafflePickButtonProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Fallback label across all states. */
+  children?: ReactNode;
+  /** Label for idle / frozen (click starts a round). */
+  startLabel?: ReactNode;
+  /** Label while running (click stops). */
+  stopLabel?: ReactNode;
+  /** Label while settling (button disabled). */
+  waitLabel?: ReactNode;
+}
+interface RafflePickSlotsProps {
+  /** Number of slots. */
+  length?: number;
+  /** Character pool each slot picks from. */
+  chars?: string;
+  /** Tick interval per slot, ms. Clamped ≥ 50. */
+  spinInterval?: number;
+  /** Delay between consecutive slot stops on settle, ms. */
+  staggerMs?: number;
+  className?: string;
+  slotClassName?: string;
+  style?: CSSProperties;
+  slotStyle?: CSSProperties;
+  /** Fires when last slot stops with joined result. */
+  onResult?: (result: string) => void;
+}
+interface RafflePickCountdownProps {
+  /** Seconds before auto-freeze. Required. */
+  seconds: number;
+  className?: string;
+  style?: CSSProperties;
+  /** Render-prop for fully custom output. Receives remaining seconds. */
+  children?: (remaining: number) => ReactNode;
+}
+//#endregion
+//#region src/components/RafflePick/RafflePick.d.ts
+declare function RafflePickRoot({
+  items,
+  min,
+  max,
+  interval,
+  random,
+  inertia,
+  autoStart,
+  onSelect,
+  as,
+  className,
+  style,
+  children
+}: RafflePickRootProps): _$react.ReactElement<any, string | _$react.JSXElementConstructor<any>>;
+//#endregion
+//#region src/components/RafflePick/RafflePickValue.d.ts
+declare function RafflePickValue({
+  animation,
+  className,
+  style,
+  as
+}: RafflePickValueProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/RafflePick/RafflePickButton.d.ts
+declare function RafflePickButton({
+  className,
+  style,
+  children,
+  startLabel,
+  stopLabel,
+  waitLabel
+}: RafflePickButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/RafflePick/RafflePickCountdown.d.ts
+declare function RafflePickCountdown({
+  seconds,
+  className,
+  style,
+  children
+}: RafflePickCountdownProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/RafflePick/RafflePickSlots.d.ts
+declare function RafflePickSlots({
+  length,
+  chars,
+  spinInterval,
+  staggerMs,
+  className,
+  slotClassName,
+  style,
+  slotStyle,
+  onResult
+}: RafflePickSlotsProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/utils/inertia.d.ts
+type RafflePickPhase = 'idle' | 'starting' | 'running' | 'settling' | 'frozen';
+//#endregion
+//#region src/components/RafflePick/context.d.ts
+interface RaffleContextValue {
+  phase: RafflePickPhase;
+  step: number;
+  displayed: RafflePickValue$1;
+  cycleInterval: number;
+  inertia: boolean;
+  hasItems: boolean;
+  initialIndex: number;
+  valueRef: RefObject<number>;
+  displayValue: (index: number) => RafflePickValue$1;
+  subscribe: (fn: (value: number) => void) => () => void;
+  start: () => void;
+  freeze: () => void;
+  reset: () => void;
+}
+declare const RaffleContext: _$react.Context<RaffleContextValue | null>;
+declare const useRaffleContext: (componentName: string) => RaffleContextValue;
+//#endregion
+//#region src/components/RafflePick/index.d.ts
+type RafflePickCompound = typeof RafflePickRoot & {
+  Value: typeof RafflePickValue;
+  Button: typeof RafflePickButton;
+  Countdown: typeof RafflePickCountdown;
+  Slots: typeof RafflePickSlots;
+};
+declare const RafflePick: RafflePickCompound;
+//#endregion
+export { type AnimationType, RaffleContext, RafflePick, RafflePickButton, type RafflePickButtonProps, RafflePickCountdown, type RafflePickCountdownProps, type RafflePickRootProps, RafflePickSlots, type RafflePickSlotsProps, RafflePickValue, type RafflePickValueProps, type RafflePickValue$1 as RafflePickValueType, useRaffleContext };

package/dist/index.mjs

@@ -0,0 +1,542 @@
+import { createContext, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/utils/get-random.ts
+const getRandom = (min, max) => {
+	min = Math.ceil(min);
+	max = Math.floor(max);
+	return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+//#endregion
+//#region src/hooks/useNumberCycle.ts
+const useNumberCycle = ({ min, max, interval, random, running, valueRef, onTick }) => {
+	const onTickRef = useRef(onTick);
+	useEffect(() => {
+		onTickRef.current = onTick;
+	});
+	useEffect(() => {
+		if (!running) return;
+		const id = setInterval(() => {
+			const cur = valueRef.current;
+			const next = random ? getRandom(min, max) : cur >= max ? min : cur + 1;
+			valueRef.current = next;
+			onTickRef.current?.(next);
+		}, interval);
+		return () => clearInterval(id);
+	}, [
+		running,
+		interval,
+		min,
+		max,
+		random,
+		valueRef
+	]);
+	return valueRef;
+};
+//#endregion
+//#region src/utils/inertia.ts
+const STOP_INERTIA_MS = 1080;
+const START_INTERVAL_MULTIPLIERS = [
+	2.4,
+	1.55,
+	1
+];
+const STOP_INTERVAL_MULTIPLIERS = [
+	1.15,
+	1.65,
+	2.35,
+	3.25
+];
+const START_INERTIA_STEPS = [{
+	delay: 140,
+	step: 1
+}, {
+	delay: 300,
+	step: 2
+}];
+const STOP_INERTIA_STEPS = [
+	{
+		delay: 180,
+		step: 1
+	},
+	{
+		delay: 460,
+		step: 2
+	},
+	{
+		delay: 760,
+		step: 3
+	}
+];
+const getInertiaMultiplier = (phase, step, inertia) => {
+	if (!inertia) return 1;
+	if (phase === "starting") return START_INTERVAL_MULTIPLIERS[step] ?? 1;
+	if (phase === "settling") return STOP_INTERVAL_MULTIPLIERS[step] ?? STOP_INTERVAL_MULTIPLIERS[STOP_INTERVAL_MULTIPLIERS.length - 1];
+	return 1;
+};
+//#endregion
+//#region src/hooks/useRafflePhase.ts
+const reducer = (s, a) => a.type === "phase" ? {
+	phase: a.phase,
+	step: 0
+} : {
+	phase: s.phase,
+	step: a.step
+};
+function useRafflePhase(inertia, initialPhase, onSettle) {
+	const [state, dispatch] = useReducer(reducer, {
+		phase: initialPhase,
+		step: 0
+	});
+	const timersRef = useRef([]);
+	const onSettleRef = useRef(onSettle);
+	useEffect(() => {
+		onSettleRef.current = onSettle;
+	});
+	const clear = useCallback(() => {
+		const timers = timersRef.current;
+		for (let i = 0; i < timers.length; i++) clearTimeout(timers[i]);
+		timersRef.current = [];
+	}, []);
+	useEffect(() => {
+		if (state.phase === "starting") {
+			for (const { delay, step } of START_INERTIA_STEPS) timersRef.current.push(setTimeout(() => dispatch({
+				type: "step",
+				step
+			}), delay));
+			timersRef.current.push(setTimeout(() => dispatch({
+				type: "phase",
+				phase: "running"
+			}), 460));
+		} else if (state.phase === "settling") {
+			for (const { delay, step } of STOP_INERTIA_STEPS) timersRef.current.push(setTimeout(() => dispatch({
+				type: "step",
+				step
+			}), delay));
+			timersRef.current.push(setTimeout(() => {
+				onSettleRef.current();
+				dispatch({
+					type: "phase",
+					phase: "frozen"
+				});
+			}, STOP_INERTIA_MS));
+		}
+		return clear;
+	}, [state.phase, clear]);
+	const start = useCallback(() => {
+		clear();
+		dispatch({
+			type: "phase",
+			phase: inertia ? "starting" : "running"
+		});
+	}, [clear, inertia]);
+	const freeze = useCallback(() => {
+		clear();
+		if (inertia) dispatch({
+			type: "phase",
+			phase: "settling"
+		});
+		else {
+			onSettleRef.current();
+			dispatch({
+				type: "phase",
+				phase: "frozen"
+			});
+		}
+	}, [clear, inertia]);
+	const reset = useCallback(() => {
+		clear();
+		dispatch({
+			type: "phase",
+			phase: "idle"
+		});
+	}, [clear]);
+	return {
+		phase: state.phase,
+		step: state.step,
+		start,
+		freeze,
+		reset
+	};
+}
+//#endregion
+//#region src/utils/class-names.ts
+const joinClassNames = (...classNames) => classNames.filter(Boolean).join(" ");
+//#endregion
+//#region src/components/RafflePick/context.ts
+const RaffleContext = createContext(null);
+const useRaffleContext = (componentName) => {
+	const ctx = useContext(RaffleContext);
+	if (!ctx) throw new Error(`<${componentName}> must be rendered inside <RafflePick>.`);
+	return ctx;
+};
+//#endregion
+//#region src/components/RafflePick/RafflePick.tsx
+function RafflePickRoot({ items, min = 1, max = 100, interval = 100, random = true, inertia = false, autoStart = true, onSelect, as = "div", className, style, children }) {
+	const itemCount = items?.length ?? 0;
+	const hasItems = itemCount > 0;
+	const cycleMin = hasItems ? 0 : min;
+	const cycleMax = hasItems ? itemCount - 1 : max;
+	const initialPhase = autoStart ? inertia ? "starting" : "running" : "idle";
+	const itemsRef = useRef(items);
+	useEffect(() => {
+		itemsRef.current = items;
+	}, [items]);
+	const displayValue = useCallback((index) => {
+		const its = itemsRef.current;
+		return its && its.length > 0 ? its[index] : index;
+	}, []);
+	const [displayed, setDisplayed] = useState(() => items && items.length > 0 ? items[cycleMin] : cycleMin);
+	const subscribersRef = useRef(/* @__PURE__ */ new Set());
+	const subscribe = useCallback((fn) => {
+		subscribersRef.current.add(fn);
+		return () => {
+			subscribersRef.current.delete(fn);
+		};
+	}, []);
+	const onTick = useCallback((value) => {
+		subscribersRef.current.forEach((fn) => fn(value));
+	}, []);
+	const valueRef = useRef(cycleMin);
+	const { phase, step, start, freeze, reset } = useRafflePhase(inertia, initialPhase, useCallback(() => {
+		const v = displayValue(valueRef.current);
+		setDisplayed(v);
+		onSelect?.(v);
+	}, [displayValue, onSelect]));
+	const multiplier = getInertiaMultiplier(phase, step, inertia);
+	const cycleInterval = Math.round(Math.max(50, interval) * multiplier);
+	useNumberCycle({
+		min: cycleMin,
+		max: cycleMax,
+		interval: cycleInterval,
+		random,
+		running: phase === "starting" || phase === "running" || phase === "settling",
+		valueRef,
+		onTick
+	});
+	const ctxValue = useMemo(() => ({
+		phase,
+		step,
+		displayed,
+		cycleInterval,
+		inertia,
+		hasItems,
+		initialIndex: cycleMin,
+		valueRef,
+		displayValue,
+		subscribe,
+		start,
+		freeze,
+		reset
+	}), [
+		phase,
+		step,
+		displayed,
+		cycleInterval,
+		inertia,
+		hasItems,
+		cycleMin,
+		displayValue,
+		subscribe,
+		start,
+		freeze,
+		reset
+	]);
+	const selectionState = phase === "idle" ? "idle" : phase === "frozen" ? "frozen" : "running";
+	return createElement(as, {
+		className: joinClassNames("rrp", className),
+		"data-state": selectionState,
+		"data-phase": phase,
+		"data-inertia-step": step,
+		"data-inertia": inertia ? "" : void 0,
+		style
+	}, /* @__PURE__ */ jsx(RaffleContext.Provider, {
+		value: ctxValue,
+		children
+	}));
+}
+//#endregion
+//#region src/components/RafflePick/RafflePickValue.tsx
+function RafflePickValue({ animation = "roll", className, style, as = "span" }) {
+	const { phase, step, displayed, cycleInterval, valueRef, displayValue, subscribe } = useRaffleContext("RafflePick.Value");
+	const nodeRef = useRef(null);
+	const writeNode = useCallback((value) => {
+		const node = nodeRef.current;
+		if (!node) return;
+		const txt = String(displayValue(value));
+		node.textContent = txt;
+		node.setAttribute("data-value", txt);
+		if (typeof node.getAnimations === "function") {
+			const anims = node.getAnimations({ subtree: true });
+			for (let i = 0; i < anims.length; i++) anims[i].currentTime = 0;
+		}
+	}, [displayValue]);
+	useEffect(() => subscribe(writeNode), [subscribe, writeNode]);
+	const running = phase === "starting" || phase === "running" || phase === "settling";
+	useLayoutEffect(() => {
+		if (running) writeNode(valueRef.current);
+	});
+	return /* @__PURE__ */ jsx(as, {
+		ref: nodeRef,
+		className: useMemo(() => joinClassNames("rrp-value", className), [className]),
+		"data-animation": animation,
+		"data-value": displayed,
+		"data-phase": phase,
+		"data-inertia-step": step,
+		style: useMemo(() => ({
+			...style,
+			["--rrp-tick"]: `${cycleInterval}ms`
+		}), [style, cycleInterval]),
+		children: displayed
+	});
+}
+//#endregion
+//#region src/components/RafflePick/RafflePickButton.tsx
+function RafflePickButton({ className, style, children, startLabel, stopLabel, waitLabel }) {
+	const { phase, start, freeze, reset } = useRaffleContext("RafflePick.Button");
+	const running = phase === "starting" || phase === "running" || phase === "settling";
+	const handleClick = useCallback(() => {
+		if (phase === "settling") return;
+		if (running) {
+			freeze();
+			return;
+		}
+		reset();
+		start();
+	}, [
+		phase,
+		running,
+		freeze,
+		reset,
+		start
+	]);
+	const cls = useMemo(() => joinClassNames("rrp-button", className), [className]);
+	let label;
+	if (phase === "settling") label = waitLabel ?? stopLabel ?? children;
+	else if (phase === "starting" || phase === "running") label = stopLabel ?? children;
+	else label = startLabel ?? children;
+	return /* @__PURE__ */ jsx("button", {
+		className: cls,
+		style,
+		disabled: phase === "settling",
+		onClick: handleClick,
+		"data-phase": phase,
+		children: label
+	});
+}
+//#endregion
+//#region src/components/RafflePick/RafflePickCountdown.tsx
+function RafflePickCountdown({ seconds, className, style, children }) {
+	const { phase } = useRaffleContext("RafflePick.Countdown");
+	if (phase !== "running") return null;
+	return /* @__PURE__ */ jsx(CountdownRunning, {
+		seconds,
+		className,
+		style,
+		children
+	}, `countdown-${seconds}`);
+}
+function CountdownRunning({ seconds, className, style, children }) {
+	const { freeze } = useRaffleContext("RafflePick.Countdown");
+	const [remaining, setRemaining] = useState(seconds);
+	useEffect(() => {
+		if (!seconds || seconds <= 0) return;
+		const tickId = setInterval(() => {
+			setRemaining((r) => r > 1 ? r - 1 : 0);
+		}, 1e3);
+		const stopId = setTimeout(() => freeze(), seconds * 1e3);
+		return () => {
+			clearInterval(tickId);
+			clearTimeout(stopId);
+		};
+	}, [seconds, freeze]);
+	const cls = useMemo(() => joinClassNames("rrp-countdown", className), [className]);
+	const mergedStyle = useMemo(() => ({
+		...style,
+		["--rrp-countdown"]: `${seconds}s`
+	}), [style, seconds]);
+	if (children) return /* @__PURE__ */ jsx("span", {
+		className: cls,
+		style: mergedStyle,
+		"aria-hidden": "true",
+		children: children(remaining)
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: cls,
+		style: mergedStyle,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			className: "rrp-countdown__svg",
+			viewBox: "0 0 36 36",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "rrp-countdown__track",
+				cx: "18",
+				cy: "18",
+				r: "16"
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "rrp-countdown__bar",
+				cx: "18",
+				cy: "18",
+				r: "16"
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "rrp-countdown__label",
+			children: remaining
+		})]
+	});
+}
+//#endregion
+//#region src/components/RafflePick/RafflePickSlots.tsx
+const pickRandom = (pool) => pool[Math.floor(Math.random() * pool.length)] ?? "";
+const makeRefs = () => ({
+	root: null,
+	col: null,
+	prev: null,
+	curr: null,
+	next: null,
+	currChar: "",
+	stopped: false
+});
+function RafflePickSlots({ length = 3, chars = "0123456789", spinInterval = 80, staggerMs = 220, className, slotClassName, style, slotStyle, onResult }) {
+	const { phase } = useRaffleContext("RafflePick.Slots");
+	const slotsRef = useRef([]);
+	const stopTimersRef = useRef([]);
+	const finalRef = useRef([]);
+	const onResultRef = useRef(onResult);
+	useEffect(() => {
+		onResultRef.current = onResult;
+	});
+	if (slotsRef.current.length !== length) slotsRef.current = Array.from({ length }, (_, i) => slotsRef.current[i] ?? makeRefs());
+	const pool = useMemo(() => Array.from(chars), [chars]);
+	const safeInterval = Math.max(50, spinInterval);
+	const running = phase === "starting" || phase === "running";
+	const settling = phase === "settling" || phase === "frozen";
+	const writeSlot = (s, prev, curr, next) => {
+		if (s.prev) s.prev.textContent = prev;
+		if (s.curr) s.curr.textContent = curr;
+		if (s.next) s.next.textContent = next;
+		s.currChar = curr;
+		if (s.root) s.root.setAttribute("data-value", curr);
+		if (s.col && typeof s.col.getAnimations === "function") {
+			const anims = s.col.getAnimations();
+			for (let a = 0; a < anims.length; a++) anims[a].currentTime = 0;
+		}
+	};
+	useEffect(() => {
+		if (!running) return;
+		for (let i = 0; i < length; i++) {
+			const s = slotsRef.current[i];
+			s.stopped = false;
+			if (s.root) s.root.removeAttribute("data-stopped");
+			writeSlot(s, pickRandom(pool), pickRandom(pool), pickRandom(pool));
+		}
+		finalRef.current = new Array(length).fill("");
+		const id = setInterval(() => {
+			for (let i = 0; i < length; i++) {
+				const s = slotsRef.current[i];
+				if (s.stopped) continue;
+				const newPrev = s.currChar;
+				writeSlot(s, newPrev, s.next?.textContent ?? pickRandom(pool), pickRandom(pool));
+			}
+		}, safeInterval);
+		return () => clearInterval(id);
+	}, [
+		running,
+		length,
+		pool,
+		safeInterval
+	]);
+	useEffect(() => {
+		if (!settling) return;
+		const clear = () => {
+			stopTimersRef.current.forEach(clearTimeout);
+			stopTimersRef.current = [];
+		};
+		clear();
+		for (let i = 0; i < length; i++) {
+			const id = setTimeout(() => {
+				const s = slotsRef.current[i];
+				s.stopped = true;
+				if (s.root) s.root.setAttribute("data-stopped", "");
+				finalRef.current[i] = s.currChar;
+				if (i === length - 1) onResultRef.current?.(finalRef.current.join(""));
+			}, i * staggerMs);
+			stopTimersRef.current.push(id);
+		}
+		return clear;
+	}, [
+		settling,
+		length,
+		staggerMs
+	]);
+	useEffect(() => {
+		if (phase !== "idle") return;
+		const c = pool[0] ?? "";
+		for (let i = 0; i < length; i++) {
+			const s = slotsRef.current[i];
+			s.stopped = true;
+			writeSlot(s, c, c, c);
+			if (s.root) s.root.removeAttribute("data-stopped");
+		}
+	}, [
+		phase,
+		length,
+		pool
+	]);
+	const cls = useMemo(() => joinClassNames("rrp-slots", className), [className]);
+	const slotCls = useMemo(() => joinClassNames("rrp-slot", slotClassName), [slotClassName]);
+	const mergedSlotStyle = useMemo(() => ({
+		...slotStyle,
+		["--rrp-tick"]: `${safeInterval}ms`
+	}), [slotStyle, safeInterval]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cls,
+		style,
+		"data-phase": phase,
+		children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx("span", {
+			ref: (n) => {
+				slotsRef.current[i].root = n;
+			},
+			className: slotCls,
+			style: mergedSlotStyle,
+			"data-slot-index": i,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "rrp-slot__col",
+				ref: (n) => {
+					slotsRef.current[i].col = n;
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "rrp-slot__cell",
+						ref: (n) => {
+							slotsRef.current[i].prev = n;
+						},
+						children: pool[0] ?? ""
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "rrp-slot__cell",
+						ref: (n) => {
+							slotsRef.current[i].curr = n;
+						},
+						children: pool[0] ?? ""
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "rrp-slot__cell",
+						ref: (n) => {
+							slotsRef.current[i].next = n;
+						},
+						children: pool[0] ?? ""
+					})
+				]
+			})
+		}, i))
+	});
+}
+//#endregion
+//#region src/components/RafflePick/index.ts
+const RafflePick = RafflePickRoot;
+RafflePick.Value = RafflePickValue;
+RafflePick.Button = RafflePickButton;
+RafflePick.Countdown = RafflePickCountdown;
+RafflePick.Slots = RafflePickSlots;
+//#endregion
+export { RaffleContext, RafflePick, RafflePickButton, RafflePickCountdown, RafflePickSlots, RafflePickValue, useRaffleContext };