// lineup-pickers.jsx — Three card picker variations for the Lineup slot fill flow.
// PickerSheet: bottom-sheet with filter chips · most idiomatic mobile pattern
// PickerFullscreen: full-screen takeover with filter + sort
// PickerStrip: inline horizontal strip pinned above the lineup (carousel-style)
//
// All three accept the same props:
// { locale, position, players, onPick, onClose, slotLabel }
// They display in a static "open" state for design review — not driven by real
// state. The Lineup variants show one slot as "tapped → picker open" via tweaks.
// ─── ScrollNumber — 3D horizontal wheel-picker for small numeric ranges ────
// Canonical primitive (v1.3.3 → v1.3.4) for small numeric ranges (0-9, 0-10+).
// Inspired by iOS time picker / Flutter wheel_picker. Items live on a
// horizontal "wheel": the centered item is largest and fully opaque; items
// fall away in 3D (rotateY + translateZ) as they approach the edges, with
// continuous scale and opacity falloff driven by their pixel distance from
// the container center. Native scroll-snap handles momentum + snapping;
// the 3D transforms are recomputed every frame via rAF.
//
// Why horizontal (not vertical)?
// • Lives inside vertical-scrolling sheet → vertical wheel would conflict
// gestures (sheet pan-y vs wheel pan-y on same touch).
// • Two pickers can sit side-by-side (home : away) in a row.
// • Disambiguates axis for screen reader spinbutton arrows (←/→).
//
// Keyboard model = single role="spinbutton" focus stop with:
// ←/→ ±1 · Home/End → min/max · PageUp/PageDown ±3
//
// Designed for QScore replacement (Design Log §16.3) but generic — usable
// for any small numeric range (corner count, dice, custom score, …).
//
// Props:
// min, max — inclusive bounds (defaults 0..9)
// value — controlled value (number)
// onChange(n) — fires once scroll settles on a new index
// locale — fa | en | ar (for digit shaping via toLocaleDigits)
// size — 'small' (44h) | 'medium' (60h) | 'large' (76h)
// disabled — pointer-events off + dimmed + no keyboard
// ariaLabel — screen-reader label for the spinbutton role
// formatValue(n,loc) — optional override (e.g. last step "10+")
//
// introAnimate — v1.3.5: on mount, briefly spin the wheel from a
// starting position to `value` so the user *sees* it
// move (= discoverability hint that the thing is
// horizontally scrollable). Default `true`.
// introAnimateFrom — override the starting value. Default: auto — picks
// an index `INTRO_ROTATION_COUNT` away from `value`
// (toward the farther bound), so users see ~6 numbers
// tick past at a perceivable cadence. Capped at
// (max-min) so it never spins more than the range.
// introDelay — ms to wait before the spin starts. Use this to
// stagger paired wheels (e.g. home/away). Default 0.
// introDuration — total spin duration in ms (ease-out). Default 950
// (v1.3.5-b: bumped from 550ms because at 550 each
// item flashed by in ~60ms and the rotation feel
// read as a single jump, not a wheel spin).
function ScrollNumber({
min = 0, max = 9, value = 0,
onChange,
locale = 'fa',
size = 'medium',
disabled = false,
ariaLabel,
formatValue,
introAnimate = true,
introAnimateFrom,
introDelay = 0,
introDuration = 950,
}) {
const scrollerRef = React.useRef(null);
const itemRefs = React.useRef([]);
const programmaticScroll = React.useRef(false);
const scrollTimer = React.useRef(null);
const prefersReduced = React.useRef(false);
const lastFiredValue = React.useRef(value);
const didInitialScroll = React.useRef(false);
const rafId = React.useRef(null);
// Pointer-drag state for mouse / pen interactions. Touch devices use the
// browser's native scroll (faster + momentum + correct RTL), so we bail
// out of drag handling when pointerType === 'touch'.
const dragState = React.useRef({
active: false, startX: 0, startScrollLeft: 0, hasDragged: false,
pointerId: null,
});
// Set true on pointerup after a drag — gates the synthetic 'click' that
// browsers fire on the item that received pointerdown. Cleared on next tick.
const suppressNextClick = React.useRef(false);
// v1.3.5 intro-spin bookkeeping. `active` flips on while the wheel is
// mid-animation so any user interaction (drag, tap, keyboard) or external
// value change can abort it cleanly. rafId/timerId are tracked separately
// from the regular onScroll rAF so we can cancel them in isolation.
const introState = React.useRef({ active: false, rafId: null, timerId: null });
const [centeredIdx, setCenteredIdx] = React.useState(
Math.max(0, Math.min(max - min, (value ?? min) - min))
);
const items = React.useMemo(() => {
const out = [];
for (let n = min; n <= max; n++) out.push(n);
return out;
}, [min, max]);
const fmt = formatValue || ((n) => toLocaleDigits(n, locale));
// Apply 3D wheel transforms to every item based on its current distance
// from the container's horizontal center. Called on every rAF tick while
// the scroller is moving, plus once after mount and after external value
// syncs. Geometry-based — RTL-safe by construction.
//
// Tuning (v1.3.4): stronger 3D + bigger size contrast between centered
// item and neighbors. perspective is set in CSS (~380px); here we control
// per-item rotateY/translateZ/scale/opacity. The centered item is scaled
// 1.10× (slight pop) so it stands out clearly; neighbours fall off
// aggressively to 0.40 at the edges, which also visually compresses the
// wheel horizontally so it fits in narrower rows.
const applyTransforms = React.useCallback(() => {
const scroller = scrollerRef.current;
if (!scroller) return;
const sr = scroller.getBoundingClientRect();
const centerX = sr.left + sr.width / 2;
// Use container half-width as the falloff radius: items at the
// container edges land at the maximum tilt/fade.
const radius = Math.max(1, sr.width / 2);
itemRefs.current.forEach((node) => {
if (!node) return;
const r = node.getBoundingClientRect();
const cx = r.left + r.width / 2;
const offset = cx - centerX;
// Normalised distance: -1 (far left) … 0 (center) … +1 (far right)
const t = Math.max(-1, Math.min(1, offset / radius));
const abs = Math.abs(t);
// Easing — `pow(abs, 0.6)` falls off STEEPLY near the center, so the
// immediate neighbours of the selected item are visibly smaller (not
// a faint shimmer like a quadratic curve would give). Beyond mid-rim
// the curve flattens and items just keep receding into the wheel.
const eased = Math.pow(abs, 0.6);
const scale = 1.25 - 0.95 * eased; // 1.25 (center) → 0.30 (edge) · ~4.2× contrast
const opacity = 1.00 - 0.85 * eased; // 1.00 → 0.15 (sharper fade)
const rotateY = -t * 65; // -65deg … +65deg
const translateZ = -abs * 130; // 0 → -130px (recedes further)
node.style.transform =
`translateZ(${translateZ.toFixed(2)}px) ` +
`rotateY(${rotateY.toFixed(2)}deg) ` +
`scale(${scale.toFixed(3)})`;
node.style.opacity = opacity.toFixed(3);
// The centered item also gets the accent text colour (via a class
// toggle), so we don't have to recompute color here.
});
}, []);
// Programmatically center an item. animate=false on first mount and
// external value sync; animate=true on user tap/keyboard interactions.
const scrollToIdx = React.useCallback((idx, animate) => {
const target = itemRefs.current[idx];
if (!target) return;
programmaticScroll.current = true;
const behavior = (animate && !prefersReduced.current) ? 'smooth' : 'auto';
target.scrollIntoView({ inline: 'center', block: 'nearest', behavior });
// Always apply transforms once synchronously so the first paint after a
// 'auto' scroll already has the wheel pose correct (no flicker).
requestAnimationFrame(applyTransforms);
setTimeout(() => { programmaticScroll.current = false; }, 380);
}, [applyTransforms]);
// Find the item whose center is closest to the container's center.
const findCenteredIdx = React.useCallback(() => {
const scroller = scrollerRef.current;
if (!scroller) return centeredIdx;
const sr = scroller.getBoundingClientRect();
const centerX = sr.left + sr.width / 2;
let bestIdx = 0;
let bestDist = Infinity;
itemRefs.current.forEach((node, i) => {
if (!node) return;
const r = node.getBoundingClientRect();
const cx = r.left + r.width / 2;
const d = Math.abs(cx - centerX);
if (d < bestDist) { bestDist = d; bestIdx = i; }
});
return bestIdx;
}, [centeredIdx]);
// Cancel any in-flight intro-spin and clear its bookkeeping. Safe to call
// when nothing is running (no-op). Used on user interaction, external
// value change, and unmount.
const abortIntro = React.useCallback(() => {
const st = introState.current;
if (st.rafId) cancelAnimationFrame(st.rafId);
if (st.timerId) clearTimeout(st.timerId);
st.active = false;
st.rafId = null;
st.timerId = null;
// We may have flipped programmaticScroll on while the intro was running;
// release it so the next user scroll fires onChange normally.
programmaticScroll.current = false;
// Restore native smooth scroll behaviour if we overrode it inline.
const scroller = scrollerRef.current;
if (scroller) scroller.style.scrollBehavior = '';
}, []);
// Initial positioning on mount + reduced-motion sniff + optional intro spin.
//
// v1.3.5 — intro spin: with both wheels defaulting to `0`, neither one is
// visibly scrollable when it first paints (the min slot has no left-side
// neighbours, so it can read as a static badge). To teach the affordance,
// on mount we briefly position the wheel at a "from" index and then animate
// scrollLeft to the real `value` with a cubic ease-out over ~550ms. The
// existing onScroll handler picks up the position changes per-frame and
// re-runs `applyTransforms` for free, so the 3D wheel poses correctly all
// the way through. We hold `programmaticScroll` high for the whole spin so
// the debounced onChange in onScroll doesn't fire a spurious value update.
React.useEffect(() => {
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
prefersReduced.current = mq.matches;
if (didInitialScroll.current) return;
didInitialScroll.current = true;
const valueIdx = Math.max(0, Math.min(items.length - 1, (value ?? min) - min));
// Resolve the starting index for the spin. Auto-mode keeps the rotation
// to ~6 items: enough numbers tick past to read as a wheel-spin, but few
// enough that each one is on-screen long enough to register at the
// 950ms duration. Spinning the full 0..9 range at 950ms (~100ms/item
// average, ~50ms/item near the start under cubic ease-out) read as a
// blur — bumping duration alone wasn't enough; the rotation count had
// to come down too. Direction is "toward the farther bound" so we
// never spin off-axis if the user has already committed a value.
const INTRO_ROTATION_COUNT = 6;
let fromIdx;
if (typeof introAnimateFrom === 'number') {
fromIdx = Math.max(0, Math.min(items.length - 1, introAnimateFrom - min));
} else {
const midIdx = Math.floor((items.length - 1) / 2);
const distance = Math.min(INTRO_ROTATION_COUNT, items.length - 1);
fromIdx = valueIdx <= midIdx
? Math.min(items.length - 1, valueIdx + distance)
: Math.max(0, valueIdx - distance);
}
const canIntro =
introAnimate &&
introDuration > 0 &&
!prefersReduced.current &&
!disabled &&
fromIdx !== valueIdx;
if (!canIntro) {
// No-spin path: identical to the pre-v1.3.5 behaviour — snap to value.
scrollToIdx(valueIdx, false);
return;
}
// 1. Pre-position synchronously at the spin's starting index. We disable
// native smooth scroll on the element first so this jump is instant,
// not animated (otherwise the user would see a smooth-scroll to `from`
// followed by another smooth-scroll to `value` — two animations).
const scroller = scrollerRef.current;
if (!scroller) return;
scroller.style.scrollBehavior = 'auto';
scrollToIdx(fromIdx, false);
setCenteredIdx(fromIdx);
programmaticScroll.current = true;
// 2. After the optional stagger delay, animate scrollLeft from the
// pre-positioned `from` value to the target item's center using
// rAF + cubic ease-out. Per-frame scrollLeft writes trigger the
// existing onScroll handler → applyTransforms runs each frame, so
// the wheel pose stays correct throughout the spin.
introState.current.active = true;
introState.current.timerId = setTimeout(() => {
const sc = scrollerRef.current;
const target = itemRefs.current[valueIdx];
if (!sc || !target) {
abortIntro();
scrollToIdx(valueIdx, false);
return;
}
// Compute the target scrollLeft (== where scrollIntoView would land).
// Using rects keeps this RTL-safe and avoids math on negative scrollLeft
// values that some browsers use for RTL containers.
const startLeft = sc.scrollLeft;
const targetRect = target.getBoundingClientRect();
const scRect = sc.getBoundingClientRect();
const offsetFromCenter =
(targetRect.left + targetRect.width / 2) -
(scRect.left + scRect.width / 2);
const endLeft = startLeft + offsetFromCenter;
const startTs = performance.now();
const tick = (now) => {
if (!introState.current.active) return; // aborted
const elapsed = now - startTs;
const t = Math.min(1, elapsed / introDuration);
// v1.3.5-b: switched cubic → quintic ease-out for a softer landing.
// cubic 1 - (1-t)^3 → at t=0.5 we've already moved 87% of the
// way, the last half feels static.
// quintic 1 - (1-t)^5 → distributes deceleration over a wider
// tail, so the wheel keeps perceptibly
// ticking right up to the stop. Combined
// with the 6-item rotation cap that gives
// a clear "slot machine winding down" feel.
const eased = 1 - Math.pow(1 - t, 5);
sc.scrollLeft = startLeft + (endLeft - startLeft) * eased;
if (t < 1) {
introState.current.rafId = requestAnimationFrame(tick);
} else {
// Settled. Two cleanup goals here:
//
// (a) leave scrollLeft at a *snap-perfect* position. Per-frame
// writes are subpixel and float-precision, so endLeft can
// end up ½–1px off the actual snap point. When that
// happens, findCenteredIdx() (called from onScroll's rAF)
// sometimes returns valueIdx±1, which flips the white
// "is-centered" class onto a neighbour — visually the
// active number reads as grey. scrollIntoView({inline:
// 'center'}) lands the item dead-center every time and
// kills that race.
//
// (b) cancel any in-flight onScroll rAF so its later
// setCenteredIdx() can't override ours.
const finalTarget = itemRefs.current[valueIdx];
if (sc) sc.style.scrollBehavior = 'auto';
if (finalTarget) {
finalTarget.scrollIntoView({ inline: 'center', block: 'nearest', behavior: 'auto' });
}
if (rafId.current) {
cancelAnimationFrame(rafId.current);
rafId.current = null;
}
applyTransforms();
introState.current.active = false;
introState.current.rafId = null;
programmaticScroll.current = false;
if (sc) sc.style.scrollBehavior = '';
setCenteredIdx(valueIdx);
}
};
introState.current.rafId = requestAnimationFrame(tick);
}, Math.max(0, introDelay));
return () => abortIntro();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// External value sync — only when the controlled value moves away from the
// currently-centered index (e.g. parent reset). Animated. Also aborts an
// in-flight intro spin so the wheel jumps straight to the new value rather
// than continuing to animate to the stale `value` captured at mount.
React.useEffect(() => {
if (value == null) return;
const idx = Math.max(0, Math.min(items.length - 1, value - min));
if (idx !== centeredIdx) {
if (introState.current.active) abortIntro();
lastFiredValue.current = value;
setCenteredIdx(idx);
scrollToIdx(idx, true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value, min, items.length]);
// Cleanup any in-flight rAF on unmount.
React.useEffect(() => {
return () => {
if (rafId.current) cancelAnimationFrame(rafId.current);
if (scrollTimer.current) clearTimeout(scrollTimer.current);
abortIntro();
};
}, [abortIntro]);
function onScroll() {
if (disabled) return;
// Throttle visual updates to one per frame.
if (rafId.current) cancelAnimationFrame(rafId.current);
rafId.current = requestAnimationFrame(() => {
const idx = findCenteredIdx();
if (idx !== centeredIdx) setCenteredIdx(idx);
applyTransforms();
});
// Debounce onChange separately — only fires after the user has stopped
// scrolling for ~110ms. Programmatic scrolls (tap, key, sync) are
// suppressed here because pickIdx() fires onChange directly.
if (scrollTimer.current) clearTimeout(scrollTimer.current);
scrollTimer.current = setTimeout(() => {
if (programmaticScroll.current) return;
const finalIdx = findCenteredIdx();
const next = finalIdx + min;
if (next !== lastFiredValue.current) {
lastFiredValue.current = next;
if (onChange) onChange(next);
}
}, 110);
}
function pickIdx(idx) {
if (disabled) return;
if (introState.current.active) abortIntro();
const clamped = Math.max(0, Math.min(items.length - 1, idx));
scrollToIdx(clamped, true);
setCenteredIdx(clamped);
const next = clamped + min;
if (next !== lastFiredValue.current) {
lastFiredValue.current = next;
if (onChange) onChange(next);
}
}
function onKeyDown(e) {
if (disabled) return;
let next = centeredIdx;
switch (e.key) {
case 'ArrowLeft': next = centeredIdx - 1; break;
case 'ArrowRight': next = centeredIdx + 1; break;
case 'Home': next = 0; break;
case 'End': next = items.length - 1; break;
case 'PageUp': next = centeredIdx - 3; break;
case 'PageDown': next = centeredIdx + 3; break;
default: return;
}
e.preventDefault();
pickIdx(next);
}
// ─── Pointer drag handlers (mouse + pen only) ─────────────────────────
// Touch lets the browser do native scroll. For mouse, we capture pointer
// events on the .lu-snum-track and translate horizontal pointer motion
// into scrollLeft updates. The existing onScroll handler already drives
// the per-item 3D transforms via rAF, so we get smooth visual response
// for free.
function onPointerDown(e) {
if (disabled) return;
// Any pointer interaction (mouse, pen, or even an early touch) aborts an
// in-flight intro spin — the user already noticed the wheel, no need to
// keep the tutorial running.
if (introState.current.active) abortIntro();
if (e.pointerType === 'touch') return; // let the browser scroll
const scroller = scrollerRef.current;
if (!scroller) return;
dragState.current = {
active: true,
startX: e.clientX,
startScrollLeft: scroller.scrollLeft,
hasDragged: false,
pointerId: e.pointerId,
};
try { scroller.setPointerCapture(e.pointerId); } catch (_) { /* old browsers */ }
}
function onPointerMove(e) {
const st = dragState.current;
if (!st.active || e.pointerId !== st.pointerId) return;
const dx = e.clientX - st.startX;
// 4-pixel threshold before we commit to a drag; below that we still
// treat it as a click (so single tap on a number always works).
if (!st.hasDragged && Math.abs(dx) > 4) {
st.hasDragged = true;
}
if (st.hasDragged) {
const scroller = scrollerRef.current;
if (scroller) {
// Direct map: dragging the wheel right moves content right under
// the cursor → scrollLeft decreases by dx. Works for both LTR and
// RTL because scrollLeft is a numeric axis local to the scroller.
scroller.scrollLeft = st.startScrollLeft - dx;
}
e.preventDefault();
}
}
function onPointerUp(e) {
const st = dragState.current;
if (!st.active || (e.pointerId != null && e.pointerId !== st.pointerId)) return;
const wasDragged = st.hasDragged;
const scroller = scrollerRef.current;
if (scroller && st.pointerId != null) {
try { scroller.releasePointerCapture(st.pointerId); } catch (_) { /* noop */ }
}
dragState.current = {
active: false, startX: 0, startScrollLeft: 0,
hasDragged: false, pointerId: null,
};
if (wasDragged) {
// Suppress the upcoming synthetic click on the item that received
// pointerdown — without this, the wheel would jump back to that
// item right after the user finished dragging somewhere else.
suppressNextClick.current = true;
setTimeout(() => { suppressNextClick.current = false; }, 120);
// Native CSS scroll-snap doesn't re-trigger after we wrote scrollLeft
// directly, so we snap manually to the nearest item. pickIdx fires
// onChange and animates with smooth behaviour, completing the wheel.
const idx = findCenteredIdx();
pickIdx(idx);
}
}
const currentValue = items[centeredIdx];
return (
{items.map((n, i) => (
))}
{/* Subtle center band — two thin accent lines at top + bottom that
delineate the "selected" lane without enclosing the centered item
(which is scaled larger than the slot would be). */}
{/* v1.3.5-b: low-contrast chevrons at both edges as a permanent
affordance hint. They sit above the edge-mask gradient so they
stay visible even when adjacent numbers are nearly invisible
due to the perspective fade. Decorative only — pointer-events
off so they never intercept drag/click, aria-hidden so screen
readers ignore them (the spinbutton role already advertises the
interaction model). */}
‹›
);
}
// ─── Player tile (small card preview for picker list) ──────────────────────
// Compact representation: tier strip, image, name, overall pill, stat, info icon.
// `onInfo` opens the details modal — independent of `onClick` which picks the card.
// `onClosePicker` lets the modal's "Use in Lineup" CTA close the surrounding
// PickerFullscreen after the pick — so the user lands back on the pitch.
function PlayerTile({ player, locale, onClick, selected = false, locked = false, onClosePicker }) {
const tt = TIER[player.tier];
const ll = LU_I18N[locale];
const [detailsOpen, setDetailsOpen] = React.useState(false);
const baseLL = I18N[locale];
const mcLL = window.MC_I18N ? window.MC_I18N[locale] : null;
// Build inventory-shaped item for the unified modal (lazy — only when modal
// is about to open). If My Cards deps aren't loaded, fall back to a no-op
// info button. The Lineup HTML loads them so this is the normal path.
const item = React.useMemo(() => {
if (typeof window.toInventoryItem !== 'function') return null;
return window.toInventoryItem(player, 'player', { isNew: false });
}, [player]);
return (
{/* Details info button — opens unified MyCardsDetailModal (if loaded),
otherwise no-op (Lineup HTML must include the My Cards deps). */}
{/* Unified modal — uses MyCards visuals + per-position scores. The
primary CTA is "Use in Lineup" → picks the card and closes both the
modal and the surrounding picker so the user lands on the pitch. */}
{window.MyCardsDetailModal && item && (
{
setDetailsOpen(false);
if (onClick) onClick();
if (onClosePicker) onClosePicker();
},
}}
onClose={() => setDetailsOpen(false)}
onShare={() => {}}
onViewHistory={() => {}}
/>
)}