From ab023ec9825cf46f85cfc2063038d4fcba031fc8 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Fri, 2 Aug 2024 23:24:39 +0200
Subject: [PATCH] show disabled held piece

---
 css/classic.css  |  5 +++++
 css/electro.css  | 11 ++++++++++-
 css/minimal.css  |  4 ++++
 css/pop.css      |  6 ++++++
 css/retro.css    |  3 ++-
 js/app.js        |  9 +++++----
 js/game_logic.js | 14 ++++++++++++++
 7 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/css/classic.css b/css/classic.css
index ecb5bd2..0bb36a4 100644
--- a/css/classic.css
+++ b/css/classic.css
@@ -106,6 +106,11 @@
          1px  1px 4px #FFF2;
 }
 
+.disabled.mino {
+    filter: brightness(50%) contrast(80%);
+    opacity: 70%;
+}
+
 @keyframes locked-animation {
     from {
         filter: saturate(50%) brightness(400%);
diff --git a/css/electro.css b/css/electro.css
index 8e3122a..132b8e2 100644
--- a/css/electro.css
+++ b/css/electro.css
@@ -15,7 +15,7 @@ body[data-bs-theme="dark"] {
     background-color: rgba(37, 41, 45, 40%);
 }
 
-.mino:not(.ghost):not(.locking) {
+.mino:not(.ghost):not(.locking):not(.disabled) {
     padding: 1px;
     position: relative;
     z-index: 0;
@@ -71,6 +71,15 @@ body[data-bs-theme="dark"] {
     box-shadow: 0px 0px 10px rgba(242, 255, 255, 100%);
 }
 
+.disabled.mino {
+    opacity: 60%;
+}
+
+.disabled.mino:before {
+    opacity: 50%;
+    box-shadow: none;
+}
+
 @keyframes locked-animation {
     from {
         opacity: 1;
diff --git a/css/minimal.css b/css/minimal.css
index 5ca8b15..5192fe6 100644
--- a/css/minimal.css
+++ b/css/minimal.css
@@ -88,6 +88,10 @@ tr.matrix td:not(.mino) {
     animation-duration: 0.2s;
 }
 
+.disabled.mino {
+    filter: brightness(50%) contrast(50%);
+}
+
 @keyframes locked-animation {
     from {
         filter: saturate(50%) brightness(300%);
diff --git a/css/pop.css b/css/pop.css
index e158e6b..147d64a 100644
--- a/css/pop.css
+++ b/css/pop.css
@@ -92,6 +92,12 @@ tr.matrix td:not(.mino) {
     animation-duration: 0.2s;
 }
 
+.disabled.mino {
+    opacity: 50%;
+    outline: 0px;
+    box-shadow: none;
+}
+
 tr.cleared-line-animation {
     animation: none;
 }
diff --git a/css/retro.css b/css/retro.css
index ff1f6c2..f299d68 100644
--- a/css/retro.css
+++ b/css/retro.css
@@ -129,7 +129,8 @@ td {
     animation: blinker 0.08s step-start infinite;
 }
 
-.ghost.mino {
+.ghost.mino,
+.disabled.mino {
     opacity: 50%;
 }
 
diff --git a/js/app.js b/js/app.js
index a59d668..1802899 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,7 +1,7 @@
 let scheduler          = new Scheduler()
 let settings           = new Settings()
 let stats              = new Stats()
-let holdQueue          = new MinoesTable("holdTable")
+let holdQueue          = new HoldQueue()
 let matrix             = new Matrix()
 let nextQueue          = new NextQueue()
 let playing            = false
@@ -22,6 +22,7 @@ function restart() {
     stats.init()
     matrix.init()
     nextQueue.init()
+    nextQueue.redraw()
     settings.init()
     pauseSettings()
 }
@@ -96,6 +97,7 @@ function ticktack() {
 
 function generate(piece) {
     matrix.piece = piece || nextQueue.shift()
+    if (!piece && holdQueue.piece) holdQueue.drawPiece()
     lastActionSucceded = true
     favicon.href = matrix.piece.favicon_href
 
@@ -131,12 +133,11 @@ let playerActions = {
             scheduler.clearInterval(fall)
             scheduler.clearTimeout(lockDown)
     
-            let heldPiece = holdQueue.piece
             matrix.piece.facing = FACING.NORTH
             matrix.piece.locked = false
+            matrix.piece.holdEnabled = false
+            let heldPiece = holdQueue.piece
             holdQueue.piece = matrix.piece
-            holdQueue.piece.holdEnabled = false
-            holdQueue.piece.locked = false
             generate(heldPiece)
         }
     },
diff --git a/js/game_logic.js b/js/game_logic.js
index 2f0a74c..5ceba28 100644
--- a/js/game_logic.js
+++ b/js/game_logic.js
@@ -171,6 +171,20 @@ class MinoesTable {
 MinoesTable.prototype.init_center = [2, 2]
 
 
+class HoldQueue extends MinoesTable {
+    constructor() {
+        super("holdTable")
+    }
+
+    drawPiece(piece=this.piece, className=piece.className) {
+        if (!matrix.piece.holdEnabled) {
+            className += " disabled"
+        }
+        super.drawPiece(piece, className)
+    }
+}
+
+
 class NextQueue extends MinoesTable {
     constructor() {
         super("nextTable")