Spaces:
Running
Running
| /* Shared, deterministic Canvas renderers. No network access or model execution. */ | |
| (function(global) { | |
| ; | |
| const C = {bg:"#ffffff",panel:"#f4f6f8",line:"#cbd4df",cream:"#273448",muted:"#697586",gold:"#a87821",mint:"#3b7db6"}; | |
| // Coordinates and turn signs mirror arena/games/cube.py. Every sticker is read | |
| // from the recorded payload, including faces revealed during a layer turn. | |
| const CUBE_FACES={ | |
| U:{normal:[0,1,0],right:[1,0,0],down:[0,0,1]}, | |
| D:{normal:[0,-1,0],right:[1,0,0],down:[0,0,-1]}, | |
| L:{normal:[-1,0,0],right:[0,0,1],down:[0,-1,0]}, | |
| R:{normal:[1,0,0],right:[0,0,-1],down:[0,-1,0]}, | |
| F:{normal:[0,0,1],right:[1,0,0],down:[0,-1,0]}, | |
| B:{normal:[0,0,-1],right:[-1,0,0],down:[0,-1,0]} | |
| }; | |
| const cubeAdd=(a,b)=>a.map((v,i)=>v+b[i]); | |
| const cubeScale=(a,s)=>a.map(v=>v*s); | |
| const cubeDot=(a,b)=>a.reduce((s,v,i)=>s+v*b[i],0); | |
| function cubePosition(face,row,column){const f=CUBE_FACES[face];return cubeAdd(f.normal,cubeAdd(cubeScale(f.right,column-1),cubeScale(f.down,row-1)));} | |
| function cubeRotate(v,axis,angle){ | |
| const [x,y,z]=v,c=Math.cos(angle),s=Math.sin(angle); | |
| return axis===0?[x,y*c-z*s,y*s+z*c]:axis===1?[x*c+z*s,y,-x*s+z*c]:[x*c-y*s,x*s+y*c,z]; | |
| } | |
| function cubeTurn(action){ | |
| if(typeof action!=="string"||!/^[UDLRFB]'?$/.test(action))return null; | |
| const n=CUBE_FACES[action[0]].normal,axis=n.findIndex(v=>v!==0),sign=n[axis]; | |
| return {axis,sign,angle:(action.endsWith("'")?sign:-sign)*Math.PI/2}; | |
| } | |
| function cubeStickers(faces){ | |
| if(!faces)return null; | |
| const result=[]; | |
| for(const [face,f] of Object.entries(CUBE_FACES)){ | |
| const rows=faces[face]; | |
| if(!Array.isArray(rows)||rows.length!==3||rows.some(r=>!Array.isArray(r)||r.length!==3))return null; | |
| rows.forEach((row,r)=>row.forEach((color,c)=>result.push({position:cubePosition(face,r,c),normal:f.normal,color,face,row:r,column:c}))); | |
| } | |
| return result; | |
| } | |
| function cubeKey(position,normal){return [...position,...normal].map(v=>Math.round(v)).join(",");} | |
| function cubeTransitionMatches(before,after,action){ | |
| const turn=cubeTurn(action),source=cubeStickers(before?.faces),target=cubeStickers(after?.faces); | |
| if(!turn||!source||!target)return false; | |
| const actual=new Map(target.map(s=>[cubeKey(s.position,s.normal),s.color])); | |
| return source.every(s=>{ | |
| const moving=s.position[turn.axis]===turn.sign; | |
| const p=moving?cubeRotate(s.position,turn.axis,turn.angle):s.position; | |
| const n=moving?cubeRotate(s.normal,turn.axis,turn.angle):s.normal; | |
| return actual.get(cubeKey(p,n))===s.color; | |
| }); | |
| } | |
| function create(canvas, options={}) { | |
| const ctx=canvas.getContext("2d"); | |
| let renderSequence=0; | |
| const nesImages=new Map(); | |
| const compactMode=()=>options.compact ?? (window.innerWidth<=600); | |
| // All drawings come directly from the active game's renderer payload. | |
| function rect(x,y,w,h,fill,r=0,stroke=null){ctx.beginPath();ctx.roundRect(x,y,w,h,r);if(fill){ctx.fillStyle=fill;ctx.fill();}if(stroke){ctx.strokeStyle=stroke;ctx.lineWidth=1;ctx.stroke();}} | |
| function text(value,x,y,size=16,color=C.cream,align="left",serif=false){ctx.fillStyle=color;ctx.font=`${size}px ${serif?"Georgia":"system-ui, sans-serif"}`;ctx.textAlign=align;ctx.textBaseline="middle";ctx.fillText(String(value),x,y);} | |
| function line(x1,y1,x2,y2,color,width=1){ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.strokeStyle=color;ctx.lineWidth=width;ctx.stroke();} | |
| // Optional replayContext for a recorded cube turn: | |
| // { previousView: viewBefore, action: "R'", progress: 0..1 }. | |
| // The supplied view is viewAfter. Invalid transitions remain static; this API | |
| // never advances a game or reads wall-clock time, so seeking is deterministic. | |
| function render(view, replayContext=null) { | |
| const sequence=++renderSequence; | |
| const compact=compactMode(),width=compact?600:1000,height=compact?650:600;canvas.width=width;canvas.height=height;ctx.clearRect(0,0,width,height); | |
| const grad=ctx.createRadialGradient(500,280,50,500,300,600);grad.addColorStop(0,"#ffffff");grad.addColorStop(1,"#ffffff");ctx.fillStyle=grad;ctx.fillRect(0,0,width,height); | |
| if(view?.kind!=="cube"){ctx.globalAlpha=.35;for(let x=20;x<1000;x+=25)for(let y=20;y<600;y+=25){ctx.fillStyle=C.line;ctx.fillRect(x,y,1,1);}ctx.globalAlpha=1;} | |
| if(!view)return; | |
| if(compact)ctx.translate(-200,25); | |
| if(view.kind==="tetris")drawTetris(view); | |
| else if(view.kind==="cube")drawCube(view,replayContext); | |
| else if(view.kind==="obstacles"||view.kind==="sokoban")drawGrid(view); | |
| else if(view.kind==="mario"){ | |
| if(view.engine==="nes")return drawNesMario(view,sequence); | |
| drawMario(view); | |
| } | |
| } | |
| function tileBlock(x,y,size,color,alpha=1) {ctx.globalAlpha=alpha;rect(x+1.5,y+1.5,size-3,size-3,color,3);ctx.globalAlpha=alpha*.25;rect(x+4,y+4,size-8,3,"#fff",1);ctx.globalAlpha=1;} | |
| function drawTetris(v) { | |
| const s=25,x0=350,y0=45;rect(x0-10,y0-10,270,520,"#ffffff",8,"#cdd4df"); | |
| v.board.forEach((row,y)=>row.forEach((piece,x)=>{rect(x0+x*s+1,y0+y*s+1,s-2,s-2,"#f1f4f7",1);if(piece)tileBlock(x0+x*s,y0+y*s,s,v.colors[piece]);})); | |
| if(v.ghost)v.ghost.cells.forEach(([x,y])=>{if(y>=0)rect(x0+x*s+3,y0+y*s+3,s-6,s-6,null,3,"#a8782177");}); | |
| if(v.active)v.active.cells.forEach(([x,y])=>{if(y>=0)tileBlock(x0+x*s,y0+y*s,s,v.colors[v.active.piece]);}); | |
| const labelX=compactMode()?310:285; | |
| text("LINE CLEAR",labelX,110,13,C.muted,"right");text(`${v.lines} / ${v.goal_lines}`,labelX,153,compactMode()?36:44,C.gold,"right",true); | |
| text("SCORE",labelX,229,13,C.muted,"right");text(v.score,labelX,269,30,C.cream,"right",true); | |
| text("NEXT",665,87,13,C.muted);v.next.slice(0,3).forEach((piece,i)=>{rect(655,115+i*113,143,94,"#f7f8fa",6,"#dce1e7");(v.piece_shapes[piece]||[]).forEach(([x,y])=>tileBlock(677+x*24,137+i*113+y*24,24,v.colors[piece]));}); | |
| text(v.realtime?`${v.speed_multiplier.toFixed(1)}× FALL SPEED · ${Math.round(v.gravity_ms)} ms / row`:"Find the gap. Make it fit.",500,575,14,v.realtime?C.gold:C.muted,"center"); | |
| } | |
| function drawCube(v,replayContext) { | |
| let source=v,turn=null,angle=0,progress=1; | |
| if(replayContext&&Number.isFinite(replayContext.progress) | |
| &&cubeTransitionMatches(replayContext.previousView,v,replayContext.action)){ | |
| progress=Math.max(0,Math.min(1,replayContext.progress)); | |
| // Exact endpoints use their recorded state, avoiding floating-point seams. | |
| if(progress<1){source=replayContext.previousView;turn=cubeTurn(replayContext.action);angle=turn.angle*(progress*progress*(3-2*progress));} | |
| } | |
| const stickers=cubeStickers(source.faces); | |
| if(!stickers){text("Cube state unavailable",500,300,20,C.muted,"center");return;} | |
| const stickerMap=new Map(stickers.map(s=>[cubeKey(s.position,s.normal),s.color])); | |
| const eye=[1,1,1].map(n=>n/Math.sqrt(3)); | |
| const right=[Math.SQRT1_2,0,-Math.SQRT1_2],up=[-1/Math.sqrt(6),2/Math.sqrt(6),-1/Math.sqrt(6)]; | |
| const scale=86,center=[500,286],polygons=[]; | |
| const project=p=>[center[0]+scale*cubeDot(p,right),center[1]-scale*cubeDot(p,up)]; | |
| const transform=(p,moving)=>moving?cubeRotate(p,turn.axis,angle):p; | |
| const corners=(center,u,d,half)=>[[-1,-1],[1,-1],[1,1],[-1,1]].map(([a,b])=>cubeAdd(center,cubeAdd(cubeScale(u,a*half),cubeScale(d,b*half)))); | |
| // Paint all solid cubies, not only the front stickers. During a quarter turn | |
| // this exposes the genuine plastic underside of the moving slice. | |
| for(let x=-1;x<=1;x++)for(let y=-1;y<=1;y++)for(let z=-1;z<=1;z++){ | |
| const position=[x,y,z],moving=!!turn&&position[turn.axis]===turn.sign; | |
| for(const face of Object.values(CUBE_FACES)){ | |
| const normal=transform(face.normal,moving); | |
| if(cubeDot(normal,eye)<=1e-7)continue; | |
| const middle=transform(cubeAdd(position,cubeScale(face.normal,.487)),moving); | |
| const points=corners(cubeAdd(position,cubeScale(face.normal,.487)),face.right,face.down,.487).map(p=>transform(p,moving)); | |
| const color=stickerMap.get(cubeKey(position,face.normal)); | |
| polygons.push({depth:cubeDot(middle,eye),points:points.map(project),normal, | |
| sticker:color===undefined?null:{color:source.colors[color],points:corners(cubeAdd(position,cubeScale(face.normal,.489)),face.right,face.down,.415).map(p=>project(transform(p,moving)))}}); | |
| } | |
| } | |
| ctx.save();ctx.translate(500,515);ctx.scale(1,.12); | |
| const shadow=ctx.createRadialGradient(0,0,10,0,0,200); | |
| shadow.addColorStop(0,"#27344824");shadow.addColorStop(1,"#27344800"); | |
| ctx.fillStyle=shadow;ctx.fillRect(-220,-220,440,440);ctx.restore(); | |
| function polygon(points,roundness=0){ | |
| ctx.beginPath(); | |
| points.forEach((p,i)=>{ | |
| const prev=points[(i+points.length-1)%points.length],next=points[(i+1)%points.length]; | |
| const a=p.map((v,j)=>v+(prev[j]-v)*roundness),b=p.map((v,j)=>v+(next[j]-v)*roundness); | |
| if(i===0)ctx.moveTo(...a);else ctx.lineTo(...a); | |
| ctx.quadraticCurveTo(...p,...b); | |
| });ctx.closePath(); | |
| } | |
| polygons.sort((a,b)=>a.depth-b.depth).forEach(p=>{ | |
| const top=Math.max(0,p.normal[1]),side=Math.max(0,p.normal[0]); | |
| polygon(p.points,.025);ctx.fillStyle=top>.5?"#293544":side>.5?"#15202e":"#1d2938";ctx.fill(); | |
| ctx.strokeStyle="#0c17253b";ctx.lineWidth=.65;ctx.stroke(); | |
| if(p.sticker){ | |
| polygon(p.sticker.points,.095);ctx.fillStyle=p.sticker.color;ctx.fill(); | |
| // Gentle material highlights retain each recorded sticker's base color. | |
| const ys=p.sticker.points.map(q=>q[1]),shine=ctx.createLinearGradient(0,Math.min(...ys),0,Math.max(...ys)); | |
| shine.addColorStop(0,`rgba(255,255,255,${.12+.08*top})`);shine.addColorStop(.5,"rgba(255,255,255,0)");shine.addColorStop(1,`rgba(0,0,0,${.035+.035*side})`); | |
| ctx.fillStyle=shine;ctx.fill();ctx.strokeStyle="#ffffff38";ctx.lineWidth=.7;ctx.stroke(); | |
| } | |
| }); | |
| text("RUBIK’S CUBE",500,35,12,C.muted,"center"); | |
| text(`${source.solved_faces} of 6 faces aligned`,500,554,18,C.cream,"center"); | |
| if(turn&&progress>0&&progress<1){rect(466,575,68,24,"#f0f4f7",12);text(replayContext.action,500,587,15,C.cream,"center");} | |
| } | |
| function drawGrid(v) { | |
| if(v.campaign)text(`LEVEL ${v.campaign.level} / ${v.campaign.total_levels} · ${v.campaign.completed_levels} CLEARED`,500,45,18,C.gold,"center"); | |
| const size=Math.min(61,490/v.height,690/v.width),left=(1000-v.width*size)/2,top=(600-v.height*size)/2; | |
| rect(left-12,top-12,v.width*size+24,v.height*size+24,"#ffffff",10,"#cbd4df"); | |
| for(let y=0;y<v.height;y++)for(let x=0;x<v.width;x++)rect(left+x*size+1,top+y*size+1,size-2,size-2,"#f1f4f7",3); | |
| v.walls.forEach(([x,y])=>{rect(left+x*size+1,top+y*size+1,size-2,size-2,"#91a0b2",3);line(left+x*size+6,top+y*size+6,left+(x+1)*size-6,top+y*size+6,"#bac7d5",1);}); | |
| if(v.kind==="sokoban") { | |
| v.goals.forEach(([x,y])=>{const cx=left+(x+.5)*size,cy=top+(y+.5)*size;ctx.beginPath();ctx.arc(cx,cy,size*.22,0,Math.PI*2);ctx.strokeStyle=C.gold;ctx.lineWidth=2;ctx.stroke();ctx.fillStyle="#a8782124";ctx.fill();}); | |
| const goals=new Set(v.goals.map(p=>p.join(","))); | |
| v.boxes.forEach(([x,y])=>{const px=left+x*size+5,py=top+y*size+5,s=size-10,on=goals.has([x,y].join(","));rect(px,py,s,s,on?"#a6bb7f":"#c79e58",4,on?"#d4e4a7":"#e1c17f");line(px+5,py+5,px+s-5,py+s-5,"#6a6838",2);line(px+s-5,py+5,px+5,py+s-5,"#6a6838",2);}); | |
| } else { | |
| const [gx,gy]=v.goal;rect(left+gx*size+6,top+gy*size+6,size-12,size-12,C.gold,6);text("⚑",left+(gx+.5)*size,top+(gy+.5)*size,size*.52,C.bg,"center"); | |
| v.obstacles.forEach(o=>{const [x,y]=o.position,cx=left+(x+.5)*size,cy=top+(y+.5)*size;ctx.save();ctx.translate(cx,cy);ctx.rotate(Math.PI/4);rect(-size*.3,-size*.3,size*.6,size*.6,"#dc9278",4);ctx.restore();text(o.direction==="right"?"→":"←",cx,cy,Math.max(13,size*.4),"#4b3025","center");}); | |
| } | |
| const [px,py]=v.player,cx=left+(px+.5)*size,cy=top+(py+.5)*size;ctx.beginPath();ctx.arc(cx,cy,size*.28,0,Math.PI*2);ctx.fillStyle=C.cream;ctx.fill();ctx.strokeStyle="#ffffff";ctx.lineWidth=3;ctx.stroke();ctx.beginPath();ctx.arc(cx+size*.06,cy-size*.07,size*.055,0,Math.PI*2);ctx.fillStyle=C.bg;ctx.fill(); | |
| } | |
| function drawNesMario(v,sequence) { | |
| const uri=v.screen?.png; | |
| if(typeof uri!=="string"||!uri.startsWith("data:image/png;base64,")) | |
| return Promise.reject(new Error("Original Mario recording is missing its native PNG frame.")); | |
| let pending=nesImages.get(uri); | |
| if(!pending){ | |
| pending=new Promise((resolve,reject)=>{ | |
| const nativeImage=new Image(); | |
| nativeImage.onload=()=>resolve(nativeImage); | |
| nativeImage.onerror=()=>reject(new Error("Could not decode the original Mario frame.")); | |
| nativeImage.src=uri; | |
| }); | |
| nesImages.set(uri,pending); | |
| if(nesImages.size>24)nesImages.delete(nesImages.keys().next().value); | |
| } | |
| return pending.then(nativeImage=>{ | |
| // Live playback may have requested a newer frame while PNG decoding ran. | |
| if(sequence!==renderSequence)return; | |
| const scale=2,left=500-nativeImage.width*scale/2,top=58; | |
| rect(left-7,top-7,nativeImage.width*scale+14,nativeImage.height*scale+14,"#ffffff",8,"#cbd4df"); | |
| ctx.imageSmoothingEnabled=false; | |
| ctx.drawImage(nativeImage,left,top,nativeImage.width*scale,nativeImage.height*scale); | |
| text("SUPER MARIO BROS.",500,28,13,C.muted,"center"); | |
| text(`WORLD ${v.hud?.world??1}-${v.hud?.stage??1}`,500,574,15,C.cream,"center"); | |
| }); | |
| } | |
| function drawMario(v) { | |
| if(!v.camera||!v.tiles){text("Mario AI Framework is preparing the level…",500,300,22,C.cream,"center",true);return;} | |
| const scale=1.98,w=v.camera.width*scale,h=v.camera.height*scale,left=(1000-w)/2,top=(600-h)/2,tile=v.tile_size||16; | |
| ctx.save();ctx.beginPath();ctx.roundRect(left-6,top-6,w+12,h+12,8);ctx.fillStyle="#ffffff";ctx.fill();ctx.strokeStyle="#cbd4df";ctx.stroke();ctx.beginPath();ctx.rect(left,top,w,h);ctx.clip();ctx.translate(left,top);ctx.scale(scale,scale); | |
| const sky=ctx.createLinearGradient(0,0,0,v.camera.height);sky.addColorStop(0,"#cde8ff");sky.addColorStop(1,"#f5fbff");ctx.fillStyle=sky;ctx.fillRect(0,0,v.camera.width,v.camera.height); | |
| // Decorative sky follows the camera; every playable tile comes from the engine. | |
| for(let i=0;i<5;i++){const x=(i*97-v.camera.x*.15)%340;rect(x,30+(i%3)*22,27,7,"#e7e4c4",4);rect(x+6,25+(i%3)*22,13,12,"#e7e4c4",4);} | |
| const palettes={ground:["#9b8152","#a0ac6b"],pipe:["#507e40","#83a352"],question:["#d2ad4d","#f0cf66"],brick:["#aa704e","#d29463"],used:["#947d58","#baa377"],platform:["#6f8258","#a7b075"]}; | |
| v.tiles.forEach(t=>{const x=t.x*tile-v.camera.x,y=t.y*tile-(v.camera.y||0);if(t.kind==="coin"){ctx.beginPath();ctx.ellipse(x+8,y+8,3,6,0,0,Math.PI*2);ctx.fillStyle="#f1d163";ctx.fill();return;}if(t.kind==="flag"){rect(x+7,y,2,16,"#ebebd8");ctx.beginPath();ctx.moveTo(x+7,y+2);ctx.lineTo(x+15,y+5);ctx.lineTo(x+7,y+9);ctx.fillStyle="#a87821";ctx.fill();return;}const colors=palettes[t.kind]||palettes.ground;rect(x,y,tile,tile,colors[0]);rect(x+1,y+1,tile-2,3,colors[1]);if(t.kind==="question")text("?",x+8,y+9,12,"#604c28","center");if(t.kind==="brick"){line(x,y+8,x+16,y+8,"#704d35");line(x+8,y,x+8,y+8,"#704d35");line(x+4,y+8,x+4,y+16,"#704d35");}if(t.kind==="pipe"){rect(x+3,y,3,tile,"#99b16b");}}); | |
| (v.enemies||[]).forEach(e=>{const x=e.x-v.camera.x-e.width/2,y=e.y-(v.camera.y||0)-e.height;rect(x,y,e.width,e.height,"#855132",4);rect(x+2,y+3,3,4,"#f5e7ca");rect(x+e.width-5,y+3,3,4,"#f5e7ca");rect(x-1,y+e.height-3,e.width+2,3,"#45382b",1);}); | |
| const p=v.player;if(p){const x=p.x-v.camera.x-p.width/2,y=p.y-(v.camera.y||0)-p.height,pw=p.width,ph=p.height;rect(x,y+ph*.35,pw,ph*.5,"#497799",1);rect(x+1,y+ph*.1,pw-2,ph*.38,"#e2b886",1);rect(x-1,y,pw+2,ph*.18,"#b5533f",1);rect(x+(p.facing<0?1:pw-3),y+ph*.2,2,3,"#3a3025");rect(x-1,y+ph-3,pw/2,3,"#46392e",1);rect(x+pw/2+1,y+ph-3,pw/2,3,"#46392e",1);} | |
| ctx.restore();if(!compactMode()){text("MARIO AI FRAMEWORK",left-29,85,12,C.gold,"right");text("Reach the flag",left-29,112,15,C.muted,"right");text("COINS",left+w+29,85,12,C.muted);text(v.hud?.coins??0,left+w+29,120,30,C.cream,"left",true);} | |
| } | |
| return {render}; | |
| } | |
| global.ArenaRenderer={create}; | |
| })(window); | |