let ctx;
let showMark=true;
const dpr = window.devicePixelRatio;
const canvas = document.getElementById("canvas");
const canvas0 = document.getElementById("canvas0");
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
    ctx = canvas.getContext("2d");
    ctx.scale(dpr, dpr);
    ctx.strokeStyle="#c0c0c0";
    ctx.lineWidth=2;
canvas.style.width = `${rect.width}px`;
canvas.style.height = `${rect.height}px`;

canvas0.width = rect.width * dpr;
canvas0.height = rect.height * dpr;
    ctx0 = canvas0.getContext("2d");
    ctx0.scale(dpr, dpr);
    ctx0.scale(2,1);
canvas0.style.width = `${rect.width}px`;
canvas0.style.height = `${rect.height}px`;

let dispTimer;
const xcenter=250;
const ycenter=250;
const  theta0=Math.PI/20;
let count;
let theta,theta1,theta2;
let itv;
let x2x,x2y,y2x,y2y,z2y;
let x=[],y=[];
let z=[];
let color=[],color0=[];
let point=[];
let style=[];
let vec=[],vec1=[],vec2=[];
let vecSign=[],vec1Sign=[],vec2Sign=[];
let dir;
let initPos;
let key;
let keyPrep=true;
const edgeL=43;
function rotate(x,y,theta){
  let res=[];
  res[0]=x*Math.cos(theta)-y*Math.sin(theta);
  res[1]=x*Math.sin(theta)+y*Math.cos(theta);
  return res;
}
function draw() {
  x2x=-Math.sqrt(2)/2;
  y2x=Math.sqrt(2)/2;
  x2y=Math.sqrt(6)/8;y2y=Math.sqrt(6)/8;
  z2y=Math.sqrt(6)*2/3;
  dir=1;
  initPos=-edgeL;
    style=["white","blue","orange","green","red","yellow"];

    let f=0;
    for(i=0;i<6;i++){x[f]=[]; y[f]=[];z[f]=[];color[f]=[];color0[f]=[];vec[f]=[];vecSign[f]=[];vec1[f]=[];vec1Sign[f]=[];vec2[f]=[];vec2Sign[f]=[];}
         for(i=0;i<2;i++)
         {  x[f][i]=[]; y[f][i]=[];z[f][i]=[];color[f][i]=[];color0[f][i]=[];vec[f][i]=[];vecSign[f][i]=[];vec1[f][i]=[];vec1Sign[f][i]=[];vec2[f][i]=[];vec2Sign[f][i]=[];
            for(j=0;j<2;j++)
            {  x[f][i][j]=[]; y[f][i][j]=[];z[f][i][j]=[];
                x[f][i][j][0]=initPos+edgeL*j; y[f][i][j][0]=initPos+edgeL*i;z[f][i][j][0]=initPos;
                x[f][i][j][1]=x[f][i][j][0]+edgeL; y[f][i][j][1]=y[f][i][j][0];z[f][i][j][1]=initPos;
                x[f][i][j][2]=x[f][i][j][1]; y[f][i][j][2]=y[f][i][j][1]+edgeL;z[f][i][j][2]=initPos;
                x[f][i][j][3]=x[f][i][j][0]; y[f][i][j][3]=y[f][i][j][2];z[f][i][j][3]=initPos;
                color[f][i][j]=style[0];vec[f][i][j]=Math.PI/2;vecSign[f][i][j]=0;vec1[f][i][j]=Math.PI/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=Math.PI/4;vec2Sign[f][i][j]=1;
             }
         }
     f=1;
    for(i=0;i<6;i++){x[f]=[]; y[f]=[];z[f]=[];color[f]=[];color0[f]=[];vec[f]=[];vecSign[f]=[];vec1[f]=[];vec1Sign[f]=[];vec2[f]=[];vec2Sign[f]=[];}     
         for(i=0;i<2;i++)
         {  x[f][i]=[]; y[f][i]=[];z[f][i]=[];color[f][i]=[];color0[f][i]=[];vec[f][i]=[];vecSign[f][i]=[];vec1[f][i]=[];vec1Sign[f][i]=[];vec2[f][i]=[];vec2Sign[f][i]=[];
            for(j=0;j<2;j++)
            {  x[f][i][j]=[]; y[f][i][j]=[];z[f][i][j]=[];
                x[f][i][j][0]=initPos+edgeL*2; y[f][i][j][0]=initPos+edgeL*j;z[f][i][j][0]=-initPos-edgeL*i;
                x[f][i][j][1]=x[f][i][j][0]; y[f][i][j][1]=y[f][i][j][0]+edgeL;z[f][i][j][1]=z[f][i][j][0];
                x[f][i][j][2]=x[f][i][j][0]; y[f][i][j][2]=y[f][i][j][1];z[f][i][j][2]=z[f][i][j][0]-edgeL;
                x[f][i][j][3]=x[f][i][j][0]; y[f][i][j][3]=y[f][i][j][0];z[f][i][j][3]=z[f][i][j][2];
                color[f][i][j]=style[1];vec[f][i][j]=Math.PI/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI/2;vec1Sign[f][i][j]=0;
                vec2[f][i][j]=Math.PI*3/4;vec2Sign[f][i][j]=1;
             }
         }
     f=2;
    for(i=0;i<6;i++){x[f]=[]; y[f]=[];z[f]=[];color[f]=[];color0[f]=[];vec[f]=[];vecSign[f]=[];vec1[f]=[];vec1Sign[f]=[];vec2[f]=[];vec2Sign[f]=[];}     
         for(i=0;i<2;i++)
         {  x[f][i]=[]; y[f][i]=[];z[f][i]=[];color[f][i]=[];color0[f][i]=[];vec[f][i]=[];vecSign[f][i]=[];vec1[f][i]=[];vec1Sign[f][i]=[];vec2[f][i]=[];vec2Sign[f][i]=[];
            for(j=0;j<2;j++)
            {  x[f][i][j]=[]; y[f][i][j]=[];z[f][i][j]=[];
                x[f][i][j][0]=initPos+edgeL*j; y[f][i][j][0]=-initPos;z[f][i][j][0]=-initPos-edgeL*i;
                x[f][i][j][1]=x[f][i][j][0]+edgeL; y[f][i][j][1]=-initPos;z[f][i][j][1]=z[f][i][j][0];
                x[f][i][j][2]=x[f][i][j][1]; y[f][i][j][2]=-initPos;z[f][i][j][2]=z[f][i][j][0]-edgeL;
                x[f][i][j][3]=x[f][i][j][0]; y[f][i][j][3]=-initPos;z[f][i][j][3]=z[f][i][j][2];
                color[f][i][j]=style[2];vec[f][i][j]=Math.PI*3/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI*3/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=Math.PI/2;vec2Sign[f][i][j]=0;
             }
         }
     f=3;
    for(i=0;i<6;i++){x[f]=[]; y[f]=[];z[f]=[];color[f]=[];color0[f]=[];vec[f]=[];vecSign[f]=[];vec1[f]=[];vec1Sign[f]=[];vec2[f]=[];vec2Sign[f]=[];}     
         for(i=0;i<2;i++)
         {  x[f][i]=[]; y[f][i]=[];z[f][i]=[];color[f][i]=[];color0[f][i]=[];vec[f][i]=[];vecSign[f][i]=[];vec1[f][i]=[];vec1Sign[f][i]=[];vec2[f][i]=[];vec2Sign[f][i]=[];
            for(j=0;j<2;j++)
            {  x[f][i][j]=[]; y[f][i][j]=[];z[f][i][j]=[];
                x[f][i][j][0]=initPos; y[f][i][j][0]=initPos+edgeL*j;z[f][i][j][0]=-initPos-edgeL*i;
                x[f][i][j][1]=initPos; y[f][i][j][1]=y[f][i][j][0]+edgeL;z[f][i][j][1]=z[f][i][j][0];
                x[f][i][j][2]=initPos; y[f][i][j][2]=y[f][i][j][1];z[f][i][j][2]=z[f][i][j][0]-edgeL;
                x[f][i][j][3]=initPos; y[f][i][j][3]=y[f][i][j][0];z[f][i][j][3]=z[f][i][j][2];
                color[f][i][j]=style[3];vec[f][i][j]=Math.PI*5/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI*3/2;vec1Sign[f][i][j]=0;
                vec2[f][i][j]=Math.PI*7/4;vec2Sign[f][i][j]=1;
             }
         }
     f=4;
    for(i=0;i<6;i++){x[f]=[]; y[f]=[];z[f]=[];color[f]=[];color0[f]=[];vec[f]=[];vecSign[f]=[];vec1[f]=[];vec1Sign[f]=[];vec2[f]=[];vec2Sign[f]=[];}     
         for(i=0;i<2;i++)
         {  x[f][i]=[]; y[f][i]=[];z[f][i]=[];color[f][i]=[];color0[f][i]=[];vec[f][i]=[];vecSign[f][i]=[];vec1[f][i]=[];vec1Sign[f][i]=[];vec2[f][i]=[];vec2Sign[f][i]=[];
            for(j=0;j<2;j++)
            {  x[f][i][j]=[]; y[f][i][j]=[];z[f][i][j]=[];
                x[f][i][j][0]=initPos+edgeL*j; y[f][i][j][0]=initPos;z[f][i][j][0]=-initPos-edgeL*i;
                x[f][i][j][1]=x[f][i][j][0]+edgeL; y[f][i][j][1]=initPos;z[f][i][j][1]=z[f][i][j][0];
                x[f][i][j][2]=x[f][i][j][1]; y[f][i][j][2]=initPos;z[f][i][j][2]=z[f][i][j][0]-edgeL;
                x[f][i][j][3]=x[f][i][j][0]; y[f][i][j][3]=initPos;z[f][i][j][3]=z[f][i][j][2];
                color[f][i][j]=style[4];vec[f][i][j]=Math.PI*7/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI*7/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=-Math.PI/2;vec2Sign[f][i][j]=0;
             }
         }
    f=5;
    for(i=0;i<6;i++){x[f]=[]; y[f]=[];z[f]=[];color[f]=[];color0[f]=[];vec[f]=[];vecSign[f]=[];vec1[f]=[];vec1Sign[f]=[];vec2[f]=[];vec2Sign[f]=[];}
         for(i=0;i<2;i++)
         {  x[f][i]=[]; y[f][i]=[];z[f][i]=[];color[f][i]=[];color0[f][i]=[];vec[f][i]=[];vecSign[f][i]=[];vec1[f][i]=[];vec1Sign[f][i]=[];vec2[f][i]=[];vec2Sign[f][i]=[];
            for(j=0;j<2;j++)
            {  x[f][i][j]=[]; y[f][i][j]=[];z[f][i][j]=[];
                x[f][i][j][0]=initPos+edgeL*j; y[f][i][j][0]=initPos+edgeL*i;z[f][i][j][0]=-initPos;
                x[f][i][j][1]=x[f][i][j][0]+edgeL; y[f][i][j][1]=y[f][i][j][0];z[f][i][j][1]=-initPos;
                x[f][i][j][2]=x[f][i][j][1]; y[f][i][j][2]=y[f][i][j][1]+edgeL;z[f][i][j][2]=-initPos;
                x[f][i][j][3]=x[f][i][j][0]; y[f][i][j][3]=y[f][i][j][2];z[f][i][j][3]=-initPos;
                color[f][i][j]=style[5];vec[f][i][j]=Math.PI*3/2;vecSign[f][i][j]=0;vec1[f][i][j]=Math.PI*5/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=Math.PI*5/4;vec2Sign[f][i][j]=1;
             }
         }

  if (canvas.getContext) {

    ctx.translate(xcenter,ycenter);
    ctx.scale(2,1);

    theta=0;theta1=theta;
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {    if(((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=0 && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
            ((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=-2*Math.PI && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
          {  ctx.beginPath(); 
             point=rotate(x[m][i][j][0],y[m][i][j][0],theta);
             ctx.moveTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][0]*z2y);
            for(k=1;k<4;k++)   
            {   point=rotate(x[m][i][j][k],y[m][i][j][k],theta);
                ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][k]*z2y);}
               ctx.fillStyle=color[m][i][j];
               ctx.fill();ctx.stroke();
            }
        }
  }
  drawmark();
}
function drawmark(){

  if(showMark) ctx0.fillStyle="#aaaaaa";
  else  ctx0.fillStyle="#afafaf";  
  ctx0.beginPath(); 
  ctx0.moveTo(87,50);
  ctx0.lineTo(163,50);
  ctx0.lineTo(163,120);
  ctx0.lineTo(87,120);
  ctx0.lineTo(87,50);
  ctx0.fill();
  ctx0.beginPath(); 
  ctx0.moveTo(15,90);
  ctx0.lineTo(80,55);
  ctx0.lineTo(80,130);
  ctx0.lineTo(15,165);
  ctx0.lineTo(15,90);
  ctx0.fill();
  ctx0.beginPath(); 
  ctx0.moveTo(235,90);
  ctx0.lineTo(170,55);
  ctx0.lineTo(170,130);
  ctx0.lineTo(235,165);
  ctx0.lineTo(235,90);
  ctx0.fill();
}
function setVec(){
    let f=0;
    for(i=0;i<6;i++)
         for(i=0;i<2;i++)
            for(j=0;j<2;j++)
            {  
                vec[f][i][j]=Math.PI/2;vecSign[f][i][j]=0;vec1[f][i][j]=Math.PI/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=Math.PI/4;vec2Sign[f][i][j]=1;
             }         
     f=1;
    for(i=0;i<6;i++)
         for(i=0;i<2;i++)
            for(j=0;j<2;j++)
            { 
                vec[f][i][j]=Math.PI/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI/2;vec1Sign[f][i][j]=0;
                vec2[f][i][j]=Math.PI*3/4;vec2Sign[f][i][j]=1;
             }
     f=2;
    for(i=0;i<6;i++)
         for(i=0;i<2;i++)
            for(j=0;j<2;j++)
            {  
                vec[f][i][j]=Math.PI*3/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI*3/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=Math.PI/2;vec2Sign[f][i][j]=0;
             }
     f=3;
    for(i=0;i<6;i++)
         for(i=0;i<2;i++)
            for(j=0;j<2;j++)
            {  
                vec[f][i][j]=Math.PI*5/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI*3/2;vec1Sign[f][i][j]=0;
                vec2[f][i][j]=Math.PI*7/4;vec2Sign[f][i][j]=1;
             }
     f=4;
    for(i=0;i<6;i++)
         for(i=0;i<2;i++)
            for(j=0;j<2;j++)
            {  
                vec[f][i][j]=Math.PI*7/4;vecSign[f][i][j]=1;vec1[f][i][j]=Math.PI*7/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=-Math.PI/2;vec2Sign[f][i][j]=0;
             }
    f=5;
    for(i=0;i<6;i++)
         for(i=0;i<2;i++)
            for(j=0;j<2;j++)
            {  
                vec[f][i][j]=Math.PI*3/2;vecSign[f][i][j]=0;vec1[f][i][j]=Math.PI*5/4;vec1Sign[f][i][j]=1;
                vec2[f][i][j]=Math.PI*5/4;vec2Sign[f][i][j]=1;
             }
}
dispDate();
function dispDate() {
  const d = new Date();
  document.getElementById("time").innerHTML = d.toLocaleDateString();
}
let rotateC=true;
let tInt=0;
function onKey(event){
  event.preventDefault();
    if((!keyPrep)|(!rotateC)|closed){return;}
    keyPrep=false;rotateC=false;
    key=event.key;
    onKey0();
}
function onKey0(){
    key=key.toLowerCase();
    if (key=="w"|key=="o"|key=="e"|key=="u"|key=="r"|key=="i"|key=="x"|key==","
           |key=="c"|key=="n"|key=="v"|key=="m"|key=="s"|key=="l"|key=="f"|key=="k"|key=="d"|key=="j"){
        if(key=="o"|key=="u"|key=="i"|key=="x"|key=="c"|key=="v"|key=="s"|key=="f"|key=="d")dir=1;
        else dir=-1;
        sendKey(key);if(memSign==false)updmem(key);
        copyColor();
        count=10;theta=0;
        itv=setInterval(redraw,10-tInt);rotateC=false;
   }else{keyPrep=true;rotateC=true;}
}
function onRotate(a){
    key=a;
    if (a=="w"|a=="o"|a=="e"|a=="u"|a=="r"|a=="i"|a=="x"|a==","
           |a=="c"|a=="n"|a=="v"|a=="m"|a=="s"|a=="l"|a=="f"|a=="k"|a=="d"|a=="j"){
        if(a=="o"|a=="u"|a=="i"|a=="x"|a=="c"|a=="v"|a=="s"|a=="f"|a=="d")dir=1;
        else dir=-1;
        sendKey(a);
        copyColor();
        count=10;theta=0;
         itv=setInterval(redraw,10-tInt);
   }else{keyPrep=true;rotateC=true;}
}
function redraw(){
    ctx.beginPath(); 
    ctx.clearRect(-250,-250,500,500);
    theta2=theta+theta0*dir;
 if(key=="w"|key=="o")
 {      
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {    theta=theta2;
            if(((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=0 && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
            ((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=-2*Math.PI && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
         {    ctx.beginPath(); 
             point=rotate(x[m][i][j][0],y[m][i][j][0],theta);
             ctx.moveTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][0]*z2y);
             point=rotate(x[m][i][j][1],y[m][i][j][1],theta);
             ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][1]*z2y);
             point=rotate(x[m][i][j][2],y[m][i][j][2],theta);
             ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][2]*z2y);
             point=rotate(x[m][i][j][3],y[m][i][j][3],theta);
             ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][3]*z2y);
             ctx.fillStyle=color[m][i][j];
             ctx.fill();ctx.stroke();
          }
        }
  }
  else if(key=="e"|key=="u")
 {    
      for( m=0;m<6;m++)
     {  
         for(i=0;i<2;i++)
         for(j=0;j<2;j++)
        {      if(m==0) theta=theta2;
                else if(i==1){theta=theta2;}
                else{theta=theta1;}
                if(((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=0 && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
                ((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=-2*Math.PI && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
             {    ctx.beginPath(); 
                 point=rotate(x[m][i][j][0],y[m][i][j][0],theta);
             ctx.moveTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][0]*z2y);
                 point=rotate(x[m][i][j][1],y[m][i][j][1],theta);
                 ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][1]*z2y);
                 point=rotate(x[m][i][j][2],y[m][i][j][2],theta);
                 ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][2]*z2y);
                 point=rotate(x[m][i][j][3],y[m][i][j][3],theta);
                 ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][3]*z2y);
                 ctx.fillStyle=color[m][i][j];
                 ctx.fill();ctx.stroke();
              }
        }
     }
  }
  else if(key=="r"|key=="i")
 {    
     for( m=0;m<6;m++)
     {   
         for(i=0;i<2;i++)
         for(j=0;j<2;j++)
         {      if(m==0) theta=theta1;
                else if(i==0){theta=theta2;}
                else{theta=theta1;}
                if(((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=Math.PI/5 && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=Math.PI*5/6)|
                ((vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)>=-1.8*Math.PI && (vec[m][i][j]+vecSign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
             {    ctx.beginPath(); 
                 point=rotate(x[m][i][j][0],y[m][i][j][0],theta);
                 ctx.moveTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][0]*z2y);
                 point=rotate(x[m][i][j][1],y[m][i][j][1],theta);
                 ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][1]*z2y);
                 point=rotate(x[m][i][j][2],y[m][i][j][2],theta);
                 ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][2]*z2y);
                 point=rotate(x[m][i][j][3],y[m][i][j][3],theta);
                 ctx.lineTo(point[0]*x2x+point[1]*y2x,point[0]*x2y+point[1]*y2y+z[m][i][j][3]*z2y);
                 ctx.fillStyle=color[m][i][j];
                 ctx.fill();ctx.stroke();
              }
        }
     }
  }
 else if(key==","|key=="x")
 {      
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {    theta=theta2;
            if(((vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)>=0 && (vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
            ((vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)>=-2*Math.PI && (vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
         {    ctx.beginPath(); 
             point=rotate(y[m][i][j][0],z[m][i][j][0],theta);
             ctx.moveTo(x[m][i][j][0]*x2x+point[0]*y2x,x[m][i][j][0]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][1],z[m][i][j][1],theta);
             ctx.lineTo(x[m][i][j][1]*x2x+point[0]*y2x,x[m][i][j][1]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][2],z[m][i][j][2],theta);
             ctx.lineTo(x[m][i][j][2]*x2x+point[0]*y2x,x[m][i][j][2]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][3],z[m][i][j][3],theta);
              ctx.lineTo(x[m][i][j][3]*x2x+point[0]*y2x,x[m][i][j][3]*x2y+point[0]*y2y+point[1]*z2y);
             ctx.fillStyle=color[m][i][j];
             ctx.fill();ctx.stroke();
          }
        }
  }
 else if(key=="c"|key=="n")
 {    
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {     if(m==1) theta=theta2;
           else if(j==1){theta=theta2;}
           else{theta=theta1;}
            if(((vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)>=Math.PI/5 && (vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
            ((vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)>=-1.8*Math.PI && (vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
         {    ctx.beginPath(); 
             point=rotate(y[m][i][j][0],z[m][i][j][0],theta);
             ctx.moveTo(x[m][i][j][0]*x2x+point[0]*y2x,x[m][i][j][0]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][1],z[m][i][j][1],theta);
             ctx.lineTo(x[m][i][j][1]*x2x+point[0]*y2x,x[m][i][j][1]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][2],z[m][i][j][2],theta);
             ctx.lineTo(x[m][i][j][2]*x2x+point[0]*y2x,x[m][i][j][2]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][3],z[m][i][j][3],theta);
              ctx.lineTo(x[m][i][j][3]*x2x+point[0]*y2x,x[m][i][j][3]*x2y+point[0]*y2y+point[1]*z2y);
             ctx.fillStyle=color[m][i][j];
             ctx.fill();ctx.stroke();
          }
        }
  }
  else if(key=="v"|key=="m")
 {    
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {     if(m==1) theta=theta1;
           else if(j==0){theta=theta2;}
           else{theta=theta1;}
            if(((vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)>=Math.PI/5 && (vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
            ((vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)>=-1.8*Math.PI && (vec1[m][i][j]+vec1Sign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
         {    ctx.beginPath(); 
             point=rotate(y[m][i][j][0],z[m][i][j][0],theta);
             ctx.moveTo(x[m][i][j][0]*x2x+point[0]*y2x,x[m][i][j][0]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][1],z[m][i][j][1],theta);
             ctx.lineTo(x[m][i][j][1]*x2x+point[0]*y2x,x[m][i][j][1]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][2],z[m][i][j][2],theta);
             ctx.lineTo(x[m][i][j][2]*x2x+point[0]*y2x,x[m][i][j][2]*x2y+point[0]*y2y+point[1]*z2y);
             point=rotate(y[m][i][j][3],z[m][i][j][3],theta);
              ctx.lineTo(x[m][i][j][3]*x2x+point[0]*y2x,x[m][i][j][3]*x2y+point[0]*y2y+point[1]*z2y);
             ctx.fillStyle=color[m][i][j];
             ctx.fill();ctx.stroke();
          }
        }
  }
 else if(key=="s"|key=="l")
 {   
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {    theta=theta2;
            if(((vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)>=0 && (vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
            ((vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)>=-2*Math.PI && (vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
         {    ctx.beginPath(); 
             point=rotate(z[m][i][j][0],x[m][i][j][0],theta);
             ctx.moveTo(point[1]*x2x+y[m][i][j][0]*y2x,point[1]*x2y+y[m][i][j][0]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][1],x[m][i][j][1],theta);
             ctx.lineTo(point[1]*x2x+y[m][i][j][1]*y2x,point[1]*x2y+y[m][i][j][1]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][2],x[m][i][j][2],theta);
             ctx.lineTo(point[1]*x2x+y[m][i][j][2]*y2x,point[1]*x2y+y[m][i][j][2]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][3],x[m][i][j][3],theta);
              ctx.lineTo(point[1]*x2x+y[m][i][j][3]*y2x,point[1]*x2y+y[m][i][j][3]*y2y+point[0]*z2y);
             ctx.fillStyle=color[m][i][j];
             ctx.fill();ctx.stroke();
          }
        }
  }
 else if(key=="f"|key=="k")
 {   
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {          if(m==2) theta=theta2;
                else if(((m==0|m==5)&&i==1)|((m==1|m==3)&&j==1)){theta=theta2;}
                else{theta=theta1;}
            if(((vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)>=0 && (vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)<=Math.PI)|
            ((vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)>=-2*Math.PI && (vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
         {    ctx.beginPath(); 
             point=rotate(z[m][i][j][0],x[m][i][j][0],theta);
             ctx.moveTo(point[1]*x2x+y[m][i][j][0]*y2x,point[1]*x2y+y[m][i][j][0]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][1],x[m][i][j][1],theta);
             ctx.lineTo(point[1]*x2x+y[m][i][j][1]*y2x,point[1]*x2y+y[m][i][j][1]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][2],x[m][i][j][2],theta);
             ctx.lineTo(point[1]*x2x+y[m][i][j][2]*y2x,point[1]*x2y+y[m][i][j][2]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][3],x[m][i][j][3],theta);
              ctx.lineTo(point[1]*x2x+y[m][i][j][3]*y2x,point[1]*x2y+y[m][i][j][3]*y2y+point[0]*z2y);
             ctx.fillStyle=color[m][i][j];
             ctx.fill();ctx.stroke();
          }
        }
  }
 else if(key=="d"|key=="j")
 {   
     for( m=0;m<6;m++)
     for(i=0;i<2;i++)
     for(j=0;j<2;j++)
     {          if(m==2) theta=theta1;
                else if(((m==0|m==5)&&i==0)|((m==1|m==3)&&j==0)){theta=theta2;}
                else{theta=theta1;}
            if(((vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)>=Math.PI/5 && (vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)<=Math.PI*5/6)|
            ((vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)>=-1.8*Math.PI && (vec2[m][i][j]-vec2Sign[m][i][j]*theta)%(2*Math.PI)<=-Math.PI))
         {    ctx.beginPath(); 
             point=rotate(z[m][i][j][0],x[m][i][j][0],theta);
             ctx.moveTo(point[1]*x2x+y[m][i][j][0]*y2x,point[1]*x2y+y[m][i][j][0]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][1],x[m][i][j][1],theta);
             ctx.lineTo(point[1]*x2x+y[m][i][j][1]*y2x,point[1]*x2y+y[m][i][j][1]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][2],x[m][i][j][2],theta);
             ctx.lineTo(point[1]*x2x+y[m][i][j][2]*y2x,point[1]*x2y+y[m][i][j][2]*y2y+point[0]*z2y);
             point=rotate(z[m][i][j][3],x[m][i][j][3],theta);
              ctx.lineTo(point[1]*x2x+y[m][i][j][3]*y2x,point[1]*x2y+y[m][i][j][3]*y2y+point[0]*z2y);
             ctx.fillStyle=color[m][i][j];
             ctx.fill();ctx.stroke();
          }
        }
  }

    count--;
   if (count<1) {clearInterval(itv);rotateC=true;}
   theta=theta2;
}

class Socket{
    constructor(){
        this.socket=new WebSocket("ws://interespace.com:8002");
    }    
}
let socket=new Socket();
let closed;
socket.socket.onopen = () => {
    document.getElementById("connection").innerHTML="Connected";
    document.getElementById("connection").style.background="lightgreen";
    closed=false;reset();
};
  socket.socket.onclose = (event) => {
    document.getElementById("connection").innerHTML="Connect";
    document.getElementById("connection").style.background="gray";
    closed=true;
  };
  socket.socket.onerror = (error) => {
       closed=true;
  };

function sendKey(key){
    socket.socket.send(key);
    socket.socket.onmessage = (event) => {
      let x=event.data.toString();
      if(x.indexOf("f")>=0)
      {
        setValue(x.substring(x.indexOf("f")+1,x.length));
      }
      else if(x.indexOf("ok")>=0) {
         if(timerOn &&(!timerStop)) complete(x);
         else{setValue(x.substring(x.indexOf("ok")+2,x.length));
        keyPrep=true;}
       }
   };
}

function complete(x){
    clearInterval(dispTimer);
    let res=second;
        if (res>=60)
        { if(res%60>=10) document.getElementById("timeDisp").value=Math.floor(res/60)+":"+res%60; 
           else{document.getElementById("timeDisp").value=Math.floor(res/60)+":0"+res%60;}
         }
        else if(res>=10) {document.getElementById("timeDisp").value="0:"+res; }
        else{document.getElementById("timeDisp").value="0:0"+res; }
       document.getElementById("timeDisp").style.color="orange";
       setValue(x.substring(x.indexOf("ok")+2,x.length));
       keyPrep=true;
       timerStop=true;
}