locking class & moving on matrix

app.js

@@ -152,8 +152,6 @@ class MinoesTable {
     }
 
     drawPiece(piece=this.piece, className=piece.className) {
-        if (piece.locked) className += " locked"
-        if (piece==this.piece && actionsQueue.length) className += " moving"
         piece.minoesPosition[piece.facing]
             .translate(piece.center)
             .forEach(minoPosition => {
@@ -231,10 +229,12 @@ class Matrix extends MinoesTable {
         this.drawPiece()
     }
 
-    drawPiece(piece=this.piece, className=piece.className + (piece.locked? " locked" : "")) {
+    drawPiece(piece=this.piece, className=piece.className) {
         super.drawPiece(this.ghost, "")
         this.ghost = piece.ghost
         super.drawPiece(this.ghost)
+        if (piece.locked) className += " locking"
+        if (piece==this.piece && actionsQueue.length) className += " moving"
         super.drawPiece(piece, className)
         matrix.table.style.setProperty('--ghost-column', this.ghost.center.x)
         matrix.table.style.setProperty('--ghost-row',    this.ghost.center.y)

css/classic.css

@@ -81,7 +81,7 @@
     border-bottom-color: #ad1936;
 }
 
-.locked.mino {
+.locking.mino {
     filter: saturate(50%) brightness(200%);
     box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%),
         -1px 1px 4px rgba(128, 128, 128, 25%),

css/electro.css

@@ -7,7 +7,7 @@ body {
     background-color: rgba(37, 41, 45, 30%);
 }
 
-.mino:not(.ghost):not(.locked) {
+.mino:not(.ghost):not(.locking) {
     padding: 0;
     position: relative;
     z-index: 0;
@@ -17,7 +17,7 @@ body {
         1px 1px 4px rgba(128, 128, 128, 25%);
 }
 
-.mino:not(.ghost):not(.locked):before {
+.mino:not(.ghost):not(.locking):before {
     content: "";
     position: absolute;
     z-index: -1;
@@ -47,7 +47,7 @@ body {
         1px 1px 4px rgba(242, 255, 255, 16%);
 }
 
-.locked.mino,
+.locking.mino,
 .moving.mino {
     border-width: 1px;
     background: rgba(186, 211, 255, 70%);

css/pop.css

@@ -51,7 +51,7 @@ body {
     border-color: #ffadad;
 }
 
-.locked.mino {
+.locking.mino {
     border-color: white;
     filter: blur(2px);
 }

css/retro.css

@@ -108,7 +108,7 @@ td {
     }
 }
 
-.locked.mino {
+.locking.mino {
     animation: blinker 0.15s step-start infinite;
 }