/* zap-runtime: 2026-10-24.v4 */ // ── World kit ──────────────────────────────────────────────────────────────── // Shared by the seven world zaps (docs/plans/world-apps.md). Paste this block, // unchanged, right after the zap-runtime header of each app. Plain functions // only: no hooks, no props, no JSX. // Time zone -> ISO country. Covers the common zones; everything else falls back // to the browser locale's region, then to "ZZ" (shown as a globe). const WK_TZ = { "America/New_York": "US", "America/Chicago": "US", "America/Denver": "US", "America/Los_Angeles": "US", "America/Phoenix": "US", "America/Anchorage": "US", "Pacific/Honolulu": "US", "America/Detroit": "US", "America/Toronto": "CA", "America/Vancouver": "CA", "America/Edmonton": "CA", "America/Winnipeg": "CA", "America/Halifax": "CA", "America/Mexico_City": "MX", "America/Monterrey": "MX", "America/Tijuana": "MX", "America/Sao_Paulo": "BR", "America/Argentina/Buenos_Aires": "AR", "America/Bogota": "CO", "America/Lima": "PE", "America/Santiago": "CL", "America/Caracas": "VE", "America/Guayaquil": "EC", "America/Montevideo": "UY", "Europe/London": "GB", "Europe/Dublin": "IE", "Europe/Paris": "FR", "Europe/Berlin": "DE", "Europe/Madrid": "ES", "Europe/Rome": "IT", "Europe/Amsterdam": "NL", "Europe/Brussels": "BE", "Europe/Zurich": "CH", "Europe/Vienna": "AT", "Europe/Stockholm": "SE", "Europe/Oslo": "NO", "Europe/Copenhagen": "DK", "Europe/Helsinki": "FI", "Europe/Warsaw": "PL", "Europe/Prague": "CZ", "Europe/Budapest": "HU", "Europe/Bucharest": "RO", "Europe/Athens": "GR", "Europe/Lisbon": "PT", "Europe/Kyiv": "UA", "Europe/Kiev": "UA", "Europe/Istanbul": "TR", "Europe/Moscow": "RU", "Europe/Belgrade": "RS", "Europe/Sofia": "BG", "Europe/Zagreb": "HR", "Africa/Lagos": "NG", "Africa/Cairo": "EG", "Africa/Johannesburg": "ZA", "Africa/Nairobi": "KE", "Africa/Accra": "GH", "Africa/Casablanca": "MA", "Africa/Algiers": "DZ", "Africa/Addis_Ababa": "ET", "Africa/Dar_es_Salaam": "TZ", "Asia/Dubai": "AE", "Asia/Riyadh": "SA", "Asia/Tehran": "IR", "Asia/Jerusalem": "IL", "Asia/Karachi": "PK", "Asia/Kolkata": "IN", "Asia/Calcutta": "IN", "Asia/Dhaka": "BD", "Asia/Colombo": "LK", "Asia/Kathmandu": "NP", "Asia/Bangkok": "TH", "Asia/Ho_Chi_Minh": "VN", "Asia/Saigon": "VN", "Asia/Jakarta": "ID", "Asia/Singapore": "SG", "Asia/Kuala_Lumpur": "MY", "Asia/Manila": "PH", "Asia/Hong_Kong": "HK", "Asia/Shanghai": "CN", "Asia/Taipei": "TW", "Asia/Seoul": "KR", "Asia/Tokyo": "JP", "Australia/Sydney": "AU", "Australia/Melbourne": "AU", "Australia/Brisbane": "AU", "Australia/Perth": "AU", "Australia/Adelaide": "AU", "Australia/Hobart": "AU", "Australia/Darwin": "AU", "Pacific/Auckland": "NZ", "Pacific/Fiji": "FJ", }; // Countries offered in the picker, most likely first. const WK_COUNTRIES = [ ["US", "United States"], ["IN", "India"], ["GB", "United Kingdom"], ["AU", "Australia"], ["CA", "Canada"], ["BR", "Brazil"], ["MX", "Mexico"], ["DE", "Germany"], ["FR", "France"], ["ES", "Spain"], ["IT", "Italy"], ["NL", "Netherlands"], ["SE", "Sweden"], ["PL", "Poland"], ["TR", "Türkiye"], ["UA", "Ukraine"], ["NG", "Nigeria"], ["ZA", "South Africa"], ["EG", "Egypt"], ["KE", "Kenya"], ["AE", "UAE"], ["SA", "Saudi Arabia"], ["PK", "Pakistan"], ["BD", "Bangladesh"], ["ID", "Indonesia"], ["PH", "Philippines"], ["VN", "Vietnam"], ["TH", "Thailand"], ["MY", "Malaysia"], ["SG", "Singapore"], ["JP", "Japan"], ["KR", "South Korea"], ["CN", "China"], ["HK", "Hong Kong"], ["TW", "Taiwan"], ["NZ", "New Zealand"], ["AR", "Argentina"], ["CO", "Colombia"], ["CL", "Chile"], ["PE", "Peru"], ["IE", "Ireland"], ["PT", "Portugal"], ["CH", "Switzerland"], ["AT", "Austria"], ["BE", "Belgium"], ["NO", "Norway"], ["DK", "Denmark"], ["FI", "Finland"], ["GR", "Greece"], ["CZ", "Czechia"], ["HU", "Hungary"], ["RO", "Romania"], ["IL", "Israel"], ["IR", "Iran"], ["RU", "Russia"], ["GH", "Ghana"], ["MA", "Morocco"], ["ET", "Ethiopia"], ["LK", "Sri Lanka"], ["NP", "Nepal"], ]; function wkGuessCountry() { try { const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; if (tz && WK_TZ[tz]) return WK_TZ[tz]; } catch (e) { /* fall through */ } try { const region = String((typeof navigator !== "undefined" && navigator.language) || "").split("-")[1]; if (region && /^[A-Za-z]{2}$/.test(region)) return region.toUpperCase(); } catch (e) { /* fall through */ } return "ZZ"; } // Regional indicator letters A-Z. A flag is two of them side by side. (The sandbox // blocks String.fromCodePoint, so they are spelled out.) const WK_RI = ["🇦", "🇧", "🇨", "🇩", "🇪", "🇫", "🇬", "🇭", "🇮", "🇯", "🇰", "🇱", "🇲", "🇳", "🇴", "🇵", "🇶", "🇷", "🇸", "🇹", "🇺", "🇻", "🇼", "🇽", "🇾", "🇿"]; // "US" -> the flag emoji. Anything that is not two letters is a globe. function wkFlag(code) { if (typeof code !== "string" || !/^[A-Z]{2}$/.test(code) || code === "ZZ") return "🌍"; return WK_RI[code.charCodeAt(0) - 65] + WK_RI[code.charCodeAt(1) - 65]; } function wkCountryName(code) { const hit = (WK_COUNTRIES || []).find((c) => c[0] === code); return hit ? hit[1] : code === "ZZ" ? "Earth" : code; } // The world runs on UTC so everyone shares one "today". function wkDayNumber(ms) { return Math.floor((ms == null ? Date.now() : ms) / 86400000); } function wkDayKey(ms) { return "d" + wkDayNumber(ms); } function wkMsToNextDay(ms) { const now = ms == null ? Date.now() : ms; return 86400000 - (now % 86400000); } // "4h 12m", "3m 05s", "8s" function wkCountdown(ms) { const s = Math.max(0, Math.ceil(ms / 1000)); if (s >= 3600) return Math.floor(s / 3600) + "h " + String(Math.floor((s % 3600) / 60)).padStart(2, "0") + "m"; if (s >= 60) return Math.floor(s / 60) + "m " + String(s % 60).padStart(2, "0") + "s"; return s + "s"; } // "just now", "12s ago", "4m ago", "3h ago", "2d ago" function wkAgo(ts, now) { const s = Math.max(0, Math.floor(((now == null ? Date.now() : now) - ts) / 1000)); if (s < 5) return "just now"; if (s < 60) return s + "s ago"; if (s < 3600) return Math.floor(s / 60) + "m ago"; if (s < 86400) return Math.floor(s / 3600) + "h ago"; return Math.floor(s / 86400) + "d ago"; } // 12345 -> "12.3K" function wkCompact(n) { const v = Number(n) || 0; if (v >= 1e9) return (v / 1e9).toFixed(1).replace(/\.0$/, "") + "B"; if (v >= 1e6) return (v / 1e6).toFixed(1).replace(/\.0$/, "") + "M"; if (v >= 1e4) return (v / 1e3).toFixed(1).replace(/\.0$/, "") + "K"; return v.toLocaleString("en-US"); } // Stable 32-bit hash of a string (team assignment, seeds). function wkHash(str) { let h = 2166136261; const s = String(str); for (let i = 0; i < (s || []).length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; } // Seeded PRNG (mulberry32): the same seed gives the same sequence on every device. function wkRng(seed) { let a = seed >>> 0; return function () { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // Shared-state keys must be safe path segments: user ids already are, this is a guard. function wkKey(id) { return String(id).replace(/[^A-Za-z0-9_-]/g, "_"); } // A plain-object read that never throws on null, arrays or strings. function wkObj(value) { return value && typeof value === "object" && !Array.isArray(value) ? value : {}; } // ── end world kit ──────────────────────────────────────────────────────────── // ── Code of the Day ────────────────────────────────────────────────────────── // One four-peg code for the whole world, eight tries. Paper and ink. Prefix: cd-. // // Shared results, one short string per person per day: // s2: { [dayKey]: { [bucket]: { [uid]: "" } } } // bucket = "b" + (wkHash(uid) % 64), so no object passes Convex's 1,024-key cap. // Read-only legacy shape (written before 2026-11-12 bucketing, never written now): // s: { [dayKey]: { [uid]: "" } } // Readers flatten s2[day]'s buckets and merge the flat s[day] under them. // Day keys older than yesterday are reset to null in both s and s2. // Mine: { cc, games: { [dayKey]: { g: ["0123", ...], done, won, secs } } (newest 14), streak, best, played, wins, // today: { d: dayKey, done: true, label: "Cracked in 4" | "Not today" } } (daily status for the host) // The digit stored in a guess is the index here; never reorder. const CD_COLORS = [ { hex: "#FF5A4E", name: "Coral circle" }, { hex: "#F5A623", name: "Amber triangle" }, { hex: "#2FA36B", name: "Green square" }, { hex: "#2F5BFF", name: "Cobalt diamond" }, { hex: "#8B5CF6", name: "Violet star" }, { hex: "#141414", name: "Ink plus" }, ]; const CD_ROWS = 8; const CD_LAUNCH_DAY = 20769; // 2026-11-12 UTC is code No. 1 const CD_PAPER = "#F7F4EF"; const CD_INK = "#141414"; const CD_SUB = "#6B6760"; const CD_LINE = "rgba(20,20,20,0.12)"; const CD_ACCENT = "#2F5BFF"; const CD_SERIF = "ui-serif, \"New York\", \"Iowan Old Style\", Georgia, serif"; const CD_SANS = "-apple-system, \"SF Pro Text\", Inter, system-ui, sans-serif"; const CD_MONO = "ui-monospace, \"SF Mono\", Menlo, monospace"; const CD_CSS = ` @keyframes cd-flip { 0% { transform: perspective(220px) rotateY(90deg); opacity: 0; } 100% { transform: perspective(220px) rotateY(0deg); opacity: 1; } } @keyframes cd-in { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes cd-up { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes cd-fade { 0% { opacity: 0; } 100% { opacity: 1; } } .cd-flip { animation: cd-flip .32s cubic-bezier(.2,.7,.2,1) both; } .cd-in { animation: cd-in .36s cubic-bezier(.2,.7,.2,1) both; } .cd-up { animation: cd-up .42s cubic-bezier(.2,.7,.2,1) both; } .cd-fade { animation: cd-fade .3s ease-out both; } .cd-key { transition: transform .12s ease-out, background-color .2s ease-out, color .2s ease-out, opacity .2s ease-out; -webkit-tap-highlight-color: transparent; } .cd-key:active { transform: scale(.94); } .cd-key:disabled { opacity: .35; } .cd-key:focus-visible { outline: 2px solid #2F5BFF; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .cd-flip, .cd-in, .cd-up, .cd-fade { animation: none !important; } } `; function cdSecret(dayNum) { const rng = wkRng(dayNum * 7919 + 17); let s = ""; for (let i = 0; i < 4; i++) s += String(Math.min(5, Math.floor(rng() * 6))); return s; } function cdBucket(uid) { return "b" + (wkHash(uid) % 64); } // One day's results as a flat { uid: value } map: bucketed s2 over legacy s. function cdDayResults(room, day) { const out = { ...wkObj(wkObj(wkObj(room).s)[day]) }; const buckets = wkObj(wkObj(wkObj(room).s2)[day]); for (const b of Object.keys(buckets || {})) { const bucket = wkObj(buckets[b]); for (const uid of Object.keys(bucket || {})) { if (typeof bucket[uid] === "string") out[uid] = bucket[uid]; } } return out; } // Exact matches first; colour matches only among the pegs that were not exact. function cdScore(guess, secret) { let exact = 0; const g = [0, 0, 0, 0, 0, 0]; const s = [0, 0, 0, 0, 0, 0]; for (let i = 0; i < 4; i++) { if (guess[i] === secret[i]) exact++; else { g[Number(guess[i])]++; s[Number(secret[i])]++; } } let near = 0; for (let c = 0; c < 6; c++) near += Math.min(g[c], s[c]); return { exact, near }; } function cdGame(raw) { const o = wkObj(raw); const g = Array.isArray(o.g) ? (o.g || []).filter((x) => typeof x === "string" && /^[0-5]{4}$/.test(x)).slice(0, CD_ROWS) : []; return { g, done: !!o.done, won: !!o.won, secs: Math.max(0, Math.round(Number(o.secs) || 0)) }; } function cdParse(value) { const m = typeof value === "string" ? /^([1-8X])([A-Z]{2})([0-9a-z]{1,7})$/.exec(value) : null; if (!m) return null; const secs = parseInt(m[3], 36); return { tries: m[1] === "X" ? 0 : Number(m[1]), cc: m[2], secs: Number.isFinite(secs) ? secs : 0 }; } function cdClock(secs) { const s = Math.max(0, Math.floor(secs)); const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const r = String(s % 60).padStart(2, "0"); return h > 0 ? h + ":" + String(m).padStart(2, "0") + ":" + r : m + ":" + r; } function useCdEased(target) { const [value, setValue] = useState(0); const ref = useRef(0); useEffect(() => { const from = ref.current; const to = Number(target) || 0; if (from === to) return undefined; const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame : null; const caf = typeof cancelAnimationFrame === "function" ? cancelAnimationFrame : null; if (!raf) { ref.current = to; setValue(to); return undefined; } const t0 = Date.now(); let id = 0; const step = () => { const p = Math.min(1, (Date.now() - t0) / 900); const v = Math.round(from + (to - from) * (1 - Math.pow(1 - p, 3))); ref.current = v; setValue(v); if (p < 1) id = raf(step); }; id = raf(step); return () => { if (caf && id) caf(id); }; }, [target]); return value; } // A small glyph per colour so the six are told apart without colour. function CdGlyph({ c, size }) { const fill = c === 5 ? CD_PAPER : "rgba(255,255,255,0.92)"; return ( ); } // A peg on paper. c is 0-5, or null for an empty slot (a hairline circle). function CdPeg({ c, size, active, className, style }) { const filled = c != null && c >= 0; return ( {filled && } ); } // Feedback: solid ink = right spot, ink ring = right colour, hairline = neither. function CdPins({ exact, near, size, animate }) { const d = Math.max(5, Math.round(size * 0.36)); const pins = []; for (let i = 0; i < 4; i++) pins.push(i < exact ? "x" : i < exact + near ? "o" : "-"); return ( {(pins || []).map((p, i) => ( ))} ); } // A number that counts up from 0 when it mounts. function CdCount({ value, format }) { const v = useCdEased(value); return {format ? format(v) : v}; } // One guess as four feedback marks, in play order: right spot, right colour, miss. function cdMarks(row) { const out = []; for (let i = 0; i < 4; i++) out.push(i < row.exact ? "x" : i < row.exact + row.near ? "o" : "-"); return out; } function cdRound(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); } // The share card as a 1080x1920 image: the same content as the card on screen. function cdDrawCard(canvas, card) { const ctx = canvas.getContext("2d"); if (!ctx) return false; const W = 1080; const H = 1920; ctx.fillStyle = CD_PAPER; ctx.fillRect(0, 0, W, H); const dot = 64; const gap = 22; const gridH = (card.rows || []).length * (dot + gap) - gap; const codeH = card.code ? 60 + dot + 30 : 0; const cardH = 140 + 70 + 60 + 190 + gridH + codeH + 110 + 70 + 120; const cardW = 900; const x0 = (W - cardW) / 2; const y0 = Math.max(120, (H - cardH) / 2 - 40); ctx.save(); ctx.shadowColor = "rgba(20,20,20,0.06)"; ctx.shadowBlur = 6; ctx.shadowOffsetY = 3; cdRound(ctx, x0, y0, cardW, cardH, 48); ctx.fillStyle = "#FFFFFF"; ctx.fill(); ctx.restore(); cdRound(ctx, x0, y0, cardW, cardH, 48); ctx.strokeStyle = CD_LINE; ctx.lineWidth = 3; ctx.stroke(); ctx.textAlign = "center"; ctx.textBaseline = "alphabetic"; let y = y0 + 140; ctx.fillStyle = CD_INK; ctx.font = "600 60px " + CD_SERIF; ctx.fillText("Code of the Day", W / 2, y); y += 70; ctx.fillStyle = CD_SUB; ctx.font = "500 32px " + CD_SANS; ctx.fillText(card.meta.toUpperCase(), W / 2, y); y += 60 + 130; ctx.fillStyle = CD_INK; ctx.font = "700 132px " + CD_SERIF; ctx.fillText(card.hero, W / 2, y); y += 60; const rowW = 4 * dot + 3 * gap; (card.rows || []).forEach((row, r) => { cdMarks(row).forEach((m, i) => { ctx.beginPath(); const cx = W / 2 - rowW / 2 + i * (dot + gap) + dot / 2; const cy = y + r * (dot + gap) + dot / 2; if (m === "x") { ctx.arc(cx, cy, dot / 2, 0, Math.PI * 2); ctx.fillStyle = CD_INK; ctx.fill(); } else if (m === "o") { ctx.arc(cx, cy, dot / 2 - 4, 0, Math.PI * 2); ctx.strokeStyle = CD_INK; ctx.lineWidth = 8; ctx.stroke(); } else { ctx.arc(cx, cy, dot / 2 - 2, 0, Math.PI * 2); ctx.strokeStyle = "rgba(20,20,20,0.22)"; ctx.lineWidth = 3; ctx.stroke(); } }); }); y += gridH; if (card.code) { y += 60; ctx.fillStyle = CD_SUB; ctx.font = "500 30px " + CD_SANS; ctx.fillText("THE CODE", W / 2, y); y += 30; for (let i = 0; i < 4; i++) { ctx.beginPath(); ctx.arc(W / 2 - rowW / 2 + i * (dot + gap) + dot / 2, y + dot / 2, dot / 2, 0, Math.PI * 2); ctx.fillStyle = CD_COLORS[Number(card.code[i])].hex; ctx.fill(); } y += dot; } y += 110; ctx.fillStyle = CD_INK; ctx.font = "500 46px " + CD_SANS; ctx.fillText(card.line, W / 2, y); y += 70; ctx.fillStyle = CD_SUB; ctx.font = "400 40px " + CD_SANS; ctx.fillText(card.place, W / 2, y); ctx.fillStyle = CD_SUB; ctx.font = "500 32px " + CD_SANS; ctx.fillText("a1zap.com", W / 2, H - 90); return true; } function App(props) { const { user, mine, patchMine, data, setData, shared, sharedData, patchShared, patchSharedData, openAuth, share, trackEventName, saveToPhotos, haptic, sfx, celebrate } = props; const my = mine ?? data ?? {}; const writeMine = useCallback((patch) => { if (typeof patchMine === "function") patchMine(patch); else setData({ ...(data || {}), ...patch }); }, [patchMine, setData, data]); const room = shared ?? sharedData ?? {}; const writePatch = useCallback((patch) => { (typeof patchShared === "function" ? patchShared : patchSharedData)?.(patch); }, [patchShared, patchSharedData]); const signedIn = !!(user && user.id && user.id !== "anonymous"); const uid = signedIn ? wkKey(user.id) : null; const [now, setNow] = useState(() => Date.now()); const [cur, setCur] = useState([]); const [localGame, setLocalGame] = useState(null); const [reveal, setReveal] = useState(null); const [holdBoard, setHoldBoard] = useState(false); const [showBoard, setShowBoard] = useState(false); const [picker, setPicker] = useState(false); const [guestCc, setGuestCc] = useState(null); const [toast, setToast] = useState(null); const [touched, setTouched] = useState(false); const [arrivalTick, setArrivalTick] = useState(0); const [lastDrop, setLastDrop] = useState(-1); const runStart = useRef(null); const myRef = useRef(my); myRef.current = my; const roomRef = useRef(room); roomRef.current = room; const userRef = useRef(user); userRef.current = user; const guestPlayed = useRef(false); const timers = useRef([]); const later = useCallback((fn, ms) => { const id = setTimeout(fn, ms); timers.current.push(id); }, []); useEffect(() => () => { (timers.current || []).forEach((id) => clearTimeout(id)); }, []); useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []); const dayNum = wkDayNumber(now); const today = "d" + dayNum; const yesterday = "d" + (dayNum - 1); const secret = useMemo(() => cdSecret(dayNum), [dayNum]); const codeNo = dayNum - CD_LAUNCH_DAY + 1; const guessedCc = useMemo(() => wkGuessCountry(), []); const myCc = typeof my.cc === "string" && /^[A-Z]{2}$/.test(my.cc) ? my.cc : null; const cc = myCc || guestCc || guessedCc; // The game for today: whichever of local and saved is further along. const games = wkObj(my.games); const stored = cdGame(games[today]); const local = localGame && localGame.day === today ? localGame : null; const game = local && (local.done || (local.g || []).length >= (stored.g || []).length) && !(stored.done && !local.done) ? local : stored; const rows = useMemo(() => (game.g || []).map((g) => ({ g, ...cdScore(g, secret) })), [game.g, secret]); // Day rollover while the app is open. const dayRef = useRef(today); useEffect(() => { if (dayRef.current === today) return; dayRef.current = today; setCur([]); runStart.current = null; setReveal(null); setShowBoard(false); setHoldBoard(false); setTouched(false); setToast("New code."); later(() => setToast(null), 4200); }, [today, later]); // ── World stats for today ── const dayMap = useMemo(() => cdDayResults({ s: room.s, s2: room.s2 }, today), [room.s, room.s2, today]); // Yesterday, for the quiet line while today is still empty. const yesterdayStats = useMemo(() => { const map = cdDayResults({ s: room.s, s2: room.s2 }, yesterday); let played = 0; let solved = 0; for (const k of Object.keys(map || {})) { const p = cdParse(map[k]); if (!p) continue; played++; if (p.tries > 0) solved++; } return { played, solved }; }, [room.s, room.s2, yesterday]); const myValue = game.done ? (game.won ? String((game.g || []).length) : "X") + cc + Math.round(game.secs).toString(36) : null; const meKey = uid || "_you"; const stats = useMemo(() => { const list = []; for (const k of Object.keys(dayMap || {})) { if (k === meKey) continue; const p = cdParse(dayMap[k]); if (p) list.push({ key: k, ...p }); } const others = (list || []).slice(); const mineP = myValue ? cdParse(myValue) : null; if (mineP) list.push({ key: meKey, me: true, ...mineP }); const hist = [0, 0, 0, 0, 0, 0, 0, 0, 0]; const byCc = {}; let solved = 0; for (const e of list) { hist[e.tries === 0 ? 8 : e.tries - 1]++; if (e.tries > 0) { solved++; const b = byCc[e.cc] || (byCc[e.cc] = { cc: e.cc, n: 0, sum: 0 }); b.n++; b.sum += e.tries; } } const countries = Object.values(byCc || {}).map((b) => ({ ...b, avg: b.sum / b.n })) .sort((a, b) => a.avg - b.avg || b.n - a.n).slice(0, 6); let beat = 0; if (mineP && mineP.tries > 0) { for (const o of others) { if (o.tries === 0 || o.tries > mineP.tries || (o.tries === mineP.tries && o.secs > mineP.secs)) beat++; } } return { list, others: (others || []).length, played: (list || []).length, solved, hist, countries, pct: (others || []).length ? Math.round((beat / (others || []).length) * 100) : null }; }, [dayMap, myValue, meKey]); // Who just arrived: shared values carry no timestamp, so arrivals seen live get one here. const seen = useRef({ day: null, init: false, map: {} }); useEffect(() => { const id = setTimeout(() => { seen.current.init = true; }, 2500); return () => clearTimeout(id); }, []); useEffect(() => { const s = seen.current; if (s.day !== today) { s.day = today; s.map = {}; s.init = false; } const keys = Object.keys(dayMap || {}); const t = Date.now(); let changed = false; for (const k of keys) { if (!(k in s.map)) { s.map[k] = s.init ? t : 0; changed = true; } } if ((keys || []).length > 0) s.init = true; if (changed) setArrivalTick((x) => x + 1); }, [dayMap, today]); const ticker = useMemo(() => { const order = Object.keys(dayMap || {}); const rows_ = []; (order || []).forEach((k, i) => { if (k === meKey) return; const p = cdParse(dayMap[k]); if (p) rows_.push({ key: k, ...p, at: seen.current.map[k] || 0, i }); }); (rows_ || []).sort((a, b) => b.at - a.at || b.i - a.i); return (rows_ || []).slice(0, 5); }, [dayMap, meKey, arrivalTick]); const newestAt = (ticker || []).length ? ticker[0].at : 0; const pulseFlash = newestAt && now - newestAt < 2000; // ── Persistence ── const persist = useCallback((next) => { const u = userRef.current; if (!u || !u.id || u.id === "anonymous") return; const id = wkKey(u.id); const m = myRef.current || {}; const all = wkObj(m.games); const dn = Number((next.day || []).slice(1)); const older = Object.keys(all || {}).filter((k) => /^d\d+$/.test(k) && k !== next.day && all[k]) .sort((a, b) => Number((b || []).slice(1)) - Number((a || []).slice(1))); const gamesPatch = {}; (older || []).forEach((k, i) => { gamesPatch[k] = i < 13 ? all[k] : null; }); gamesPatch[next.day] = { g: next.g, done: next.done, won: next.won, secs: next.secs }; const patch = { games: gamesPatch }; if (next.done) { const prevWon = cdGame(all["d" + (dn - 1)]).won; patch.streak = next.won ? (prevWon ? (Number(m.streak) || 0) + 1 : 1) : 0; patch.played = (Number(m.played) || 0) + 1; // Daily status for the host's Today strip, written whole with the game. patch.today = { d: next.day, done: true, label: next.won ? "Cracked in " + (next.g || []).length : "Not today" }; patch.wins = (Number(m.wins) || 0) + (next.won ? 1 : 0); if (next.won) patch.best = Number(m.best) > 0 ? Math.min(Number(m.best), (next.g || []).length) : (next.g || []).length; const mc = typeof m.cc === "string" && /^[A-Z]{2}$/.test(m.cc) ? m.cc : next.cc; const value = (next.won ? String((next.g || []).length) : "X") + mc + Math.round(next.secs).toString(36); const rm = roomRef.current || {}; // Reset day keys older than yesterday (only those not already null). const stale = (map) => { const out = {}; for (const k of Object.keys(wkObj(map))) { const n = /^d(\d+)$/.exec(k); if (n && Number(n[1]) < dn - 1 && map[k] != null) out[k] = null; } return out; }; const sharedPatch = { s2: { ...stale(rm.s2), [next.day]: { [cdBucket(id)]: { [id]: value } } } }; const oldS = stale(rm.s); if (Object.keys(oldS || {}).length > 0) sharedPatch.s = oldS; writePatch(sharedPatch); } writeMine(patch); }, [writeMine, writePatch]); // A guest who signs in mid-game or after finishing keeps their game. useEffect(() => { if (!signedIn || !guestPlayed.current) return undefined; const id = setTimeout(() => { const g = localGame; if (!g || g.day !== wkDayKey() || (g.g || []).length === 0) return; const saved = cdGame(wkObj(wkObj(myRef.current).games)[g.day]); if (saved.done || (saved.g || []).length >= (g.g || []).length) return; guestPlayed.current = false; persist({ ...g, cc }); setToast("Saved."); later(() => setToast(null), 3000); }, 1500); return () => clearTimeout(id); }, [signedIn]); // eslint-disable-line react-hooks/exhaustive-deps // ── Actions ── const track = (name, payload) => { try { Promise.resolve(trackEventName?.(name, payload)).catch(() => undefined); } catch (e) { /* analytics is best effort */ } }; const playable = !game.done; const tapColor = (c) => { if (!playable || (cur || []).length >= 4) return; if (!runStart.current) runStart.current = Date.now(); haptic?.("tap"); sfx?.("tick"); setTouched(true); setLastDrop((cur || []).length); setCur([...cur, c]); }; const del = () => { if (!playable || (cur || []).length === 0) return; haptic?.("select"); setLastDrop(-1); setCur((cur || []).slice(0, -1)); }; const enter = () => { if (!playable || (cur || []).length < 4) return; const guess = (cur || []).join(""); const g = [...game.g, guess]; const sc = cdScore(guess, secret); const won = sc.exact === 4; const done = won || (g || []).length >= CD_ROWS; const started = runStart.current || Date.now(); const secs = Math.max(1, Math.round(game.secs + (Date.now() - started) / 1000)); runStart.current = done ? null : Date.now(); const next = { day: today, g, done, won, secs, cc }; setLocalGame(next); setCur([]); setLastDrop(-1); setReveal({ row: (g || []).length - 1, key: Date.now() }); sfx?.("select"); // A light tap as each feedback mark lands (the marks fade in from 480 ms). for (let i = 0; i < 4; i++) later(() => haptic?.("tap"), 480 + i * 60); if (done) { const m = myRef.current || {}; const prevWon = cdGame(wkObj(m.games)["d" + (dayNum - 1)]).won; const nextStreak = won ? (prevWon ? (Number(m.streak) || 0) + 1 : 1) : 0; const firstWin = won && !(Number(m.wins) > 0); later(() => { if (won) { haptic?.("success"); sfx?.("win"); if (firstWin || (nextStreak > 0 && nextStreak % 7 === 0)) celebrate?.("confetti"); } else { haptic?.("warning"); sfx?.("fail"); } }, 760); setShowBoard(false); setHoldBoard(true); later(() => setHoldBoard(false), won ? 1900 : 1600); track(won ? "code_cracked" : "code_failed", { tries: (g || []).length }); } if (signedIn) persist(next); else guestPlayed.current = true; }; const pickCountry = (code) => { if (signedIn) writeMine({ cc: code }); else setGuestCc(code); }; const doShare = () => { share?.(); track("code_shared"); }; const signIn = () => openAuth?.({ mode: "signup" }); const msLeft = wkMsToNextDay(now); const showResult = game.done && !holdBoard && !showBoard; const streakShown = game.done && !game.won ? 0 : (stored.won || cdGame(games[yesterday]).won || (game.done && game.won)) ? Math.max(Number(my.streak) || 0, game.won && game.done ? 1 : 0) : 0; const played = Number(my.played) || 0; const wins = Number(my.wins) || 0; const best = Number(my.best) || 0; // ── Fit ── // The root is the zap's own scroll box: ~402x743 in the iOS feed (top 62 // under the status bar), ~375x655 in the mobile-web card with its bottom 125 // covered. Hosts draw a search button (right, y 108-166), a close button // (left, y 118-166), a bolt button (bottom-right 90x90) and on web a rail // over the right ~78 px of the lower half. So the board, the keys and the // buttons live in a centred column 78 px in from both edges. const rootRef = useRef(null); const boardRef = useRef(null); const canvasRef = useRef(null); const [box, setBox] = useState({ w: 402, h: 743 }); const [boardH, setBoardH] = useState(0); const [saveState, setSaveState] = useState(null); React.useLayoutEffect(() => { const el = rootRef.current; if (!el) return undefined; const measure = () => { const w = el.clientWidth; const h = el.clientHeight; if (w > 0 && h > 0) setBox((b) => (b.w === w && b.h === h ? b : { w, h })); }; measure(); if (typeof ResizeObserver === "function") { const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); } if (typeof addEventListener === "function") { addEventListener("resize", measure); return () => removeEventListener("resize", measure); } const id = setInterval(measure, 1000); return () => clearInterval(id); }, []); React.useLayoutEffect(() => { const el = boardRef.current; if (!el) return undefined; const measure = () => { const h = el.clientHeight; if (h > 0) setBoardH((v) => (v === h ? v : h)); }; measure(); if (typeof ResizeObserver === "function") { const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); } const id = setInterval(measure, 1000); return () => clearInterval(id); }, [showResult]); const clampPx = (min, v, max) => Math.max(min, Math.min(max, Math.round(v))); const webCard = box.h < 700 && box.w < 500; const usable = box.h - (webCard ? 130 : 0); const compact = usable < 600; const colW = Math.min(300, Math.max(180, box.w - 156)); const rowGap = compact ? 4 : 7; const rowH = boardH > 0 ? (boardH - rowGap * (CD_ROWS - 1)) / CD_ROWS : 40; const pegPx = clampPx(16, Math.min((colW - 8) / 5.9, rowH * 0.86), 44); // A centred row of buttons must end left of the bolt button (last 90 px). const actW = Math.min(colW, box.w - 184); const pegGap = Math.round(pegPx * 0.3); const pinPx = clampPx(14, pegPx * 0.62, 24); const keyGap = compact ? 10 : 14; const keyD = clampPx(40, Math.min((colW - 2 * keyGap) / 3, usable * 0.08), 60); const pillH = compact ? 44 : 50; const native = typeof saveToPhotos === "function"; const dateLabel = useMemo(() => { try { return new Date(dayNum * 86400000).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }); } catch (e) { return ""; } }, [dayNum]); const card = useMemo(() => { if (!game.done) return null; const line = game.won ? (stats.others === 0 ? "First to crack it today" : "Faster than " + (stats.pct || 0) + "% of the world") : (stats.solved > 0 ? wkCompact(stats.solved) + " cracked it today" : "Nobody has cracked it yet"); return { meta: "No. " + codeNo + " · " + dateLabel, hero: game.won ? "Cracked in " + (game.g || []).length : "Not today", rows: (rows || []).map((r) => ({ exact: r.exact, near: r.near })), code: game.won ? null : secret, line, place: wkFlag(cc) + " " + wkCountryName(cc), }; }, [game, rows, stats, codeNo, dateLabel, secret, cc]); const saveImage = async () => { if (!native || !card || saveState === "saving") return; const canvas = canvasRef.current; if (!canvas) return; setSaveState("saving"); try { if (!cdDrawCard(canvas, card)) throw new Error("no canvas"); await saveToPhotos(canvas.toDataURL("image/png")); setSaveState("saved"); haptic?.("success"); track("code_saved"); later(() => setSaveState(null), 2600); } catch (e) { setSaveState("error"); later(() => setSaveState(null), 3000); } }; // ── Pieces ── const label = (text, extra) => ( {text} ); const header = (

Code of the Day

{label("No. " + codeNo)}

); const board = (

{Array.from({ length: CD_ROWS }, (_, r) => { const done = r < (rows || []).length ? rows[r] : null; const active = !game.done && r === (rows || []).length; const isReveal = reveal && reveal.row === r && done; const pegs = done ? done.g.split("").map(Number) : active ? cur : []; return (

{[0, 1, 2, 3].map((i) => ( ))} {done ? : null}

); })}

); const live = (

{stats.played > 0 ? (stats.solved > 0 ? <> cracked it today : <> tried, none cracked) : yesterdayStats.played > 0 ? (yesterdayStats.solved > 0 ? <>Yesterday cracked it : "Yesterday nobody cracked it") : "Be the first today"}

); // First-guess legend: two marks, one word each. const showLegend = !toast && !game.done && (rows || []).length === 0; const legendMark = (solid) => ( ); const hint = (

{toast ? {toast} : showLegend ? ( {legendMark(true)}Spot{legendMark(false)}Colour ) : null}

); const ready = playable && (cur || []).length === 4; const keys = (

{(CD_COLORS || []).map((col, c) => ( ))}

); // ── The share card ── const cardReserve = (webCard ? 330 : 400) + 40 + (signedIn ? 0 : pillH + 8) + (native ? pillH + 8 : 0); const dotPx = card ? clampPx(9, (usable - cardReserve) / ((card.rows || []).length * 1.45 + (card.code ? 2.5 : 0)), 16) : 12; const heroPx = clampPx(28, Math.min(box.w - 120, 340) * 0.15, 42); const cardW = Math.min(340, box.w - 80); const btnW = Math.min(300, colW, box.w - 184); const dotRow = (g, key) => (

{g.split("").map((d, i) => ( ))}

); const result = card ? (

{/* margin: auto centres when it fits and lets it scroll from the top when it does not */}

Code of the Day

{label(card.meta, { display: "block", marginTop: 2, fontSize: 11 })}

{card.hero}

"Guess " + (i + 1) + ": " + r.exact + " right spot, " + r.near + " right colour").join(". ")} style={{ display: "flex", flexDirection: "column", gap: Math.round(dotPx * 0.45) }}> {(card.rows || []).map((r, i) => (

{cdMarks(r).map((m, k) => ( ))}

))}

{card.code && (

CD_COLORS[Number(d)].name).join(", ")} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5 }}> {label("The code", { fontSize: 10.5 })} {dotRow(card.code, "code")}

)}

{game.won && stats.others > 0 ? Faster than % of the world : card.line}

{wkFlag(cc)} {wkCountryName(cc)}

{native && ( )} {!signedIn && ( )}

Next code in {wkCountdown(msLeft)}

{native &&

) : null; // ── Stats sheet ── const maxHist = Math.max(1, ...stats.hist); const myBar = game.done ? (game.won ? (game.g || []).length - 1 : 8) : -1; const countriesToday = useMemo(() => new Set((stats.list || []).map((e) => e.cc)).size, [stats]); const statCell = (name, value) => (

{value}

{label(name, { fontSize: 10.5 })}

); const sheetSection = (title, body) => (

{label(title)} {body}

); const sheet = picker ? ( ) : null; return (

{showResult ? result : ( <>

{board} {hint}

{game.done && !holdBoard ? ( ) : keys} )} {header} {!showResult && live}

{sheet}

); }