// fc-cycle.jsx, cycle-intelligence UI (Logic & Flows §15).
// Building blocks the Menstrual Cycle screen composes by mode:
// CycleModeSeg , natural / contraception / absent selector (§15.1)
// PhaseIndicator , where you are + plain-language read (§15.3)
// AbsentCycleCard , supportive "cycle adjustments paused" state (§15.2)
// ContraceptionCard, why the phase model is off on HC (§15.1)
// LearnedCard , learned vs population, confidence (§15.4)
// SymptomCheckCard , quick log + period confirm/flag (§15.3)
// Theme-aware via CSS vars; reuses window primitives.
const { Card, Eyebrow, GroupedList, Row, Toggle, SectionHeader } = window;
// segmented control for the three cycle modes
function CycleModeSeg({ value, onChange }) {
const opts = [['natural', 'Natural'], ['contraception', 'On contraception'], ['absent', 'No / irregular']];
return (
{opts.map(([k, lbl]) => {
const on = k === value;
return (
);
})}
);
}
// the four-phase ring + "you are here"
function PhaseRing({ size = 64, dayToday, length }) {
const CP = window.CYCLE_PHASE;
const segs = [['menstrual', 0, 5], ['follicular', 5, 13], ['ovulation', 13, 16], ['luteal', 16, length]];
const r = size / 2 - 5, cx = size / 2, cy = size / 2, C = 2 * Math.PI * r;
const arc = (a, b, col) => {
const off = (a / length) * C, len = ((b - a) / length) * C;
return ;
};
const ang = (dayToday / length) * 2 * Math.PI - Math.PI / 2;
const mx = cx + r * Math.cos(ang), my = cy + r * Math.sin(ang);
return (
);
}
function PhaseIndicator({ inverted = false }) {
const FC = window.FC, CP = window.CYCLE_PHASE;
const phaseKey = window.cyclePhaseAt(FC.todayDay);
const ph = CP[phaseKey];
const hold = window.cycleOffsetKg(FC.todayDay);
const fg = inverted ? 'var(--paper)' : 'var(--ink)';
const sub = inverted ? 'rgba(246,244,239,0.78)' : 'var(--ink-2)';
return (
Current phaseDAY {FC.cycle.dayToday} / {FC.cycle.length}
{ph.label}
{hold > 0.15 ? <>Expect to hold about +{hold.toFixed(1)} kg of water. Read the trend, not the daily scale.
: hold < -0.15 ? <>Water’s at its lowest, readings run a touch light right now.
: <>Water-neutral phase. The scale reads close to true.}
);
}
// Compact dashboard glance, surfaces the cycle read on Today and links through
// to the full cycle section (Zoe's note). Only shown when cycle tracking is on.
function CycleGlanceRow({ onOpen }) {
const FC = window.FC, CP = window.CYCLE_PHASE;
const phaseKey = window.cyclePhaseAt(FC.todayDay), ph = CP[phaseKey];
const hold = window.cycleOffsetKg(FC.todayDay);
const note = hold > 0.15 ? <>Holding about +{hold.toFixed(1)} kg water. Read the trend
: hold < -0.15 ? 'Water at its low. Readings run light' : 'Water-neutral. Scale reads true';
return (
);
}
// Absent / paused-cycle state, supportive and matter-of-fact, NOT a medical
// warning. Losing your period through hard training and cutting is a reality for
// many fighters; selecting "no / irregular" simply switches cycle adjustments off
// (prior cycle data is kept) and offers a one-tap way to flag when it returns.
function AbsentCycleCard({ severity = 'amenorrhea', onLearn = null }) {
const watch = severity === 'watch';
const eyebrow = watch ? 'Period running late' : 'Cycle adjustments paused';
const head = watch ? 'Looks like your period’s running late.'
: 'Cycle tracking is switched off.';
const body = watch
? 'Your period’s just late, no stress. Cycle adjustments stay paused until you log the next one, so a late start can’t skew your targets. Tap below when it arrives.'
: 'Hard training and big cuts stop a lot of fighters’ periods. It’s common. Cycle adjustments are off so they can’t skew your targets, and your past data’s saved for when things settle.';
return (
{eyebrow}
{head}
{body}
);
}
function ContraceptionCard() {
return (
On hormonal contraception
We don’t apply cycle phases on hormonal birth control.
Birth control flattens the natural hormone swing, so the calendar model doesn’t fit. Any effect on water is small and personal, so we read your logged symptoms instead.
} note="If your method has a break week, flag it and we’ll watch for water then." last />
Your plan now uses your number, not the textbook one. The more you log, the sharper this gets. Adjust manually
);
}
// Cycle placement aid (§15.3). The job: help a fighter identify WHERE she is in
// her cycle, because cycles run irregular for so many in this sport and the
// calendar drifts. The payoff is always the same, the water swing is already
// built into the weight plan, so an unexpected scale bump never threatens making
// weight. NOT training, NOT readiness (future), NOT a medical diagnosis. Period
// confirm is the hard anchor; a few water-relevant body signs place you when the
// calendar can't. Works in natural / contraception / irregular modes.
const _PLACE_SIGNS = [
['Bloated / puffy', 'luteal'], ['Breast tenderness', 'luteal'], ['Cravings', 'luteal'],
['Cramps', 'menstrual'], ['Feeling light', 'follicular'],
];
function _holdAt(cycleDay) {
const { length, retention } = window.FC.cycle;
return +(retention * -Math.cos(2 * Math.PI * (cycleDay - 10) / length)).toFixed(2);
}
// representative cycle day per phase → so the water figure is the model's, not invented
const _PHASE_DAY = { menstrual: 2, follicular: 9, ovulation: 14, luteal: 24 };
const _PLACE_READ = {
luteal: { tone: 'var(--accent)', read: (h) => `You’ll hold about +${h.toFixed(1)} kg of water through this stretch. It’s already in your weekly target, so a higher scale number isn’t a setback. It clears once your period starts.` },
menstrual: { tone: 'var(--accent)', read: (h) => `Water clings for the first day or two of your period, then drops away. Your plan already expects this, so don’t chase a stalled scale right now.` },
follicular: { tone: 'var(--t-green)', read: (h) => `The fresh week after your period. Water sits at its lowest, so the scale reads close to true. A clean point to see where you really are.` },
ovulation: { tone: 'var(--t-green)', read: (h) => `Mid-cycle. Water’s low to neutral around now, so the scale’s reading honest.` },
};
function SymptomCheckCard() {
const FC = window.FC, CP = window.CYCLE_PHASE;
const [picked, setPicked] = React.useState(['Bloated / puffy', 'Breast tenderness']);
const [bleeding, setBleeding] = React.useState(false);
const toggle = (s) => setPicked(l => l.includes(s) ? l.filter(x => x !== s) : [...l, s]);
// place the athlete: a logged bleed is the hard anchor; else the body signs vote.
let est = null;
if (bleeding) est = 'menstrual';
else if (picked.length) {
const score = {};
picked.forEach(s => { const ph = (_PLACE_SIGNS.find(x => x[0] === s) || [])[1]; if (ph) score[ph] = (score[ph] || 0) + 1; });
est = Object.keys(score).sort((a, b) => score[b] - score[a])[0] || null;
}
const calKey = window.cyclePhaseAt(FC.todayDay); // what the calendar thinks
const hold = est ? Math.abs(_holdAt(_PHASE_DAY[est])) : 0;
const R = est ? _PLACE_READ[est] : null;
const agrees = est && est === calKey;
return (
Where are you?Optional
Cycles run irregular for a lot of fighters, so the calendar drifts. Tell us what your body’s doing and we’ll place you.
{/* hard anchor: a logged period re-fixes the dates */}
My period started
The one sure signal. It re-anchors your dates.
{/* soft signs: place you when the calendar can't */}
Or tap what your body’s doing today
{_PLACE_SIGNS.map(([s]) => {
const on = picked.includes(s);
return ;
})}
{/* the placement + the throughline: it's already in your plan */}
{R ? (
Looks like {CP[est].label.toLowerCase()}{bleeding ? 'Confirmed' : 'Estimate'}
{R.read(hold)}
{/* does it match the calendar? */}
{agrees
? <>Lines up with your calendar, day {FC.cycle.dayToday} of {FC.cycle.length}. Nothing to change.
: <>Your calendar had you in {CP[calKey].label.toLowerCase()}. Going by your body, we’ll nudge the plan to match, re-anchor dates.}
) : (
Log your period or tap a sign and we’ll place you, then show how that water swing is handled in your plan.
)}
);
}
Object.assign(window, { CycleModeSeg, PhaseRing, PhaseIndicator, CycleGlanceRow, AbsentCycleCard, RedSCard: AbsentCycleCard, ContraceptionCard, LearnedCard, SymptomCheckCard });
// ── Cycle forecast graph (§15.3/§15.4) ───────────────────────────────────────
// Forward-looking: predicted water swing across the cycle (personalised), your
// recent actual weigh-ins (de-trended) against it, a YOU-ARE-HERE marker, and
// what's coming. Answers "is this normal, and what should I expect next?"
function _cfsp(pts, k = 0.6) {
if (pts.length < 2) return '';
let d = `M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[Math.max(0, i - 1)], p1 = pts[i], p2 = pts[i + 1], p3 = pts[Math.min(pts.length - 1, i + 2)];
d += ` C ${(p1[0] + (p2[0] - p0[0]) * k / 3).toFixed(2)} ${(p1[1] + (p2[1] - p0[1]) * k / 3).toFixed(2)}, ${(p2[0] - (p3[0] - p1[0]) * k / 3).toFixed(2)} ${(p2[1] - (p3[1] - p1[1]) * k / 3).toFixed(2)}, ${p2[0].toFixed(2)} ${p2[1].toFixed(2)}`;
}
return d;
}
function FCCycleForecastChart({ width = 331, height = 210 }) {
const FC = window.FC, L = window.LEARNED_CYCLE, CP = window.CYCLE_PHASE;
const len = FC.cycle.length, dayToday = FC.cycle.dayToday;
const amp = L.blendKg, peakDay = L.learnedPeakDay, band = 0.45; // ± uncertainty
// expected water offset (kg above/below de-trended baseline) at a cycle day
const off = (d) => amp * Math.cos(2 * Math.PI * (((d - peakDay) % len + len) % len > len / 2 ? (((d - peakDay) % len + len) % len) - len : (((d - peakDay) % len + len) % len)) / len);
const phaseOf = (d) => { const c = ((d % len) + len) % len; return c < 5 ? 'menstrual' : c < 13 ? 'follicular' : c < 16 ? 'ovulation' : 'luteal'; };
const back = 9, fwd = 18; // window: -9d … +18d around today
const d0 = dayToday - back, d1 = dayToday + fwd;
const W = width, H = height, padL = 8, padR = 38, padT = 26, padB = 30;
const innerW = W - padL - padR, innerH = H - padT - padB;
const yMax = amp + band + 0.35, yMin = -(amp + band + 0.35);
const xS = (d) => padL + ((d - d0) / (d1 - d0)) * innerW;
const yS = (v) => padT + ((yMax - v) / (yMax - yMin)) * innerH;
const zeroY = yS(0);
// sampled predicted curve + band
const samp = []; for (let d = d0; d <= d1; d++) samp.push(d);
const mid = samp.map(d => [xS(d), yS(off(d))]);
const top = samp.map(d => [xS(d), yS(off(d) + band)]);
const bot = samp.map(d => [xS(d), yS(off(d) - band)]);
const bandPath = 'M ' + top.map(p => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' L ') + ' L ' + bot.reverse().map(p => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' L ') + ' Z';
// recent actual de-trended weigh-ins (sit inside the band → "normal")
const actualDays = [dayToday - 8, dayToday - 6, dayToday - 4, dayToday - 2, dayToday];
const jit = [-0.10, 0.12, -0.06, 0.14, 0.05];
const actual = actualDays.map((d, i) => [d, off(d) + jit[i]]);
const todayActual = actual[actual.length - 1];
const inBand = Math.abs(todayActual[1] - off(dayToday)) <= band;
// phase bands across window
const segs = []; let segStart = d0, segPh = phaseOf(d0);
for (let d = d0 + 1; d <= d1; d++) { const ph = phaseOf(d); if (ph !== segPh || d === d1) { segs.push([segStart, d, segPh]); segStart = d; segPh = ph; } }
// upcoming peak (max offset strictly ahead of today)
let peak = null; for (let d = dayToday + 1; d <= d1; d++) { if (!peak || off(d) > peak.v) peak = { d, v: off(d) }; }
return (
);
}
function FCCycleForecastCard({ width = 331 }) {
const FC = window.FC, L = window.LEARNED_CYCLE, CP = window.CYCLE_PHASE, len = FC.cycle.length, dayToday = FC.cycle.dayToday;
const amp = L.blendKg, peakDay = L.learnedPeakDay;
const off = (d) => amp * Math.cos(2 * Math.PI * (((d - peakDay) % len + len) % len > len / 2 ? (((d - peakDay) % len + len) % len) - len : (((d - peakDay) % len + len) % len)) / len);
const todayOff = off(dayToday);
const phaseName = (d) => { const c = ((d % len) + len) % len; return c < 5 ? 'menstrual' : c < 13 ? 'follicular' : c < 16 ? 'ovulation' : 'luteal'; };
// scan ahead for the next turning point (peak or trough)
let peak = { d: dayToday, v: -99 }, trough = { d: dayToday, v: 99 };
for (let d = dayToday + 1; d <= dayToday + 21; d++) { if (off(d) > peak.v) peak = { d, v: off(d) }; if (off(d) < trough.v) trough = { d, v: off(d) }; }
const nearPeakNow = todayOff > 0 && (peak.v - todayOff) < 0.12; // already at/over the crest
const plural = (n) => `${n} day${n === 1 ? '' : 's'}`;
let coming;
if (nearPeakNow) {
coming = <>Coming up: your water’s peaking now. It should ease over the next week toward your {phaseName(trough.d)} low. The scale will drift down. That part is fluid, not fat.;
} else {
const daysToPeak = peak.d - dayToday;
coming = <>Coming up: your water peaks ~+{peak.v.toFixed(1)} kg in {plural(daysToPeak)} ({phaseName(peak.d)}). The scale will climb then. That’s fluid, not fat, so hold the plan.;
}
const head = todayOff > 0.15
? `You’re holding about +${todayOff.toFixed(1)} kg of water right now, and that’s exactly what we’d expect.`
: todayOff < -0.15
? `Water’s near its low. Readings run a touch light right now, which is normal.`
: `You’re water-neutral today. The scale’s reading close to true.`;
return (