[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b69c30f9988191b99a331ef8e6f58b","versionInt","title","Copie de Meta","type","code/react","content","import React, { useEffect, useRef, useState } from \"react\";\n\n// META.GAME — 2D Civilization (Zoom LOD) + SFX + Logs — BUGFIX BUILD\n// Fix: Close all JSX/blocks cleanly to resolve Unexpected token near EOF.\n// Also: precise zoom, hide/show populations, more trees, fewer/smaller rabbits,\n// SFW battle overlay, chatlogs, elves/fairies/dragons, mission: grow village.\n// Pure JS (no TS). Includes tiny console self-tests.\n\n// ============ Emoji HUD (Mojirossa-ish) ============\nconst EMOJI = {\n rabbit: \"🐇\", human: \"🧑\", skeleton: \"💀\", troll: \"🧌\", bee: \"🐝\",\n elf: \"🧝\", fairy: \"🧚\", dragon: \"🐉\",\n tree: \"🌳\", flower: \"🌼\", camp: \"🏕️\", tool: \"⛏️\", wood: \"🪵\", food: \"🥖\", sword: \"⚔️\", shield: \"🛡️\",\n planet_earth: \"🌍\", planet_moon: \"🌙\", planet_saturn: \"🪐\", group: \"👥\",\n};\n\nconst KINDS = [\"rabbit\",\"human\",\"skeleton\",\"troll\",\"bee\",\"elf\",\"fairy\",\"dragon\"];\n\n// ============ Caps & defaults ============\nconst MAX_AGENTS = 1600;\nconst REPRO_CAP_PER_KIND = 500;\n\nexport default function MetaGame_CivZoom3D(){\n // Canvas & camera\n const canvasRef = useRef(null);\n const [W,setW] = useState(0);\n const [H,setH] = useState(0);\n const [view, setView] = useState({ scale: 1, ox: 0, oy: 0 });\n const dragRef = useRef({dx:0,dy:0,active:false});\n\n // Sim\n const [tick,setTick] = useState(0);\n const [paused,setPaused] = useState(false);\n const [stage,setStage] = useState(0);\n const milestones = useRef({ camp:false, secure:false, food:false, wood:false, conflict:false });\n\n const [p,setP] = useState({\n speed: 0.22, vox: 16,\n ringConstrain: false,\n spawn: { rabbits: 40, humans: 70, skeletons: 28, trolls: 16, bees: 12, elves: 24, fairies: 18, dragons: 2 },\n trees: 90, flowers: 60, herbRegen: 0.004,\n emojiZoomTuning: 0.9,\n });\n\n // Visibility\n const [visible,setVisible] = useState({\n rabbit:true,human:true,skeleton:true,troll:true,bee:true,elf:true,fairy:true,dragon:true\n });\n\n // World grids\n const gwghRef = useRef({gw:0,gh:0});\n const herbsRef = useRef(null); // Float32Array 0..1\n const dugRef = useRef(null); // Uint8Array 0/1\n const treesRef = useRef([]); // [{gx,gy}]\n const flowersRef = useRef([]); // [{gx,gy}]\n\n // Entities & FX\n const agentsRef = useRef([]); // Agent[]\n const campsRef = useRef([]); // {x,y,wood,food,trenches}[]\n const idCounter = useRef(1);\n const fxRef = useRef([]); // {id,x,y,ts,type}\n const [fxTick,setFxTick] = useState(0);\n\n // Logs\n const logsRef = useRef([]); // [{ts,msg}]\n const [logsVer,setLogsVer] = useState(0);\n\n // ---------- Setup ----------\n useEffect(()=>{\n const onResize = ()=>{ setW(window.innerWidth); setH(window.innerHeight); };\n onResize();\n window.addEventListener('resize', onResize);\n return ()=> window.removeEventListener('resize', onResize);\n },[]);\n\n useEffect(()=>{\n rebuildWorld();\n seedAgents();\n runSelfTests();\n }, [p.vox, W, H]);\n\n // Interactions: precise zoom & drag pan\n useEffect(()=>{\n const c = canvasRef.current; if(!c) return;\n const onWheel = (e)=>{\n e.preventDefault();\n const scaleOld = view.scale;\n const factor = e.ctrlKey ? 0.03 : 0.08;\n const scaleNew = clamp(scaleOld * (1 - Math.sign(e.deltaY) * factor), 0.2, 5);\n const rect = c.getBoundingClientRect();\n const sx = (e.clientX - rect.left); const sy = (e.clientY - rect.top);\n const wx = (sx - view.ox) / scaleOld; const wy = (sy - view.oy) / scaleOld;\n const oxNew = sx - wx * scaleNew; const oyNew = sy - wy * scaleNew;\n setView(v=>({ ...v, scale: scaleNew, ox: oxNew, oy: oyNew }));\n };\n const onDown = (e)=>{ dragRef.current = {dx:e.clientX, dy:e.clientY, active:true}; };\n const onMove = (e)=>{ const d=dragRef.current; if(!d.active) return; const dx=e.clientX-d.dx, dy=e.clientY-d.dy; d.dx=e.clientX; d.dy=e.clientY; setView(v=>({ ...v, ox: v.ox+dx, oy: v.oy+dy })); };\n const onUp = ()=>{ dragRef.current.active=false; };\n c.addEventListener('wheel', onWheel, {passive:false});\n c.addEventListener('pointerdown', onDown);\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n return ()=>{\n c.removeEventListener('wheel', onWheel);\n c.removeEventListener('pointerdown', onDown);\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n }, [view.scale, view.ox, view.oy]);\n\n // ---------- World build ----------\n function rebuildWorld(){\n if(!W||!H) return;\n const gw = Math.ceil(W/p.vox), gh = Math.ceil(H/p.vox);\n gwghRef.current = {gw, gh};\n\n const herbs = new Float32Array(gw*gh);\n const dug = new Uint8Array(gw*gh);\n for(let y=0;y({ ...v, ox: W/2, oy: H/2 }));\n }\n\n function pushLog(msg){\n logsRef.current.push({ ts: Date.now(), msg });\n if(logsRef.current.length>80) logsRef.current.shift();\n setLogsVer(v=>v+1);\n }\n\n function seedAgents(){\n const arr = [];\n const cx = 0, cy = 0; // world origin\n const total = p.spawn.rabbits + p.spawn.humans + p.spawn.skeletons + p.spawn.trolls + p.spawn.bees + p.spawn.elves + p.spawn.fairies + p.spawn.dragons;\n const R = Math.min(W,H)*0.5*0.9;\n for(let n=0;n{\n let id=0; let last=performance.now();\n const step=(now)=>{\n id=requestAnimationFrame(step);\n if(paused || !W || !H) return;\n const dt = Math.min(120, now-last); if(dt < 1000/30) return; last=now;\n sim(dt*0.001*p.speed);\n draw(); setTick(t=>t+1);\n if(fxRef.current.length){ setFxTick(v=>v+1); fxRef.current = fxRef.current.filter(e=> now - e.ts < 1400); }\n };\n id=requestAnimationFrame(step);\n return ()=> cancelAnimationFrame(id);\n }, [paused, p.speed, p.herbRegen, W, H, view.scale, view.ox, view.oy]);\n\n function sim(dt){\n const herbs = herbsRef.current; const dug = dugRef.current; const gw=gwghRef.current.gw, gh=gwghRef.current.gh;\n if(herbs){ for(let i=0;i[]);\n const bi=(x,y)=> clamp(Math.floor((x+W/2)/cell),0,cols-1) + clamp(Math.floor((y+H/2)/cell),0,rows-1)*cols;\n for(const ag of A){ if(ag.alive) buckets[bi(ag.x,ag.y)].push(ag); }\n\n const countByKind = {rabbit:0,human:0,skeleton:0,troll:0,bee:0,elf:0,fairy:0,dragon:0};\n for(const ag of A){ if(ag.alive) countByKind[ag.kind]++; }\n\n let humanKills=0;\n\n for(const ag of A){\n if(!ag.alive){ ag.cool-=dt; continue; }\n let ax=(Math.random()-0.5)*0.02, ay=(Math.random()-0.5)*0.02;\n\n // cohesion & separation\n const ix=Math.floor((ag.x+W/2)/cell), iy=Math.floor((ag.y+H/2)/cell); let cnt=0;\n for(let oy=-1;oy<=1;oy++){\n for(let ox=-1;ox<=1;ox++){\n const bx=ix+ox, by=iy+oy; if(bx<0||by<0||bx>=cols||by>=rows) continue; const list=buckets[bx+by*cols];\n for(const nb of list){\n if(nb===ag||!nb.alive) continue; const dx=nb.x-ag.x, dy=nb.y-ag.y; const d2=dx*dx+dy*dy;\n if(d2>60 && d2<1600){ const d=Math.sqrt(d2); if(nb.kind===ag.kind || nb.clan===ag.clan){ ax+=dx/d*0.04; ay+=dy/d*0.04; cnt++; } if(d<14){ ax-=dx/d*0.12; ay-=dy/d*0.12; } }\n }\n }\n }\n if(cnt){ ax/=cnt; ay/=cnt; }\n\n // FOOD / MAGIC\n if(ag.kind==='rabbit'){\n const sam = sampleHerb(ag.x, ag.y, p.vox, gw, gh, herbs); const take = Math.min(0.02, sam*0.04);\n if(take>0){ ag.energy = clamp01(ag.energy + take*1.2); depositHerb(ag.x,ag.y,p.vox,gw,gh,herbs, -take); }\n let best=-1, bx=0, by=0; const r=16; for(let j=0;j<6;j++){ const a=j*(Math.PI*2/6); const lx=ag.x+Math.cos(a)*r, ly=ag.y+Math.sin(a)*r; const v=sampleHerb(lx,ly,p.vox,gw,gh,herbs); if(v>best){ best=v; bx=lx-ag.x; by=ly-ag.y; } }\n const d=Math.hypot(bx,by)||1; ax+=bx/d*0.07; ay+=by/d*0.07;\n if(ag.energy>0.95 && Math.random()<0.02 && countByKind.rabbit2 && !ag.tool){ ag.tool=true; } }\n if((ag.kind==='human' || ag.kind==='elf' || ag.kind==='troll') && ag.tool && Math.random()<0.005){ markDug(ag.x,ag.y,p.vox,gw,gh,dug); }\n if(ag.kind==='human' || ag.kind==='elf'){\n if(ag.wood>0.6 && Math.random()<0.003){ const camp=campsRef.current[0]; if(camp){ camp.wood+=1; } else { campsRef.current.push({x:ag.x,y:ag.y,wood:1,food:0,trenches:0}); milestones.current.camp=true; pushLog(\"🏕️ Camp founded by \"+(ag.kind==='elf'?\"elves\":\"humans\")); } ag.wood=0; }\n const samFood = sampleHerb(ag.x,ag.y,p.vox,gw,gh,herbs); if(samFood>0.2){ const take=Math.min(0.015,samFood*0.03); if(take>0){ depositHerb(ag.x,ag.y,p.vox,gw,gh,herbs,-take); } }\n }\n }\n\n // COMBAT\n const range = ag.kind==='dragon'? 38 : 22; let victim;\n const local=buckets[bi(ag.x,ag.y)];\n for(const nb of local){\n if(nb===ag || !nb.alive) continue; const d=Math.hypot(nb.x-ag.x, nb.y-ag.y);\n if(dR2){ const ang=Math.atan2(ag.y,ag.x); ag.x=Math.cos(ang)*R2; ag.y=Math.sin(ang)*R2; ag.vx*=-0.35; ag.vy*=-0.35; } }\n\n // human reproduction\n if(ag.kind==='human' && Math.random()<0.010 && countByKind.human6) milestones.current.wood=true; if(camp.food>4) milestones.current.food=true; if(camp.trenches>18) milestones.current.secure=true; }\n if(humanKills>20) milestones.current.conflict=true;\n\n const sKeys = ['camp','secure','food','wood','conflict']; let s=0; for(const k of sKeys){ if(milestones.current[k]) s++; } setStage(s);\n }\n\n // ---------- Drawing ----------\n function draw(){\n const c = canvasRef.current; if(!c) return; const ctx = c.getContext('2d'); if(!ctx) return;\n const DPR=Math.min(2, window.devicePixelRatio||1); c.width=Math.floor(W*DPR); c.height=Math.floor(H*DPR); ctx.setTransform(DPR,0,0,DPR,0,0);\n\n // clear\n ctx.fillStyle = '#0b0b0f'; ctx.fillRect(0,0,W,H);\n\n // camera\n ctx.save(); ctx.translate(view.ox, view.oy); ctx.scale(view.scale, view.scale);\n\n // grid & axes\n drawAxes(ctx, W, H);\n\n // herbs voxels\n const herbs=herbsRef.current; const gw=gwghRef.current.gw, gh=gwghRef.current.gh;\n if(herbs){ for(let gy=0; gya.alive && visible[a.kind]);\n if(view.scale < 0.8){\n drawClusters(ctx, alive, 48, (bin)=>{\n let dom='human'; let max=0; const count={};\n for(const a of bin){ count[a.kind]=(count[a.kind]||0)+1; if(count[a.kind]>max){ max=count[a.kind]; dom=a.kind; } }\n return { emoji: EMOJI[dom], color: 'rgba(255,255,255,0.85)' };\n });\n } else {\n for(const ag of alive){\n const base = fontSizeFor(ag);\n const size = base * (1 - (1 - p.emojiZoomTuning) * Math.min(1.2, Math.max(0.7, view.scale)));\n ctx.save(); ctx.font = `${size}px system-ui, Apple Color Emoji`; ctx.shadowBlur=10; ctx.shadowColor='rgba(255,255,255,0.25)'; ctx.fillText(EMOJI[ag.kind], ag.x, ag.y); ctx.restore();\n }\n }\n\n // camps\n for(const camp of campsRef.current){\n ctx.save(); ctx.font=`20px system-ui, Apple Color Emoji`; ctx.fillText(EMOJI.camp, camp.x, camp.y);\n ctx.font=`12px ui-monospace`; ctx.fillStyle='rgba(255,255,255,0.8)'; ctx.fillText(`${EMOJI.wood}${camp.wood} ${EMOJI.food}${camp.food} ${EMOJI.tool}${camp.trenches}`, camp.x, camp.y-20);\n ctx.restore();\n }\n\n // end camera\n ctx.restore();\n\n // HUD\n const s3d = stage>=4; const popLive = agentsRef.current.filter(a=>a.alive).length;\n ctx.fillStyle='rgba(255,255,255,0.86)'; ctx.font='12px ui-monospace, SFMono-Regular'; ctx.fillText(`tick ${tick} · pop ${popLive}/${agentsRef.current.length} · zoom ${view.scale.toFixed(2)} · stage ${stage}${s3d?' (3D prep ✅)':''}`, 8, 16);\n }\n\n // ---------- Helpers ----------\n function clamp(v,min,max){ return vmax?max: v; }\n function clamp01(v){ return v<0?0: v>1?1: v; }\n function sampleHerb(x,y, vox, gw, gh, herbs){ if(!herbs) return 0; const gx=clamp(Math.floor((x+W/2)/vox),0,gw-1), gy=clamp(Math.floor((y+H/2)/vox),0,gh-1); return herbs[gx+gy*gw]; }\n function depositHerb(x,y, vox, gw, gh, herbs, amt){ if(!herbs) return; const gx=clamp(Math.floor((x+W/2)/vox),0,gw-1), gy=clamp(Math.floor((y+H/2)/vox),0,gh-1); const id=gx+gy*gw; herbs[id]=clamp01(herbs[id]+amt); }\n function markDug(x,y, vox, gw, gh, dug){ if(!dug) return; const gx=clamp(Math.floor((x+W/2)/vox),0,gw-1), gy=clamp(Math.floor((y+H/2)/vox),0,gh-1); dug[gx+gy*gw]=1; }\n function countDugAround(x,y, vox, gw, gh, dug){ if(!dug) return 0; let c=0; const gx=clamp(Math.floor((x+W/2)/vox),0,gw-1), gy=clamp(Math.floor((y+H/2)/vox),0,gh-1); for(let oy=-2;oy<=2;oy++){ for(let ox=-2;ox<=2;ox++){ const ix=clamp(gx+ox,0,gw-1), iy=clamp(gy+oy,0,gh-1); c += dug[ix+iy*gw]?1:0; } } return c; }\n function cloneAgent(a, over){ return { ...a, id: idCounter.current++, ...over }; }\n function findNearestTree(x,y, vox, trees, W,H, dist){ const r=dist; for(const t of trees){ const tx=(t.gx+0.5)*vox - W/2, ty=(t.gy+0.5)*vox - H/2; if(Math.abs(tx-x)minX; x-=step){ ctx.moveTo(x, minY); ctx.lineTo(x, maxY); } for(let x=0; xminY; y-=step){ ctx.moveTo(minX, y); ctx.lineTo(maxX, y); } for(let y=0; yv+1); }\n\n // ---------- Self-tests (console) ----------\n function runSelfTests(){\n try{\n rebuildWorld();\n const herbs = herbsRef.current; const gw=gwghRef.current.gw, gh=gwghRef.current.gh;\n const centerVal = herbs ? herbs[Math.floor(gw/2)+Math.floor(gh/2)*gw] : 0.5;\n console.assert(centerVal>=0 && centerVal<=1, \"Herb value out of [0,1]\");\n const fake = { id:1, kind:'human', clan:0, x:0,y:0,vx:0,vy:0,energy:1,size:1,alive:true,tool:false,wood:0,cool:0 };\n const c1 = cloneAgent(fake,{x:1}); const c2 = cloneAgent(fake,{x:2});\n console.assert(c2.id===c1.id+1, \"cloneAgent should increment id\");\n const tmpCtx = document.createElement('canvas').getContext('2d'); if(tmpCtx){ drawClusters(tmpCtx, [{x:0,y:0,alive:true,kind:'human'}], 48, (bin)=>({emoji:'👤',color:'#fff'})); }\n }catch(e){ console.warn('Self-tests skipped:', e); }\n }\n\n // ---------- Render ----------\n return (\n

META.GAME

2D Civ • Zoom LOD • Tools • {stage>=4?\"3D Ready\":\"Stage \"+stage}

tick {tick}

\n \n

\n\n {/* Canvas world + overlays */}\n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","2608346066756464660","traceTime",1779846746277]