/* 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 ──────────────────────────────────────────────────────────── // ── World Mood (v2: paper and ink) ─────────────────────────────────────────── // One dot a day on a shared mood field. No typing. Left to right is calm to // wired, bottom to top is low to high. After placing, the field becomes a card. // Shared: m2: { [dayKey]: { [bucket]: { [uid]: "" } } }, bucket = "b" + (wkHash(uid) % 64), // so no object passes Convex's 1,024-key limit. The old flat m: { [dayKey]: { [uid]: ... } } is read // (merged under m2) but never written. Yesterday is kept; older day keys reset to null in both. // Mine: { cc, days: { [dayKey]: "" } (newest 30), streak, lastDay, // today: { d: dayKey, done: true, label: corner name } } (daily status for the host). // Never empty: with no dots yet today, yesterday's dots show as a faint ink ghost layer. // Index by quadrant: 0 calm/high, 1 wired/high, 2 calm/low, 3 wired/low. const WM_CORNERS = ["Content", "Buzzing", "Drained", "Restless"]; const WM_PAPER = "#F7F4EF"; const WM_INK = "#141414"; const WM_MUTED = "#6B6760"; const WM_HAIR = "rgba(20,20,20,0.12)"; const WM_ACCENT = "#5B3DF5"; // violet const WM_ACCENT_RGB = "91,61,245"; const WM_SERIF = "ui-serif, 'New York', 'Iowan Old Style', Georgia, serif"; const WM_SANS = "-apple-system, 'SF Pro Text', Inter, system-ui, sans-serif"; const WM_MONO = "ui-monospace, 'SF Mono', Menlo, monospace"; const WM_CAPS = { fontFamily: WM_SANS, fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: WM_MUTED }; const WM_EMPTY = Object.freeze({}); function wmObj(value) { return value && typeof value === "object" && !Array.isArray(value) ? value : WM_EMPTY; } function wmBucket(uid) { return "b" + (wkHash(uid) % 64); } // One day's dots as a flat { uid: value } map: the old flat m[day] with the // bucketed m2[day] merged over it. function wmDayMap(m, m2, dayKey) { const flat = wmObj(wmObj(m)[dayKey]); const buckets = wmObj(wmObj(m2)[dayKey]); const names = Object.keys(buckets || {}); if (!(names || []).length) return flat; const out = { ...flat }; for (const name of names) { const bucket = wmObj(buckets[name]); for (const uid of Object.keys(bucket || {})) if (bucket[uid] != null) out[uid] = bucket[uid]; } return out; } function wmCorner(x, y) { return y >= 50 ? (x < 50 ? 0 : 1) : (x < 50 ? 2 : 3); } function wmPad(n) { return String(Math.max(0, Math.min(99, Math.round(n)))).padStart(2, "0"); } function wmClamp(n) { return Math.max(0, Math.min(99, n)); } function wmDayNum(key) { const m = /^d(\d+)$/.exec(String(key)); return m ? Number(m[1]) : null; } function wmParse(value) { if (typeof value !== "string") return null; const m = /^(\d\d)(\d\d)([A-Z]{2})$/.exec(value); return m ? { x: Number(m[1]), y: Number(m[2]), cc: m[3] } : null; } function wmParseMine(value) { if (typeof value !== "string") return null; const m = /^(\d\d)(\d\d)$/.exec(value); return m ? { x: Number(m[1]), y: Number(m[2]) } : null; } // One day's map: dot positions (with a stable per-person jitter so equal // values do not stack into one), corner counts and corner counts per country. function wmTally(map, skip) { const pts = []; const corners = [0, 0, 0, 0]; const byCC = {}; let n = 0; for (const key of Object.keys(map || {})) { if (key === skip) continue; const p = wmParse(map[key]); if (!p) continue; n++; const h = wkHash(key); pts.push(p.x + 0.5 + ((h & 1023) / 1023 - 0.5) * 0.9, p.y + 0.5 + (((h >>> 10) & 1023) / 1023 - 0.5) * 0.9); const c = wmCorner(p.x, p.y); corners[c]++; const row = byCC[p.cc] || (byCC[p.cc] = [0, 0, 0, 0]); row[c]++; } return { pts, corners, byCC, n }; } function wmTop(counts) { let best = 0; for (let i = 1; i < 4; i++) if (counts[i] > counts[best]) best = i; return best; } function wmPct(part, total) { return total > 0 ? Math.round((part / total) * 100) : 0; } function wmDateLabel(ms) { try { return new Date(ms).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" }).toUpperCase(); } catch (e) { return "TODAY"; } } // The world's dots, soft and semi-transparent so density reads as heat. function wmPaintDots(ctx, ox, oy, side, pts, rgb, dim) { const n = (pts || []).length / 2; if (!n) return; // Three passes: a wide faint wash, a softer halo, then a small core. The // alpha falls as the crowd grows so thousands of dots still read as heat. const r = Math.max(1.5, side * 0.0072); const k = (n <= 40 ? 1 : Math.max(0.16, Math.sqrt(40 / n))) * (dim || 1); const color = rgb || WM_ACCENT_RGB; const tau = Math.PI * 2; const pass = (radius, alpha) => { ctx.fillStyle = "rgba(" + color + "," + alpha.toFixed(3) + ")"; for (let i = 0; i < (pts || []).length; i += 2) { ctx.beginPath(); ctx.arc(ox + (pts[i] / 100) * side, oy + (1 - pts[i + 1] / 100) * side, radius, 0, tau); ctx.fill(); } }; pass(r * 5.5, 0.05 * k); pass(r * 2.6, 0.09 * k); pass(r, Math.max(0.22 * (dim || 1), 0.62 * k)); } // A number that eases toward its target (cubic out). function useWmEased(target, ms) { const [value, setValue] = useState(0); const valueRef = useRef(0); useEffect(() => { const from = valueRef.current; const to = Number(target) || 0; if (from === to) return undefined; if (typeof requestAnimationFrame !== "function") { valueRef.current = to; setValue(to); return undefined; } const startedAt = Date.now(); let alive = true; let frame = 0; const step = () => { if (!alive) return; const k = Math.min(1, (Date.now() - startedAt) / ms); valueRef.current = k >= 1 ? to : from + (to - from) * (1 - Math.pow(1 - k, 3)); setValue(valueRef.current); if (k < 1) frame = requestAnimationFrame(step); }; frame = requestAnimationFrame(step); return () => { alive = false; if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame); }; }, [target, ms]); return value; } // The size of a flex slot, kept current with a ResizeObserver. function useWmSize(ref, key, tick) { const [size, setSize] = useState({ w: 0, h: 0 }); const measure = useCallback(() => { const el = ref.current; if (!el) return; const w = el.clientWidth; const h = el.clientHeight; setSize((s) => (s.w === w && s.h === h ? s : { w, h })); }, [ref]); React.useLayoutEffect(() => { measure(); const el = ref.current; if (!el || typeof ResizeObserver !== "function") return undefined; const ro = new ResizeObserver(() => measure()); ro.observe(el); return () => ro.disconnect(); }, [measure, key]); useEffect(() => { measure(); }, [tick, measure]); return size; } // One canvas for every dot; redrawn only when the day's dots or the size change. // ghost: yesterday's dots in faint ink, shown only while today is empty. function WmCanvas({ side, pts, ghost }) { const ref = useRef(null); const dpr = Math.min(3, typeof devicePixelRatio === "number" && devicePixelRatio > 0 ? devicePixelRatio : 1); useEffect(() => { const c = ref.current; if (!c || !side) return; const px = Math.round(side * dpr); if (c.width !== px || c.height !== px) { c.width = px; c.height = px; } const ctx = c.getContext ? c.getContext("2d") : null; if (!ctx) return; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, side, side); if (ghost) wmPaintDots(ctx, 0, 0, side, pts, "20,20,20", 0.4); else wmPaintDots(ctx, 0, 0, side, pts); }, [side, pts, dpr, ghost]); return

{titleText}

Stats

Your last 14 days

How countries lean today

Yesterday

Your country

How it works