solitare/qml/DrawPile.qml

import QtQuick
import Solitare

Item {
    id: drawPile

    required property real cardWidth
    required property real cardHeight

    width: cardWidth
    height: cardHeight

    CardModel {
        id: drawPileCard
        anchors.fill: drawPile

        visible: GameState.drawPile.length > 0

        card: GameState.drawPile.length > 0 ? GameState.drawPile[GameState.drawPile.length - 1] : null
        isFaceDown: GameState.drawPile.length > 0 ? true : false
    }

    Rectangle {
        id: emptyPileRect

        anchors.fill: parent
        visible: GameState.drawPile.length === 0

        color: "gray"
        border.color: "white"
        border.width: width * 0.03
        opacity: 0.4
        radius: width * 0.125

        Image {
            id: flipIcon

            anchors.centerIn: parent
            visible: GameState.throwawayPile.length > 0

            source: "qrc:/img/flip_icon.svg"
            width: parent.width * 0.5
            height: width

            // This makes sure the SVG scales properly, otherwise it would
            // attempt to scale the image from the original source size, which
            // can end up being blurry.
            sourceSize: Qt.size(width, height)
            fillMode: Image.Stretch
        }
    }

    Rectangle {
        id: cardCountBackground

        color: "black"
        opacity: 0.7

        property real padding: Math.max(cardCountText.width, cardCountText.height) * 0.3

        width: cardCountText.width + padding
        height: cardCountText.height + padding

        visible: drawPileCard.visible
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.margins: parent.width * 0.05
        radius: parent.width * 0.1
        z: 1 // Behind the text, but above the card
    }

    Text {
        id: cardCountText

        text: GameState.drawPile.length
        color: "white"
        font.pixelSize: parent.width * 0.2
        font.bold: true

        visible: drawPileCard.visible
        anchors.centerIn: cardCountBackground
        z: 2
    }

    MouseArea {
        anchors.fill: parent
        onClicked: GameState.drawNextCard()
    }
}