/* global React */ // Abstract editorial line-art basketball figures. // No fills on the body — single-weight ink strokes only. Think magazine // illustration: open-circle head, clean stick-figure body, ball drawn as // a simple line circle, jersey number rendered as a typographic element // floating beside the figure rather than printed on a torso. // // Exposes window.SilhouettePortrait (kept name for compatibility). (function () { const INK = "#1a1815"; const STROKE_W = 2.25; const HEAD_R = 9; function hexToRgb(hex) { const h = hex.replace("#", ""); return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]; } function lumOf(c1) { const [r, g, b] = hexToRgb(c1); return (0.299 * r + 0.587 * g + 0.114 * b) / 255; } // ─── Stroke primitive ─── function S({ d, w = STROKE_W }) { return ( ); } // ─── Jersey: flat color block on the torso, bounded by ink strokes ─── // Drawn as a single closed shape so the body silhouette stays consistent // with the line-art language. The number is rendered on top in a contrasting // ink. shoulderL/R are the shoulder endpoints; hipL/R are the hip endpoints. function Jersey({ shoulderL, shoulderR, hipL, hipR, c1, c2, num }) { const txt = lumOf(c1) > 0.6 ? "#1a1a1a" : "#f5efe0"; const cx = (shoulderL.x + shoulderR.x) / 2; const cy = (shoulderL.y + hipL.y) / 2 + 4; const numStr = String(num); // Tank-top neckline: small dip in the middle of the shoulder line const necklineDrop = 5; const neckMidL = { x: cx - 5, y: shoulderL.y + necklineDrop }; const neckMidR = { x: cx + 5, y: shoulderR.y + necklineDrop }; const d = ` M ${shoulderL.x} ${shoulderL.y} L ${neckMidL.x} ${neckMidL.y} L ${neckMidR.x} ${neckMidR.y} L ${shoulderR.x} ${shoulderR.y} L ${hipR.x} ${hipR.y} L ${hipL.x} ${hipL.y} Z`; return ( {/* fill */} {/* hem accent stripe */} {/* ink outline (matches body line weight) */} {/* number */} 1 ? 18 : 22} fill={txt} style={{ letterSpacing: "-0.04em" }} > {numStr} ); } // ─── Open-circle head with thin neck stroke ─── function Head({ cx, cy, neckTo }) { return ( {neckTo && } ); } // ─── Ball: just an outline circle with two seam curves ─── function Ball({ cx, cy, r = 9 }) { return ( ); } // ─── Pose 1: Jump shot ─── function PoseShoot({ c1, c2, num }) { return ( {/* shooting arm up & extended */} ~~{/* guide arm bent */} ~~{/* legs */} ~~{/* jersey covers spine + shoulders + hips */} {/* ball at release */}~~~~~~ ); } // ─── Pose 2: Dunk (airborne, both arms up) ─── function PoseDunk({ c1, c2, num }) { return ( {/* both arms straight up */} ~~{/* tucked legs (mid-air) */} ~~{/* ball at top */} {/* implied rim line */}~~~~ ); } // ─── Pose 3: Driving / dribbling ─── function PoseDrive({ c1, c2, num }) { return ( {/* off-arm extended forward */} ~~{/* dribble arm down */} ~~{/* stride legs */} ~~{/* ball mid-bounce */}~~~~~~ ); } // ─── Pose 4: Chest pass ─── function PosePass({ c1, c2, num }) { return ( {/* both arms forward to the left, like releasing a pass */} ~~{/* planted legs */} ~~{/* ball leaving hands */}~~~~ ); } // ─── Pose 5: Defensive stance ─── function PoseDefense({ c1, c2, num }) { return ( {/* arms wide */} ~~{/* wide bent legs */}~~ ); } // ─── Pose 6: Layup ─── function PoseLayup({ c1, c2, num }) { return ( {/* lead arm reaching up & across */} ~~{/* trailing arm down */} ~~{/* scissored mid-air legs */} ~~{/* ball at fingertips */} {/* implied backboard */}~~~~~~ ); } const POSES = [PoseShoot, PoseDunk, PoseDrive, PosePass, PoseDefense, PoseLayup]; function SilhouettePortrait({ row, size = 320, paletteFor, jerseyNumFor, hashStr }) { if (!row) { return ( ); } const [c1, c2] = paletteFor(row); const num = jerseyNumFor(row); const safeKey = (row.n + row.s).replace(/\W/g, ""); const Pose = POSES[hashStr(row.n + row.s) % POSES.length]; const numStr = String(num); // Number color: the team's primary, but darken if it's too light against // the warm cream background. const numColor = lumOf(c1) > 0.7 ? c2 : c1; return ( ); } window.SilhouettePortrait = SilhouettePortrait; })();