freeplay, srs, background, etc

dist/tetrion.js

@@ -2,7 +2,8 @@
 
 var utils = require('./utils.js');
 var consts = require('./consts.js');
-
+// import * as utils from './utils.js';
+// import * as consts from './const.js';
 
 var lineColor =  consts.GRID_LINE_COLOR;
 
@@ -256,6 +257,8 @@ var tetrisCanvas = {
 
 
 module.exports = tetrisCanvas;
+// export tetrisCanvas;
+ 
 },{"./consts.js":2,"./utils.js":8}],2:[function(require,module,exports){
 
 //colors for shapes  L, O, Z, T, J, S, I
@@ -417,8 +420,10 @@ window.addEventListener("gamepadconnected", gamepadAPI.connect);
 window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 module.exports = gamepadAPI;
+// export gamepadAPI;
 },{}],4:[function(require,module,exports){
 var gamepad = require('./gamepad.js');
+// import * as gamepad from './gamepad.js';
 
 var UserInputs = {
     init() {
@@ -501,7 +506,7 @@ var UserInputs = {
 	
 	// Direction Pad
 	gamepadDPadDown(finds) {
-		var DAS = 80.0;
+		var DAS = 65.0;
 		var ARR = 20.0;
 		var isContained = this.gpButtons.includes(finds);
 		var isPrevContained = this.prevGpButtons.includes(finds);
@@ -581,7 +586,7 @@ var UserInputs = {
 	},
 	// Direction arrows
     processKeyboardArrowKeys(key) {		
-		var DAS = 80.0;
+		var DAS = 65.0;
 		var ARR = 20.0;
 
 	
@@ -661,6 +666,7 @@ var UserInputs = {
 };
 
 module.exports = UserInputs;
+// export UserInputs;
 },{"./gamepad.js":3}],5:[function(require,module,exports){
 var utils = require('./utils.js');
 var consts = require('./consts.js');
@@ -669,7 +675,14 @@ var views = require('./views.js');
 var canvas = require('./canvas.js');
 var inputs = require('./input.js');
 var openers = require('./openers.js');
-
+// import * as utils from './utils.js';
+// import * as consts from './const.js';
+// import * as shapes from './shapes.js';
+// import * as views from './views.js';
+// import * as canvas from './canvas.js';
+// import * as inputs from './input.js';
+// import * as openers from './openers.js';
+//import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
 
 /**
 	Init game matrix
@@ -806,9 +819,6 @@ Tetris.prototype = {
 
     init: function(options) {
 		
-		// Initialize function calls
-		//document.getElementById("TKIFonzieVar").onclick = function() { this._restartHandler() };
-		
         var cfg = this.config = utils.extend(options, defaults);
         this.interval = consts.DEFAULT_INTERVAL;
 
@@ -817,30 +827,40 @@ Tetris.prototype = {
         canvas.init(views.scene, views.preview, views.hold);
 		inputs.init();
 		
+		// if true no openers.  just random tetrinos
+		this.isFreePlay = true;
 		this.currentOpener = 0;
         this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
         this.reset();
-		setInterval(() => {this._processInput();}, 1);
+		setInterval(() => {this._processTick();}, 1);
 
         this._initEvents();
         this._fireShape();
 
     },
+	setFreePlay: function()
+	{
+		this.isFreePlay = true;
+		this.hintQueue = [];
+		this.shapeQueue = [];
+		this.hintMino = 0;
+		this._restartHandler();
+		this.currentOpener = 0;
+		this._fireShape();
+	},
 	setTKIFonzieVar: function()
 	{
+		this.isFreePlay = false;
 		this._restartHandler();
 		this.currentOpener = 1;
 		this._fireShape();
-		
-		//this._update();
 	},	
 	setDTCannonVar: function()
 	{
+		this.isFreePlay = false;
 		this._restartHandler();
 		this.currentOpener = 2;
 		this._fireShape();
-		
-		//this._update();
 	},
     //Reset game
     reset: function() {
@@ -849,16 +869,24 @@ Tetris.prototype = {
         this.level = 1;
         this.score = 0;
 		this.lines = 0;
+		// beginning of frame
         this.startTime = new Date().getTime();
         this.currentTime = this.startTime;
         this.prevTime = this.startTime;
+		//todo:get rid of extra
         this.levelTime = this.startTime;
 		this.prevInputTime = this.startTime;
+		// current tetrino index gets set to 0 at the end of opener sequence
 		this.currentMinoInx = 0;
 		this.shapeQueue = [];
 		this.hintQueue = [];
 		this.holdQueue = [];
+		// gets set to false after mino has been popped from hold stack; set back to true on mino dropped
 		this.canPullFromHoldQueue = false;
+		// rotation counter for srs extended piece lockdown
+		this.rotationCounter = 0;
+		// timer for srs extened piece lockdown
+		this.pieceTimer = 0;
         clearMatrix(this.matrix);
         views.setLevel(this.level);
         views.setScore(this.score);
@@ -902,14 +930,7 @@ Tetris.prototype = {
 			this._draw();
 		}
 	},
-    //Game over
-    gamveOver: function() {
 
-    },
-	  
-    // All key event handlers
-    _keydownHandler: function(e) {
-    },
     // Restart game
     _restartHandler: function() {
         this.reset();
@@ -917,38 +938,45 @@ Tetris.prototype = {
     },
     // Bind game events
     _initEvents: function() {
-        //window.addEventListener('keydown', utils.proxy(this._keydownHandler, this), false);
         views.btnRestart.addEventListener('click', utils.proxy(this._restartHandler, this), false);
     },
 
     // Fire a new random shape
     _fireShape: function() {
-		//this.shape = this.shapeQueue.shift() || shapes.randomShape();
 		
 	
+		if(this.isFreePlay == false) {
+			while(this.shapeQueue.length <= 4)
+			{
+				this.preparedShape = openers.getNextMino(this.currentOpener);
+				this.shapeQueue.push(this.preparedShape);
+			}
+			while(this.hintQueue.length <= 4)
+			{
+				this.preparedShape = openers.getNextHint(this.currentOpener);
+				this.hintQueue.push(this.preparedShape);
+			}
 			
+			this.hintMino = this.hintQueue.shift();
+			this.shape = this.shapeQueue.shift();// shapes.randomShape();
 		   
-		while(this.shapeQueue.length <= 4)
+		   this.currentMinoInx++;
-		{
-			this.preparedShape = openers.getNextMino(this.currentOpener);
-			this.shapeQueue.push(this.preparedShape);
-		}
-		while(this.hintQueue.length <= 4)
-		{
-			this.preparedShape = openers.getNextHint(this.currentOpener);
-			this.hintQueue.push(this.preparedShape);
-		}
 		   
-		this.hintMino = this.hintQueue.shift();
+			if(this.currentMinoInx > openers.getLength()) {
-		this.shape = this.shapeQueue.shift();// shapes.randomShape();
+				this.hintQueue = [];
+				this.shapeQueue = [];
+				this._restartHandler();
+				this._fireShape();
+			}
+		} else {
+			while(this.shapeQueue.length <= 4)
+			{
+				this.preparedShape = shapes.randomShape();
+				this.shapeQueue.push(this.preparedShape);
+			}
 			
-	   this.currentMinoInx++;
+			this.shape = this.shapeQueue.shift() || randomShape();
-	   
+			this.currentMinoInx++;
-		if(this.currentMinoInx > openers.getLength()) {
-			this.hintQueue = [];
-			this.shapeQueue = [];
-			this._restartHandler();
-			this._fireShape();
 		}
 		
 		// Reset matrix at successful end of opener
@@ -977,12 +1005,8 @@ Tetris.prototype = {
 		}
         canvas.drawMatrix(this.matrix);
     },
-	// Render Shape
+
-	_renderShape: function()
+	_processTick: async function() {
-	{
-		this._draw();
-	},
-	_processInput: async function() {
 	
 		var deltaTime = 1.0; // 1 millisecond
 		var tenthOfFrame = 1.0//1;//1.6; // 1.6ms = 1 fram
@@ -1007,26 +1031,25 @@ Tetris.prototype = {
 				var curkey = inputs.gamepadQueue.shift();
 				if(curkey == "DPad-Left") {
 					this.shape.goLeft(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == "DPad-Right") {
 					this.shape.goRight(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == "A") {
+					this.rotationCounter++;
 					this.shape.rotate(this.matrix);
-					this._renderShape();
+					this._draw();
-					//this._draw();
 				}
 				if(curkey == "B") {
+					this.rotationCounter++;
 					this.shape.rotateClockwise(this.matrix);
-					this._renderShape();
+					this._draw();
-					//this._draw();
 				}
 				if(curkey == "DPad-Down") {
 					 this.shape.goDown(this.matrix);
-					 this._renderShape();
+					 this._draw();
-					 //this._draw();
 				}
 				if(curkey == "RB") {
 					this.shape.goBottom(this.matrix);
@@ -1034,17 +1057,13 @@ Tetris.prototype = {
 				}
 				if(curkey == "LB") {
 					this.pushHoldStack();
-					//this._renderShape();
 					this._update();
 				}				
 				if(curkey == "DPad-Up") {
 					this.popHoldStack();
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == "Back") {
-					// this.hintMino = [] ?
-					// this.shape = []
 					this._restartHandler();
 					return;
 				}
@@ -1067,47 +1086,45 @@ Tetris.prototype = {
 				var curkey = inputs.inputqueue.shift();
 				if(curkey == 37) {
 					this.shape.goLeft(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 39){
 					this.shape.goRight(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 40) {
 					 this.shape.goDown(this.matrix);
-					 this._renderShape();
+					 this._draw();
 				}
 				if(curkey == 90) {
+					this.rotationCounter++;
 					this.shape.rotate(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 88){
+					this.rotationCounter++;
 					this.shape.rotateClockwise(this.matrix);;
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 32) {
 					this.shape.goBottom(this.matrix);
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == 16) {
 					this.pushHoldStack();
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == 17) {
 					this.popHoldStack();
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == 81) {
-					if(document.getElementById("bg").style.display == "none")
+					if(document.getElementById("divbg").style.display == "none")
-						document.getElementById("bg").style.display =  "initial";
+						document.getElementById("divbg").style.display =  "initial";
 					else
-						document.getElementById("bg").style.display="none";
+						document.getElementById("divbg").style.display="none";
 				}
 				if(curkey == 82) {
-					views.setGameOver(true);
 					this._restartHandler();
 					return;
 				}
@@ -1156,6 +1173,8 @@ Tetris.prototype = {
     },
 	_checkHint: function() {
 		
+		if(this.isFreePlay)
+			return;
 		if(!this.shape.isSameSRS(this.hintMino))
 		{
 			new Audio('./dist/Failed.ogg').play();
@@ -1230,8 +1249,8 @@ Tetris.prototype = {
         var rows = checkFullRows(this.matrix);
         if (rows.length) {
 			var tspinType;
-			if(rows.length >= 4)
+			// if(rows.length >= 4)
-				new Audio('./dist/Tetris.ogg').play();
+				// new Audio('./dist/Tetris.ogg').play();
 			if(this.shape.flag === 'T')
 				tspinType = this._tSpinType(this.shape, this.matrix);
 			
@@ -1263,8 +1282,10 @@ Tetris.prototype = {
 
 
 window.Tetris = Tetris;
+// export {Tetris};
 },{"./canvas.js":1,"./consts.js":2,"./input.js":4,"./openers.js":6,"./shapes.js":7,"./utils.js":8,"./views.js":9}],6:[function(require,module,exports){
 var shapes = require("./shapes.js");
+// import * as shapes from './shapes.js';
 
 var OpenerGenerator = {
 	shapeQueue: [],
@@ -1346,7 +1367,6 @@ var OpenerGenerator = {
 				shapes.getShape(2),
 				shapes.getShape(4),
 				shapes.getShape(3));
-				
 				// L
 				this.hintQueue[0].x = -1;
 				this.hintQueue[0].y = 17;
@@ -1502,10 +1522,16 @@ module.exports.getNextMino = getNextMino;
 module.exports.getNextHint = getNextHint;
 module.exports.getLength = getLength;
 module.exports.reset = reset;
+// export getNextMino;
+// export getNextHint;
+// export getLength;
+// export reset;
+
 
 
 },{"./shapes.js":7}],7:[function(require,module,exports){
 var consts = require('./consts.js');
+// import * as consts from './const.js';
 var COLORS = consts.COLORS;
 var COLUMN_COUNT = consts.COLUMN_COUNT;
 
@@ -1635,7 +1661,7 @@ function ShapeLR() {
 		 -1,  0, -1,  0,
 		 -1, -1, -1, -1,
 		 0,  2,  0,  2,
-		 -1,  2, -1,  2,
+		 -1,  2, -1,  2
 	];
 
 	this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
@@ -1743,7 +1769,7 @@ function ShapeI() {
         [0, 0, 0, 0]
     ];
 	
-		var state1RotationPointsOffset = [ 
+	var state1RotationPointsOffset = [ 
 		0, 0, 0, 0,
 		-1, 0, -2,  0,
 		2,  0,  1,  0,
@@ -2412,9 +2438,11 @@ function getShape(shapei) {
     shape.init(result);
     return shape;
 }
+
 module.exports.randomShape = randomShape;
 module.exports.getShape = getShape;
-//module.exports.newOpenerShapeQueue = newOpenerShapeQueue;		queue.push(new ShapeL());
+// export randomShape;
+// export getShape;
 
 },{"./consts.js":2}],8:[function(require,module,exports){
 
@@ -2528,12 +2556,18 @@ exports.$ = $;
 exports.extend = extend;
 exports.proxy = proxy;
 
+// export $;
+// export extend;
+// export proxy;
+
 },{}],9:[function(require,module,exports){
 /**
  All dom definitions and actions
 */
 var utils = require('./utils.js');
 var consts = require('./consts.js');
+// import * as utils from './utils.js';
+// import * as consts from './const.js';
 
 var $ = utils.$;
 
@@ -2673,4 +2707,5 @@ var tetrisView = {
 };
 
 module.exports = tetrisView;
+// export tetrisView;
 },{"./consts.js":2,"./utils.js":8}]},{},[5]);

index.html

@@ -56,27 +56,33 @@ document.getElementById("divbg").removeAttribute("tabIndex");
 	<div id="leftSide">
 		<div id="leftInfo">
 			
+			<style>
+			a:link {
+			  color: powderblue;
+			  /*background-color: transparent;
+			  text-decoration: none;*/
+			}</style>
 			<ul style="font-size:16px;color:dodgerblue;text-align:left;" id="Openers">Openers:
-			
+			<li style="font-size:12px;color:powderblue;"><a href="#" id="setFreePlay">No Opener </a></li>
-				<ul style="font-size:14px;color:powderblue;text-align:left;" id="TSpinOpeners">T-Spin Openers:	
+				<ul style="font-size:14px;color:dodgerblue;text-align:left;" id="TSpinOpeners">T-Spin Openers:	
-					<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlyIPiece">Early I Piece:
+					<ul style="font-size:13px;color:dodgerblue;text-align:left;padding-left:1em;" id="EarlyIPiece">Early I Piece:
 						<li style="font-size:12px;padding-left:1em;"><a href="#" id="setTKIFonzieVar">TKI 3 (Fonzie variation) </a></li>
-						<li style="font-size:12px;padding-left:1em;";><a href="#" id="setTKIFTVar">TKI 3 (Flat Top variation) </a></li>
+						<!--<li style="font-size:12px;padding-left:1em;";><a href="#" id="setTKIFTVar">TKI 3 (Flat Top variation) </a></li>
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setTKICTVar">TKI 3 (Castle Top variation) </a></li>
-						<li style="font-size:12px;padding-left:1em";><a href="#" id="setAjanbaTSDVar">Ajanba TSD </a></li>
+						<li style="font-size:12px;padding-left:1em";><a href="#" id="setAjanbaTSDVar">Ajanba TSD </a></li>-->
 					</ul>
-					<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlyLOrJPiece">Early L or J Piece:
+					<ul style="font-size:13px;color:dodgerblue;text-align:left;padding-left:1em;" id="EarlyLOrJPiece">Early L or J Piece:
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setDTCannonVar">DT Cannon (LS / JZ base)</a></li> 
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setMKOStackingVar">MKO Stacking</a></li> 
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setPokeminosSTD Var">Pokemino's STD </a></li> 
 					</ul>
-					<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlyLOrJPiece">Early O Piece:
+					<ul style="font-size:13px;color:dodgerblue;text-align:left;padding-left:1em;" id="EarlyLOrJPiece">Early O Piece:
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setMrTSpinsSTDreversedVar">Mr. T-Spin's STD (reversed) </a></li>
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setHachispinVar">Hachispin</a></li>
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setAlbatrossVar">Albatross</a></li>
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setNumberOneVar">Number One </a></li>
 					</ul>
-					<ul style="font-size:13px;color:powderblue;text-align:left;padding-left:1em;" id="EarlySZOrJPiece">Early S, Z, or T Piece:
+					<ul style="font-size:13px;color:dodgerblue;text-align:left;padding-left:1em;" id="EarlySZOrJPiece">Early S, Z, or T Piece:
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setPelicanVar">Pelican</a></li>
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setDTCannonTSZbaseVar">DT Cannon (TSZ base) </a></li>
 						<li style="font-size:12px;padding-left:1em";><a href="#" id="setBTCannonVar">BT Cannon </a></li>
@@ -132,7 +138,7 @@ document.getElementById("divbg").removeAttribute("tabIndex");
 <script>
 	(function(){
 		var tetrion = new Tetris('tetris');
-		
+		document.getElementById("setFreePlay").addEventListener("click", function() { tetrion.setFreePlay(); } );
 		document.getElementById("setTKIFonzieVar").addEventListener("click", function() { tetrion.setTKIFonzieVar(); } );
 		document.getElementById("setDTCannonVar").addEventListener("click", function() { tetrion.setDTCannonVar(); } );
 		

src/canvas.js

@@ -1,7 +1,8 @@
 
 var utils = require('./utils.js');
 var consts = require('./consts.js');
-
+// import * as utils from './utils.js';
+// import * as consts from './const.js';
 
 var lineColor =  consts.GRID_LINE_COLOR;
 
@@ -255,3 +256,5 @@ var tetrisCanvas = {
 
 
 module.exports = tetrisCanvas;
+// export tetrisCanvas;
+ 

src/gamepad.js

@@ -82,3 +82,4 @@ window.addEventListener("gamepadconnected", gamepadAPI.connect);
 window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 module.exports = gamepadAPI;
+// export gamepadAPI;

src/input.js

@@ -1,4 +1,5 @@
 var gamepad = require('./gamepad.js');
+// import * as gamepad from './gamepad.js';
 
 var UserInputs = {
     init() {
@@ -81,7 +82,7 @@ var UserInputs = {
 	
 	// Direction Pad
 	gamepadDPadDown(finds) {
-		var DAS = 80.0;
+		var DAS = 65.0;
 		var ARR = 20.0;
 		var isContained = this.gpButtons.includes(finds);
 		var isPrevContained = this.prevGpButtons.includes(finds);
@@ -161,7 +162,7 @@ var UserInputs = {
 	},
 	// Direction arrows
     processKeyboardArrowKeys(key) {		
-		var DAS = 80.0;
+		var DAS = 65.0;
 		var ARR = 20.0;
 
 	
@@ -241,3 +242,4 @@ var UserInputs = {
 };
 
 module.exports = UserInputs;
+// export UserInputs;

src/main.js

@@ -5,7 +5,14 @@ var views = require('./views.js');
 var canvas = require('./canvas.js');
 var inputs = require('./input.js');
 var openers = require('./openers.js');
-
+// import * as utils from './utils.js';
+// import * as consts from './const.js';
+// import * as shapes from './shapes.js';
+// import * as views from './views.js';
+// import * as canvas from './canvas.js';
+// import * as inputs from './input.js';
+// import * as openers from './openers.js';
+//import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
 
 /**
 	Init game matrix
@@ -142,9 +149,6 @@ Tetris.prototype = {
 
     init: function(options) {
 		
-		// Initialize function calls
-		//document.getElementById("TKIFonzieVar").onclick = function() { this._restartHandler() };
-		
         var cfg = this.config = utils.extend(options, defaults);
         this.interval = consts.DEFAULT_INTERVAL;
 
@@ -153,30 +157,40 @@ Tetris.prototype = {
         canvas.init(views.scene, views.preview, views.hold);
 		inputs.init();
 		
+		// if true no openers.  just random tetrinos
+		this.isFreePlay = true;
 		this.currentOpener = 0;
         this.matrix = initMatrix(consts.ROW_COUNT, consts.COLUMN_COUNT);
         this.reset();
-		setInterval(() => {this._processInput();}, 1);
+		setInterval(() => {this._processTick();}, 1);
 
         this._initEvents();
         this._fireShape();
 
     },
+	setFreePlay: function()
+	{
+		this.isFreePlay = true;
+		this.hintQueue = [];
+		this.shapeQueue = [];
+		this.hintMino = 0;
+		this._restartHandler();
+		this.currentOpener = 0;
+		this._fireShape();
+	},
 	setTKIFonzieVar: function()
 	{
+		this.isFreePlay = false;
 		this._restartHandler();
 		this.currentOpener = 1;
 		this._fireShape();
-		
-		//this._update();
 	},	
 	setDTCannonVar: function()
 	{
+		this.isFreePlay = false;
 		this._restartHandler();
 		this.currentOpener = 2;
 		this._fireShape();
-		
-		//this._update();
 	},
     //Reset game
     reset: function() {
@@ -185,16 +199,24 @@ Tetris.prototype = {
         this.level = 1;
         this.score = 0;
 		this.lines = 0;
+		// beginning of frame
         this.startTime = new Date().getTime();
         this.currentTime = this.startTime;
         this.prevTime = this.startTime;
+		//todo:get rid of extra
         this.levelTime = this.startTime;
 		this.prevInputTime = this.startTime;
+		// current tetrino index gets set to 0 at the end of opener sequence
 		this.currentMinoInx = 0;
 		this.shapeQueue = [];
 		this.hintQueue = [];
 		this.holdQueue = [];
+		// gets set to false after mino has been popped from hold stack; set back to true on mino dropped
 		this.canPullFromHoldQueue = false;
+		// rotation counter for srs extended piece lockdown
+		this.rotationCounter = 0;
+		// timer for srs extened piece lockdown
+		this.pieceTimer = 0;
         clearMatrix(this.matrix);
         views.setLevel(this.level);
         views.setScore(this.score);
@@ -238,14 +260,7 @@ Tetris.prototype = {
 			this._draw();
 		}
 	},
-    //Game over
-    gamveOver: function() {
 
-    },
-	  
-    // All key event handlers
-    _keydownHandler: function(e) {
-    },
     // Restart game
     _restartHandler: function() {
         this.reset();
@@ -253,38 +268,45 @@ Tetris.prototype = {
     },
     // Bind game events
     _initEvents: function() {
-        //window.addEventListener('keydown', utils.proxy(this._keydownHandler, this), false);
         views.btnRestart.addEventListener('click', utils.proxy(this._restartHandler, this), false);
     },
 
     // Fire a new random shape
     _fireShape: function() {
-		//this.shape = this.shapeQueue.shift() || shapes.randomShape();
 		
 	
+		if(this.isFreePlay == false) {
+			while(this.shapeQueue.length <= 4)
+			{
+				this.preparedShape = openers.getNextMino(this.currentOpener);
+				this.shapeQueue.push(this.preparedShape);
+			}
+			while(this.hintQueue.length <= 4)
+			{
+				this.preparedShape = openers.getNextHint(this.currentOpener);
+				this.hintQueue.push(this.preparedShape);
+			}
 			
+			this.hintMino = this.hintQueue.shift();
+			this.shape = this.shapeQueue.shift();// shapes.randomShape();
 		   
-		while(this.shapeQueue.length <= 4)
+		   this.currentMinoInx++;
-		{
-			this.preparedShape = openers.getNextMino(this.currentOpener);
-			this.shapeQueue.push(this.preparedShape);
-		}
-		while(this.hintQueue.length <= 4)
-		{
-			this.preparedShape = openers.getNextHint(this.currentOpener);
-			this.hintQueue.push(this.preparedShape);
-		}
 		   
-		this.hintMino = this.hintQueue.shift();
+			if(this.currentMinoInx > openers.getLength()) {
-		this.shape = this.shapeQueue.shift();// shapes.randomShape();
+				this.hintQueue = [];
+				this.shapeQueue = [];
+				this._restartHandler();
+				this._fireShape();
+			}
+		} else {
+			while(this.shapeQueue.length <= 4)
+			{
+				this.preparedShape = shapes.randomShape();
+				this.shapeQueue.push(this.preparedShape);
+			}
 			
-	   this.currentMinoInx++;
+			this.shape = this.shapeQueue.shift() || randomShape();
-	   
+			this.currentMinoInx++;
-		if(this.currentMinoInx > openers.getLength()) {
-			this.hintQueue = [];
-			this.shapeQueue = [];
-			this._restartHandler();
-			this._fireShape();
 		}
 		
 		// Reset matrix at successful end of opener
@@ -313,12 +335,8 @@ Tetris.prototype = {
 		}
         canvas.drawMatrix(this.matrix);
     },
-	// Render Shape
+
-	_renderShape: function()
+	_processTick: async function() {
-	{
-		this._draw();
-	},
-	_processInput: async function() {
 	
 		var deltaTime = 1.0; // 1 millisecond
 		var tenthOfFrame = 1.0//1;//1.6; // 1.6ms = 1 fram
@@ -343,26 +361,25 @@ Tetris.prototype = {
 				var curkey = inputs.gamepadQueue.shift();
 				if(curkey == "DPad-Left") {
 					this.shape.goLeft(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == "DPad-Right") {
 					this.shape.goRight(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == "A") {
+					this.rotationCounter++;
 					this.shape.rotate(this.matrix);
-					this._renderShape();
+					this._draw();
-					//this._draw();
 				}
 				if(curkey == "B") {
+					this.rotationCounter++;
 					this.shape.rotateClockwise(this.matrix);
-					this._renderShape();
+					this._draw();
-					//this._draw();
 				}
 				if(curkey == "DPad-Down") {
 					 this.shape.goDown(this.matrix);
-					 this._renderShape();
+					 this._draw();
-					 //this._draw();
 				}
 				if(curkey == "RB") {
 					this.shape.goBottom(this.matrix);
@@ -370,17 +387,13 @@ Tetris.prototype = {
 				}
 				if(curkey == "LB") {
 					this.pushHoldStack();
-					//this._renderShape();
 					this._update();
 				}				
 				if(curkey == "DPad-Up") {
 					this.popHoldStack();
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == "Back") {
-					// this.hintMino = [] ?
-					// this.shape = []
 					this._restartHandler();
 					return;
 				}
@@ -403,47 +416,45 @@ Tetris.prototype = {
 				var curkey = inputs.inputqueue.shift();
 				if(curkey == 37) {
 					this.shape.goLeft(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 39){
 					this.shape.goRight(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 40) {
 					 this.shape.goDown(this.matrix);
-					 this._renderShape();
+					 this._draw();
 				}
 				if(curkey == 90) {
+					this.rotationCounter++;
 					this.shape.rotate(this.matrix);
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 88){
+					this.rotationCounter++;
 					this.shape.rotateClockwise(this.matrix);;
-					this._renderShape();
+					this._draw();
 				}
 				if(curkey == 32) {
 					this.shape.goBottom(this.matrix);
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == 16) {
 					this.pushHoldStack();
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == 17) {
 					this.popHoldStack();
-					//this._renderShape();
 					this._update();
 				}
 				if(curkey == 81) {
-					if(document.getElementById("bg").style.display == "none")
+					if(document.getElementById("divbg").style.display == "none")
-						document.getElementById("bg").style.display =  "initial";
+						document.getElementById("divbg").style.display =  "initial";
 					else
-						document.getElementById("bg").style.display="none";
+						document.getElementById("divbg").style.display="none";
 				}
 				if(curkey == 82) {
-					views.setGameOver(true);
 					this._restartHandler();
 					return;
 				}
@@ -492,6 +503,8 @@ Tetris.prototype = {
     },
 	_checkHint: function() {
 		
+		if(this.isFreePlay)
+			return;
 		if(!this.shape.isSameSRS(this.hintMino))
 		{
 			new Audio('./dist/Failed.ogg').play();
@@ -566,8 +579,8 @@ Tetris.prototype = {
         var rows = checkFullRows(this.matrix);
         if (rows.length) {
 			var tspinType;
-			if(rows.length >= 4)
+			// if(rows.length >= 4)
-				new Audio('./dist/Tetris.ogg').play();
+				// new Audio('./dist/Tetris.ogg').play();
 			if(this.shape.flag === 'T')
 				tspinType = this._tSpinType(this.shape, this.matrix);
 			
@@ -599,3 +612,4 @@ Tetris.prototype = {
 
 
 window.Tetris = Tetris;
+// export {Tetris};

src/openers.js

@@ -1,4 +1,5 @@
 var shapes = require("./shapes.js");
+// import * as shapes from './shapes.js';
 
 var OpenerGenerator = {
 	shapeQueue: [],
@@ -80,7 +81,6 @@ var OpenerGenerator = {
 				shapes.getShape(2),
 				shapes.getShape(4),
 				shapes.getShape(3));
-				
 				// L
 				this.hintQueue[0].x = -1;
 				this.hintQueue[0].y = 17;
@@ -236,4 +236,9 @@ module.exports.getNextMino = getNextMino;
 module.exports.getNextHint = getNextHint;
 module.exports.getLength = getLength;
 module.exports.reset = reset;
+// export getNextMino;
+// export getNextHint;
+// export getLength;
+// export reset;
+
 

src/shapes.js

@@ -1,4 +1,5 @@
 var consts = require('./consts.js');
+// import * as consts from './const.js';
 var COLORS = consts.COLORS;
 var COLUMN_COUNT = consts.COLUMN_COUNT;
 
@@ -128,7 +129,7 @@ function ShapeLR() {
 		 -1,  0, -1,  0,
 		 -1, -1, -1, -1,
 		 0,  2,  0,  2,
-		 -1,  2, -1,  2,
+		 -1,  2, -1,  2
 	];
 
 	this.rotationPoints = [state1RotationPointsOffset, state2RotationPointsOffset, state3RotationPointsOffset, state4RotationPointsOffset];
@@ -236,7 +237,7 @@ function ShapeI() {
         [0, 0, 0, 0]
     ];
 	
-		var state1RotationPointsOffset = [ 
+	var state1RotationPointsOffset = [ 
 		0, 0, 0, 0,
 		-1, 0, -2,  0,
 		2,  0,  1,  0,
@@ -905,6 +906,8 @@ function getShape(shapei) {
     shape.init(result);
     return shape;
 }
+
 module.exports.randomShape = randomShape;
 module.exports.getShape = getShape;
-//module.exports.newOpenerShapeQueue = newOpenerShapeQueue;		queue.push(new ShapeL());
+// export randomShape;
+// export getShape;

src/utils.js

@@ -108,3 +108,7 @@ window.requestAnimationFrame = aniFrame;
 exports.$ = $;
 exports.extend = extend;
 exports.proxy = proxy;
+
+// export $;
+// export extend;
+// export proxy;

src/views.js

@@ -3,6 +3,8 @@
 */
 var utils = require('./utils.js');
 var consts = require('./consts.js');
+// import * as utils from './utils.js';
+// import * as consts from './const.js';
 
 var $ = utils.$;
 
@@ -142,3 +144,4 @@ var tetrisView = {
 };
 
 module.exports = tetrisView;
+// export tetrisView;