Add first row, with foundation,throwaway & draw piles

CardModel.qml

@@ -3,7 +3,7 @@ import QtQuick
 
 Item {
     id: cardModel
-    width: 100
+    width: 80
     height: width * 1.4 // Maintian the aspect ratio of a playing card
 
     required property PlayingCard card;
@@ -15,7 +15,9 @@ Item {
         anchors.fill: parent
         source: cardModel.isFaceDown
             ? "qrc:/img/playing_cards/backs/" + cardModel.backStyle + ".svg"
-            : "qrc:/img/playing_cards/fronts/" + cardModel.card.suitString + "_" + cardModel.card.valueString + ".svg"
+            : cardModel.card
+              ? "qrc:/img/playing_cards/fronts/" + cardModel.card.suitString + "_" + cardModel.card.valueString + ".svg"
+              : "qrc:/img/playing_cards/backs/blue.svg"
         fillMode: Image.PreserveAspectFit
     }
 }

Main.qml

@@ -4,23 +4,77 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 ApplicationWindow {
-    width: 640
+    width: 800
-    height: 480
+    height: 600
     visible: true
-    title: qsTr("Solitare")
+    title: qsTr("Solitaire")
 
     ScoreBar {
         id: scoreBar
         height: 50
-
+        anchors.top: parent.top
-        score: 120
+        anchors.left: parent.left
-        time: 500
+        anchors.right: parent.right
-        moves: 64
     }
 
+    // Show the foundation piles, throwaway pile & the draw stack on the first row
+    Item {
+        height: 120
+        anchors.top: scoreBar.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        Row {
+            spacing: 0
+            anchors.fill: parent
+            anchors.margins: 10
+
+            // Left row (with the foundation piles)
+            Row {
+                spacing: 15
+                anchors.left: parent.left
+
+                Repeater {
+                    model: 4 // Each of the 4 suits
                     CardModel {
-        anchors.centerIn: parent
+                        required property int index; // passed from repeater
-        card: gameState.drawPile[0];
+                        card: gameState.foundation[index].length > 0 ? gameState.foundation[index] : null
                         isFaceDown: false
                     }
                 }
+            }
+
+            // Spacer to push the second row to the right
+            Item {
+                Layout.fillWidth: true
+            }
+
+            // Right row (with throwaway and draw piles)
+            Row {
+                spacing: 20
+                anchors.right: parent.right
+
+                // Throwaway pile (last 3 cards visible with overlap)
+                Row {
+                    // This allows makes the cards overlap
+                    spacing: -60
+
+                    Repeater {
+                        model: Math.min(gameState.throwawayPile.length, 3)
+                        delegate:  CardModel {
+                            required property int index // passed from repeater
+                            card: gameState.throwawayPile[gameState.throwawayPile.length - 1 - index]
+                            isFaceDown: false
+                        }
+                    }
+                }
+
+                // Draw pile (only the top card is shown)
+                CardModel {
+                    card: gameState.drawPile.length > 0 ? gameState.drawPile[gameState.drawPile.length - 1] : null
+                    isFaceDown: true
+                }
+            }
+        }
+    }
+}

ScoreBar.qml

@@ -6,9 +6,6 @@ Rectangle {
     height: 60
     color: "lightgray"
 
-    anchors.top: parent.top
-    anchors.horizontalCenter: parent.horizontalCenter
-
     property int score: 0
     property int time: 0
     property int moves: 0

main.cpp

@@ -19,6 +19,10 @@ int main(int argc, char *argv[])
 
     GameState gameState;
     gameState.dealCards();
+    gameState.drawNextCard();
+    gameState.drawNextCard();
+    gameState.drawNextCard();
+
     engine.rootContext()->setContextProperty("gameState", &gameState);
 
     engine.loadFromModule("Solitare", "Main");