solitare/qml/CardModel.qml

import QtQuick
import Solitare

Item {
    id: cardModel

    required property PlayingCard card
    required property bool isFaceDown
    property string backStyle: "red"

    signal clicked

    width: 80
    height: width * 1.4 // Maintian the aspect ratio of a playing card

    Image {
        id: cardImage

        anchors.fill: parent
        source: cardModel.isFaceDown ? "qrc:/img/playing_cards/backs/" + cardModel.backStyle + ".svg" : cardModel.card ? "qrc:/img/playing_cards/fronts/" + cardModel.card.suitString + "_" + cardModel.card.valueString + ".svg" : "qrc:/img/playing_cards/backs/blue.svg"

        // 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.PreserveAspectFit

        MouseArea {
            anchors.fill: parent
            onClicked: cardModel.clicked()
        }
    }
}