https://www.blackpress200.org/_next/static/chunks/4089.9868937f7279d720.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4089],{44089:function(e,t,a){a.r(t),a.d(t,{default:function(){return CharacterPlayDemo}});var n=a(85893),r=a(67294),o=a(33712);function nudge(e,t,a,n){e[t]={x:e[t].x+a,y:e[t].y+n}}function easeSwing(e){return .72*Math.sin(e)+.1*Math.sin(2*e)}function plantFeetForward(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:11;e.lToe={x:e.lFoot.x+t,y:e.lFoot.y+2},e.rToe={x:e.rFoot.x+t,y:e.rFoot.y+2}}function approach(e,t,a,n){return e+(t-e)*(1-Math.exp(-a*n))}function CharacterPlayDemo(){let[e,t]=(0,r.useState)(()=>(0,o.ip)((0,o.X6)({x:200,y:210},22,11),22)),[a,s]=(0,r.useState)(1),[l,u]=(0,r.useState)(1),[i,c]=(0,r.useState)(!0),[d,h]=(0,r.useState)(!0),[g,m]=(0,r.useState)(15),[x,p]=(0,r.useState)(.7),[b,w]=(0,r.useState)(9),[f,v]=(0,r.useState)(.28),y=(0,r.useRef)({}),k=(0,r.useRef)({x:200,y:210,vx:0,vy:0,facing:1,headFacing:1,walkPhase:0,idlePhase:0,moveAmt:0,airAmt:0,grounded:!0}),M=(0,r.useRef)(null),F=(0,r.useRef)(0);(0,r.useEffect)(()=>{let down=e=>{let t=e.key.toLowerCase();["w","a","s","d"," ","arrowleft","arrowright","arrowup","arrowdown"].includes(t)&&e.preventDefault(),y.current[t]=!0," "===t&&(y.current.space=!0)},up=e=>{let t=e.key.toLowerCase();y.current[t]=!1," "===t&&(y.current.space=!1)};return window.addEventListener("keydown",down,{passive:!1}),window.addEventListener("keyup",up),()=>{window.removeEventListener("keydown",down),window.removeEventListener("keyup",up)}},[]),(0,r.useEffect)(()=>{F.current=performance.now();let tick=e=>{let a=Math.min(.032,(e-F.current)/1e3);F.current=e;let n=y.current,r=k.current,s=n.a||n.arrowleft,l=n.d||n.arrowright,i=n.s||n.arrowdown,c=n.space||n.w||n.arrowup,d=0;s&&(d-=1800),l&&(d+=1800);let h=i?67.5:150;r.vx+=d*a,s||l||(r.vx*=Math.pow(.88,60*a)),r.vx=Math.max(-h,Math.min(h,r.vx)),Math.abs(r.vx)>10&&(r.facing=r.vx>0?1:-1),c&&r.grounded&&(r.vy=-520,r.grounded=!1),r.vy+=1450*a,r.x+=r.vx*a,r.y+=r.vy*a,r.x=Math.max(60,Math.min(740,r.x)),r.y>=210&&(r.y=210,r.vy=0,r.grounded=!0);let g=Math.abs(r.vx),m=r.grounded&&g>14?Math.min(1,g/150):0;r.moveAmt=approach(r.moveAmt,m,6,a),r.airAmt=approach(r.airAmt,r.grounded?0:1,5,a),r.headFacing=approach(r.headFacing,r.facing,7,a),r.idlePhase+=1.2*a,r.moveAmt>.05&&r.grounded&&(r.walkPhase+=a*(3+.022*g));let x=function(e){let t=(0,o.ip)((0,o.X6)({x:200,y:210},22,11),22),a=function(e){let t={};return Object.keys(e).forEach(a=>{t[a]={...e[a]}}),t}(t),{walkPhase:n,idlePhase:r,grounded:s,crouch:l,moveAmt:u,airAmt:i,vy:c,facingIntent:d}=e,h=Math.sin(r)*(1-.6*u)*(1-i);if(nudge(a,"chest",0,-2*h),nudge(a,"head",.5,-3*h),nudge(a,"lHand",1.5*h,2*h),nudge(a,"rHand",-(1.5*h),2*h),u>.02&&s){let e=easeSwing(n),t=easeSwing(n+Math.PI),r=11*u,o=2.5*Math.abs(Math.sin(n))*u;nudge(a,"belly",2*d*u,o),nudge(a,"chest",3*d*u,-(.5*o)),nudge(a,"head",2*d*u,-(.7*o)),nudge(a,"lElbow",e*r*.35,-(2*Math.abs(e))),nudge(a,"lHand",e*r*.55,-(3*Math.abs(e))),nudge(a,"rElbow",t*r*.35,-(2*Math.abs(t))),nudge(a,"rHand",t*r*.55,-(3*Math.abs(t))),nudge(a,"lKnee",t*r*.4,2*Math.abs(t)),nudge(a,"rKnee",e*r*.4,2*Math.abs(e)),nudge(a,"lFoot",t*r*.55,3*Math.max(0,-t)),nudge(a,"rFoot",e*r*.55,3*Math.max(0,-e)),plantFeetForward(a,11),nudge(a,"lToe",t*r*.55,0),nudge(a,"rToe",e*r*.55,0)}if(i>.02){let e=i*(c<-40?1:.4)*.85;

1nudge(a,"chest",2*d,-5*e),nudge(a,"lKnee",5*e,-6*e),nudge(a,"rKnee",-3*e,-5*e),nudge(a,"lFoot",6*e,-8*e),nudge(a,"rFoot",-2*e,-6*e),nudge(a,"lHand",-6*e,-8*e),nudge(a,"rHand",8*e,-9*e),plantFeetForward(a,11)}return l&&s&&(["chest","head","lShoulder","rShoulder","lElbow","rElbow","lHand","rHand"].forEach(e=>nudge(a,e,0,18)),nudge(a,"lKnee",6,-2),nudge(a,"rKnee",-6,-2)),(0,o.ip)(a,l&&s?19.8:22)}({walkPhase:r.walkPhase,idlePhase:r.idlePhase,grounded:r.grounded,crouch:!!i,moveAmt:r.moveAmt,airAmt:r.airAmt,vy:r.vy,facingIntent:Math.max(-1,Math.min(1,r.vx/150))});x=(0,o.Qf)(x,r.x-200,r.y-210),r.facing<0&&(x=(0,o.HD)(x)),t(x),u(r.headFacing),M.current=requestAnimationFrame(tick)};return M.current=requestAnimationFrame(tick),()=>{M.current&&cancelAnimationFrame(M.current)}},[]),(0,r.useEffect)(()=>{let e=window.setInterval(()=>s(e=>e+1),220);return()=>clearInterval(e)},[]);let N=e.belly.x,S=(0,r.useMemo)(()=>{let e=Math.max(200,Math.min(600,N));return"".concat(e-200," 40 400 360")},[N]);return(0,n.jsx)("div",{className:"relative flex h-full min-h-0 w-full flex-col",children:(0,n.jsxs)("div",{className:"relative min-h-0 flex-1 overflow-hidden outline-none",tabIndex:0,autoFocus:!0,style:{background:"#FF6B42",backgroundImage:"radial-gradient(rgba(0,0,0,0.03) 0.6px, transparent 0.6px)",backgroundSize:"3px 3px"},children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-x-0 border-t border-black/20",style:{top:"82%"}}),(0,n.jsx)(o.bX,{className:"h-full w-full select-none",interactive:!1,brush:"slab",strokeWidth:1.55,tension:.12,handle:.48,softness:.75,merge:2.1,organic:.5,organicSeed:a,pressure:!0,slabCurve:.15,ankleSharp:.92,footLength:11,headGap:22,headScale:1.05,headFacing:l,torsoLine:i,circleTorso:d,torsoRadius:g,torsoAlong:x,torsoRadius2:b,torsoAlong2:f,ink:"#111111",pose:e,viewBox:S,grain:{id:"play-grain-".concat(a),amount:1.6,scale:.014,seed:a}}),(0,n.jsxs)("div",{className:"absolute right-3 top-3 flex flex-col items-end gap-1.5",children:[(0,n.jsxs)("div",{className:"flex gap-1",children:[(0,n.jsxs)("button",{type:"button",onClick:()=>c(e=>!e),className:"rounded-sm border border-black/30 bg-white/80 px-2 py-1 font-mono text-[10px] text-black/80 shadow-sm transition hover:bg-white",children:["line ",i?"on":"off"]}),(0,n.jsxs)("button",{type:"button",onClick:()=>h(e=>!e),className:"rounded-sm border border-black/30 bg-white/80 px-2 py-1 font-mono text-[10px] text-black/80 shadow-sm transition hover:bg-white",children:["circles ",d?"on":"off"]})]}),d&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("label",{className:"flex items-center gap-2 rounded-sm border border-black/30 bg-white/80 px-2 py-1 font-mono text-[10px] text-black/80 shadow-sm",children:["c1",(0,n.jsx)("input",{type:"range",min:0,max:15,step:.5,value:g,onChange:e=>m(Number(e.target.value)),className:"w-16 accent-black",title:"circle 1 size"}),(0,n.jsx)("input",{type:"range",min:0,max:1,step:.01,value:x,onChange:e=>p(Number(e.target.value)),className:"w-16 accent-black",title:"circle 1 along"})]}),(0,n.jsxs)("label",{className:"flex items-center gap-2 rounded-sm border border-black/30 bg-white/80 px-2 py-1 font-mono text-[10px] text-black/80 shadow-sm",children:["c2",(0,n.jsx)("input",{type:"range",min:0,max:15,step:.5,value:b,onChange:e=>w(Number(e.target.value)),className:"w-16 accent-black",title:"circle 2 size"}),(0,n.jsx)("input",{type:"range",min:0,max:1,step:.01,value:f,onChange:e=>v(Number(e.target.value)),className:"w-16 accent-black",title:"circle 2 along"})]})]})]}),(0,n.jsx)("p",{className:"pointer-events-none absolute bottom-3 left-3 font-mono text-[10px] leading-snug text-black/45",children:"WASD / arrows \xb7 Space jump \xb7 S crouch"})]})})}}}]);