solitare/qml/DrawPile.qml

import QtQuick
import Solitare

Item {
    id: drawPile
    width: drawPileCard.width
    height: drawPileCard.height

    CardModel {
        id: drawPileCard
        anchors.fill: parent

        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")
                }
            }
        }
        z: 0
    }

    Rectangle {
        id: cardCountBackground

        color: "black"
        opacity: 0.7
        visible: cardCount.visible

        width: cardCount.width + 8 // 8px padding
        height: cardCount.height + 8 // ^^

        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.margins: 4
        radius: 4 // rounded borders
        z: 1 // Behind the text, but above the card
    }

    Text {
        id: cardCount

        text: GameState.drawPile.length
        visible: GameState.drawPile.length > 0
        color: "white"
        font.pixelSize: 16
        font.bold: true

        anchors.centerIn: cardCountBackground
        z: 2
    }
}