diff --git a/qml/ScoreBar.qml b/qml/ScoreBar.qml index 927c474..574a537 100644 --- a/qml/ScoreBar.qml +++ b/qml/ScoreBar.qml @@ -1,4 +1,6 @@ import QtQuick +import QtQuick.Layouts +import QtQuick.Controls import Solitare Rectangle { @@ -7,24 +9,39 @@ Rectangle { property int score: 0 property int time: 0 property int moves: 0 - property int dynamicFontSize: Math.round(height * 0.35) color: "lightgray" - Column { + Item { + id: firstRow + + anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right + anchors.topMargin: parent.height * 0.1 + anchors.leftMargin: parent.width * 0.02 + anchors.rightMargin: parent.width * 0.02 + height: parent.height * 0.5 + + Button { + text: "Redeal" + onClicked: GameState.dealCards() + + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + height: parent.height + } Row { - id: scoreContainer - + anchors.top: parent.top + height: parent.height anchors.horizontalCenter: parent.horizontalCenter - spacing: 40 + spacing: parent.width * 0.05 ScoreItem { title: "SCORE" value: scoreBarRoot.score - fontPixelSize: scoreBarRoot.dynamicFontSize + height: parent.height } ScoreItem { @@ -50,74 +67,82 @@ Rectangle { title: "TIME" value: formatTime(scoreBarRoot.time) - fontPixelSize: scoreBarRoot.dynamicFontSize + height: parent.height } ScoreItem { title: "MOVES" value: scoreBarRoot.moves - fontPixelSize: scoreBarRoot.dynamicFontSize + height: parent.height } } + } - Row { - id: statusContainer + Item { + id: statusRow - anchors.horizontalCenter: parent.horizontalCenter - spacing: 40 + anchors.top: firstRow.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: parent.height * 0.1 + anchors.bottomMargin: parent.height * 0.1 + anchors.leftMargin: parent.width * 0.02 + anchors.rightMargin: parent.height * 0.02 + height: parent.height * 0.2 - ScoreItem { - visible: GameState.isWinnable.winnable === false - title: "GAME LOST" - titleColor: "red" - fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 - } + ScoreItem { + visible: GameState.isWinnable.winnable === false + title: "GAME LOST" + titleColor: "red" + anchors.fill: parent + } - ScoreItem { - visible: GameState.preliminaryWin === true && GameState.gameWon === false - title: "PRE-WON" - titleColor: "green" - fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 - } + ScoreItem { + visible: GameState.preliminaryWin === true && GameState.gameWon === false + title: "PRE-WON" + titleColor: "green" + anchors.fill: parent + } - ScoreItem { - visible: GameState.gameWon === true - title: "GAME WON" - titleColor: "green" - fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 - } + ScoreItem { + visible: GameState.gameWon === true + title: "GAME WON" + titleColor: "green" + anchors.fill: parent + } - ScoreItem { - visible: GameState.gameWon === false && GameState.preliminaryWin === false && GameState.isWinnable.winnable !== false - title: "PLAYING" - fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 - } + ScoreItem { + visible: GameState.gameWon === false && GameState.preliminaryWin === false && GameState.isWinnable.winnable !== false + title: "PLAYING" + anchors.fill: parent } } component ScoreItem: Column { required property string title property string value - required property int fontPixelSize property color titleColor property color valueColor - anchors.verticalCenter: parent.verticalCenter - spacing: 4 + property real fontHeight: height * 0.95 // Use 95% of the height for the font pixel size + property int titleFontSize: Math.round(value ? fontHeight * 0.3 : fontHeight) // 30% of the height, or full height if no value + property int valueFontSize: Math.round(fontHeight - titleFontSize) // Remaining height + + spacing: height * 0.05 // Remaining 5% of the height for spacing between the title & value Text { text: parent.title color: parent.titleColor - font.pixelSize: Math.round(parent.fontPixelSize * 0.4) // 40% of the dynamic font size + font.pixelSize: parent.titleFontSize font.bold: true horizontalAlignment: Text.AlignHCenter anchors.horizontalCenter: parent.horizontalCenter } Text { + visible: parent.value text: parent.value color: parent.valueColor - font.pixelSize: parent.fontPixelSize // 100% of the dynamic font size + font.pixelSize: parent.valueFontSize horizontalAlignment: Text.AlignHCenter anchors.horizontalCenter: parent.horizontalCenter }