remove mino gradient to speed up on firefox

css/style.css

@@ -51,12 +51,12 @@ a {
 }
 
 #play {
-    color: lightcyan;
+    color: LightCyan;
     text-align: center;
     font-weight: bold;
     text-shadow: 2px 1px rgb(153, 145, 175);
     font-size: 1.5em;
-	margin 40px;
+	margin: 30px;
 }
 
 #grid {

js/webtris.js

@@ -144,7 +144,7 @@ class Tetromino {
         }
         switch(this.shape) {
             case 'I':
-                this.color = "cyan"
+                this.color = "rgb(153, 179, 255)"
                 this.lightColor = "rgb(234, 250, 250)"
                 this.ghostColor = "rgba(234, 250, 250, 0.5)"
                 this.minoesPos = [[-1, 0], [0, 0], [1, 0], [2, 0]]
@@ -162,19 +162,19 @@ class Tetromino {
                 ]
             break
             case 'J':
-                this.color = "blue"
+                this.color = "rgb(153, 255, 255)"
                 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
             case 'L':
-                this.color = "orange"
+                this.color = "rgb(255, 204, 153)"
                 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
             case 'O':
-                this.color = "yellow"
+                this.color = "	rgb(255, 255, 153)"
                 this.lightColor = "rgb(255, 255, 230)"
                 this.ghostColor = "rgba(255, 255, 230, 0.5)"
                 this.minoesPos = [[0, 0], [1, 0], [0, -1], [1, -1]]
@@ -182,19 +182,19 @@ class Tetromino {
                 this.srs[SPIN.CCW] = [[]]
             break
             case 'S':
-                this.color = "green"
+                this.color = "rgb(153, 255, 153)"
                 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
             case 'T':
-                this.color = "magenta"
+                this.color = "rgb(204, 153, 255)"
                 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
             case 'Z':
-                this.color = "red"
+                this.color = "rgb(255, 153, 153)"
                 this.lightColor = "rgb(255, 230, 230)"
                 this.ghostColor = "rgba(255, 230, 230, 0.5)"
                 this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
@@ -206,36 +206,15 @@ class Tetromino {
         return this.minoesPos.translate(this.pos)
     }
 
-    draw(context, ghost_pos=[0, 0]) {
+    draw(context) {
         const color = this.locked ? this.lightColor : this.color
-        if (ghost_pos[1]) {
+        this.minoesAbsPos.forEach(pos => drawMino(context, pos, color))
-            context.save()
-            context.shadowColor = this.ghostColor
-            context.shadowOffsetX = 0
-            context.shadowOffsetY = (ghost_pos[1]-this.pos[1]) * MINO_SIZE
-            context.shadowBlur = 3
-            this.minoesAbsPos.forEach(pos => drawMino(context, pos, color))
-            context.restore()
-        }
-        this.minoesAbsPos.forEach(pos => drawMino(context, pos, this.lightColor, color, ghost_pos))
     }
 }
 
-
+function drawMino(context, pos, color) {
-function drawMino(context, pos, color1, color2=null, spotlight=[0, 0]) {
-    if (color2) {
-        var center = pos.add([0.5, 0.5])
-        spotlight = spotlight.add([0.5, 0.5])
-        var glint = spotlight.mul(0.1).add(center.mul(0.9)).mul(MINO_SIZE)
-        const gradient = context.createRadialGradient(
-            ...glint, 2, ...glint.add([6, 4]), 2*MINO_SIZE
-        )
-        gradient.addColorStop(0, color1)
-        gradient.addColorStop(1, color2)
-        context.fillStyle = gradient
-    } else
-        context.fillStyle = color1
     var topLeft = pos.mul(MINO_SIZE)
+    context.fillStyle = color
     context.fillRect(...topLeft, MINO_SIZE, MINO_SIZE)
     context.lineWidth = 0.5
     context.strokeStyle = "white"
@@ -397,8 +376,8 @@ class Matrix {
             ghost_pos[1]--
 
             // locked minoes
-            this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => {
+            this.cells.slice(3).forEach((row, y) => row.forEach((color, x) => {
-                if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos)
+                if (color) drawMino(this.context, [x, y], color, ghost_pos)
             }))
 
             // trail
@@ -411,19 +390,11 @@ class Matrix {
             
             // falling piece
             if (this.piece)
-                this.piece.draw(this.context, ghost_pos)
+                this.piece.draw(this.context)
 
             // Lines cleared
-            if (this.linesCleared.length) {
+            this.context.fillStyle = "white"
-                this.context.save()
+            this.linesCleared.forEach(y => this.context.fillRect(0, y, this.width, MINO_SIZE))
-                this.context.shadowColor = "white"
-                this.context.shadowOffsetX = 0
-                this.context.shadowOffsetY = 0
-                this.context.shadowBlur = 5
-                this.context.fillStyle = "white"
-                this.linesCleared.forEach(y => this.context.fillRect(0, y, this.width, MINO_SIZE))
-                this.context.restore()
-            }
         }
 
         // text
@@ -550,7 +521,7 @@ function locksDown(){
     if (matrix.piece.minoesAbsPos.every(pos => pos.y < 0))
         game_over()
     else {
-        matrix.piece.minoesAbsPos.forEach(pos => matrix.cells[pos[1]+3][pos[0]] = [matrix.piece.lightColor, matrix.piece.color])
+        matrix.piece.minoesAbsPos.forEach(pos => matrix.cells[pos[1]+3][pos[0]] = matrix.piece.color)
 
         // T-Spin detection
         var tSpin = T_SPIN.NONE
@@ -620,6 +591,8 @@ function autorepeat() {
 }
 
 function keyDownHandler(e) {
+    if (e.key in actions[state])
+        e.preventDefault()
     if (!pressedKeys.has(e.key)) {
         pressedKeys.add(e.key)
         if (e.key in actions[state]) {

webtris.html

@@ -32,5 +32,8 @@
         <canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
         <canvas id="next"width="120" height="400"></canvas>
     </div>
+    <div id="play">
+        <a href="webtris.html">REJOUER</a>
+    </div>
 </body>
 </html>