From bb1c24b7e0c1ee5a547cec4ff2a9e027478745dd Mon Sep 17 00:00:00 2001
From: Marcel <kingofdog@web.de>
Date: Wed, 24 Jan 2018 19:42:59 +0100
Subject: [PATCH] Add holding canvas and improve UI layouts

---
 index.html   |  33 +++++++---
 js/menu.js   |  24 +++++--
 js/tetris.js |  69 +++++++++++++++----
 style.css    | 182 ++++++++++++++++++++++++++++++++++++---------------
 4 files changed, 227 insertions(+), 81 deletions(-)

diff --git a/index.html b/index.html
index e00f54e..437bcdb 100644
--- a/index.html
+++ b/index.html
@@ -15,12 +15,25 @@
     </defs>
 </svg>
 <div id="menu">
-    <div id="language-selector">
-        <div id="lang-en" class="lang active" data-lang="en">English</div>
-        <div id="lang-de" class="lang" data-lang="de">Deutsch</div>
-    </div>
-    <div id="theme-selector">
-
+    <div id="menu-content">
+        <div id="language-selector">
+            <div id="lang-en" class="lang active" data-lang="en">English</div>
+            <div id="lang-de" class="lang" data-lang="de">Deutsch</div>
+        </div>
+        <div id="theme-selector">
+            <div class="radio">
+                <input id="theme-default" name="theme" type="radio" checked>
+                <label for="theme-default" class="radio-label">Default</label>
+            </div>
+            <div class="radio">
+                <input id="theme-modern" name="theme" type="radio">
+                <label for="theme-modern" class="radio-label">Modern</label>
+            </div>
+            <div class="radio">
+                <input id="theme-snakes" name="theme" type="radio">
+                <label for="theme-snakes" class="radio-label">Snakes</label>
+            </div>
+        </div>
     </div>
 </div>
 <div id="menu-opener">
@@ -33,8 +46,12 @@
         <div id="time">00:00</div>
         <div id="score" data-prefix="Score: ">0</div>
     </div>
-    <canvas id="tetris-background" width="240" height="400"></canvas>
-    <canvas id="tetris" width="240" height="400"></canvas>
+    <div id="canvas-container">
+        <canvas id="tetris-hold" width="100" height="100"></canvas>
+        <canvas id="tetris-background" width="240" height="400"></canvas>
+        <canvas id="tetris" width="240" height="400"></canvas>
+        <canvas id="tetris-upcoming" width="100" height="300"></canvas>
+    </div>
     <div id="controls">
         <div id="control-text"></div>
     </div>
diff --git a/js/menu.js b/js/menu.js
index 0afd2de..060732d 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -3,13 +3,25 @@ window.onresize = () => {
 };
 
 function scaleWindow() {
-    bgCanvas.height = window.innerHeight - 40;
-    bgCanvas.width = bgCanvas.height / (5 / 3);
-    bgContext.scale(bgCanvas.width / fieldSize.x, bgCanvas.height / fieldSize.y);
+    const canvasContainer = document.getElementById("canvas-container");
+    const height = window.innerHeight - 40;
+    const width = height / (5 / 3);
 
-    canvas.height = window.innerHeight - 40;
-    canvas.width = canvas.height / (5 / 3);
-    context.scale(canvas.width / fieldSize.x, canvas.height / fieldSize.y);
+    canvasContainer.height = height;
+    canvasContainer.width = width + 200;
+
+    bgCanvas.height = height;
+    bgCanvas.width = width;
+    bgContext.scale(width / fieldSize.x, height / fieldSize.y);
+
+    canvas.height = height;
+    canvas.width = width;
+    context.scale(width / fieldSize.x, height / fieldSize.y);
+
+    holdCanvas.height = height / fieldSize.y * 4;
+    holdCanvas.width = holdCanvas.height;
+    holdCanvas.style.transform = "translateX(-" + ((width / 2) + holdCanvas.height) + "px) translate(-.4em, -.2em)";
+    holdContext.scale(holdCanvas.width / 6, holdCanvas.width / 6);
 
     if(!firstRun && isPaused) {
         draw();
diff --git a/js/tetris.js b/js/tetris.js
index b5c6a12..8fd6f31 100644
--- a/js/tetris.js
+++ b/js/tetris.js
@@ -4,6 +4,12 @@ const context = canvas.getContext('2d');
 const bgCanvas = document.getElementById('tetris-background');
 const bgContext = bgCanvas.getContext('2d');
 
+const holdCanvas = document.getElementById('tetris-hold');
+const holdContext = holdCanvas.getContext('2d');
+
+const upcomingCanvas = document.getElementById('tetris-upcoming');
+const upcomingContext = upcomingCanvas.getContext('2d');
+
 const fieldSize = {x: 12, y: 20};
 const tileGap = .05;
 
@@ -134,26 +140,32 @@ function createPiece(type) {
 }
 
 function draw() {
-    // bgContext.fillStyle = '#000';
-    // bgContext.fillRect(0, 0, canvas.width, canvas.height);
     context.clearRect(0, 0, canvas.width, canvas.height);
-    // clearScreen();
-
-    // drawMatrix(arena, {x: 0, y: 0}, true);
     drawMatrix(player.matrix, player.pos);
 }
 
 function drawArena() {
     bgContext.fillStyle = '#000';
     bgContext.fillRect(0, 0, canvas.width, canvas.height);
-    drawMatrix(arena, {x: 0, y: 0}, true);
+    drawMatrix(arena, {x: 0, y: 0}, bgContext);
 }
 
-function drawMatrix(matrix, offset, isBg) {
+function drawHolding() {
+    holdContext.clearRect(0, 0, holdCanvas.width, holdCanvas.height);
+    console.log(holdingTile, holdingTile.length, holdCanvas.width / (holdingTile.length + 2));
+    // holdContext.scale(holdCanvas.width / (holdingTile.length + 2), holdCanvas.width / (holdingTile.length + 2));
+    const tile = removeEmpty(holdingTile);
+    const x = 3 - (tile[0].length / 2);
+    const y = 3 - (tile.length / 2);
+    console.log(x, y);
+    drawMatrix(tile, {x: x, y: y}, holdContext);
+}
+
+function drawMatrix(matrix, offset, useContext = context) {
     matrix.forEach((row, y) => {
         row.forEach((value, x) => {
             if (value !== 0) {
-                drawTile(x, y, offset, colors[value], matrix, isBg);
+                drawTile(x, y, offset, colors[value], matrix, useContext);
             }
         });
     });
@@ -203,13 +215,12 @@ function drawRoundRect(ctx, x, y, w, h, r) {
     ctx.fill();
 }
 
-function drawTile(x, y, offset, color, matrix, isBg) {
-    let ctx = context;
-    if (isBg) {
-        ctx = bgContext;
-    }
+function drawTile(x, y, offset, color, matrix, useContext = context) {
+    const ctx = useContext;
     switch (theme) {
         case "default":
+            if (ctx === holdContext)
+                console.log(ctx, color, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
             ctx.fillStyle = color;
             ctx.fillRect(x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
             break;
@@ -218,6 +229,7 @@ function drawTile(x, y, offset, color, matrix, isBg) {
             drawRoundRect(ctx, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
             break;
         case "snakes":
+            console.log(ctx);
             ctx.fillStyle = color;
             let r1 = .15, // top right
                 r2 = .15, // bottom right
@@ -246,6 +258,8 @@ function drawTile(x, y, offset, color, matrix, isBg) {
             drawRoundRect(ctx, x + offset.x, y + offset.y, 1, 1, [r1, r2, r3, r4]);
             break;
         default:
+            theme = "default";
+            drawTile(x, y, offset, color, matrix, useContext);
             break;
     }
 }
@@ -320,6 +334,7 @@ function playerHold() {
         holdingTile = [player.matrix, player.matrix = holdingTile][0];
         playerReset(true, false);
     }
+    drawHolding();
 }
 
 function playerMove(dir) {
@@ -385,6 +400,34 @@ function prerenderPieces() {
     });
 }
 
+function removeEmpty(matrix) {
+    const tempMatrix = rotate(matrix, 1);
+    matrix.forEach((row, y) => {
+        let onlyZeroes = true;
+        row.forEach((value, x) => {
+            if (value > 0) {
+                onlyZeroes = false;
+            }
+        });
+        if (onlyZeroes) {
+            matrix.splice(y, 1);
+        }
+    });
+    tempMatrix.forEach((col, x) => {
+        let onlyZeroes = true;
+        col.forEach((value, y) => {
+            if (value > 0) {
+                onlyZeroes = false;
+            }
+        });
+        if (onlyZeroes)
+            matrix.forEach((row, y) => {
+                matrix[y].splice(x, 1);
+            });
+    });
+    return matrix;
+}
+
 function rotate(matrix, dir) {
     for (let y = 0; y < matrix.length; ++y) {
         for (let x = 0; x < y; ++x) {
diff --git a/style.css b/style.css
index 90206e9..ffeee5b 100644
--- a/style.css
+++ b/style.css
@@ -8,13 +8,64 @@ body {
     color: #fff;
 }
 
-#language-selector {
+.menu {
+    -webkit-transition: 0.1s -webkit-transform linear;
+    transition: 0.1s -webkit-transform linear;
+    transition: 0.1s transform linear;
+    transition: 0.1s transform linear, 0.1s -webkit-transform linear;
     position: absolute;
-    right: 15px;
-    top: 20px;
-    font-size: 14px;
-    font-weight: 300;
+    background: 0;
+    float: left;
+    height: 2.7rem;
+    width: 3.5rem;
     z-index: 1;
+    outline: 0;
+    padding: 0;
+    border: 0;
+    -webkit-transform: scale(.5);
+    -moz-transform: scale(.5);
+    -ms-transform: scale(.5);
+    -o-transform: scale(.5);
+    transform: scale(.5);
+}
+
+#menu {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .75);
+    transform: translateX(-100%);
+    -webkit-transition: transform .5s;
+    -moz-transition: transform .5s;
+    -ms-transition: transform .5s;
+    -o-transition: transform .5s;
+    transition: transform .5s;
+    z-index: 100;
+    top: 0;
+}
+
+#menu-content {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: .6em;
+}
+
+#menu-content > * {
+    padding: 20px;
+    border-bottom: 1px solid #444;
+}
+
+.menu-open #menu {
+    transform: none;
+}
+
+#menu-opener {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 101;
 }
 
 .lang {
@@ -81,6 +132,15 @@ body {
     filter: url(#f1);
 }
 
+#canvas-container {
+    height: 936px;
+    width: 761px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
 #tetris, #tetris-background {
     position: absolute;
     left: 50%;
@@ -100,6 +160,18 @@ body {
     z-index: 0;
 }
 
+#tetris-hold {
+    position: absolute;
+    left: 50%;
+    border: solid .2em #fff;
+}
+
+#tetris-upcoming {
+    position: absolute;
+    right: 0;
+    transform: translateX(.2em);
+}
+
 #game-stats {
     position: absolute;
     top: 50%;
@@ -122,6 +194,7 @@ body {
     left: 50%;
     transform: translate(-50%, -50%) translateX(30vw);
     font-size: 20px;
+    max-width: 20vw;
 }
 
 #footer {
@@ -160,31 +233,6 @@ body {
     color: rgba(255, 255, 255, 1);
 }
 
-#menu-opener {
-    display: none;
-}
-
-.menu {
-    -webkit-transition: 0.1s -webkit-transform linear;
-    transition: 0.1s -webkit-transform linear;
-    transition: 0.1s transform linear;
-    transition: 0.1s transform linear, 0.1s -webkit-transform linear;
-    position: absolute;
-    background: 0;
-    float: left;
-    height: 2.7rem;
-    width: 3.5rem;
-    z-index: 1;
-    outline: 0;
-    padding: 0;
-    border: 0;
-    -webkit-transform: scale(.5);
-    -moz-transform: scale(.5);
-    -ms-transform: scale(.5);
-    -o-transform: scale(.5);
-    transform: scale(.5);
-}
-
 .bar, .bar::before, .bar::after {
     -webkit-transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
     transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
@@ -293,31 +341,57 @@ body {
     #control-text {
         font-size: 14px;
     }
+}
 
-    #menu {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, .75);
-        transform: translateX(-100%);
-        -webkit-transition: transform .5s;
-        -moz-transition: transform .5s;
-        -ms-transition: transform .5s;
-        -o-transition: transform .5s;
-        transition: transform .5s;
-        z-index: 100;
-        top: 0;
-    }
+/*
+Radio Buttons
+ */
 
-    .menu-open #menu {
-        transform: none;
-    }
+.radio {
+    margin: 0.5rem;
+}
 
-    #menu-opener {
-        position: absolute;
-        display: block;
-        left: 10px;
-        top: 10px;
-        z-index: 101;
-    }
+.radio input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+}
+
+.radio input[type="radio"] + .radio-label:before {
+    content: '';
+    background: #f4f4f4;
+    border-radius: 100%;
+    border: 1px solid #b4b4b4;
+    display: inline-block;
+    width: 1.4em;
+    height: 1.4em;
+    position: relative;
+    top: -0.2em;
+    margin-right: 1em;
+    vertical-align: top;
+    cursor: pointer;
+    text-align: center;
+    -webkit-transition: all 250ms ease;
+    transition: all 250ms ease;
+}
+
+.radio input[type="radio"]:checked + .radio-label:before {
+    background-color: #3197EE;
+    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
+    box-shadow: inset 0 0 0 4px #f4f4f4;
+}
+
+.radio input[type="radio"]:focus + .radio-label:before {
+    outline: none;
+    border-color: #3197EE;
+}
+
+.radio input[type="radio"]:disabled + .radio-label:before {
+    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
+    box-shadow: inset 0 0 0 4px #f4f4f4;
+    border-color: #b4b4b4;
+    background: #b4b4b4;
+}
+
+.radio input[type="radio"] + .radio-label:empty:before {
+    margin-right: 0;
 }
\ No newline at end of file