JSFiddle - React, Tailwind, and code Playground
by AntonLapshin
HTML
<div id="area"></div>
JavaScript
(function(){
debugger;
var WIDTH = 10,
HEIGHT = 16,
DELAY = 100,
FORMS = ['0000*1111*0000*0000','100*111*000','001*111*000','11*11','011*110*000','011*110*000','010*111*000','110*011*000'];
function Shape(form, left, top){
this.state = form.split('*');
this.previousState = null;
this.newState = this.state;
this.position = { left: left, top: top };
this.previousPosition = null;
this.newPosition = this.position;
this.commit = function(){
if (this.newState){
this.previousState = this.state;
this.state = this.newState;
this.newState = null;
}
if (this.newPosition){
this.previousPosition = this.position;
this.position = this.newPosition;
this.newPosition = null;
}
}
this.rotate = function(){
this.newState = this.state.slice(0);
this.newPosition = this.position;
var self = this;
this.round(this.state, function(x, y){
self.newState[y][x] = self.state[self.state.length - x - 1, y];
});
}
this.round = function(state, callback){
var size = state.length,
x, y;
for (y = 0; y < size; y++) {
for (x = 0; x < size; x++) {
if (state[y][x] == 1){
var result = callback(x, y);
if (result === false)
return;
}
}
}
}
this.render = function(){
var self = this,
left, top;
if (this.previousPosition){
left = this.previousPosition.left;
top = this.previousPosition.top;
...