const val=[['000000000111111111222222222333333333444444444555555555','000000000211211211333222222433433433111444444555555555','000000000111111111222222222333333333444444444555555555','000000000112112112222222333334334334444444111555555555','000000000111111111222222222333333333444444444555555555','111000000555111111222222222000333333444444444333555555','000000000111111111222222222333333333444444444555555555','000000111111111555222222222333333000444444444555555333','000000000111111111222222222333333333444444444555555555','004004004111111111220220220333333333445445445552552552','000000000111111111222222222333333333444444444555555555','400400400111111111022022022333333333544544544255255255','000000000111111111222222222333333333444444444555555555','000000000222222222333333333444444444111111111555555555','000000000111111111222222222333333333444444444555555555','111111111555555555222222222000000000444444444333333333','000000000111111111222222222333333333444444444555555555','444444444111111111000000000333333333555555555222222222']];
const col=["white","blue","orange","green","red","yellow"];
const series=[[5,4,7,6,2,3,0,1,8,9,10,11,15,14,12,13,16,17]];
const lts=['E','U','R','I','D','J','F','K','C','N','V','M','W','O','S','L','X',','];
const nts=["U","U'","D'","D","L'","L","R","R'","F","F'","B'","B","y","y'","x","x'","z","z'"];

/**********
Elements("div") t000-t021: gray planes covering interior while rotate;
-----------------------------
get cube facevalues: version1.2 cubes/cube_debug.html
use string2num.html to convert keys to number
use mvtmpl_tool.html to convert facevalues to new coordinate
original face values are stored in o_ori.js 
***************/
let fv=[];   //color of each small square
let tp=[];   //each fv is attched to a tp, totate tp
j=0;
for(f=0;f<6;f++)
{
  tp[f]=[];fv[f]=[];
  for(i=0;i<3;i++)
  {
    tp[f][i]=[];fv[f][i]=[];
    for(j=0;j<3;j++)
      {tp[f][i][j]=document.createElement("div");
        tp[f][i][j].classList.add("tmpl2nd");
        tp[f][i][j].style.transformStyle= "preserve-3d";
        document.getElementById("cbtmpl1").appendChild(tp[f][i][j]);
        fv[f][i][j]=document.createElement("div");
        fv[f][i][j].style.border="1px solid #e0e0ac";
        fv[f][i][j].classList.add("fx");
        tp[f][i][j].appendChild(fv[f][i][j]);
      }
  }
}
function cini(){
for(i=0;i<3;i++)
for(j=0;j<3;j++)
{    fv[0][i][j].style.transform=`translate(${i*36}px,-72px) translateZ(${-54+j*36}px) rotateX(90deg)`;
     fv[0][i][j].style.background="white";
     fv[5][i][j].style.transform=`translate(${i*36}px,36px) translateZ(${-54+j*36}px) rotateX(90deg)`;
}   
for(i=0;i<3;i++)
for(j=0;j<3;j++)
{    fv[1][i][j].style.transform=`translate(${i*36}px,${-54+j*36}px) translateZ(36px)`;
     fv[1][i][j].style.background="blue";
     fv[3][i][j].style.transform=`translate(${i*36}px,${-54+j*36}px) translateZ(-72px)`;
}   
for(i=0;i<3;i++)
for(j=0;j<3;j++)
{    fv[2][i][j].style.transform=`translate(90px,${-54+i*36}px) translateZ(${-54+j*36}px)  rotateY(90deg)`;
     fv[2][i][j].style.background="orange";
     fv[4][i][j].style.transform=`translate(-18px,${-54+i*36}px) translateZ(${-54+j*36}px)  rotateY(90deg)`;
}
  document.getElementById('cbtmpl1').style.transformStyle = "preserve-3d";}
cini();
let vlength=2;
let valres;
let prog;      //the n-th patten with a series
let angle=0;
const fst=[[0,1,5,3],[1,2,3,4],[0,2,4,5]];  //faces that may be displayed when rotate around an axis
let varf;   //not necessary, values of 0 and 2, used to diffrentiate side 1-3, and 2-4
let dir;
let cnt;
let initsign=true;
let rlength=2;
let kval;       //corresponding to prog
let inp=[];
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
function rstr(){//reset tp
 for(f=0;f<6;f++)
    for(i=0;i<3;i++)
      for(j=0;j<3;j++)
            tp[f][i][j].style.transform="";
}
function setVal(){
  for(f=0;f<6;f++)
  for(i=0;i<3;i++)
    for(j=0;j<3;j++)fv[f][i][j].style.background=col[val[rd][prog].substring(f*9+i*3+j,f*9+i*3+j+1)];
}
function hd(){ //hide interior cover planes
  let c;
  for(i=0;i<3;i++)
  for(j=0;j<2;j++){
    c="t0"+i+j;
   document.getElementById(c).style.display="none";
 }
}
function sh(a){//show a cover plane when rotate
  let c="";
  if(a<2) c="t000";
  else if(a<4) c="t001";
  else if(a<6) c="t010";
  else if(a<8) c="t011";
  else if(a<10) c="t020";
  else if(a<12) c="t021";
  if (c!=""){
     document.getElementById(c).style.display="block";
  }
}
let rd=0;  //total patterns used for rotation,  corresponding to number of series
async function setrt(){
    prog=0;
    while(prog<series[rd].length){
       document.getElementById('cbtmpl1').style.transform ="translate(20px,0px) rotateX(-30deg) rotateY(-45deg)";
         hd();
         angle=0;
        rstr();
        setVal();
        kval=series[rd][prog];
          sh(kval);
         await sleep(500);
         document.getElementById('dsp1').innerHTML=lts[prog];
         document.getElementById('dsp2').innerHTML="("+nts[prog]+")";
         for(cnt=0;cnt<91;cnt++) { await sleep(20);autoRot(kval);}
         prog++;
         document.getElementById('dsp1').innerHTML="";
         document.getElementById('dsp2').innerHTML="";
   }
   onpl=false;
}
function mp(a){
  if(a<4) return 0;
  if(a<8) return 1;
  if(a<12) return 2;
  if(a<14) return 1;
}
function autoRot(kval) {
   dir=kval%2==1?-1:1;
  if (kval>11){
     if(kval<14){
//      document.getElementById('cbtmpl1').style.transform = "translate(20px,0px) rotateY(-45deg) rotateX("+(-30+angle)+"deg)";
      for(f=0;f<6;f++)
      for (i=0;i<3;i++)
      for (j=0;j<3;j++) {
         tp[f][i][j].style.transform = "rotateX(" + angle +"deg)";
      }
     }
     else if(kval<16){
      document.getElementById('cbtmpl1').style.transform = "translate(20px,0px) rotateX(-30deg) rotateY("+(-45+angle)+"deg)";
     }
     else   document.getElementById('cbtmpl1').style.transform = "translate(20px,0px) rotateX(-30deg) rotateY(-45deg) rotateZ(" + angle +"deg)";
   }
  else if(kval<=11){
    if(kval>7)
    {
        if(kval<10)varf=2;
        else varf=0;
       for (f=0;f<4;f++){
         for(i=0;i<3;i++)
        {
         tp[fst[mp(series[rd][prog])][f]][i][varf].style.transform = "rotateZ(" + angle +"deg)";
         }
       }
      for (i=0;i<3;i++)
      for (j=0;j<3;j++)    tp[3-varf][i][j].style.transform = "rotateZ(" + angle +"deg)";
      if(kval>9)
       document.getElementById('t021').style.transform =" translate(0px,-54px) translateZ(-36px) rotateZ(" + angle +"deg)";
    }
    else if(kval>3)
    {
        if(kval<6)varf=0;
        else varf=2;
       for (f=0;f<4;f++){
         for(i=0;i<3;i++)
        {
             if(f%2==0)tp[fst[mp(series[rd][prog])][f]][i][varf].style.transform = "rotateY(" + angle +"deg)";
             else tp[fst[mp(series[rd][prog])][f]][varf][i].style.transform = "rotateY(" + angle +"deg)";
         }
       }
      for (i=0;i<3;i++)
      for (j=0;j<3;j++) {
         if(kval<6)   tp[0][i][j].style.transform = "rotateY(" + angle +"deg)";
         else    tp[5][i][j].style.transform = "rotateY(" + angle +"deg)";

      }
      if(kval>5)
         document.getElementById('t011').style.transform ="translate(0px,-36px) translateZ(-18px)  rotateY(" + angle +"deg) rotateX(90deg)";
   }
    else
    {
        if(kval<2)varf=2;
        else varf=0;
       for (f=0;f<4;f++){
         for(i=0;i<3;i++)
        {
             tp[fst[mp(series[rd][prog])][f]][varf][i].style.transform = "rotateX(" + angle +"deg)";
         }
       }
      for (i=0;i<3;i++)
      for (j=0;j<3;j++) {
         if(kval<2)   tp[2][i][j].style.transform = "rotateX(" + angle +"deg)";
         else    tp[4][i][j].style.transform = "rotateX(" + angle +"deg)";
      }
      if(kval>1)
         document.getElementById('t001').style.transform ="translate(-18px,-54px) translateZ(-18px) rotateX(" + angle +"deg)  rotateY(90deg)";
   }
 } 
 angle=angle+1*dir;
}