From 70d8e6e0aa484d2d6303f33b675bef43105d260d Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Thu, 15 Jun 2023 23:56:44 +0200
Subject: [PATCH] locking class & moving on matrix

---
 app.js          | 6 +++---
 css/classic.css | 2 +-
 css/electro.css | 6 +++---
 css/pop.css     | 2 +-
 css/retro.css   | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app.js b/app.js
index 4509d5d..828fd9d 100644
--- a/app.js
+++ b/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)
diff --git a/css/classic.css b/css/classic.css
index 4b7fc56..74f65c9 100644
--- a/css/classic.css
+++ b/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%),
diff --git a/css/electro.css b/css/electro.css
index 34101ef..6d44222 100644
--- a/css/electro.css
+++ b/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%);
diff --git a/css/pop.css b/css/pop.css
index 6ab1baa..17a67a5 100644
--- a/css/pop.css
+++ b/css/pop.css
@@ -51,7 +51,7 @@ body {
     border-color: #ffadad;
 }
 
-.locked.mino {
+.locking.mino {
     border-color: white;
     filter: blur(2px);
 }
diff --git a/css/retro.css b/css/retro.css
index edcd707..ef76391 100644
--- a/css/retro.css
+++ b/css/retro.css
@@ -108,7 +108,7 @@ td {
     }
 }
 
-.locked.mino {
+.locking.mino {
     animation: blinker 0.15s step-start infinite;
 }