// reorder-mode.jsx — the Reorder view.
//
// "Just the facts, ma'am": a stripped, print-style read of the WHOLE workout —
// every circuit, every round, each exercise showing name / reps / weight only.
// Nothing here is tappable or editable. The only affordance is a drag handle.
//
// Two variants, switchable at the top so both can be felt side by side:
//
// Handles (default) — the handle you touch IS the granularity. Row handle
// moves one exercise; the round bar's handle moves that round; the circuit
// bar's handle moves the circuit. No modes, no explainer, no picker.
// Mode buttons — the 7/15 shape: By exercise · By round · By circuit across
// the top, every row handle obeying the selected mode.
//
// Rules are identical in both: exercises may land in any round of any circuit;
// a round moves only inside its own circuit; circuits reorder among circuits.
// Every legal landing spot is drawn the moment a drag starts. Illegal targets
// never light up. Exercise order is CIRCUIT-WIDE — rounds repeat it — so
// exercise drop zones appear in one bucket per circuit, and the other buckets
// say "same order" rather than pretending a per-round position exists.
//
// DIRECTION: nothing here is one-way. For a list of N items every slot 0..N is
// emitted — above the first, between each pair, below the last — and the only
// slots withheld are the two that would put the dragged item back exactly where
// it started (roSkip). Up and down are the same code path.
// Reaching a far target is separate from generating it, so both are handled:
// the hovered zone is chosen by nearest-edge geometry (not a pixel hit on a
// 26px strip), and the edge auto-scroll runs on a ticker so holding still at
// either end keeps paging — up as readily as down.
const RO_GRAN = [
{ value: 'exercise', label: 'By exercise' },
{ value: 'round', label: 'By round' },
{ value: 'circuit', label: 'By circuit' },
];
const roClone = (x) => JSON.parse(JSON.stringify(x));
// Deepened primary — the "drop here" fill. Colour is the only thing that moves
// when a zone goes hot, so it has to carry the whole signal.
const roShade = (hex, k) => {
const m = /^#?([0-9a-f]{6})$/i.exec(String(hex || ''));
if (!m) return hex;
const n = parseInt(m[1], 16);
const f = (v) => Math.max(0, Math.min(255, Math.round(v * k)));
return `rgb(${f(n >> 16)}, ${f((n >> 8) & 255)}, ${f(n & 255)})`;
};
function roRounds(c) {
const lens = c.exercises.map(e => e.sets.length);
return Math.max(1, c.rounds || (lens.length ? Math.max(...lens) : 1));
}
function roWeight(w, unit) {
if (w == null) return null;
const list = Array.isArray(w) ? w : [w];
const vals = list.map(v => (v && typeof v === 'object') ? v.value : v).filter(v => v != null && v !== '');
return vals.length ? vals.join(' · ') + ' ' + unit : null;
}
// An exercise entering a circuit takes that circuit's round count.
function roFitSets(ex, rounds) {
const sets = ex.sets.slice(0, rounds);
while (sets.length < rounds) {
const last = sets[sets.length - 1] || { reps: 10, weight: null };
sets.push({ ...roClone(last), done: false });
}
return { ...ex, sets };
}
const roIns = (slot, from) => (slot > from ? slot - 1 : slot);
function roMoveExercise(circuits, from, toCi, slot) {
const next = circuits.map(c => ({ ...c, exercises: c.exercises.slice() }));
const [ex] = next[from.ci].exercises.splice(from.ei, 1);
const target = next[toCi];
const idx = toCi === from.ci ? roIns(slot, from.ei) : Math.min(slot, target.exercises.length);
target.exercises.splice(idx, 0, roFitSets(ex, roRounds(target)));
return next;
}
function roMoveRound(circuits, ci, from, slot) {
const idx = roIns(slot, from);
return circuits.map((c, i) => i !== ci ? c : {
...c,
exercises: c.exercises.map(ex => {
if (ex.sets.length <= from) return ex;
const sets = ex.sets.slice();
const [s] = sets.splice(from, 1);
sets.splice(Math.min(idx, sets.length), 0, s);
return { ...ex, sets };
}),
});
}
function roMoveCircuit(circuits, from, slot) {
const next = circuits.slice();
const [c] = next.splice(from, 1);
next.splice(roIns(slot, from), 0, c);
return next;
}
// The two no-op slots for an item at `from`: the gap just above it and the gap
// just below it. Everything else in 0..count is a real move, either direction.
const roSkip = (slot, from) => slot === from || slot === from + 1;
// A circuit emptied by dragging its last exercise out is dropped (on confirm).
function roDropEmpty(circuits, ci) {
return circuits[ci] && circuits[ci].exercises.length === 0
? circuits.filter((_, i) => i !== ci) : circuits;
}
function roGlobalIdx(circuits, ci, ei) {
let n = 0;
for (let i = 0; i < ci; i++) n += circuits[i].exercises.length;
return n + ei;
}
function ReorderScreen({ theme, circuits: incoming, unit, onCancel, onSave }) {
const [direct, setDirect] = React.useState(true); // handles decide, vs mode buttons
const [gran, setGran] = React.useState('exercise'); // mode-buttons variant only
const [draft, setDraft] = React.useState(() => roClone(incoming));
const [drag, setDrag] = React.useState(null); // { kind, ci, ri, ei, label }
const [over, setOver] = React.useState(null); // hovered zone key
const [ghost, setGhost] = React.useState({ x: 0, y: 0 });
const [moves, setMoves] = React.useState(0);
const [confirmDel, setConfirmDel] = React.useState(null); // { name, ci, run }
const zones = React.useRef({}); // zone key → action
zones.current = {};
const rootRef = React.useRef(null);
const scroller = React.useRef(null);
const ptr = React.useRef({ x: 0, y: 0 }); // last pointer, for the scroll ticker
// The real scroll container is the device-frame content DIV, not the page.
const findScroller = () => {
if (scroller.current) return scroller.current;
let el = rootRef.current;
while (el && el !== document.body) {
const oy = getComputedStyle(el).overflowY;
if ((oy === 'auto' || oy === 'scroll') && el.scrollHeight > el.clientHeight + 4) { scroller.current = el; return el; }
el = el.parentElement;
}
return document.scrollingElement || document.documentElement;
};
// Nearest-edge pick, not a pixel hit. A 26px dashed strip is easy to sail past
// in either direction; measuring distance to every live zone makes reaching one
// upward exactly as easy as downward.
const pickZone = (x, y) => {
const els = (rootRef.current || document).querySelectorAll('[data-rozone]');
let best = null, bestD = Infinity;
els.forEach(el => {
const r = el.getBoundingClientRect();
if (x < r.left - 30 || x > r.right + 30) return;
const d = y < r.top ? r.top - y : y > r.bottom ? y - r.bottom : 0;
if (d < bestD) { bestD = d; best = el.getAttribute('data-rozone'); }
});
return bestD <= 28 ? best : null;
};
// Edge paging. The bands are deliberately deep and equal at both ends: the
// sticky header covers the top of the scroller and the save bar covers the
// bottom, so a shallow band is unreachable from visible content.
const autoScroll = (y) => {
const sc = findScroller();
const page = sc === document.scrollingElement || sc === document.documentElement;
const box = page ? { top: 0, bottom: window.innerHeight } : sc.getBoundingClientRect();
const BAND = 150;
const top = box.top + BAND, bot = box.bottom - BAND;
let dy = 0;
if (y < top) dy = -Math.min(26, 7 + (top - y) / 4);
else if (y > bot) dy = Math.min(26, 7 + (y - bot) / 4);
if (!dy) return false;
const before = sc.scrollTop;
sc.scrollBy(0, dy);
return sc.scrollTop !== before;
};
// Held still at an edge, the list keeps paging and the hovered zone is
// re-read, because content is moving under a stationary finger.
React.useEffect(() => {
if (!drag) return;
const id = setInterval(() => {
if (!autoScroll(ptr.current.y)) return;
const next = pickZone(ptr.current.x, ptr.current.y);
setOver(v => (v === next ? v : next));
}, 16);
return () => clearInterval(id);
}, [drag]);
const beginDrag = (e, u) => {
e.preventDefault(); e.stopPropagation();
// Capture on the root, not the handle: a circuit drag collapses the list, so
// the handle under the finger unmounts mid-gesture. The root always survives.
try { (rootRef.current || e.currentTarget).setPointerCapture(e.pointerId); } catch (err) {}
ptr.current = { x: e.clientX, y: e.clientY };
setDrag(u); setOver(null); setGhost({ x: e.clientX, y: e.clientY });
};
const moveDrag = (e) => {
if (!drag) return;
ptr.current = { x: e.clientX, y: e.clientY };
setGhost({ x: e.clientX, y: e.clientY });
setOver(pickZone(e.clientX, e.clientY));
autoScroll(e.clientY);
};
const endDrag = () => {
if (!drag) return;
const act = over ? zones.current[over] : null;
const d = drag;
const key = over;
setDrag(null); setOver(null);
if (!act) return;
// Last exercise leaving its circuit is allowed — but the now-empty circuit
// gets named before it disappears.
if (d.kind === 'exercise') {
const toCi = Number(String(key).split(':')[1]);
const src = draft[d.ci];
if (toCi !== d.ci && src && src.exercises.length === 1) {
setConfirmDel({ ci: d.ci, name: src.label ? `Circuit ${d.ci + 1} — ${src.label}` : `Circuit ${d.ci + 1}`, run: act });
return;
}
}
setDraft(act()); setMoves(m => m + 1);
};
// A legal landing spot. Same size idle or hot — nothing under the finger ever
// resizes, so the list never pops. Going hot only darkens it.
const hotFill = roShade(theme.primary, 0.62);
const Zone = ({ k, act, wide }) => {
zones.current[k] = act;
const hot = over === k;
return (
Drop here
);
};
// What's moving right now decides which zones exist — never the picker.
const kind = drag ? drag.kind : null;
const exDrag = kind === 'exercise';
const rdDrag = kind === 'round';
const ciDrag = kind === 'circuit';
// Min hams: a mode shows handles for exactly one level, so there is never a
// handle on screen that does something other than what the tab says.
// Handles variant shows all three, because that is its whole proposition.
const showEx = direct || gran === 'exercise';
const showRd = direct || gran === 'round';
const showCi = direct || gran === 'circuit';
const rowUnit = (ci, r, ei, ex) => ({ kind: 'exercise', ci, ri: r, ei, label: ex.shortName });
const explainer = direct
? 'Drag a handle. The row moves one exercise, the round bar moves that round, the circuit bar moves the whole circuit.'
: gran === 'exercise' ? 'Drag a handle to move it. Exercises can land in any round of any circuit.'
: gran === 'round' ? 'Drag a handle to move it. Rounds stay inside their own circuit.'
: 'Drag a handle to move it. Circuits reorder among circuits.';
return (
)}
{ciDrag && !roSkip(0, drag.ci) && (
roMoveCircuit(draft, drag.ci, 0)} />
)}
{draft.map((c, ci) => {
const rounds = roRounds(c);
const accent = exerciseColor(theme, roGlobalIdx(draft, ci, 0));
const ghostCircuit = ciDrag && drag.ci === ci;
// A round drag draws its own cage: the owning circuit lights up, every
// other circuit drops to grayscale. Readable, scrollable, plainly out of
// bounds — no sentence needed to say a round can't leave its circuit.
const boxed = rdDrag && drag.ci === ci;
const caged = rdDrag && drag.ci !== ci;
// Exercise order is circuit-wide, so zones live in exactly one bucket
// per circuit: the round you grabbed from, or the first one elsewhere.
const zoneRound = exDrag ? (ci === drag.ci ? Math.min(drag.ri || 0, rounds - 1) : 0) : -1;
return (
{ciDrag ? (
// Circuit drag collapses the workout to one bar per circuit, so a
// trip from first to last is a short drag instead of a long haul.
)}
{rdDrag && drag.ci === ci && !roSkip(0, drag.ri) && (
roMoveRound(draft, ci, drag.ri, 0)} />
)}
{c.exercises.length > 0 && Array.from({ length: rounds }).map((_, r) => {
// Every exercise index gets a slot, even one with no set in this
// round — the row is skipped, the landing spot is not.
const items = c.exercises.map((ex, ei) => ({ ex, ei, s: ex.sets[r] }));
const ghostRound = rdDrag && drag.ci === ci && drag.ri === r;
const ordering = exDrag && r === zoneRound;
return (
)}
{ciDrag && !roSkip(ci + 1, drag.ci) && (
roMoveCircuit(draft, drag.ci, ci + 1)} />
)}
);
})}
{/* save modes — temporary vs permanent. Its own bar, hard edge, no fade. */}
{/* Three real choices, not one hero and two afterthoughts. Same shell,
same size; only the permanent one is tinted, because it is the only
one that changes tomorrow's workout. */}
{moves ? `${moves} move${moves === 1 ? '' : 's'} — choose how long it sticks` : 'Nothing moved yet'}