Add proper design for the draw pile

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>
+<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>

qml/DrawPile.qml

@@ -8,49 +8,78 @@ 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 {
         id: cardCountBackground
 
         color: "black"
         opacity: 0.7
-        visible: cardCount.visible
 
-        width: cardCount.width + 8 // 8px padding
+        width: cardCountText.width + 8 // 8px padding
-        height: cardCount.height + 8 // ^^
+        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");
+                }
+            }
+        }
+    }
 }