function l(){requestAnimationFrame(l),c.cle(z.x-m,z.y-m,s,s),4>t?(c.sa(),c.lineWidth=5,c.tra(z.x,z.y),c.sc(w[t].x,w[t].y),c.tra(-m,-m),ar(f,7.5),ar(g,11.8),ar(f,48),ar(g,44),c.ree()):(c.sa(),c.tra(z.x,z.y),c.ro(w[t].x),c.tra(-m,-m),re(e,21,0,10,s),re(f,0,5.5,s,5),re(f,0,46,s,4.5),re(g,0,9.5,s,5),re(g,0,41.5,s,5),c.ree())}function ar(t,r){c.bea(),c.strokeStyle=t,c.arc(0,0,r,0,p/2),c.st()}function re(t,r,e,y,a){c.fillStyle=t,c.fic(r,e,y,a)}function k(){(0==t&&2==d||4==t&&1==d||3==t&&0==d)&&(z.y-=s,d=1,h=y),0==t&&1==d&&(h=y),(0==t&&3==d||1==t&&1==d||5==t&&0==d)&&(z.x-=s,d=0,h=u),0==t&&3==d&&(h=o),(1==t&&2==d||2==t&&0==d||4==t&&3==d)&&(z.y+=s,d=3,h=o),(2==t&&1==d||3==t&&3==d||5==t&&2==d)&&(z.x+=s,d=2,h=r),i=2,t=h[i]}for(y in c)c[y[0]+y[1]+(y[6]||"")]=c[y];p=Math.PI,z={x:25,y:95},d=2,w=[{x:1,y:1},{x:1,y:-1},{x:-1,y:-1},{x:-1,y:1},{x:p/2},{x:p}],t=5,s=56,m=s/2,h=[],y=[1,2,4],u=[2,3,5],o=[0,3,4],r=[0,1,5],e="#644f2a",f="#a4a4a4",g="#686868",l(),k(),b.onkeyup=k,b.onclick=function(){i+=1,i>2&&(i=0),t=h[i]};
for(y in c)
c[y[0]+y[1]+(y[6]||'')]=c[y];
p = Math.PI;
z = {x:25,y:95};//loc of current piece
d = 2;//direction 0left, 1up, 2right, 3 down
w = [{x:1,y:1},{x:1,y:-1},{x:-1,y:-1},{x:-1,y:1},{x:p/2},{x:p}]; //piece rotations
t = 5;//current selected piece
s = 56;//tile size
m = s/2;
h = [];
y = [1,2,4];//piece rules
u = [2,3,5];//
o = [0,3,4];//
r = [0,1,5];///////////
e = '#644f2a';
f = '#a4a4a4';
g = '#686868';
l();
k();
function l() {
requestAnimationFrame(l);
c.cle(z.x-m, z.y-m, s, s);
c.lineWidth = 5;
if (t < 4){//curve peice
c.sa();
c.tra(z.x, z.y);
c.sc(w[t].x,w[t].y)
c.tra(-m, -m);
ar(f,7.5);
ar(g,11.8);
ar(f,48);
ar(g,44);
c.ree();
}
else
{//straight piece
c.sa();
c.tra(z.x, z.y);
c.ro(w[t].x);
c.tra(-m, -m);
re(e,21,0,10,s);
re(f,0,5.5,s,5);
re(f,0,46,s,4.5);
re(g,0,9.5,s,5);
re(g,0,41.5,s,5);
c.ree();
}
}
function ar(C,R){
c.bea();
c.strokeStyle = C;
c.arc(0,0,R,0,p/2);
c.st();
}
function re(C,X,Y,W,H)
{
c.bea();
c.strokeStyle = C;
c.moveTo(X,Y);
c.lineTo(W,H);
c.stroke();
}
b.onkeyup = k;
function k() { //piece rules logic
if(t==0 && d==2 || t==4 && d==1 || t==3 && d==0){z.y-=s;d=1;h=y;}
if(t==0 && d==1){h=y;}
if(t==0 && d==3 || t==1 && d==1 || t==5 && d==0){z.x-=s;d=0;h=u;}
if(t==0 && d==3){h=o;}
if(t==1 && d==2 || t==2 && d==0 || t==4 && d==3){z.y+=s;d=3;h=o;}
if(t==2 && d==1 || t==3 && d==3 || t==5 && d==2){z.x+=s;d=2;h=r;}
i=2;
t = h[i];
}
b.onclick = function() {
i += 1;
if(i>2){i = 0;}
t = h[i];
}