[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","6898095908888191aade1fc7c9eec81e","versionInt","title","Window To Allie’s Game World","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Play, Pause, RotateCcw, Sparkles, Activity, Handshake, Sword, Aperture } from \"lucide-react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Slider } from \"@/components/ui/slider\";\n\n/*\n Window to Allie’s Game World — v0.1\n -------------------------------------------------\n ✦ A living \"portal\" viewport that renders a tiny, self-contained world:\n - Procedural terrain flow (seeded value-noise)\n - Little agents with a minimal \"play layer\" (C/D Prisoner’s Dilemma)\n - Slow adaptation + simple stats (\"statics\" snapshot + live \"dynamics\")\n - Clean UI with shadcn/ui + framer-motion\n\n Notes:\n - Completely client-side; no external assets.\n - Tweak seed, population, and speed; pause/resume; reset world.\n - Designed to be a gentle, steadily-evolving window.\n*/\n\n// ---------- Utilities: seeded PRNG + value-noise ---------------------------\nfunction mulberry32(a) {\n return function () {\n let t = (a += 0x6d2b79f5);\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\nfunction makeNoise2D(seed, gridSize = 64) {\n const rand = mulberry32(seed);\n const grid = new Float32Array(gridSize * gridSize).map(() => 0);\n for (let y = 0; y < gridSize; y++) {\n for (let x = 0; x < gridSize; x++) {\n grid[y * gridSize + x] = rand();\n }\n }\n // smoothstep\n const s = (t) => t * t * (3 - 2 * t);\n return function sample(nx, ny) {\n // wrap coordinates so the field tiles nicely\n const gx = (nx % 1 + 1) % 1;\n const gy = (ny % 1 + 1) % 1;\n const x = gx * (gridSize - 1);\n const y = gy * (gridSize - 1);\n const x0 = Math.floor(x);\n const y0 = Math.floor(y);\n const x1 = (x0 + 1) % gridSize;\n const y1 = (y0 + 1) % gridSize;\n const dx = x - x0;\n const dy = y - y0;\n const a = grid[y0 * gridSize + x0];\n const b = grid[y0 * gridSize + x1];\n const c = grid[y1 * gridSize + x0];\n const d = grid[y1 * gridSize + x1];\n const ab = a + (b - a) * s(dx);\n const cd = c + (d - c) * s(dx);\n return ab + (cd - ab) * s(dy);\n };\n}\n\n// Compute a numeric seed from a string for convenience\nfunction hashSeed(text) {\n let h = 2166136261 >>> 0;\n for (let i = 0; i < text.length; i++) {\n h ^= text.charCodeAt(i);\n h = Math.imul(h, 16777619);\n }\n return h >>> 0;\n}\n\n// ---------- Agent world -----------------------------------------------------\nconst PD = { T: 5, R: 3, P: 1, S: 0 }; // Temptation/Reward/Punishment/Sucker\n\nfunction makeAgents(n, rand, width, height) {\n const agents = [];\n for (let i = 0; i < n; i++) {\n agents.push({\n x: rand() * width,\n y: rand() * height,\n vx: (rand() - 0.5) * 0.5,\n vy: (rand() - 0.5) * 0.5,\n strat: rand() < 0.6 ? \"C\" : \"D\",\n score: 0,\n energy: 1,\n hue: rand() * 360,\n });\n }\n return agents;\n}\n\nfunction interact(a, b) {\n // Payoff matrix for Prisoner’s Dilemma\n const sa = a.strat;\n const sb = b.strat;\n if (sa === \"C\" && sb === \"C\") {\n a.score += PD.R;\n b.score += PD.R;\n } else if (sa === \"C\" && sb === \"D\") {\n a.score += PD.S;\n b.score += PD.T;\n } else if (sa === \"D\" && sb === \"C\") {\n a.score += PD.T;\n b.score += PD.S;\n } else {\n a.score += PD.P;\n b.score += PD.P;\n }\n}\n\nfunction adapt(a, localAvg, rand) {\n // Very gentle adaptation pressure\n if (a.score < localAvg && rand() < 0.01) {\n a.strat = a.strat === \"C\" ? \"D\" : \"C\";\n }\n}\n\n// ---------- React Component -------------------------------------------------\nexport default function AlliesGameWindow() {\n const canvasRef = useRef(null);\n const [playing, setPlaying] = useState(true);\n const [speed, setSpeed] = useState(1);\n const [pop, setPop] = useState(28);\n const [seedText, setSeedText] = useState(\"MAX&ALLIE:W102\");\n const [tick, setTick] = useState(0);\n const [stats, setStats] = useState({ fps: 0, coop: 0, def: 0, avgScore: 0, entropy: 0 });\n\n const seed = useMemo(() => hashSeed(seedText), [seedText]);\n const rand = useMemo(() => mulberry32(seed), [seed]);\n const noise = useMemo(() => makeNoise2D(seed ^ 0x9e3779b1, 96), [seed]);\n\n const worldRef = useRef({ agents: [], t: 0 });\n const rafRef = useRef(0);\n const lastFrameRef = useRef(performance.now());\n const fpsRef = useRef(0);\n\n // Initialize world when seed/pop changes\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n const DPR = Math.min(window.devicePixelRatio || 1, 2);\n const W = (canvas.width = Math.floor(canvas.clientWidth * DPR));\n const H = (canvas.height = Math.floor(canvas.clientHeight * DPR));\n ctx.setTransform(DPR, 0, 0, DPR, 0, 0);\n\n const r = mulberry32(seed ^ 0xA5A5A5A5);\n worldRef.current.agents = makeAgents(pop, r, canvas.clientWidth, canvas.clientHeight);\n worldRef.current.t = 0;\n setTick(0);\n }, [seed, pop]);\n\n // Resize handling\n useEffect(() => {\n function onResize() {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n const DPR = Math.min(window.devicePixelRatio || 1, 2);\n canvas.width = Math.floor(canvas.clientWidth * DPR);\n canvas.height = Math.floor(canvas.clientHeight * DPR);\n ctx.setTransform(DPR, 0, 0, DPR, 0, 0);\n }\n onResize();\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n // Main loop\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n\n const W = canvas.clientWidth;\n const H = canvas.clientHeight;\n\n function step() {\n const now = performance.now();\n const dt = Math.min(0.05, (now - lastFrameRef.current) / 1000) * speed; // cap to avoid jumps\n lastFrameRef.current = now;\n fpsRef.current = 0.9 * fpsRef.current + 0.1 * (1 / Math.max(1e-6, dt));\n\n // Background: flowing value-noise field with slow time-translation\n const t = (worldRef.current.t += dt * 0.05);\n const scale = 0.0016; // spatial scale of the field\n\n const img = ctx.createImageData(W, H);\n let idx = 0;\n for (let y = 0; y < H; y++) {\n for (let x = 0; x < W; x++) {\n const n = noise(x * scale + t, y * scale - t);\n // Convert noise → soft twilight palette\n const v = n;\n const r = 12 + 180 * v;\n const g = 18 + 110 * Math.sqrt(v);\n const b = 28 + 220 * (1 - v);\n img.data[idx++] = r;\n img.data[idx++] = g;\n img.data[idx++] = b;\n img.data[idx++] = 255;\n }\n }\n ctx.putImageData(img, 0, 0);\n\n // Derive a flow-field from noise by sampling gradients\n const grad = (x, y) => {\n const e = 0.0025;\n const n1 = noise(x * scale + e + t * 0.5, y * scale + t * 0.5);\n const n2 = noise(x * scale - e + t * 0.5, y * scale + t * 0.5);\n const n3 = noise(x * scale + t * 0.5, y * scale + e + t * 0.5);\n const n4 = noise(x * scale + t * 0.5, y * scale - e + t * 0.5);\n return { gx: (n1 - n2) / (2 * e), gy: (n3 - n4) / (2 * e) };\n };\n\n const agents = worldRef.current.agents;\n const nA = agents.length;\n\n // Interactions + movement\n const R = 18; // interaction radius\n for (let i = 0; i < nA; i++) {\n const a = agents[i];\n // Move along flow + a bit of inertia\n const g = grad(a.x, a.y);\n a.vx = 0.9 * a.vx + 0.8 * g.gx;\n a.vy = 0.9 * a.vy + 0.8 * g.gy;\n a.x += a.vx;\n a.y += a.vy;\n // wrap\n if (a.x < 0) a.x += W;\n if (a.x >= W) a.x -= W;\n if (a.y < 0) a.y += H;\n if (a.y >= H) a.y -= H;\n }\n\n // Pairwise interactions (naive O(n^2) — fine for small n)\n for (let i = 0; i < nA; i++) {\n for (let j = i + 1; j < nA; j++) {\n const a = agents[i];\n const b = agents[j];\n let dx = a.x - b.x;\n let dy = a.y - b.y;\n // account for wrap-around distances\n if (dx > W / 2) dx -= W; else if (dx < -W / 2) dx += W;\n if (dy > H / 2) dy -= H; else if (dy < -H / 2) dy += H;\n const d2 = dx * dx + dy * dy;\n if (d2 < R * R) {\n interact(a, b);\n // mild separation force\n const d = Math.sqrt(d2) + 1e-6;\n const push = (R - d) * 0.005;\n a.vx += (dx / d) * push;\n a.vy += (dy / d) * push;\n b.vx -= (dx / d) * push;\n b.vy -= (dy / d) * push;\n }\n }\n }\n\n // Local averages + adaptation\n for (let i = 0; i < nA; i++) {\n const a = agents[i];\n let total = 0, cnt = 0;\n for (let j = 0; j < nA; j++) {\n if (i === j) continue;\n const b = agents[j];\n let dx = a.x - b.x;\n let dy = a.y - b.y;\n if (dx > W / 2) dx -= W; else if (dx < -W / 2) dx += W;\n if (dy > H / 2) dy -= H; else if (dy < -H / 2) dy += H;\n if (dx * dx + dy * dy < R * R) {\n total += b.score;\n cnt++;\n }\n }\n const localAvg = cnt ? total / cnt : a.score;\n adapt(a, localAvg, rand);\n }\n\n // Render agents\n for (let i = 0; i < nA; i++) {\n const a = agents[i];\n // strategy color tint\n const isC = a.strat === \"C\";\n ctx.beginPath();\n ctx.arc(a.x, a.y, isC ? 3.3 : 3.8, 0, Math.PI * 2);\n ctx.fillStyle = isC ? \"rgba(40,250,255,0.9)\" : \"rgba(255,80,120,0.9)\";\n ctx.fill();\n // small direction line\n ctx.beginPath();\n ctx.moveTo(a.x, a.y);\n ctx.lineTo(a.x + a.vx * 3, a.y + a.vy * 3);\n ctx.strokeStyle = isC ? \"rgba(200,255,255,0.6)\" : \"rgba(255,200,220,0.6)\";\n ctx.lineWidth = 1;\n ctx.stroke();\n }\n\n // Update simple stats once per frame\n const coop = agents.filter((a) => a.strat === \"C\").length;\n const def = nA - coop;\n const avgScore = agents.reduce((s, a) => s + a.score, 0) / Math.max(1, nA);\n const p = coop / Math.max(1, nA);\n const entropy = -p * Math.log2(p || 1) - (1 - p) * Math.log2(1 - p || 1);\n setStats({ fps: fpsRef.current, coop, def, avgScore, entropy });\n\n setTick((k) => k + 1);\n rafRef.current = requestAnimationFrame(loop);\n }\n\n function loop() {\n if (playing) step();\n else rafRef.current = requestAnimationFrame(loop);\n }\n\n rafRef.current = requestAnimationFrame(loop);\n return () => cancelAnimationFrame(rafRef.current);\n }, [playing, speed, noise, rand]);\n\n const resetWorld = () => {\n // force re-init by nudging seed (no UI change) then back\n setSeedText((s) => s + \" \");\n setTimeout(() => setSeedText((s) => s.trim()), 0);\n };\n\n return (\n

\n \n \n \n \n \n Window to Allie’s Game World\n \n \n \n

\n \n \n

\n tick {tick}\n

\n\n

\n Speed\n {speed.toFixed(2)}×\n

\n setSpeed(v[0])} />\n

\n Population\n {pop}\n

\n setPop(Math.round(v[0]))} />\n

\n\n

\n Seed\n setSeedText(e.target.value)}\n />\n

\n\n

\n {/* portal glow */}\n

\n \n \n \n\n {/* Right panel: Statics & Dynamics */}\n \n

\n \n \n Statics\n \n \n

FPS{stats.fps.toFixed(1)}
Agents{stats.coop + stats.def}
Cooperators{stats.coop}
Defectors{stats.def}
Avg Score{stats.avgScore.toFixed(2)}
Strategy Entropy{stats.entropy.toFixed(3)}

\n \n \n\n \n \n Dynamics\n \n \n

\n Agents drift along a seeded flow-field (value-noise gradient). When within a small radius they play a\n one-shot Prisoner’s Dilemma (T/R/P/S = 5/3/1/0). Slow adaptation may flip their strategy if the local\n average score beats theirs.\n

\n \n C = Cooperate\n \n \n D = Defect\n \n

Tip: Try different seeds (e.g., \"Nest‑Wraith\", \"Blissound\", \"IluvatarOS\").

\n \n \n

\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","17134289061011621709","traceTime",1776400876007]