[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","oromaskevic23","name","milliarder-game","path","frontend/components/SoftwareWorld.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/oromaskevic23/milliarder-game/code/frontend/components/SoftwareWorld.tsx","extension","id","7a24d13c-d382-43c8-a262-6fff84251ed4","SoftwareWorld.tsx","fileId","0290ae94-ab40-11f1-9bc0-1607ee4eb77e","parentId","01a07db8-12e1-737f-8f4d-97955a009b88","branchId","242054ff-3ca3-4962-9fd2-94e6539fc3eb","branchVersion",18,"latest",true,"createdAt",["D",1788842683437],"version",0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useEffect,useRef} from \"https://esm.sh/react@18.2.0\";\nimport {generateChunk,getChunkKeys,getTraffic,VEHICLES,LOCATIONS,type DubaiState} from \"../dubaiEngine.ts\";\ntype P={x:number;y:number;z:number};\n/** Canvas perspective renderer used only when WebGL2 is unavailable. Original geometry; no external assets. */\nexport function SoftwareWorld({state,cameraMode,onStats,onReady}:{state:DubaiState;cameraMode:string;onStats?:(x:any)=>void;onReady?:(s:string)=>void}){\n const canvas=useRef(null),latest=useRef({state,cameraMode,onStats,onReady});latest.current={state,cameraMode,onStats,onReady};\n useEffect(()=>{const el=canvas.current!,ctx=el.getContext(\"2d\");if(!ctx){latest.current.onReady?.(\"CANVAS_UNAVAILABLE\");return;}let w=1,h=1,raf=0,last=0,frames=0,statsAt=performance.now(),disposed=false;let cache=new Map>();\n const size=()=>{w=el.clientWidth;h=el.clientHeight;el.width=Math.max(1,w);el.height=Math.max(1,h);};const ro=new ResizeObserver(size);ro.observe(el);size();\n const tint=(hex:string,n:number)=>{const c=hex.replace('#','');const rgb=[0,2,4].map(i=>Math.min(255,Math.round(parseInt(c.slice(i,i+2),16)*n)));return `rgb(${rgb.join(',')})`;};\n const frame=(now:number)=>{if(disposed)return;raf=requestAnimationFrame(frame);if(now-last<32)return;last=now;frames++;\n const {state:s,cameraMode:mode}=latest.current;const keys=getChunkKeys(s.position.x,s.position.z,1);for(const k of cache.keys())if(!keys.includes(k))cache.delete(k);for(const k of keys)if(!cache.has(k)){const [x,z]=k.split(',').map(Number);cache.set(k,generateChunk(x,z));}\n const heading=s.heading+(mode==='orbit'?-.55:0),sh=Math.sin(heading),ch=Math.cos(heading),pitch=mode==='cockpit'&&s.driving?.04:mode==='orbit'?.38:.17;\n const cp=Math.cos(pitch),sp=Math.sin(pitch),away=mode==='cockpit'&&s.driving?0:mode==='orbit'?46:s.driving?17:14;\n const cam={x:s.position.x-sh*away,y:mode==='cockpit'&&s.driving?1.5:mode==='orbit'?29:s.driving?7:6,z:s.position.z+ch*away};\n const focal=Math.min(w,h)*.95,night=s.clock<330||s.clock>1160,rain=s.weather==='rain',haze=s.weather==='haze';\n const sky=ctx.createLinearGradient(0,0,0,h*.65);sky.addColorStop(0,night?'#142a45':rain?'#778c95':'#588daa');sky.addColorStop(1,night?'#78605b':rain?'#bfbcab':'#f1c18c');ctx.fillStyle=sky;ctx.fillRect(0,0,w,h);\n ctx.fillStyle=night?'#31383e':'#a99578';ctx.fillRect(0,h*.54,w,h*.46);\n if(!rain){ctx.fillStyle=night?'#dce4cf':'#fff0c1';ctx.beginPath();ctx.arc(w*.77,h*.23,night?16:27,0,Math.PI*2);ctx.fill();}\n const view=(p:P)=>{const dx=p.x-cam.x,dy=p.y-cam.y,dz=p.z-cam.z,zf=dx*sh-dz*ch;return {x:dx*ch+dz*sh,y:dy*cp+zf*sp,z:zf*cp-dy*sp};};\n const faces:{p:P[];color:string;depth:number;windows:boolean}[]=[];\n const face=(p:P[],color:string,windows=false)=>{let v=p.map(view);if(v.every(a=>a.z<.8)||v.every(a=>a.z>820))return;const out:P[]=[];for(let i=0;i=.8,ib=b.z>=.8;if(ia)out.push(a);if(ia!==ib){const t=(.8-a.z)/(b.z-a.z);out.push({x:a.x+(b.x-a.x)*t,y:a.y+(b.y-a.y)*t,z:.8});}}if(out.length<3)return;faces.push({p:out,color,windows,depth:out.reduce((n,a)=>n+a.z,0)/out.length});};\n const box=(x:number,z:number,bw:number,bd:number,bh:number,color:string,y=0)=>{const a={x:x-bw/2,y,z:z-bd/2},b={x:x+bw/2,y,z:z-bd/2},c={x:x+bw/2,y,z:z+bd/2},d={x:x-bw/2,y,z:z+bd/2};const top=(p:P)=>({...p,y:y+bh});face([a,b,top(b),top(a)],tint(color,.63),bh>12);face([b,c,top(c),top(b)],tint(color,.78),bh>12);face([c,d,top(d),top(c)],tint(color,.92),bh>12);face([d,a,top(a),top(d)],tint(color,.74),bh>12);face([top(a),top(b),top(c),top(d)],tint(color,1.08));};\n const flat=(x:number,z:number,bw:number,bd:number,color:string,y=0)=>face([{x:x-bw/2,y,z:z-bd/2},{x:x+bw/2,y,z:z-bd/2},{x:x+bw/2,y,z:z+bd/2},{x:x-bw/2,y,z:z+bd/2}],color);\n for(const c of cache.values()){const x=c.cx*256,z=c.cz*256;flat(x+128,z+128,256,256,night?'#15212a':'#414d50',-.05);for(let ix=0;ix<2;ix++)for(let iz=0;iz<2;iz++){const bx=x+ix*128+64,bz=z+iz*128+64;flat(bx,bz,90,90,night?'#39403e':'#c7b798',.02);for(let j=0;j<4;j++){flat(x+ix*128,z+iz*128+j*32, .28,13,'#ceba83',.04);flat(x+ix*128+j*32,z+iz*128,13,.28,'#ceba83',.04);}for(const dx of[-42,42]){box(bx+dx,bz, .65,.65,8,'#826b50');box(bx+dx,bz,7,2,.45,'#527464',7.7);box(bx+dx,bz,2,7,.45,'#496e59',7.5);}}for(const b of c.buildings){box(b.x,b.z,b.width,b.depth,b.height,b.color);if(b.height>80){box(b.x,b.z,b.width*.5,b.depth*.6,b.height*.17,b.color,b.height);box(b.x,b.z,.6,.6,24,'#dab985',b.height*1.17);}}}\n for(const v of getTraffic(s.clock)){if(Math.hypot(v.x-s.position.x,v.z-s.position.z)>450)continue;box(v.x,v.z,2,4.3,.7,v.color,.35);box(v.x,v.z,1.65,2,.5,'#29434f',1.05);}\n for(const n of s.npcs){if(Math.hypot(n.x-s.position.x,n.z-s.position.z)>350)continue;box(n.x,n.z,.55,.36,1.3,n.memory.includes('PLAYER_HELPED')?'#86b29c':'#d8ccb1',.15);box(n.x,n.z,.35,.35,.35,'#ba9278',1.5);}\n if(mode!=='cockpit'){if(s.driving){const v=VEHICLES.find(x=>x.id===s.selectedVehicle)!;box(s.position.x,s.position.z,2.1,4.5,.62,v.color,.38);box(s.position.x,s.position.z,1.7,1.95,.6,'#28434e',1);for(const dx of[-1.02,1.02])for(const dz of[-1.5,1.5])box(s.position.x+dx,s.position.z+dz,.3,.72,.72,'#102026',.04);}else{box(s.position.x,s.position.z,.55,.4,1.3,'#e2d4b9',.2);box(s.position.x,s.position.z,.36,.36,.36,'#b88c6b',1.5);}}\n faces.sort((a,b)=>b.depth-a.depth);let draws=0;for(const f of faces){const points=f.p.map(p=>({x:w/2+p.x/p.z*focal,y:h*.50-p.y/p.z*focal}));if(points.every(p=>p.x<0)||points.every(p=>p.x>w)||points.every(p=>p.y<0)||points.every(p=>p.y>h))continue;ctx.beginPath();points.forEach((p,i)=>i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y));ctx.closePath();ctx.fillStyle=f.color;ctx.fill();draws++;\n if(f.windows&&points.length===4&&f.depth<330){ctx.save();ctx.clip();ctx.strokeStyle=night?'#d6b67e77':'#a1c4d650';ctx.lineWidth=.7;for(let i=1;i<12;i++){const t=i/12,a={x:points[0].x+(points[3].x-points[0].x)*t,y:points[0].y+(points[3].y-points[0].y)*t},b={x:points[1].x+(points[2].x-points[1].x)*t,y:points[1].y+(points[2].y-points[1].y)*t};ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();}ctx.restore();}}\n for(const l of LOCATIONS){const d=Math.hypot(l.x-s.position.x,l.z-s.position.z);if(d>150)continue;const v=view({x:l.x,y:4,z:l.z});if(v.z<2)continue;const x=w/2+v.x/v.z*focal,y=h*.5-v.y/v.z*focal;ctx.font='11px Arial';const tw=ctx.measureText(l.name).width+20;ctx.fillStyle='#142a34ca';ctx.fillRect(x-tw/2,y-16,tw,23);ctx.strokeStyle='#d5b57c';ctx.strokeRect(x-tw/2,y-16,tw,23);ctx.fillStyle='#e8d4ad';ctx.textAlign='center';ctx.fillText(l.name,x,y);}\n if(mode==='cockpit'&&s.driving){const g=ctx.createLinearGradient(0,h*.86,0,h);g.addColorStop(0,'#1c2c36');g.addColorStop(1,'#081119');ctx.fillStyle=g;ctx.fillRect(0,h*.86,w,h*.14);ctx.strokeStyle='#a48e65';ctx.lineWidth=4;ctx.beginPath();ctx.arc(w*.32,h*.97,64,Math.PI,Math.PI*2);ctx.stroke();}\n if(rain){ctx.strokeStyle='#dbedef44';ctx.lineWidth=1;for(let i=0;i<70;i++){const x=(i*137)%w,y=(i*73+now*.4)%h;ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(x-3,y+15);ctx.stroke();}}if(haze){ctx.fillStyle='#d1b69522';ctx.fillRect(0,0,w,h);}if(s.interior){ctx.fillStyle='#10232f';ctx.fillRect(0,h*.15,w,h*.65);ctx.fillStyle='#536976';ctx.fillRect(w*.1,h*.2,w*.8,h*.3);ctx.fillStyle='#b1a084';ctx.fillRect(w*.2,h*.56,w*.6,h*.2);ctx.fillStyle='#e6d5b3';ctx.font='24px Georgia';ctx.textAlign='center';ctx.fillText(LOCATIONS.find(l=>l.id===s.interior)?.name||'Резиденция',w/2,h*.43);}\n if(now-statsAt>1000){latest.current.onStats?.({fps:Math.round(frames*1000/(now-statsAt)),chunks:cache.size,drawCalls:draws});statsAt=now;frames=0;}\n };raf=requestAnimationFrame(frame);latest.current.onReady?.('SOFTWARE_RENDERER_READY');return()=>{disposed=true;cancelAnimationFrame(raf);ro.disconnect();cache.clear();};},[]);\n return