show disabled held piece

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%);

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;

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%);

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;
 }

css/retro.css

@@ -129,7 +129,8 @@ td {
     animation: blinker 0.08s step-start infinite;
 }
 
-.ghost.mino {
+.ghost.mino,
+.disabled.mino {
     opacity: 50%;
 }
 

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)
         }
     },

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")