const canvas=document.getElementById("c"),ctx=canvas.getContext("2d");let W,H,mX,mY,mW,mH,glassX,glassY,glassW,glassH,railY,floorY;function computeLayout(){W=canvas.width=window.innerWidth,H=canvas.height=window.innerHeight,mW=Math.min(550,W*.65),mH=Math.min(680,H*.82),mX=(W-mW)/2,mY=(H-mH)/2-20,glassX=mX+18,glassY=mY+55,glassW=mW-36,glassH=mH-95,railY=glassY+25,floorY=glassY+glassH-15}computeLayout();let clawX,clawY,clawOpen=1,state="idle",stateTimer=0,heldPhoto=null,prizes=[],casePhotos=[];const MOVE=4,DROP_SPEED=3,keys={left:!1,right:!1,drop:!1};async function init(){computeLayout(),clawX=glassX+glassW/2,clawY=railY;const a=(await(await fetch("/api/thumbnails?offset=0&limit=35")).json()).items.filter(l=>l.thumbnailId);for(let l=a.length-1;l>0;l--){const s=Math.floor(Math.random()*(l+1));[a[l],a[s]]=[a[s],a[l]]}const i=(await Promise.all(a.slice(0,30).map(l=>new Promise(s=>{const n=new Image;n.onload=()=>s(n),n.onerror=()=>s(null),n.src="/api/thumbnail/"+l.thumbnailId})))).filter(Boolean);for(let l=0;l<Math.min(22,i.length);l++)casePhotos.push({x:glassX+35+Math.random()*(glassW-70),y:floorY-15-Math.random()*85,rot:(Math.random()-.5)*.5,img:i[l],size:38+Math.random()*12});document.getElementById("loading").classList.add("hidden"),requestAnimationFrame(animate)}let lastTime=0;function animate(e){const t=lastTime?(e-lastTime)/1e3:.016;lastTime=e,update(t),draw(e/1e3),requestAnimationFrame(animate)}function update(e){switch(stateTimer+=e,state){case"idle":clawOpen=1,keys.left&&(clawX-=MOVE),keys.right&&(clawX+=MOVE),clawX=Math.max(glassX+25,Math.min(glassX+glassW-25,clawX)),clawY=railY,keys.drop&&(state="desc",stateTimer=0,keys.drop=!1);break;case"desc":clawOpen=1,clawY+=DROP_SPEED,clawY>=floorY-30&&(clawY=floorY-30,state="close",stateTimer=0);break;case"close":clawOpen=Math.max(0,1-stateTimer/.35),stateTimer>=.35&&(tryGrab(),state="asc",stateTimer=0);break;case"asc":clawY-=DROP_SPEED*.8,clawY<=railY&&(clawY=railY,state=heldPhoto?"toChute":"idle",stateTimer=0);break;case"toChute":{const t=glassX+glassW-35;clawX<t-3?clawX+=MOVE*.7:(clawX=t,state="release",stateTimer=0);break}case"release":clawOpen=Math.min(1,stateTimer/.25),stateTimer>=.3&&(heldPhoto&&(prizes.push(heldPhoto),heldPhoto=null),state="return",stateTimer=0);break;case"return":{const t=glassX+glassW/2;Math.abs(t-clawX)>MOVE?clawX+=Math.sign(t-clawX)*MOVE*.7:(clawX=t,state="idle");break}}}function tryGrab(){for(let e=casePhotos.length-1;e>=0;e--)if(Math.abs(casePhotos[e].x-clawX)<28){Math.random()<.75&&(heldPhoto=casePhotos.splice(e,1)[0]);return}}function draw(e){ctx.clearRect(0,0,W,H);const t=ctx.createRadialGradient(W/2,H/2,0,W/2,H/2,W*.6);t.addColorStop(0,"#151515"),t.addColorStop(1,"#0a0a0a"),ctx.fillStyle=t,ctx.fillRect(0,0,W,H),rrect(mX,mY,mW,mH,12),ctx.fillStyle="#1e1e1e",ctx.fill(),ctx.strokeStyle="#333",ctx.lineWidth=2,ctx.stroke();const a=ctx.createLinearGradient(mX,mY,mX,mY+50);a.addColorStop(0,"#2a2a2a"),a.addColorStop(1,"#1e1e1e"),rrectTop(mX,mY,mW,50,12),ctx.fillStyle=a,ctx.fill();const o=Math.floor((mW-30)/12);for(let l=0;l<o;l++){const s=e*3+l*.4,n=.5+.5*Math.sin(s);ctx.fillStyle=`rgb(${255*n|0},${150*n|0},${50*(1-n)|0})`,ctx.beginPath(),ctx.arc(mX+15+l*12+6,mY+10,2.5,0,6.283),ctx.fill()}ctx.fillStyle="#ddd",ctx.font="bold 18px sans-serif",ctx.textAlign="center",ctx.fillText("PHOTO CLAW",mX+mW/2,mY+37),ctx.fillStyle="#0f0f12",ctx.fillRect(glassX,glassY,glassW,glassH),ctx.fillStyle="#1a1a1a",ctx.fillRect(glassX,floorY,glassW,glassY+glassH-floorY),ctx.fillStyle="#333",ctx.fillRect(glassX+5,railY-3,glassW-10,6);for(const l of casePhotos)ctx.save(),ctx.translate(l.x,l.y),ctx.rotate(l.rot),ctx.fillStyle="rgba(0,0,0,0.4)",ctx.fillRect(-l.size/2+3,-l.size/2+3,l.size,l.size),ctx.drawImage(l.img,-l.size/2,-l.size/2,l.size,l.size),ctx.strokeStyle="#333",ctx.lineWidth=1,ctx.strokeRect(-l.size/2,-l.size/2,l.size,l.size),ctx.restore();drawClaw(clawX,clawY,clawOpen);const i=ctx.createLinearGradient(glassX,glassY,glassX+glassW,glassY+glassH*.4);if(i.addColorStop(0,"rgba(255,255,255,0.04)"),i.addColorStop(.4,"rgba(255,255,255,0.01)"),i.addColorStop(1,"rgba(255,255,255,0)"),ctx.fillStyle=i,ctx.fillRect(glassX,glassY,glassW,glassH),ctx.strokeStyle="#444",ctx.lineWidth=2,ctx.strokeRect(glassX,glassY,glassW,glassH),rrectBot(mX,mY+mH-40,mW,40,12),ctx.fillStyle="#1a1a1a",ctx.fill(),ctx.strokeStyle="#333",ctx.lineWidth=1,ctx.stroke(),ctx.fillStyle="#666",ctx.font="12px sans-serif",ctx.textAlign="center",ctx.fillText("Prizes: "+prizes.length,mX+mW/2,mY+mH-15),prizes.length){const s=mY+mH+15,n=W/2-prizes.length*39/2;for(let r=0;r<prizes.length;r++)ctx.drawImage(prizes[r].img,n+r*39,s,35,35)}ctx.fillStyle="#333",ctx.font="11px sans-serif",ctx.textAlign="center",ctx.fillText("\u2190 \u2192 to move  \xB7  SPACE to drop",W/2,H-8)}function drawClaw(e,t,a){const i=a*14;if(ctx.strokeStyle="#555",ctx.lineWidth=2,ctx.setLineDash([4,3]),ctx.beginPath(),ctx.moveTo(e,railY+3),ctx.lineTo(e,t),ctx.stroke(),ctx.setLineDash([]),rrect(e-12,railY-6,24,12,3),ctx.fillStyle="#555",ctx.fill(),ctx.fillStyle="#777",ctx.beginPath(),ctx.arc(e,t,7,0,6.283),ctx.fill(),ctx.fillStyle="#999",ctx.beginPath(),ctx.arc(e,t,4,0,6.283),ctx.fill(),ctx.strokeStyle="#bbb",ctx.lineWidth=3,ctx.lineCap="round",ctx.beginPath(),ctx.moveTo(e-4,t+6),ctx.quadraticCurveTo(e-4-i*.7,t+6+22*.6,e-2-i,t+6+22),ctx.stroke(),ctx.beginPath(),ctx.moveTo(e+4,t+6),ctx.quadraticCurveTo(e+4+i*.7,t+6+22*.6,e+2+i,t+6+22),ctx.stroke(),ctx.beginPath(),ctx.moveTo(e,t+6),ctx.lineTo(e,t+6+22+2),ctx.stroke(),heldPhoto){const l=heldPhoto.size*.8;ctx.save(),ctx.translate(e,t+6+22),ctx.rotate(Math.sin(performance.now()/500)*.05),ctx.drawImage(heldPhoto.img,-l/2,-2,l,l),ctx.restore()}}function rrect(e,t,a,o,i){ctx.beginPath(),ctx.moveTo(e+i,t),ctx.lineTo(e+a-i,t),ctx.arcTo(e+a,t,e+a,t+i,i),ctx.lineTo(e+a,t+o-i),ctx.arcTo(e+a,t+o,e+a-i,t+o,i),ctx.lineTo(e+i,t+o),ctx.arcTo(e,t+o,e,t+o-i,i),ctx.lineTo(e,t+i),ctx.arcTo(e,t,e+i,t,i),ctx.closePath()}function rrectTop(e,t,a,o,i){ctx.beginPath(),ctx.moveTo(e+i,t),ctx.lineTo(e+a-i,t),ctx.arcTo(e+a,t,e+a,t+i,i),ctx.lineTo(e+a,t+o),ctx.lineTo(e,t+o),ctx.lineTo(e,t+i),ctx.arcTo(e,t,e+i,t,i),ctx.closePath()}function rrectBot(e,t,a,o,i){ctx.beginPath(),ctx.moveTo(e,t),ctx.lineTo(e+a,t),ctx.lineTo(e+a,t+o-i),ctx.arcTo(e+a,t+o,e+a-i,t+o,i),ctx.lineTo(e+i,t+o),ctx.arcTo(e,t+o,e,t+o-i,i),ctx.closePath()}document.addEventListener("keydown",e=>{e.key==="ArrowLeft"&&(keys.left=!0),e.key==="ArrowRight"&&(keys.right=!0),(e.key===" "||e.key==="ArrowDown")&&state==="idle"&&(keys.drop=!0,e.preventDefault())}),document.addEventListener("keyup",e=>{e.key==="ArrowLeft"&&(keys.left=!1),e.key==="ArrowRight"&&(keys.right=!1)});function holdBtn(e,t){const a=document.getElementById(e);a.addEventListener("mousedown",()=>keys[t]=!0),a.addEventListener("mouseup",()=>keys[t]=!1),a.addEventListener("mouseleave",()=>keys[t]=!1),a.addEventListener("touchstart",o=>{keys[t]=!0,o.preventDefault()}),a.addEventListener("touchend",()=>keys[t]=!1)}holdBtn("leftBtn","left"),holdBtn("rightBtn","right"),document.getElementById("dropBtn").addEventListener("click",()=>{state==="idle"&&(keys.drop=!0)}),window.addEventListener("resize",computeLayout),init();