/* global React */
/*
Training mode — the radial wheel + slot-pair training panel.
Reads PORT_SLOTS / PORT_ELEM / PORT_RANK_LABEL / pad from window.
*/
const { useState: useTrainState, useEffect: useTrainEffect, useRef: useTrainRef } = React;
function TrainingMode({ state, dispatch, resolving }) {
const PORT_SLOTS = window.PORT_SLOTS;
const PORT_ELEM = window.PORT_ELEM;
const Num = window.Num;
const slot = PORT_SLOTS[state.slotIdx];
// Default the trained element to an UNLOCKED one: prefer this slot's home
// element, else the first unlocked around the ring (the locked arc-ends
// shouldn't strand the selector).
function defaultTrain() {
const home = slot.pair.find(e => state.elements[e]?.unlocked);
if (home) return home;
return (window.SH_RING || []).find(e => state.elements[e]?.unlocked) || 'fire';
}
const [trainMain, setTrainMain] = useTrainState(defaultTrain());
// Reset selection if the active slot changes (slot tick or first render).
useTrainEffect(() => { setTrainMain(defaultTrain()); }, [state.slotIdx]);
const [hoverEl, setHoverEl] = useTrainState(null);
const [floaty, setFloaty] = useTrainState([]);
const [cooldown, setCooldown] = useTrainState(false);
// Press-and-hold to train: hold a vein ~0.5s to commit. Juicier than a
// select-then-confirm second button, and the hold itself is the cancel window
// (drag off / release early to abort). A quick tap just focuses the wheel.
const HOLD_MS = 500;
const [holdEl, setHoldEl] = useTrainState(null);
const [holdPct, setHoldPct] = useTrainState(0);
const holdRAF = useTrainRef(null);
const holdTimer = useTrainRef(null);
useTrainEffect(() => () => {
if (holdRAF.current) cancelAnimationFrame(holdRAF.current);
if (holdTimer.current) clearTimeout(holdTimer.current);
}, []);
function cancelHold() {
if (holdRAF.current) { cancelAnimationFrame(holdRAF.current); holdRAF.current = null; }
if (holdTimer.current) { clearTimeout(holdTimer.current); holdTimer.current = null; }
setHoldEl(null); setHoldPct(0);
}
function startHold(eid) {
if (cooldown || resolving) return;
if (!state.elements[eid]?.unlocked) return;
setHoverEl(eid); // drive the wheel preview while holding
cancelHold();
setHoldEl(eid); setHoldPct(0);
const start = performance.now();
const tick = (now) => { // RAF drives the visual fill only
setHoldPct(Math.min(1, (now - start) / HOLD_MS));
holdRAF.current = requestAnimationFrame(tick);
};
holdRAF.current = requestAnimationFrame(tick);
holdTimer.current = setTimeout(() => { // timer is the reliable commit
holdTimer.current = null;
if (holdRAF.current) { cancelAnimationFrame(holdRAF.current); holdRAF.current = null; }
setHoldEl(null); setHoldPct(0);
commitTrain(eid);
}, HOLD_MS);
}
function commitTrain(eid) {
if (cooldown || resolving) return;
if (!state.elements[eid]?.unlocked) return;
setCooldown(true); setTimeout(() => setCooldown(false), 360);
const C = window.SH_C;
const main = PORT_ELEM[eid];
const pure = !!state.town.pureTraining;
const onTime = window.SH_HOME_SLOT[eid] === slot.id && !(state.onTimeUsedToday || []).includes(eid);
const mainGain = pure ? C.PURE_MAIN : C.MAIN;
const id1 = Math.random();
const floats = [{ id: id1, text: `+${mainGain} ${main.name}`, color: main.color, x: 42, y: 50 }];
setTimeout(() => setFloaty(f => f.filter(x => x.id !== id1)), 900);
const Nn = window.SH_ringNeighbor(eid);
if (!pure && Nn && state.elements[Nn]?.unlocked) {
const leak = onTime ? C.LEAK_ON : C.LEAK_OFF;
const id2 = id1 + 0.0007;
floats.push({ id: id2, text: `+${leak} ${PORT_ELEM[Nn].name}`, color: PORT_ELEM[Nn].color, x: 60, y: 63 });
setTimeout(() => setFloaty(f => f.filter(x => x.id !== id2)), 1000);
}
setFloaty(f => [...f, ...floats]);
dispatch({ type: 'TRAIN', main: eid });
}
function doBond() {
if (cooldown || resolving) return;
setCooldown(true); setTimeout(() => setCooldown(false), 360);
const id = Math.random();
setFloaty(f => [...f, { id, text: '+12 Bond', color: 'var(--gold)', x: 50, y: 60 }]); // floaty still reads the meter name
setTimeout(() => setFloaty(f => f.filter(x => x.id !== id)), 900);
dispatch({ type: 'CARE_ACTION', kind: 'bond' });
}
// Rest / Feed — the same care actions the Needs panel & expedition use, surfaced
// HERE so the trainer can sleep (push the day) and feed without leaving Training.
// Rest & Pet spend a slot (advance the clock); Feed is the free interstitial.
function doRest() {
if (cooldown || resolving) return;
setCooldown(true); setTimeout(() => setCooldown(false), 360);
const id = Math.random();
const atSleep = (state.slotIdx % 4) === (state.sleepSlot ?? 0);
setFloaty(f => [...f, { id, text: atSleep ? 'slept · fatigue cleared' : 'nap · \u221260 fatigue', color: 'var(--ok)', x: 50, y: 58 }]);
setTimeout(() => setFloaty(f => f.filter(x => x.id !== id)), 900);
dispatch({ type: 'CARE_ACTION', kind: 'rest' });
}
function doFeed() {
if (resolving) return;
if (state.care.fullness >= 90 || state.resources.staple < 1) return;
const id = Math.random();
setFloaty(f => [...f, { id, text: '+22 fullness', color: 'var(--stamp-amber)', x: 50, y: 58 }]);
setTimeout(() => setFloaty(f => f.filter(x => x.id !== id)), 900);
dispatch({ type: 'CARE_ACTION', kind: 'feed', food: 'staple' });
}
return (
{/* LEFT — Radial wheel as the focal display */}
Aetheric Wheel · The Eight
{Object.values(state.elements).filter(e => e.unlocked).length} ATTUNED
{floaty.map(f => (
{f.text}
))}
{/* RIGHT — care glance, slot pair training, veins */}
);
}
// ====================================================================
// ElementRadial — informational 8-spoke wheel. No active-slot highlight,
// no gate copy on locked elements (the player learns those through the town).
// ====================================================================
function ElementRadial({ state, slot, trainMain, setTrainMain, previewMain, onHover, size = 480, fill = false }) {
const PORT_ELEM = window.PORT_ELEM;
const C = window.SH_C;
const cx = size / 2, cy = size / 2;
const rOuter = size * 0.40;
// Radius encodes RAW element value on a √-curve, but normalized to the NEXT
// milestone reached — not the far 400 apex — so the FIRST training is clearly
// visible and the rim always reads as "the next goal". As the top element crosses
// a milestone the wheel rescales outward (the goalposts move). Same curve drives
// polygon, dots, preview AND threshold rings.
const MILE = [C.THRESH.T1, C.THRESH.T2_blend, C.THRESH.T2_pure, C.THRESH.T3];
const topM = Math.max(0, ...Object.values(state.elements).map(e => e.unlocked ? (e.mastery || 0) : 0));
const scaleMax = MILE.find(m => m > topM + 1e-6) || C.THRESH.T3;
const rOf = (m) => Math.min(1, Math.sqrt(Math.max(0, m) / scaleMax)) * rOuter;
// Ring order — CLOCKWISE from the top. Each element leaks into the NEXT.
const order = window.SH_RING;
const ringNeighbor = window.SH_ringNeighbor;
const homeSlot = window.SH_HOME_SLOT;
function spokeAngle(i) { return (i / 8) * Math.PI * 2 - Math.PI / 2; }
// Threshold rings (Mastery gates), drawn on the same curve. Only those INSIDE
// the current scale (below the next milestone) show; the rim itself is scaleMax.
const THRESH_RINGS = MILE.filter(m => m < scaleMax).map(m => ({ m }));
const polyPts = order.map((eid, i) => {
const el = state.elements[eid];
const a = spokeAngle(i);
const r = el.unlocked ? rOf(el.mastery) : 0;
return [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
});
// Preview-ghost polygon — MAIN +10 to the hovered element, plus the
// directional leak into its ring-neighbour (on-time / off-time by slot).
let previewPts = null;
if (previewMain && state.elements[previewMain]?.unlocked) {
const pure = !!state.town.pureTraining;
const mainGain = pure ? C.PURE_MAIN : C.MAIN;
const nbr = ringNeighbor(previewMain);
const onTime = homeSlot[previewMain] === slot.id && !(state.onTimeUsedToday || []).includes(previewMain);
const leak = onTime ? C.LEAK_ON : C.LEAK_OFF;
const previewVal = (eid) => {
const el = state.elements[eid];
if (!el.unlocked) return 0;
let v = el.mastery;
if (eid === previewMain) v += mainGain;
else if (!pure && eid === nbr) v += leak;
return v;
};
previewPts = order.map((eid, i) => {
const a = spokeAngle(i);
return [cx + Math.cos(a) * rOf(previewVal(eid)), cy + Math.sin(a) * rOf(previewVal(eid))];
});
}
// Leak chevrons — 8 small clockwise arrows on a guide circle (each element
// leaks into the next, clockwise). Live (orange) on the arc leaving the
// hovered/selected element.
const rChev = rOuter + 12;
const activeEl = previewMain || trainMain;
// Pad the viewBox so the east/west spoke labels (Earth, the west Sealed
// Vein, …) have room and don't clip at the edges.
const PAD = 96;
return (
);
}
// ====================================================================
// SlotTrainingPanel — explicit MAIN selector + Train / Bond actions
// ====================================================================
function SlotTrainingPanel({ slot, state, holdEl, holdPct, onHoldStart, onHoldCancel, onHover, onFocus, disabled }) {
const PORT_ELEM = window.PORT_ELEM;
const C = window.SH_C;
const order = window.SH_RING;
const homeSlot = window.SH_HOME_SLOT;
const ringNeighbor = window.SH_ringNeighbor;
const pure = !!state.town.pureTraining;
return (
;
}
// ====================================================================
// CareActionBar — the unified care actions (Feed · Rest · Pet), shared with
// the Needs panel & the expedition. Lives in Training so the trainer can sleep
// (push the day) and tend the spirit without switching modes. Feed is the free
// interstitial; Rest & Pet each spend a slot (advance the diurnal clock).
// ====================================================================
function CareActionBar({ state, disabled, extraFeed = 0, onFeed, onRest, onPet }) {
const c = state.care;
const atSleep = (state.slotIdx % 4) === (state.sleepSlot ?? 0);
// extraFeed = road haul carried on an expedition (eaten before town stores).
const totalFeed = state.resources.staple + extraFeed;
const canFeed = c.fullness < 90 && totalFeed > 0;
// The spirit is running low — call attention to Feed (parallels Rest lighting
// up on its sleep window).
const lowFood = c.fullness < 35;
return (
);
}
// (TrainingTypesPanel removed — training-type variants come from buildings
// the town owns; they're not selected here.)
Object.assign(window, { TrainingMode, CareActionBar, CareGlance });