PolicyChanges
/
policychanges
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

timer, 7 bag, fixes

pull/1/head
PolicyChanges1@gmail.com 2021-02-28 02:57:23 -05:00
parent 3a48117175
commit bf1dba8d47
6 changed files with 117 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
css/styles.css
View File

@ -2,51 +2,6 @@ html,body{
height:100%; height:100%;
} }
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
body{ body{
background: #000000; background: #000000;
@ -87,7 +42,7 @@ body{
top:0px; top:0px;
left:0px; left:0px;
width:210px; width:210px;
text-align: center; text-align: left;
background:rgba(1,1,1,.20); background:rgba(1,1,1,.20);
} }
@ -103,6 +58,7 @@ body{
#leftInfo ul {padding:2%;} #leftInfo ul {padding:2%;}
#hold{ #hold{
text-align:right;
position:relative; position:relative;
width:80px; width:80px;
height:435px; height:435px;
@ -118,7 +74,7 @@ body{
left:210px; left:210px;
background:rgba(0,0,0,.75); background:rgba(0,0,0,.75);
z-index:999; z-index:999;
color:#ffe100; color:#2f2f2f;
text-align: center; text-align: center;
display: none; display: none;
} }
@ -128,12 +84,12 @@ body{
} }
#gameOver a,#gameOver a:visited{ #gameOver a,#gameOver a:visited{
color:#66bc29; color:dodgerblue;
text-decoration: none; text-decoration: none;
} }
#gameOver h3{ #gameOver h3{
color:orange; color:AliceBlue;
} }
#side{ #side{
@ -171,7 +127,7 @@ body{
background:rgba(.9,.9,.9,.70); background:rgba(.9,.9,.9,.70);
} }
#level{ #level{
color:orange; color:dodgerblue;
font-size:32px; font-size:32px;
background:rgba(.9,.9,.9,.70); background:rgba(.9,.9,.9,.70);
} }
@ -184,59 +140,15 @@ body{
} }
#score{ #score{
color:orange; color:dodgerblue;
font-family: 'Chalkboard SE'; font-family: 'Arial';
background:rgba(.9,.9,.9,.70); background:rgba(.9,.9,.9,.70);
}#linesInfo{ }#linesInfo{
color:#fff; color:#fff;
font-size: 18px; font-size: 18px;
margin-top:0; margin-top:0;
background:rgba(.9,.9,.9,.70); background:rgba(.9,.9,.9,.70);c
}
#lines{
color:orange;
font-family: 'Chalkboard SE';
background:rgba(.9,.9,.9,.70);
}
#rewardInfo{
color:yellow;
font-weight: bold;
height:20px;
}
.invisible{
visibility: hidden;
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
} }
100% { 100% {

54
dist/tetrion.js vendored
View File

@ -457,6 +457,7 @@ var UserInputs = {
}, },
incTickCounter() { incTickCounter() {
this.ticks++; this.ticks++;
if(this.ticks > 1200000)this.ticks = 0; // set to 0 every 12 seconds?
}, },
getTickCounter() { getTickCounter() {
return this.ticks; return this.ticks;
@ -682,17 +683,17 @@ var UserInputs = {
"Gamepad DAS", "Gamepad ARR", "Gamepad Harddrop", "Gamepad Hold", "Gamepad DAS", "Gamepad ARR", "Gamepad Harddrop", "Gamepad Hold",
"Gamepad Left", "Gamepad Right", "Gamepad Rotateccw", "Gamepad Rotate", "Gamepad Left", "Gamepad Right", "Gamepad Rotateccw", "Gamepad Rotate",
"Gamepad Down","Gamepad Pophold", "Gamepad Reset", "Gamepad Background", "Gamepad Down","Gamepad Pophold", "Gamepad Reset", "Gamepad Background",
"path", "SameSite"], "path", "High Score"],
settingsDefault: ["true", settingsDefault: ["true",
"65.0", "20.0", "32", "16", "50.0", "16.0", "32", "16",
"37", "39", "90", "88", "37", "39", "90", "88",
"40", "17", "82", "81", "40", "17", "82", "81",
"65.0", "20.0", "RB", "LB", "50.0", "16.0", "RB", "LB",
"DPad-Left", "DPad-Right", "A", "B", "DPad-Left", "DPad-Right", "A", "B",
"DPad-Down", "DPad-Up", "Back", "", "DPad-Down", "DPad-Up", "Back", "",
"=/", "Strict"], "=/"],
settingsMap: [] settingsMap: []
}; };
@ -859,7 +860,8 @@ Tetris.prototype = {
inputs.init(); inputs.init();
this.createSettings(); this.createSettings();
// if true no openers. just random tetrinos // if true no openers. just random tetrinos
this.isFreePlay = true; this.isFreePlay = true;1
this.isTimerOn = false;
this.currentOpener = 0; this.currentOpener = 0;
this.doTest = false; this.doTest = false;
this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT); this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
@ -869,9 +871,16 @@ Tetris.prototype = {
this._initEvents(); this._initEvents();
this._fireShape(); this._fireShape();
},
toggleTimer: function() {
document.getElementById("Timer").value = (this.isTimerOn = !this.isTimerOn) ? "Seconds:" : "Timer Off";
}, },
setFreePlay: function() setFreePlay: function()
{ {
document.getElementById("Timer").value = "Timer Off";
document.getElementById("Time").value = "";
document.getElementById("besttime").value = "";
this.isTimerOn = false;
this.isFreePlay = true; this.isFreePlay = true;
this.doTest = false; this.doTest = false;
this.hintQueue = []; this.hintQueue = [];
@ -883,6 +892,7 @@ Tetris.prototype = {
}, },
setCurrentOpener(opener) setCurrentOpener(opener)
{ {
document.getElementById("besttime").value = "";
this.isFreePlay = false; this.isFreePlay = false;
this.doTest = false; this.doTest = false;
this.currentOpener = opener; this.currentOpener = opener;
@ -928,6 +938,7 @@ Tetris.prototype = {
this.startTime = new Date().getTime(); this.startTime = new Date().getTime();
this.currentTime = this.startTime; this.currentTime = this.startTime;
this.prevTime = this.startTime; this.prevTime = this.startTime;
this.sequencePrevTime = this.startTime;
//todo:get rid of extra //todo:get rid of extra
this.levelTime = this.startTime; this.levelTime = this.startTime;
this.prevInputTime = this.startTime; this.prevInputTime = this.startTime;
@ -943,6 +954,7 @@ Tetris.prototype = {
// timer for srs extened piece lockdown // timer for srs extened piece lockdown
this.lockdownTimer = 0; this.lockdownTimer = 0;
this.landed = false; this.landed = false;
this.isSequenceCompleted = false;
clearMatrix(this.matrix); clearMatrix(this.matrix);
views.setLevel(this.level); views.setLevel(this.level);
@ -1019,9 +1031,20 @@ Tetris.prototype = {
this.currentMinoInx++; this.currentMinoInx++;
// Opener sequence completed
if(this.currentMinoInx > openers.getLength()) { if(this.currentMinoInx > openers.getLength()) {
if(this.isTimerOn) {
var besttime = document.getElementById("besttime").value;
var deltaTime = new Date().getTime() - this.sequencePrevTime;
if(besttime == "" || deltaTime/1000.0 < parseInt(besttime)) {
document.getElementById("besttime").value = (deltaTime/1000.0).toString();
}
this.isSequenceCompleted = true;
}
this.hintQueue = []; this.hintQueue = [];
this.shapeQueue = []; this.shapeQueue = [];
// Recursion warning // Recursion warning
this._restartHandler(); this._restartHandler();
} }
@ -1083,6 +1106,8 @@ Tetris.prototype = {
canvas.drawGhostShape(clone, bottomY); canvas.drawGhostShape(clone, bottomY);
} }
canvas.drawMatrix(this.matrix); canvas.drawMatrix(this.matrix);
}, },
// tick input data // tick input data
_processTick: async function() { _processTick: async function() {
@ -1107,6 +1132,15 @@ Tetris.prototype = {
// Don't process game related events if game over // Don't process game related events if game over
if(this.isGameOver) return; if(this.isGameOver) return;
if(this.isTimerOn) {
var deltaPlayTime = new Date().getTime() - this.sequencePrevTime;
if(inputs.getTickCounter() >= 20) {
document.getElementById("Time").value = (deltaPlayTime/1000).toString();
}
}
// drain gamepad queue // drain gamepad queue
if(inputs.getTickCounter() > halfFrame) // 8 millisecons if(inputs.getTickCounter() > halfFrame) // 8 millisecons
{ {
@ -1249,8 +1283,6 @@ Tetris.prototype = {
if (!this.isGameOver) { if (!this.isGameOver) {
window.requestAnimationFrame(utils.proxy(this._refresh, this)); window.requestAnimationFrame(utils.proxy(this._refresh, this));
} }
}, },
// check if the current piece is in the same location as the hint piece // check if the current piece is in the same location as the hint piece
_checkHint: function() { _checkHint: function() {
@ -1307,7 +1339,8 @@ Tetris.prototype = {
side1 = 1; side1 = 1;
if(matrix[side2Y][side2X] != 0) if(matrix[side2Y][side2X] != 0)
side2 = 1; side2 = 1;
if(matrix[side3Y][side3X] != 0) // TODO: figure out why this occasionally is undefined
if(matrix[side3Y] != undefined && matrix[side3Y][side3X] != 0)
side3 = 1; side3 = 1;
if(matrix[side4Y][side4X] != 0) if(matrix[side4Y][side4X] != 0)
side4 = 1; side4 = 1;
@ -1800,6 +1833,7 @@ module.exports.reset = reset;
},{"./shapes.js":7}],7:[function(require,module,exports){ },{"./shapes.js":7}],7:[function(require,module,exports){
var consts = require('./consts.js'); var consts = require('./consts.js');
var utils = require('./utils.js');
// import * as consts from './const.js'; // import * as consts from './const.js';
var COLORS = consts.COLORS; var COLORS = consts.COLORS;
var COLUMN_COUNT = consts.COLUMN_COUNT; var COLUMN_COUNT = consts.COLUMN_COUNT;
@ -2489,7 +2523,7 @@ ShapeZR.prototype = {
// 0 - no, 1 - up,left, 2 - up,right, 3 - down,left, 4 - down, right // 0 - no, 1 - up,left, 2 - up,right, 3 - down,left, 4 - down, right
kickShape: function(matrix, rotationDirection) { kickShape: function(matrix, rotationDirection) {
let clone = Object.assign(Object.create(Object.getPrototypeOf(this)), this); let clone = utils.deepClone(this);
for(var j = 0; j < 4; j++) { for(var j = 0; j < 4; j++) {
if(this.state == j) { if(this.state == j) {
@ -2744,7 +2778,7 @@ module.exports.getShape = getShape;
// export randomShape; // export randomShape;
// export getShape; // export getShape;
},{"./consts.js":2}],8:[function(require,module,exports){ },{"./consts.js":2,"./utils.js":8}],8:[function(require,module,exports){
var exports = module.exports = {}; var exports = module.exports = {};

19
index.html
View File

@ -38,7 +38,12 @@
<div id="divbg"> <div id="divbg">
<!-- https://www.shadertoy.com/view/3tXBWj# -->
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/Xlf3Rj?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/tdjyzz?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3lVfDm?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&paused=false&muted=false" ></iframe> <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&paused=false&muted=false" ></iframe>
<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3sy3Wy?gui=true&t=10&paused=true&muted=false" ></iframe> -->
<script> <script>
document.getElementById("bg").width = window.innerWidth; document.getElementById("bg").width = window.innerWidth;
document.getElementById("bg").height = window.innerHeight; document.getElementById("bg").height = window.innerHeight;
@ -114,6 +119,13 @@ document.getElementById("divbg").removeAttribute("tabIndex");
</div> </div>
<canvas id="hold"></canvas> <canvas id="hold"></canvas>
<br>
<input style="padding:1px;text-decoration:underline;overflow:visible;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="button" id="Timer" value="Timer Off"/>
<input disabled=true style="padding:1px;overflow:visible;width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="Time" value=""/>
<input disabled=true style="overflow:visible;width:40%;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttimetext" value="Best Time:"/>
<input disabled=true style="overflow:visible;width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttime" value=""/>
</div> </div>
<div id="gameOver"> <div id="gameOver">
@ -135,9 +147,9 @@ document.getElementById("divbg").removeAttribute("tabIndex");
<option selected="">Settings:</option> <option selected="">Settings:</option>
</select> </select>
<input style="width:80px;font-size:13px;background:black;color:dodgerblue;text-align:left;" type="text" id="setting_value"> <input style="width:80px;font-size:13px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="setting_value">
<input id="submitsetting" type="submit" value="Set Setting"> <input style="width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;" id="submitsetting" type="submit" value="Set Setting"></input>
<input id="test" type="submit" value="Test Yourself"> <input style="width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;" id="test" type="submit" value="Test Yourself"></input>
</div> </div>
@ -160,6 +172,7 @@ document.getElementById("divbg").removeAttribute("tabIndex");
document.getElementById("setAlbatrossVar").addEventListener("click", function() { tetrion.setCurrentOpener(7); } ); document.getElementById("setAlbatrossVar").addEventListener("click", function() { tetrion.setCurrentOpener(7); } );
document.getElementById("setNumberOneVar").addEventListener("click", function() { tetrion.setCurrentOpener(8); } ); document.getElementById("setNumberOneVar").addEventListener("click", function() { tetrion.setCurrentOpener(8); } );
document.getElementById("Timer").addEventListener("click", function() { tetrion.toggleTimer(); } );
document.getElementById("test").addEventListener("click", function() { tetrion.setDoTest(); } ); document.getElementById("test").addEventListener("click", function() { tetrion.setDoTest(); } );
document.getElementById("settings").addEventListener("change", function() { tetrion.updateSettingTextBox(); } ); document.getElementById("settings").addEventListener("change", function() { tetrion.updateSettingTextBox(); } );

9
src/input.js
View File

@ -33,6 +33,7 @@ var UserInputs = {
}, },
incTickCounter() { incTickCounter() {
this.ticks++; this.ticks++;
if(this.ticks > 1200000)this.ticks = 0; // set to 0 every 12 seconds?
}, },
getTickCounter() { getTickCounter() {
return this.ticks; return this.ticks;
@ -258,17 +259,17 @@ var UserInputs = {
"Gamepad DAS", "Gamepad ARR", "Gamepad Harddrop", "Gamepad Hold", "Gamepad DAS", "Gamepad ARR", "Gamepad Harddrop", "Gamepad Hold",
"Gamepad Left", "Gamepad Right", "Gamepad Rotateccw", "Gamepad Rotate", "Gamepad Left", "Gamepad Right", "Gamepad Rotateccw", "Gamepad Rotate",
"Gamepad Down","Gamepad Pophold", "Gamepad Reset", "Gamepad Background", "Gamepad Down","Gamepad Pophold", "Gamepad Reset", "Gamepad Background",
"path", "SameSite"], "path", "High Score"],
settingsDefault: ["true", settingsDefault: ["true",
"65.0", "20.0", "32", "16", "50.0", "16.0", "32", "16",
"37", "39", "90", "88", "37", "39", "90", "88",
"40", "17", "82", "81", "40", "17", "82", "81",
"65.0", "20.0", "RB", "LB", "50.0", "16.0", "RB", "LB",
"DPad-Left", "DPad-Right", "A", "B", "DPad-Left", "DPad-Right", "A", "B",
"DPad-Down", "DPad-Up", "Back", "", "DPad-Down", "DPad-Up", "Back", "",
"=/", "Strict"], "=/"],
settingsMap: [] settingsMap: []
}; };

40
src/main.js
View File

@ -158,7 +158,8 @@ Tetris.prototype = {
inputs.init(); inputs.init();
this.createSettings(); this.createSettings();
// if true no openers. just random tetrinos // if true no openers. just random tetrinos
this.isFreePlay = true; this.isFreePlay = true;1
this.isTimerOn = false;
this.currentOpener = 0; this.currentOpener = 0;
this.doTest = false; this.doTest = false;
this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT); this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
@ -168,9 +169,16 @@ Tetris.prototype = {
this._initEvents(); this._initEvents();
this._fireShape(); this._fireShape();
},
toggleTimer: function() {
document.getElementById("Timer").value = (this.isTimerOn = !this.isTimerOn) ? "Seconds:" : "Timer Off";
}, },
setFreePlay: function() setFreePlay: function()
{ {
document.getElementById("Timer").value = "Timer Off";
document.getElementById("Time").value = "";
document.getElementById("besttime").value = "";
this.isTimerOn = false;
this.isFreePlay = true; this.isFreePlay = true;
this.doTest = false; this.doTest = false;
this.hintQueue = []; this.hintQueue = [];
@ -182,6 +190,7 @@ Tetris.prototype = {
}, },
setCurrentOpener(opener) setCurrentOpener(opener)
{ {
document.getElementById("besttime").value = "";
this.isFreePlay = false; this.isFreePlay = false;
this.doTest = false; this.doTest = false;
this.currentOpener = opener; this.currentOpener = opener;
@ -227,6 +236,7 @@ Tetris.prototype = {
this.startTime = new Date().getTime(); this.startTime = new Date().getTime();
this.currentTime = this.startTime; this.currentTime = this.startTime;
this.prevTime = this.startTime; this.prevTime = this.startTime;
this.sequencePrevTime = this.startTime;
//todo:get rid of extra //todo:get rid of extra
this.levelTime = this.startTime; this.levelTime = this.startTime;
this.prevInputTime = this.startTime; this.prevInputTime = this.startTime;
@ -242,6 +252,7 @@ Tetris.prototype = {
// timer for srs extened piece lockdown // timer for srs extened piece lockdown
this.lockdownTimer = 0; this.lockdownTimer = 0;
this.landed = false; this.landed = false;
this.isSequenceCompleted = false;
clearMatrix(this.matrix); clearMatrix(this.matrix);
views.setLevel(this.level); views.setLevel(this.level);
@ -318,9 +329,20 @@ Tetris.prototype = {
this.currentMinoInx++; this.currentMinoInx++;
// Opener sequence completed
if(this.currentMinoInx > openers.getLength()) { if(this.currentMinoInx > openers.getLength()) {
if(this.isTimerOn) {
var besttime = document.getElementById("besttime").value;
var deltaTime = new Date().getTime() - this.sequencePrevTime;
if(besttime == "" || deltaTime/1000.0 < parseInt(besttime)) {
document.getElementById("besttime").value = (deltaTime/1000.0).toString();
}
this.isSequenceCompleted = true;
}
this.hintQueue = []; this.hintQueue = [];
this.shapeQueue = []; this.shapeQueue = [];
// Recursion warning // Recursion warning
this._restartHandler(); this._restartHandler();
} }
@ -382,6 +404,8 @@ Tetris.prototype = {
canvas.drawGhostShape(clone, bottomY); canvas.drawGhostShape(clone, bottomY);
} }
canvas.drawMatrix(this.matrix); canvas.drawMatrix(this.matrix);
}, },
// tick input data // tick input data
_processTick: async function() { _processTick: async function() {
@ -406,6 +430,15 @@ Tetris.prototype = {
// Don't process game related events if game over // Don't process game related events if game over
if(this.isGameOver) return; if(this.isGameOver) return;
if(this.isTimerOn) {
var deltaPlayTime = new Date().getTime() - this.sequencePrevTime;
if(inputs.getTickCounter() >= 20) {
document.getElementById("Time").value = (deltaPlayTime/1000).toString();
}
}
// drain gamepad queue // drain gamepad queue
if(inputs.getTickCounter() > halfFrame) // 8 millisecons if(inputs.getTickCounter() > halfFrame) // 8 millisecons
{ {
@ -548,8 +581,6 @@ Tetris.prototype = {
if (!this.isGameOver) { if (!this.isGameOver) {
window.requestAnimationFrame(utils.proxy(this._refresh, this)); window.requestAnimationFrame(utils.proxy(this._refresh, this));
} }
}, },
// check if the current piece is in the same location as the hint piece // check if the current piece is in the same location as the hint piece
_checkHint: function() { _checkHint: function() {
@ -606,7 +637,8 @@ Tetris.prototype = {
side1 = 1; side1 = 1;
if(matrix[side2Y][side2X] != 0) if(matrix[side2Y][side2X] != 0)
side2 = 1; side2 = 1;
if(matrix[side3Y][side3X] != 0) // TODO: figure out why this occasionally is undefined
if(matrix[side3Y] != undefined && matrix[side3Y][side3X] != 0)
side3 = 1; side3 = 1;
if(matrix[side4Y][side4X] != 0) if(matrix[side4Y][side4X] != 0)
side4 = 1; side4 = 1;

3
src/shapes.js
View File

@ -1,4 +1,5 @@
var consts = require('./consts.js'); var consts = require('./consts.js');
var utils = require('./utils.js');
// import * as consts from './const.js'; // import * as consts from './const.js';
var COLORS = consts.COLORS; var COLORS = consts.COLORS;
var COLUMN_COUNT = consts.COLUMN_COUNT; var COLUMN_COUNT = consts.COLUMN_COUNT;
@ -688,7 +689,7 @@ ShapeZR.prototype = {
// 0 - no, 1 - up,left, 2 - up,right, 3 - down,left, 4 - down, right // 0 - no, 1 - up,left, 2 - up,right, 3 - down,left, 4 - down, right
kickShape: function(matrix, rotationDirection) { kickShape: function(matrix, rotationDirection) {
let clone = Object.assign(Object.create(Object.getPrototypeOf(this)), this); let clone = utils.deepClone(this);
for(var j = 0; j < 4; j++) { for(var j = 0; j < 4; j++) {
if(this.state == j) { if(this.state == j) {