// ── Sawyer's little people (Jul 26) ── // "I wanna make it so the dots look like people." // One tiny SVG footballer, used on every pitch in the game. Same team colors // as the old dots so you can still tell instantly who is who. (function () { // Every player gets their own skin + hair, picked from their card id so it // never changes between matches. const SKINS = ['#f6cfa6', '#ecb684', '#d59a63', '#b87a45', '#8f5730', '#6b3f22']; const HAIRS = ['#1c1512', '#33231a', '#54341c', '#8a5a2b', '#c99a4a', '#0f0f10', '#7a4a24']; function hashOf(seed) { const s = String(seed); let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return Math.abs(h); } // Darken a #rrggbb by a factor — used for shorts + socks so they match the kit. function shade(hex, f) { const m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim()); if (!m) return hex; const n = parseInt(m[1], 16); const r = Math.round(((n >> 16) & 255) * f); const g = Math.round(((n >> 8) & 255) * f); const b = Math.round((n & 255) * f); return `rgb(${r},${g},${b})`; } window.SoccerPerson = function SoccerPerson({ color, seed, height = 28, moving = false, lean = 0, hasBall = false, isGK = false, dim = false, }) { const h = hashOf(seed); const skin = SKINS[h % SKINS.length]; const hair = HAIRS[(h >> 3) % HAIRS.length]; const kit = isGK ? shade(color, 0.62) : color; const shorts = shade(color, 0.42); const socks = isGK ? '#e9eef2' : shade(color, 0.72); const ink = 'rgba(0,0,0,0.55)'; // thin outline so they pop off the grass const RUN = 0.4; // seconds per stride const swing = (name) => ({ transformBox: 'fill-box', transformOrigin: '50% 0%', animation: moving ? `${name} ${RUN}s ease-in-out infinite` : 'none', }); return ( ); }; })();