js.min.js

let t,e,r,a,n,l=document.querySelector("canvas"),s=(document.querySelector(".w"),document.querySelector("#r")),o=document.querySelector("#dT"),i=document.querySelector("#pN"),c=document.querySelector("#msg"),d=l.getContext("2d"),y=500,u=25,p=2*Math.PI,f=!1,m=100,h="",g={current:0,target:0,x:0,y:0,colour:"#fd0d",id:"Human"},x={current:0,target:0,x:0,y:0,colour:"#0057b7dd",id:"Bot"},v=g;const T=[{type:"s",start:95,end:56,p:1},{start:1,end:37},{start:4,end:14},{start:8,end:30},{start:33,end:85},{start:50,end:68},{start:71,end:92},{start:80,end:99},{type:"s",start:97,end:78,p:1},{type:"s",start:88,end:24,p:1},{type:"s",start:79,end:44,p:-1},{type:"s",start:61,end:18,p:-1},{type:"s",start:48,end:26,p:1},{start:42,end:64},{type:"s",start:36,end:6,p:-1},{type:"s",start:32,end:10,p:-1}];let S;d.strokeStyle="#555",d.lineWidth=2;const w=t=>{f=t};let k=((t,e)=>{let r=[];for(let a=0;a<e;a++){let e=Array.apply(null,Array(t)).map(((e,r)=>({id:r+a*t,y:450-50*a,x:50*r})));e=a%2?e.reverse():e,r=[...r,...e]}return r})(10,10);const L=()=>{d.clearRect(0,0,y,y),M(),b()},M=()=>{t?d.putImageData(t,0,0):((()=>{l.width=50,l.height=300,d.fillStyle="#222","111000111 101010101 101000101 001010100 001000100 000010000".split(" ").forEach(((t,e)=>{let r=t.split(""),a=50*e;r.forEach(((t,e)=>{"1"===t&&(d.beginPath(),d.arc(12+e%3*13,a+12+13*Math.floor(e/3),5,0,p),d.fill())}))}));let t=l.toDataURL();document.querySelector("#dT").style.backgroundImage=`url(${t})`})(),l.width=y,l.height=y,T.forEach(((t,e)=>{let r={x:k[t.start-1].x+u,y:k[t.start-1].y+u},a={x:k[t.end-1].x+u,y:k[t.end-1].y+u};"s"===t.type?((t,e,r,a)=>{const n={x:0,y:0,sX:t.x,sY:t.y,dX:e.x-t.x,dY:e.y-t.y};d.fillStyle=r;for(let t=0;t<=200;t++)d.beginPath(),n.x=H(t,n.sX,n.dX,200),n.y=R(t,n.sY,n.dY,200),d.arc(n.x,n.y,10-.05*t,0,p),d.fill();d.beginPath(),d.fillStyle="#fff",d.strokeStyle="#000",d.arc(t.x,t.y,4,0,p),d.fill(),d.stroke(),d.beginPath(),d.fillStyle="#d00",d.arc(t.x+a,t.y+1,1,0,p),d.fill()})(r,a,(t=>`hsl(${300+10*t},60%,50%)`)(e),t.p):((t,e)=>{let r=e.x-t.x,a=e.y-t.y,n=Math.hypot(r,a),l=Math.atan2(a,r)+p/4;d.save(),d.translate(t.x,t.y),d.rotate(l),d.strokeStyle="#332c21",d.lineWidth=4,d.beginPath(),d.moveTo(-10,0),d.lineTo(-10,-n),d.moveTo(10,0),d.lineTo(10,-n);for(let t=~~(n/18.8),e=1;e<=t;e++)d.moveTo(-10,-18.8*e),d.lineTo(10,-18.8*e);d.stroke(),d.restore()})(r,a)})),t=d.getImageData(0,0,y,y))},b=()=>{g.current>0&&(d.fillStyle=g.colour,d.strokeStyle=g.colour,d.beginPath(),d.arc(g.x+u,g.y+u,16,0,p),d.fill(),d.stroke()),x.current>0&&(d.fillStyle=x.colour,d.strokeStyle=x.colour,d.beginPath(),x.current===g.current?d.arc(x.x+u,x.y+u,16,45,Math.PI+45):d.arc(x.x+u,x.y+u,16,0,p),d.fill(),d.stroke())},X=()=>{let t=v.current++,r=!1;if(G(B.step),v.x=k[t].x,v.y=k[t].y,L(),99===t)return clearInterval(e),void Y();if(v.current>=v.target){clearInterval(e);for(let t=0;t<T.length;t++)if(T[t].start===v.target){let e=T[t].end;v.target=T[t].end,S=T[t].type,r=!0,G("s"===S?B.down:B.up),A(k[e-1].x,k[e-1].y);break}r||(I(),D())}},Y=()=>{q("is the winner!"),s.classList.remove("h")},q=(t="")=>{i.innerHTML=`${v.id} ${t}`,c.innerHTML="Click dice to play",document.body.classList=`p${v.id}`,o.classList.add("p")},I=()=>{w(!1)},A=(t,e)=>{v.startX=v.x,v.startY=v.y,v.destX=t-v.startX,v.destY=e-v.startY,v.count=0,requestAnimationFrame(P)},P=()=>{v.count>=m?E():("s"===S?(v.x=H(v.count,v.startX,v.destX,m),v.y=R(v.count++,v.startY,v.destY,m)):(v.x=$(v.count,v.startX,v.destX,m),v.y=$(v.count++,v.startY,v.destY,m)),L(),requestAnimationFrame(P))},E=()=>{v.current=v.target,L(),I(),D()},$=(t,e,r,a)=>-r*(t/=a)*(t-2)+e,H=(t,e,r,a)=>(t/=a/2)<1?r/2*t*t+e:-r/2*(--t*(t-2)-1)+e,R=(t,e,r,a)=>(t/=a/2)<1?r/2*t*t*t*t+e:-r/2*((t-=2)*t*t*t-2)+e,D=()=>{v=v.id===g.id?x:g,q(),v===x&&C()},C=t=>{t&&t.preventDefault(),f||(w(!0),c.innerHTML=v===g?"Rolling...":"Auto rolling...",o.classList.remove("p"),a=0,n=10*Math.random()+15,r=setInterval(V,85))},V=()=>{h=~~(6*Math.random()+1),F(h),a++>=n&&(clearInterval(r),c.innerHTML="Moving...",v.target+=h,e=setInterval(X,450))},F=t=>{o.classList=`s${t}`};let W=new window.AudioContext;let B={down:[{f:200,a:.2,d:800,w:.3,v:.15},{f:300,a:.2,d:300,w:.1,v:.1}],up:[{f:300,a:.2,d:600,w:.3,v:.15},{f:200,a:.2,d:400,w:.1,v:.1}],step:[{f:85,a:.1,d:80,w:0,v:.3}]},G=t=>t.forEach((t=>((t,e,r,a,n=.3)=>{let l=W.createGain(),s=W.createOscillator();l.connect(W.destination),l.gain.setValueAtTime(0,W.currentTime),l.gain.linearRampToValueAtTime(n,W.currentTime+e),l.gain.linearRampToValueAtTime(0,W.currentTime+.01*r),s.frequency.value=t,s.type="sawtooth",s.connect(l),s.start(W.currentTime+a),setTimeout((()=>{s.stop(),s.disconnect(l),l.disconnect(W.destination)}),r)})(t.f,t.a,t.d,t.w,t.v)));o.addEventListener("click",C),s.addEventListener("click",(()=>{g.current=0,g.target=0,g.x=0,g.y=0,x.current=0,x.target=0,x.x=0,x.y=0,v=g,f=!1,F(""),q(),L(),s.classList.add("h")})),q(),M();