format

css/index.css

@@ -34,7 +34,7 @@ a {
     text-decoration: none;
 }
 
-.actions {
+#actions {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;

css/webtris.css

@@ -56,34 +56,34 @@ canvas {
     width: 150px;
 }
 
-.hold {
+#hold {
     width: 120px;
 }
 
-.stats {
+#stats {
     display: flex;
     flex-direction: row;
     margin: 10% 0;
     font-size: 1.2em;
 }
 
-.stats-names {
+#stats-names {
     font-family: 'Share Tech';
     text-align: left;
 }
 
-.stats-values {
+#stats-values {
     text-align: right;
     font-family: 'Share Tech Mono';
     min-width: 90px;
 }
 
-.matrix {
+#matrix {
     margin: 5% 2%;
     border: 0.5px solid grey;
 }
 
-.next {
+#next {
     width: 120px;
     margin: 5% 2%;
 }

js/webtris.js

@@ -160,19 +160,19 @@ class Tetromino {
                     [[ 0, -1], [ 1, -1], [-2, -1], [ 1,  1], [-2, -2]],
                     [[ 1,  0], [-1,  0], [ 2,  0], [-1,  1], [ 2, -2]],
                 ]
-                break
+            break
             case 'J':
                 this.color = "blue"
                 this.lightColor = "rgb(230, 240, 255)"
                 this.ghostColor = "rgba(230, 240, 255, 0.5)"
                 this.minoesPos = [[-1, -1], [-1, 0], [0, 0], [1, 0]]
-                break
+            break
             case 'L':
                 this.color = "orange"
                 this.lightColor = "rgb(255, 224, 204)"
                 this.ghostColor = "rgba(255, 224, 204, 0.5)"
                 this.minoesPos = [[-1, 0], [0, 0], [1, 0], [1, -1]]
-                break
+            break
             case 'O':
                 this.color = "yellow"
                 this.lightColor = "rgb(255, 255, 230)"
@@ -180,25 +180,25 @@ class Tetromino {
                 this.minoesPos = [[0, 0], [1, 0], [0, -1], [1, -1]]
                 this.srs[SPIN.CW] = [[]]
                 this.srs[SPIN.CCW] = [[]]
-                break
+            break
             case 'S':
                 this.color = "green"
                 this.lightColor = "rgb(236, 255, 230)"
                 this.ghostColor = "rgba(236, 255, 230, 0.5)"
                 this.minoesPos = [[-1, 0], [0, 0], [0, -1], [1, -1]]
-                break
+            break
             case 'T':
                 this.color = "magenta"
                 this.lightColor= "rgb(242, 230, 255)"
                 this.ghostColor = "rgba(242, 230, 255, 0.5)"
                 this.minoesPos = [[-1, 0], [0, 0], [1, 0], [0, -1]]
-                break
+            break
             case 'Z':
                 this.color = "red"
                 this.lightColor = "rgb(255, 230, 230)"
                 this.ghostColor = "rgba(255, 230, 230, 0.5)"
                 this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
-                break
+            break
         }
     }
         
@@ -233,8 +233,7 @@ function drawMino(context, pos, color1, color2=null, spotlight=[0, 0]) {
         gradient.addColorStop(0, color1)
         gradient.addColorStop(1, color2)
         context.fillStyle = gradient
-    }
+    } else
-    else
         context.fillStyle = color1
     var topLeft = pos.mul(MINO_SIZE)
     context.fillRect(...topLeft, MINO_SIZE, MINO_SIZE)
@@ -314,8 +313,7 @@ class Stats {
         if (linesCleared) {
             patternName.push(SCORES[linesCleared].linesClearedName)
             this.combo++
-        }
+        } else
-        else
             this.combo = -1
 
         if (linesCleared || tSpin) {
@@ -433,10 +431,10 @@ class Matrix {
             case STATE.PLAYING:
                 if (tempTexts.length)
                     texts = tempTexts[0]
-                break
+            break
             case STATE.PAUSED:
                 texts = ["PAUSED"]
-                break
+            break
             case STATE.GAME_OVER:
                 texts = ["GAME", "OVER"]
         }
@@ -525,8 +523,7 @@ function move(movement, testMinoesPos=matrix.piece.minoesPos) {
             scheduler.setTimeout(locksDown, stats.lockDelay)
         }
         return true
-    }
+    } else {
-    else {
         return false
     }
 }
@@ -615,8 +612,7 @@ function autorepeat() {
             scheduler.clearTimeout(autorepeat)
             scheduler.setInterval(autorepeat, AUTOREPEAT_PERIOD)
         }
-    }
+    } else {
-    else {
         scheduler.clearTimeout(autorepeat)
         scheduler.clearInterval(autorepeat)
     }
@@ -633,9 +629,8 @@ function keyDownHandler(e) {
                 actionsToRepeat.unshift(action)
                 scheduler.clearTimeout(autorepeat)
                 scheduler.clearInterval(autorepeat)
-                if (action == softDrop) {
+                if (action == softDrop)
                     scheduler.setInterval(autorepeat, stats.fallDelay / 20)
-                }
                 else
                     scheduler.setTimeout(autorepeat, AUTOREPEAT_DELAY)
             }

webtris.html

@@ -13,11 +13,11 @@
         <div class="flex-rows">
             <div class="flex-columns">
                 <div class="flex-space"></div>
-                <canvas id="hold" class="hold" width="120" height="120"></canvas>
+                <canvas id="hold" width="120" height="120"></canvas>
             </div>
             <div class="flex-space"></div>
-            <div class="stats">
+            <div id="stats">
-                <div class="stats-names">
+                <div id="stats-names">
                     SCORE<br/>
                     RECORD<br/>
                     TEMPS<br/>
@@ -25,13 +25,13 @@
                     OBJECTIF<br/>
                     LIGNES<br/>
                 </div>
-                <div id="stats-values" class="stats-values"></div>
+                <div id="stats-values"></div>
             </div>
 
         </div>
-        <canvas id="matrix" class="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
+        <canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
         <div class="flex-rows">
-            <canvas id="next" class="next" width="120" height="400"></canvas>
+            <canvas id="next"width="120" height="400"></canvas>
         </div>
     </div>
 </body>