rotate4

<!doctype html>
<html>
<head>
<meta charset='us-ascii'>
<title>rotate4</title>
<style>
html{background-color:black;}
body{text-align:center;}
#board{position:relative;background-color:#101020;color:white;font-size:25px;width:8em;height:8em;display:inline-block;-moz-user-select:none;-webkit-user-select:none;}
#board .piece{transition:left 0.2s,top 0.2s,color 0.2s;transition-timing-function:ease-in-out;position:absolute;width:1.52em;height:1.52em;line-height:1.52em;font-family:"Ubuntu Mono";font-weight:bold;margin:0.2em;border:0.04em solid #444;background-color:black;}
#board .interface{position:absolute;top:0;left:0;opacity:0;width:100%;height:100%;border:none;padding:0;cursor:default;}
</style>
</head>
<body>
<div id='board'></div>
<div>
<button>toggle mouse input</button>
</div>
<script>
var B=document.getElementById('board');
var I;
var divs=[];
var state=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var letters='abcdefghijklmnop';

function init()
{
for(var i=0;i<4;i++)
for(var j=0;j<4;j++)
{
var div=document.createElement('div');
div.className='piece';
div.textContent=letters[i*4+j];
B.appendChild(div);
divs.push(div);
}
redraw();
I=document.createElement('input');
I.className='interface';
B.appendChild(I);
I.addEventListener('click',click,false);
I.addEventListener('contextmenu',click,false);
I.addEventListener('keydown',key,false);
I.focus();
}

function scramble()
{
state=[0];
for(var i=1;i<16;i++)
{
var r=Math.floor(Math.random()*(i+1));
state[i]=state[r];
state[r]=i;
}
}

function redraw()
{
for(var i=0;i<4;i++)for(var j=0;j<4;j++)
{
var x=state[i+j*4]%4,y=state[i+j*4]>>2;
divs[x+y*4].style.left=i*2+'em';
divs[x+y*4].style.top=j*2+'em';
divs[x+y*4].style.color=(i===x&&j===y)?'#9f9':'white';
}
}

function move(x,y,ccw)
{
var a=x+4*y,b=a+4,c=a+5,d=a+1;
if(ccw){b=a+1;d=a+4;}
state[a]=[state[b],
state[b]= state[c],
state[c]= state[d],
state[d]= state[a]][0];
}

function autoplay()
{
if(autoqueue.length===0)return;
else
{
var m=autoqueue.shift();
var x=m%3,y=(m-x)/3%3,ccw=Math.floor(m/9);
move(x,y,ccw);
redraw();
setTimeout(autoplay,200);
}
}

var autoqueue=[];

function click(e)
{
e.preventDefault();
var x=e.clientX-B.offsetLeft,y=e.clientY-B.offsetTop;
var unit=2*parseInt(getComputedStyle(B).fontSize);
x/=unit;
y/=unit;
if(x<0.5||x>=3.5||y<0.5||y>=3.5)return false;
/*if(x<0.5)x=1;
if(x>=3.5)x=3;
if(y<0.5)y=1;
if(y>=3.5)y=3;*/
move(Math.floor(x-0.5),Math.floor(y-0.5),e.shiftKey^(e.type==='contextmenu'));
redraw();
}

function key(e)
{
e.preventDefault();
var keymap={
55:0,56:1,57:2,71:3,67:4,82:5,72:6,84:7,78:8,//dvorak
85:3,73:4,79:5,74:6,75:7,76:8,//qwerty
36:0,38:1,33:2,37:3,12:4,39:5,35:6,40:7,34:8,//numpad, numlock off
103:0,104:1,105:2,100:3,101:4,102:5,97:6,98:7,99:8//numpad, numlock on
};
if(e.keyCode in keymap)
{
var m=keymap[e.keyCode];
move(m%3,(m-m%3)/3,e.shiftKey);
redraw();
}
}

init();
</script>
</body>
</html>