From 511ca3744aa165e08e1ab5dca2d392adffee63c6 Mon Sep 17 00:00:00 2001
From: ItsDrike <itsdrike@protonmail.com>
Date: Sat, 7 Dec 2024 23:49:38 +0100
Subject: [PATCH] Improve rendering of empty cards in tableau columns

---
 qml/Tableau.qml | 65 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/qml/Tableau.qml b/qml/Tableau.qml
index 20c97e4..4a11f75 100644
--- a/qml/Tableau.qml
+++ b/qml/Tableau.qml
@@ -3,38 +3,73 @@ import Solitare
 
 // In solitare, Tableau refers to the part of the board where all of the columns are placed
 Row {
+    id: tableau
     spacing: 10
 
     Repeater {
+        id: colRepeater
         model: GameState.columns.length
 
         delegate: Column {
             required property int index // passed from repeater
 
-            spacing: -80 // Overlap
+            onChildrenChanged: {
+                spacing = -(slotRepeater.itemAt(0).height * 0.8); // Overlap
+            }
 
             Repeater {
+                id: slotRepeater
                 model: GameState.columns[parent.index].length > 0 ? GameState.columns[parent.index].length : 1 // Render an empty slot for an empty column
 
-                delegate: CardModel {
-                    required property int index
-                    property ColumnSlot col: GameState.columns[parent.index].length > 0 ? GameState.columns[parent.index][index] : null // empty column (single empty slot)
+                delegate: ColumnSlotModel {
+                    required property int index  // passed from repeater
+                    cardId: index
+                    columnId: parent.index // this is actually passed from the Column, not the Repeater
+                }
+            }
+        }
+    }
 
-                    card: col ? col.card : null
-                    isFaceDown: col ? !col.revealed : false
-                    onClicked: {
-                        if (col && col.revealed) {
-                            if (GameState.autoMoveColumnCard(parent.index, index)) {
-                                if (GameState.isWinnable()) {
-                                    console.log("Still winnable")
-                                } else {
-                                    console.log("Game is lost")
-                                }
-                            }
+    component ColumnSlotModel: Item {
+        required property int columnId
+        required property int cardId
+        property ColumnSlot colSlot: GameState.columns[columnId].length > 0 ? GameState.columns[columnId][cardId] : null
+
+        height: colCard.height
+        width: colCard.width
+
+        CardModel {
+            id: colCard
+
+            anchors.fill: parent
+            visible: parent.colSlot !== null
+
+            card: parent.colSlot ? parent.colSlot.card : null
+            isFaceDown: parent.colSlot ? !parent.colSlot.revealed : false
+            onClicked: {
+                if (parent.colSlot && parent.colSlot.revealed) {
+                    if (GameState.autoMoveColumnCard(parent.columnId, parent.cardId)) {
+                        if (GameState.isWinnable()) {
+                            console.log("Still winnable");
+                        } else {
+                            console.log("Game is lost");
                         }
                     }
                 }
             }
         }
+
+        Rectangle {
+            id: emptySlotRect
+
+            anchors.fill: parent
+            visible: parent.colSlot === null
+
+            color: "gray"
+            border.color: "white"
+            border.width: 2
+            opacity: 0.2
+            radius: 5
+        }
     }
 }