// TopSet — core reusable components
// Plate stack, bar diagram, set rows, rest ring, AMRAP counter, lift cards.
// All scoped via the .ts wrapper class.
// ── icons ────────────────────────────────────────────────────────────
const Ico = {
Today: () => ,
History: () => ,
Progress: () => ,
Settings: () => ,
Plus: () => ,
Minus: () => ,
Check: () => ,
Chevron: () => ,
Grip: () => ,
Flag: () => ,
Bolt: () => ,
Star: () => ,
Sound: () => ,
Heart: () => ,
Close: () => ,
Bar: () => ,
Calc: () => ,
};
// ── status bar (iOS-ish, frameless) ──────────────────────────────────
const StatusBar = ({ time = '9:41', light = true }) => (
{time}
{/* signal */}
{/* wifi */}
{/* battery */}
);
// ── home indicator ──────────────────────────────────────────────────
const Home = () => ;
// ── tab bar ──────────────────────────────────────────────────────────
const TabBar = ({ active = 'today' }) => (
);
// ── plate stack (side view) ──────────────────────────────────────────
// Renders a bar with plates on either side, exactly mirroring loadout.
// `plates` is an array of plate weights per side (heaviest to lightest).
// Plate visual size scales with weight.
// Real-world Olympic proportions, stylised. Plate diameter relative to
// thickness roughly matches Eleiko-style training plates:
// 45 lb 450mm dia × 50mm thick (~9 : 1)
// 25 lb 380mm × 30mm (~12 : 1)
// 10 lb 305mm × 20mm (~15 : 1)
// 5 lb 230mm × 16mm (~14 : 1)
// Thicker plates are markedly taller; "change" plates step down sharply.
const PLATE_VIS = {
45: { h: 152, w: 11, color: '#F4F4F5', ring: '#D4D4D8' },
35: { h: 134, w: 10, color: '#E5E5EA', ring: '#BABABF' },
25: { h: 116, w: 8, color: '#C9C9D1', ring: '#9F9FA8' },
10: { h: 82, w: 5, color: '#9D9DA6', ring: '#7C7C86' },
5: { h: 60, w: 4, color: '#7C7C86', ring: '#5C5C66' },
2.5: { h: 44, w: 3, color: '#5A5A66', ring: '#42424B' },
};
// Side-view of a 7-ft Olympic bar with plates loaded against the shoulder.
// Anatomy: end-cap · sleeve (with rotating-collar ribs) · shoulder · knurled
// shaft · shoulder · sleeve · end-cap. Plates butt the shoulder heaviest-first
// and step outward toward a spring-clip clamp on the outermost plate.
function PlateStack({ plates = [45, 45], bar = 45, height = 180, showWeight = false }) {
const total = bar + plates.reduce((s, p) => s + p * 2, 0);
const W = 460;
const cy = height / 2;
// Plate sizing scales with available height (baseline = 160 vbU).
const sc = height / 160;
const ph = (w) => (PLATE_VIS[w]?.h || PLATE_VIS[2.5].h) * sc;
const pw = (w) => (PLATE_VIS[w]?.w || PLATE_VIS[2.5].w) * sc;
// Bar thicknesses (vbU). Scaled mildly so they read at small heights too.
const SHAFT_T = Math.max(3.5, 5.5 * sc);
const SLEEVE_T = Math.max(11, 15 * sc);
const SHOULDER_T = Math.max(15, 20 * sc);
const ENDCAP_T = Math.max(18, 24 * sc);
// X geometry — keep absolute, the bar should read long.
const xEndL = 6;
const xEndR = W - 6;
const sleeveLx = 10;
const sleeveLe = 140;
const sleeveRx = W - 140;
const sleeveRe = W - 10;
const shoulderLx = sleeveLe;
const shoulderRx = sleeveRx - 6;
const shaftStart = shoulderLx + 6;
const shaftEnd = shoulderRx;
// Plate cascade — heaviest plate first, butted against the shoulder.
const GAP = 1.4, INSET = 1.8;
let curL = sleeveLe - INSET;
const leftPlates = plates.map((w) => {
const t = pw(w);
curL -= t;
const x = curL;
curL -= GAP;
return { weight: w, x, t };
});
let curR = sleeveRx + INSET;
const rightPlates = plates.map((w) => {
const t = pw(w);
const x = curR;
curR += t + GAP;
return { weight: w, x, t };
});
// Spring-clip clamps on the outer edge of each plate stack.
const clipL = leftPlates.length ? leftPlates[leftPlates.length - 1] : null;
const clipR = rightPlates.length ? rightPlates[rightPlates.length - 1] : null;
return (
{showWeight && (
{total} LB
)}
);
}
// ── plate diagram (front view / abstract token stack) ───────────────
// Used in smaller / inline contexts. Shows plates as horizontal tiers.
function PlateTokens({ plates = [45, 45], dense = false }) {
return (
{plates.map((w, i) => {
const v = PLATE_VIS[w] || PLATE_VIS[2.5];
const h = dense ? v.h * 0.17 : v.h * 0.21;
return (
);
})}
{isWarmup ? `W${idx}` : String(idx).padStart(2, '0')}
{weight}
LB
×
{reps}{isAmrap && '+'}
{percent != null && (
{isWarmup ? 'WARMUP · ' : ''}{percent}% TM
)}
{isAmrap && current && (
AMRAP
)}
{done && actual != null && (
{actual}
)}
{done &&
}
{skipped &&
}
{current && !done && !skipped && (
)}
);
}
// ── rest timer ring ──────────────────────────────────────────────────
function RestRing({ size = 56, progress = 0.6, label = '1:24', accent = false, strokeWidth = 4 }) {
const r = (size - strokeWidth) / 2;
const c = 2 * Math.PI * r;
return (
80 ? 22 : 13, fontWeight: 600, letterSpacing: '-0.04em'
}}>{label}
);
}
// ── lift card (Today screen) ─────────────────────────────────────────
function LiftCard({ lift, abbr, weight, reps, isAmrap, status = 'queued', lastAmrap, lastWeight, e1rm }) {
const next = status === 'next';
const done = status === 'done';
const skipped = status === 'skipped';
return (
{/* status corner */}
{done && {lastAmrap}+ @ {lastWeight}}
{done && }
{skipped && }
{next && NEXT}
{/* abbr stamp */}
{abbr}
{lift}
{weight}
LB
×
{reps}{isAmrap && '+'}
{/* tiny plate icon row */}
{next && (
Top set
e1RM ≈ {e1rm}
AMRAP ›
)}
{Array.from({ length: total }).map((_, i) => (
))}
{done}/{total} · {week}
);
}
// ── bar diagram (minimal silhouette for inline use) ────────────────
function BarDiagram({ plates = [45, 45], width = 100 }) {
const W = 230, cy = 28;
const sleeveLx = 6, sleeveLe = 78;
const sleeveRx = W - 78, sleeveRe = W - 6;
const SLEEVE_T = 11;
const tScale = 0.55, hScale = 0.32;
// heaviest plate first, butted against the shoulder
let curL = sleeveLe - 1.4;
const left = plates.map((w) => {
const v = PLATE_VIS[w] || PLATE_VIS[2.5];
const t = v.w * tScale;
curL -= t;
const x = curL;
curL -= 0.8;
return { x, t, v };
});
let curR = sleeveRx + 1.4;
const right = plates.map((w) => {
const v = PLATE_VIS[w] || PLATE_VIS[2.5];
const t = v.w * tScale;
const x = curR;
curR += t + 0.8;
return { x, t, v };
});
return (
);
}
// ── share globals ────────────────────────────────────────────────────
Object.assign(window, {
Ico, StatusBar, Home, TabBar,
PlateStack, PlateTokens, BarDiagram,
SetRow, RestRing, LiftCard, TrainingWeekChip,
});