Add proper design for the draw pile

This commit is contained in:
ItsDrike 2024-12-07 23:10:16 +01:00
parent 190795fdf7
commit 459b23df2b
Signed by: ItsDrike
GPG key ID: FA2745890B7048C0
2 changed files with 45 additions and 16 deletions

View file

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

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 353 B

View file

@ -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
height: cardCount.height + 8 // ^^
width: cardCountText.width + 8 // 8px padding
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");
}
}
}
}
}