/* ── Anatomy SVG ──────────────────────────────────────────────────── */
/* Side profile, facing left. ViewBox 360 × 640. Hip pivot (180, 390). */
const HIP = { x: 180, y: 390 };
/* Helper: rotate a point around hip pivot by angle (deg) */
function rot(x, y, deg, cx = HIP.x, cy = HIP.y) {
const r = (deg * Math.PI) / 180;
const dx = x - cx, dy = y - cy;
return { x: cx + dx * Math.cos(r) - dy * Math.sin(r),
y: cy + dx * Math.sin(r) + dy * Math.cos(r) };
}
/* Lumbar spine path: morphs from gentle to hyperlordotic */
function lumbarPath(curveK) {
// start at sacrum top, end at T12. Anterior = lower x (left)
const x0 = 178, y0 = 380;
const x1 = 175, y1 = 195;
const cxA = 178 - 22 * curveK; // mid anterior bow
const cyA = 320;
const cxB = 178 - 18 * curveK;
const cyB = 240;
return `M ${x0} ${y0} C ${cxA} ${cyA}, ${cxB} ${cyB}, ${x1} ${y1}`;
}
/* Vertebrae positions sampled along the lumbar curve */
function lumbarVerts(curveK) {
const offset = 22 * curveK;
return [
{ x: 175, y: 200, label: 'L1' },
{ x: 175 - offset*0.55, y: 240, label: 'L2' },
{ x: 175 - offset*0.95, y: 280, label: 'L3' },
{ x: 175 - offset*0.85, y: 320, label: 'L4' },
{ x: 175 - offset*0.45, y: 358, label: 'L5' }
];
}
/* Pelvis profile (innominate side view), drawn around hip joint (180,390).
This entire group rotates by the tilt angle. */
function PelvisGroup({ tilt, highlight }) {
return (
{/* Iliac wing — large flat bone */}
{/* iliac crest highlight */}
{/* Pubic ramus */}
{/* Ischium */}
{/* Acetabulum hint */}
{/* ASIS marker — anterior superior iliac spine */}
{/* PSIS marker — posterior superior iliac spine */}
{/* Labels (rotate-counter so they read upright? leave rotated for now, with tilt small) */}
ASIS
PSIS
);
}
/* Femur — fixed (vertical) under hip joint; doesn't rotate with pelvis */
function Femur() {
return (
{/* head + neck */}
{/* greater trochanter */}
{/* shaft */}
);
}
/* Vertebrae stack — drawn from interpolated positions */
function Spine({ curveK }) {
const verts = lumbarVerts(curveK);
return (
{/* sacrum (rotates with pelvis but drawn fixed-ish here for simplicity) */}
{/* spinal ligament line (curve) */}
{/* vertebrae */}
{verts.map((v, i) => (
{/* spinous process (back-pointing) */}
{/* label */}
{v.label}
))}
{/* T12 stub above */}
);
}
/* ── Muscles ──────────────────────────────────────────────────────── */
/* Each muscle is a thick stroked path. Color/glow depend on its current state. */
function muscleStyleProps(stateName) {
const s = STATE_STYLE[stateName] || STATE_STYLE.neutral;
return {
fill: s.fill,
glow: s.glow,
ring: s.ring
};
}
function MuscleBand({ id, d, stateName, width=14, selected, onClick }) {
const { fill, glow, ring } = muscleStyleProps(stateName);
const animation = glow !== 'none' ? `${glow} 1.6s ease-in-out infinite` : 'none';
return (
{/* fat invisible hit area */}
{/* outer ring (selection) */}
{selected && }
{/* main muscle band */}
{/* striations: thin lighter line */}
);
}
/* Compute muscle paths given current pelvis tilt and lumbar curvature */
function buildMusclePaths(tilt, curveK) {
// Static origins on spine (interpolate by curve)
const verts = lumbarVerts(curveK);
const L2 = verts[1], L4 = verts[3];
// Pelvis-bound attachment points (rotate with pelvis)
const asisRaw = { x: 130, y: 358 };
const psisRaw = { x: 232, y: 308 };
const iliacCrestPostRaw = { x: 222, y: 285 };
const iliacCrestAntRaw = { x: 152, y: 282 };
const aiisRaw = { x: 138, y: 372 };
const ischialRaw = { x: 200, y: 442 };
const pubicRaw = { x: 142, y: 425 };
const asis = rot(asisRaw.x, asisRaw.y, tilt);
const psis = rot(psisRaw.x, psisRaw.y, tilt);
const iliacP = rot(iliacCrestPostRaw.x, iliacCrestPostRaw.y, tilt);
const iliacA = rot(iliacCrestAntRaw.x, iliacCrestAntRaw.y, tilt);
const aiis = rot(aiisRaw.x, aiisRaw.y, tilt);
const ischial = rot(ischialRaw.x, ischialRaw.y, tilt);
const pubic = rot(pubicRaw.x, pubicRaw.y, tilt);
// Femur attachment (fixed, doesn't rotate)
const lesserTroch = { x: 192, y: 412 };
const itBand = { x: 200, y: 470 };
const tibia = { x: 192, y: 615 };
const patella = { x: 175, y: 600 };
const ribs = { x: 170, y: 175 };
return {
iliopsoas: `M ${L2.x} ${L2.y} Q ${(L4.x+asis.x)/2 - 4} ${(L4.y+360)/2} ${asis.x + 22} ${asis.y + 18} T ${lesserTroch.x} ${lesserTroch.y}`,
rectusFemoris: `M ${aiis.x - 2} ${aiis.y + 4} Q ${175} ${500} ${patella.x} ${patella.y}`,
erectorSpinae: `M ${iliacP.x - 4} ${iliacP.y + 8} C ${iliacP.x + 6} ${320} ${190} ${250} ${182} ${ribs.y}`,
glutes: `M ${iliacP.x} ${iliacP.y + 4} C ${iliacP.x + 18} ${360} ${230} ${440} ${itBand.x + 18} ${itBand.y}`,
abs: `M ${pubic.x - 4} ${pubic.y - 18} C ${145} ${300} ${150} ${230} ${ribs.x - 18} ${ribs.y + 10}`,
hamstrings: `M ${ischial.x + 2} ${ischial.y - 4} Q ${210} ${520} ${tibia.x + 6} ${tibia.y}`,
};
}
/* Force-vector arrow overlay per muscle (only shows in tilted/compensated state) */
function ForceArrow({ from, to, color, animate }) {
const dx = to.x - from.x, dy = to.y - from.y;
const len = Math.hypot(dx, dy);
const ux = dx / len, uy = dy / len;
// arrow head
const hx = to.x, hy = to.y;
const px = -uy, py = ux; // perpendicular
const a1x = hx - ux*8 + px*4, a1y = hy - uy*8 + py*4;
const a2x = hx - ux*8 - px*4, a2y = hy - uy*8 - py*4;
return (
);
}
/* Background body silhouette — soft tan blob */
function BodySilhouette({ tilt, curveK }) {
const offset = 22 * curveK;
// Front of trunk anterior bow follows lumbar
return (
);
}
/* The full anatomy figure */
function AnatomyFigure({ phase, selected, onSelect }) {
// Side profile faces LEFT (anterior = low x). Anterior pelvic tilt = ASIS goes
// forward+down, PSIS goes back+up → in SVG (Y-down) that's a COUNTER-CLOCKWISE
// rotation around the hip pivot, i.e. a NEGATIVE rotation angle.
const tilt = phase === 'normal' ? -4 : -16; // rotation degrees (negative = anterior tilt)
const curveK = phase === 'normal' ? 1.0 : 1.65; // lumbar lordosis multiplier
const paths = buildMusclePaths(tilt, curveK);
// Force arrows per phase
const showForce = phase !== 'normal';
const compMode = phase === 'compensated';
return (
);
}
/* Tilt-angle wedge — shows the angle between the horizontal and the ASIS-PSIS line */
function TiltAngleWedge({ tilt, displayDeg }) {
// ASIS rotated, PSIS rotated; draw a small ghost showing horizontal reference
const asis = rot(130, 358, tilt);
const psis = rot(232, 308, tilt);
const midX = (asis.x + psis.x) / 2;
const midY = (asis.y + psis.y) / 2;
return (
{/* Horizontal reference (dashed) */}
{/* ASIS-PSIS line */}
{/* Angle label */}
{Math.round(displayDeg)}°
);
}
/* ── Muscle labels overlay ──────────────────────────────────────── */
/* Always show muscle name; in non-neutral states show status badge
(紧张 / 代偿 / 弱化 / 拉长). Clicking the label selects that muscle. */
const STATUS_LABEL = {
tight: { cn: '紧张', en: 'TIGHT' },
overworking: { cn: '代偿', en: 'OVER' },
weak: { cn: '弱化', en: 'WEAK' },
lengthened: { cn: '拉长', en: 'LENG' },
neutral: null
};
function MuscleLabels({ phase, selected, onSelect }) {
// anchor = small dot landing on the muscle band
// label side / position chosen to avoid overlap
const labels = [
{ id: 'abs', side: 'L', lx: 88, ly: 240, ax: 142, ay: 268 },
{ id: 'iliopsoas', side: 'L', lx: 88, ly: 348, ax: 152, ay: 358 },
{ id: 'rectusFemoris', side: 'L', lx: 88, ly: 510, ax: 162, ay: 525 },
{ id: 'erectorSpinae', side: 'R', lx: 272, ly: 220, ax: 215, ay: 256 },
{ id: 'glutes', side: 'R', lx: 272, ly: 405, ax: 240, ay: 408 },
{ id: 'hamstrings', side: 'R', lx: 272, ly: 542, ax: 218, ay: 538 },
];
return (
{labels.map(l => {
const m = MUSCLES[l.id];
const stateName = m.states[phase];
const sty = STATE_STYLE[stateName];
const isSelected = selected === l.id;
const status = STATUS_LABEL[stateName];
const onLeft = l.side === 'L';
const txAnchor = onLeft ? 'end' : 'start';
// leader endpoint near label
const leadX = onLeft ? l.lx + 4 : l.lx - 4;
// status pill geometry
const pillW = 36, pillH = 14;
const pillX = onLeft ? l.lx - pillW : l.lx;
const pillTextX = onLeft ? l.lx - pillW / 2 : l.lx + pillW / 2;
return (
onSelect(l.id)} style={{ cursor: 'pointer' }}>
{/* leader line */}
{/* anchor dot on the muscle */}
{/* dot at label end */}
{/* muscle name */}
{m.cn}
{/* status pill (only in non-neutral states) */}
{status && (
{status.cn}
)}
);
})}
);
}
Object.assign(window, { AnatomyFigure, HIP, MuscleLabels });