From 459b23df2b4c9452a690d5a8d615a721a2d5ee88 Mon Sep 17 00:00:00 2001
From: ItsDrike <itsdrike@protonmail.com>
Date: Sat, 7 Dec 2024 23:10:16 +0100
Subject: [PATCH] Add proper design for the draw pile

---
 img/flip_icon.svg |  2 +-
 qml/DrawPile.qml  | 59 +++++++++++++++++++++++++++++++++++------------
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/img/flip_icon.svg b/img/flip_icon.svg
index 20dd973..5bdc4df 100644
--- a/img/flip_icon.svg
+++ b/img/flip_icon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="undefined" height="undefined" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M.5 5L3 2.5L5.5 5"/><path d="M6 13.5H4a1 1 0 0 1-1-1v-10M13.5 9L11 11.5L8.5 9"/><path d="M8 .5h2a1 1 0 0 1 1 1v10"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="undefined" height="undefined" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m11 9l2-.5l.5 2"/><path d="M13 8.5A6.76 6.76 0 0 1 7 13h0a6 6 0 0 1-5.64-3.95M3 5l-2 .5l-.5-2"/><path d="M1 5.5C1.84 3.2 4.42 1 7 1h0a6 6 0 0 1 5.64 4"/></g></svg>
\ No newline at end of file
diff --git a/qml/DrawPile.qml b/qml/DrawPile.qml
index d1cfec9..f812165 100644
--- a/qml/DrawPile.qml
+++ b/qml/DrawPile.qml
@@ -8,20 +8,36 @@ Item {
 
     CardModel {
         id: drawPileCard
+
         anchors.fill: parent
+        visible: GameState.drawPile.length > 0
 
         card: GameState.drawPile.length > 0 ? GameState.drawPile[GameState.drawPile.length - 1] : null
         isFaceDown: GameState.drawPile.length > 0 ? true : false
-        onClicked: {
-            if (GameState.drawNextCard()) {
-                if (GameState.isWinnable()) {
-                    console.log("Still winnable")
-                } else {
-                    console.warn("Game is lost")
-                }
-            }
+    }
+
+    Rectangle {
+        id: emptyPileRect
+
+        anchors.fill: parent
+        visible: GameState.drawPile.length === 0
+
+        color: "gray"
+        border.color: "white"
+        border.width: 3
+        opacity: 0.4
+        radius: 10
+
+        Image {
+            id: flipIcon
+
+            anchors.centerIn: parent
+            visible: GameState.throwawayPile.length > 0
+
+            source: "qrc:/img/flip_icon.svg"
+            width: parent.width * 0.5
+            height: width
         }
-        z: 0
     }
 
     Rectangle {
@@ -29,28 +45,41 @@ Item {
 
         color: "black"
         opacity: 0.7
-        visible: cardCount.visible
 
-        width: cardCount.width + 8 // 8px padding
-        height: cardCount.height + 8 // ^^
+        width: cardCountText.width + 8 // 8px padding
+        height: cardCountText.height + 8 // ^^
 
+        visible: drawPileCard.visible
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.margins: 4
-        radius: 4 // rounded borders
+        radius: 4
         z: 1 // Behind the text, but above the card
     }
 
     Text {
-        id: cardCount
+        id: cardCountText
 
         text: GameState.drawPile.length
-        visible: GameState.drawPile.length > 0
         color: "white"
         font.pixelSize: 16
         font.bold: true
 
+        visible: drawPileCard.visible
         anchors.centerIn: cardCountBackground
         z: 2
     }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (GameState.drawNextCard()) {
+                if (GameState.isWinnable()) {
+                    console.log("Still winnable");
+                } else {
+                    console.warn("Game is lost");
+                }
+            }
+        }
+    }
 }