Implement upcoming tiles and hold a tile (not yet graphical)

index.html

@@ -13,7 +13,6 @@
             <feGaussianBlur in="SourceGraphic" stdDeviation="15"></feGaussianBlur>
         </filter>
     </defs>
-    <!--<animate id="animate1" xlink:href="#f1" attributeName="stdDeviation" from="15" to="0" begin="" dur="1s" />-->
 </svg>
 <div id="menu">
     <div id="language-selector">

js/tetris.js

@@ -20,6 +20,12 @@ let isPaused = true;
 let startTime = 0;
 let prevUpdateScore = 0;
 
+const pieces = 'IJLOSTZ';
+
+let upcomingTiles = [];
+let holdingTile = null;
+let alreadyHolding = false;
+
 if (typeof console === "undefined") {
     console = {};
 }
@@ -28,6 +34,10 @@ let prerenders = [];
 const prerenderWidth = canvas.width / fieldSize.x * 4;
 const prerenderHeight = canvas.height / fieldSize.y * 4;
 
+function addTile() {
+    upcomingTiles.push(createPiece(pieces[pieces.length * Math.random() | 0]));
+}
+
 function arenaSweep() {
     let rowCount = 1;
     outer: for (let y = arena.length - 1; y > 0; --y) {
@@ -300,6 +310,18 @@ function playerDrop() {
     dropCounter = 0;
 }
 
+function playerHold() {
+    if (alreadyHolding)
+        return;
+    if (holdingTile === null) {
+        holdingTile = player.matrix;
+        playerReset(true);
+    } else {
+        holdingTile = [player.matrix, player.matrix = holdingTile][0];
+        playerReset(true, false);
+    }
+}
+
 function playerMove(dir) {
     player.pos.x += dir;
     if (collide(arena, player)) {
@@ -308,9 +330,14 @@ function playerMove(dir) {
     dropCounter *= .75;
 }
 
-function playerReset() {
-    const pieces = 'IJLOSTZ';
-    player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
+function playerReset(resetHold = false, newTile = true) {
+    alreadyHolding = resetHold;
+    if (newTile) {
+        player.matrix = upcomingTiles[0];
+        upcomingTiles.splice(0, 1);
+        addTile();
+    }
+
     player.pos.y = 0;
     player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);
 
@@ -470,6 +497,10 @@ const keys = {
     rotateRight: {
         keys: [69],
         action: () => playerRotate(1)
+    },
+    holdTile: {
+        keys: [38, 87],
+        action: () => playerHold()
     }
 };
 
@@ -486,6 +517,9 @@ document.addEventListener('keydown', event => {
 function startGame() {
     arena = createMatrix(fieldSize.x, fieldSize.y);
     drawArena();
+    addTile();
+    addTile();
+    addTile();
     playerReset();
     update();
     updateScore();

js/touch-control.js

@@ -9,7 +9,6 @@ hammertime.on('swiperight', (e) => {
 });
 
 hammertime.on('pandown swipedown', (e) => {
-    console.log(e);
     keys.down.action();
 });