[{"_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","raziels","name","tiny-cobble-world","path","frontend/components/App.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":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":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/raziels/tiny-cobble-world/code/frontend/components/App.tsx","extension","id","e383d030-d89b-4816-93ea-427f0edf60e2","App.tsx","fileId","01a08500-73bc-710a-a2fb-b260d87c86ac","parentId","01a08500-73bc-710a-a2fb-b9e68780fe29","branchId","919d4b4f-13a8-48d5-9428-5261ebc5b018","branchVersion",2,"latest",true,"createdAt",["D",1788937805239],"version",1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {useEffect,useRef,useState} from \"https://esm.sh/react@18.2.0\";\ntype Block={x:number;y:number;z:number};\nconst N=10;\nfunction makeWorld(){const a:Block[]=[];for(let x=0;x(null),[blocks,setBlocks]=useState(makeWorld),[rot,setRot]=useState(.55),[pos,setPos]=useState({x:5,z:8}),[drag,setDrag]=useState(false),[last,setLast]=useState({x:0,y:0});\nuseEffect(()=>{const el=c.current!,ctx=el.getContext(\"2d\")!;const resize=()=>{el.width=innerWidth*devicePixelRatio;el.height=innerHeight*devicePixelRatio;ctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0)};resize();addEventListener(\"resize\",resize);let id=0;const draw=()=>{const w=innerWidth,h=innerHeight;ctx.clearRect(0,0,w,h);const g=ctx.createLinearGradient(0,0,0,h);g.addColorStop(0,\"#8ed0ef\");g.addColorStop(.55,\"#dff5ff\");g.addColorStop(.56,\"#9bcf68\");g.addColorStop(1,\"#4f843c\");ctx.fillStyle=g;ctx.fillRect(0,0,w,h);const s=Math.min(w,h)*.085,ca=Math.cos(rot),sa=Math.sin(rot);for(const b of blocks){const dx=b.x-pos.x,dz=b.z-pos.z,rx=dx*ca-dz*sa,rz=dx*sa+dz*ca,sx=w/2+rx*s,sy=h*.55+rz*s*.42-b.y*s;ctx.fillStyle=\"#8b9298\";ctx.beginPath();ctx.moveTo(sx,sy-s*.45);ctx.lineTo(sx+s*.5,sy-s*.2);ctx.lineTo(sx+s*.5,sy+s*.25);ctx.lineTo(sx,sy+s*.5);ctx.lineTo(sx-s*.5,sy+s*.25);ctx.lineTo(sx-s*.5,sy-s*.2);ctx.closePath();ctx.fill();ctx.strokeStyle=\"#596067\";ctx.stroke();ctx.strokeStyle=\"rgba(255,255,255,.22)\";ctx.beginPath();ctx.moveTo(sx-s*.28,sy-s*.1);ctx.lineTo(sx+s*.25,sy+s*.18);ctx.moveTo(sx,sy-s*.38);ctx.lineTo(sx-s*.12,sy+s*.32);ctx.stroke()}ctx.strokeStyle=\"rgba(255,255,255,.8)\";ctx.lineWidth=2;ctx.strokeRect(w/2-5,h*.55-5,10,10);id=requestAnimationFrame(draw)};draw();return()=>{cancelAnimationFrame(id);removeEventListener(\"resize\",resize)}},[blocks,rot,pos]);\nconst move=(dx:number,dz:number)=>{const ca=Math.cos(rot),sa=Math.sin(rot);setPos(p=>({x:Math.max(0,Math.min(9,p.x+dx*ca-dz*sa)),z:Math.max(0,Math.min(9,p.z+dx*sa+dz*ca))}))};const place=()=>{const x=Math.round(pos.x),z=Math.round(pos.z);setBlocks(b=>b.some(q=>q.x===x&&q.z===z&&q.y===1)?b:[...b,{x,y:1,z}])};const remove=()=>{setBlocks(b=>{const i=[...b].reverse().findIndex(q=>q.y===1);if(i<0)return b;const real=b.length-1-i;return b.filter((_,j)=>j!==real)})};const touchStart=(e:React.TouchEvent)=>{const t=e.touches[0];setDrag(true);setLast({x:t.clientX,y:t.clientY})};const touchMove=(e:React.TouchEvent)=>{if(!drag)return;const t=e.touches[0];setRot(r=>r+(t.clientX-last.x)*.012);setLast({x:t.clientX,y:t.clientY})};return

}\n","deleted",false,"label",[47,48,24],"frontend","components","71412b39-ea88-4e2f-a5b3-c478937f4064",["D",1788937794320],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","10x10 phone-friendly cobblestone building game","imageUrl","userId","151b79b1-d995-46cb-bc68-140038ba3959","pinnedFileId","01a08500-73bc-710a-a2fb-d5ec9fa3cac5","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a084fa-dc07-75ed-8eaa-46f0803b8997","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":90,"_22":30,"_91":49,"_92":93,"_94":95,"_96":54,"_97":98,"_99":69,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","f4715979-66ca-4606-8542-e6a30710d648","forkedBranchVersion",4,"forkedProjectPrivacy","forkedProjectId","9b720778-79a4-48e9-ae37-ff38c95dbb34","forkedProjectOrgId","projectName","userHandle","displayName","Raziel S","avatar","https://lh3.googleusercontent.com/a/ACg8ocKcQ2GwxzpzNB1V1fPW0uE-PdDqCDeRsoQsatc4PVytFe9O5Q=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_83":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":90,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

TINY COBBLE