hard drop trail

css/style.css

@@ -54,7 +54,7 @@ canvas {
     display: flex;
     flex-direction: row;
     margin: 10% 0;
-    font-size: 3vw;
+    font-size: 2.5vw;
 }
 
 .stats-names {

js/webtris.js

@@ -34,6 +34,7 @@ const LOCK_DELAY = 500
 const FALL_DELAY =        1000
 const AUTOREPEAT_DELAY =   250
 const AUTOREPEAT_PERIOD =   10
+const ANIMATION_DELAY =     67
 const TEMP_TEXTS_DELAY =   700
 const MOVEMENT = {
     LEFT:  [-1, 0],
@@ -335,16 +336,11 @@ class Stats {
         if (pattern_score)
             printTempTexts([pattern_name, pattern_score])
         if (combo_score)
-            printTempTexts(["COMBO x" + this.combo, combo_score])
+            printTempTexts([`COMBO x${this.combo}`, combo_score])
     }
 
     print() {
-        this.div.innerHTML  = this.score + "<br/>"
-                            + this.highScore + "<br/>"
-                            + this.level + "<br/>"
-                            + this.goal + "<br/>"
-                            + this.linesCleared + "<br/>"
-                            + timeFormat(Date.now() - this.startTime)
+        this.div.innerHTML  = `${this.score}<br/>${this.highScore}<br/>${this.level}<br/>${this.goal}<br/>${this.linesCleared}<br/>${timeFormat(Date.now() - this.startTime)}`
     }
 }
 
@@ -361,6 +357,8 @@ class Matrix {
         this.centerX = this.width / 2
         this.centerY = this.height / 2
         this.piece = null
+        this.trail_length = 0
+        this.trailStartPos = []
     }
     
     cellIsOccupied(x, y) {
@@ -398,6 +396,18 @@ class Matrix {
                 if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos)
             }))
 
+            // trail
+            if (this.trail_length) {
+                var height = this.trail_length * MINO_SIZE
+                var gradient = this.context.createLinearGradient(0, 0, 0, height)
+                gradient.addColorStop(0,"rgba(255, 255, 255, 0)")
+                gradient.addColorStop(1, this.piece.ghostColor  )
+                this.context.fillStyle = gradient
+                this.trailStartPos.forEach(topLeft => {
+                    this.context.fillRect(...topLeft, MINO_SIZE, height)
+                })
+            }
+            
             // falling piece
             if (this.piece)
                 this.piece.draw(this.context, ghost_pos)
@@ -478,12 +488,15 @@ function fallingPhase() {
 }
 
 function lockPhase() {
-    if (!move(MOVEMENT.DOWN))
-        locksDown()
+    if (!move(MOVEMENT.DOWN)) {
+        matrix.piece.locked = true
+        if (!scheduler.timeoutTasks.has(locksDown))
+            scheduler.setTimeout(locksDown, stats.lockDelay)
+    }
     requestAnimationFrame(draw)
 }
 
-function move(movement, lock=true, testMinoesPos=matrix.piece.minoesPos) {
+function move(movement, testMinoesPos=matrix.piece.minoesPos) {
     const testPos = matrix.piece.pos.add(movement)
     if (matrix.spaceToMove(testMinoesPos.translate(testPos))) {
         matrix.piece.pos = testPos
@@ -493,12 +506,10 @@ function move(movement, lock=true, testMinoesPos=matrix.piece.minoesPos) {
         if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos.add(MOVEMENT.DOWN))))
             fallingPhase()
         else {
-            scheduler.clearTimeout(locksDown)
-            if (lock) {
             matrix.piece.locked = true
+            scheduler.clearTimeout(locksDown)
             scheduler.setTimeout(locksDown, stats.lockDelay)
         }
-        }
         return true
     }
     else {
@@ -510,7 +521,7 @@ function rotate(spin) {
     const test_minoes_pos = matrix.piece.minoesPos.map(pos => pos.rotate(spin))
     rotationPoint = 1
     for (const movement of matrix.piece.srs[spin][matrix.piece.orientation]) {
-        if (move(movement, false, test_minoes_pos)) {
+        if (move(movement, test_minoes_pos)) {
             matrix.piece.orientation = (matrix.piece.orientation + spin + 4) % 4
             matrix.piece.rotatedLast = true
             if (rotationPoint == 5)
@@ -544,16 +555,16 @@ function locksDown(){
         }
 
         // Complete lines
-        var linesCleared = 0
+        var linesCleared = []
         matrix.cells.forEach((row, y) => {
             if (row.filter(mino => mino.length).length == MATRIX_COLUMNS) {
                 matrix.cells.splice(y, 1)
                 matrix.cells.unshift(Array(MATRIX_COLUMNS))
-                linesCleared++
+                linesCleared.push(y * MINO_SIZE)
             }
         })
 
-        stats.locksDown(tSpin, linesCleared)
+        stats.locksDown(tSpin, linesCleared.length)
 
         if (stats.goal <= 0)
             newLevel()
@@ -635,10 +646,17 @@ function softDrop() {
 function hardDrop() {
     scheduler.clearTimeout(lockPhase)
     scheduler.clearTimeout(locksDown)
-    while(move(MOVEMENT.DOWN, false)) {
+    matrix.trailStartPos = Array.from(matrix.piece.minoesAbsPos).map(pos => pos.mul(MINO_SIZE))
+    for (this.matrix.trail_length=0; move(MOVEMENT.DOWN); this.matrix.trail_length++) {
         stats.score += 2
     }
     locksDown()
+    scheduler.setTimeout(clearTrail, ANIMATION_DELAY)
+}
+
+function clearTrail() {
+    matrix.trail_length = 0
+    requestAnimationFrame(draw)
 }
 
 function rotateCW() {