diff --git a/qml/ScoreBar.qml b/qml/ScoreBar.qml index fd716fb..927c474 100644 --- a/qml/ScoreBar.qml +++ b/qml/ScoreBar.qml @@ -1,4 +1,5 @@ import QtQuick +import Solitare Rectangle { id: scoreBarRoot @@ -8,66 +9,105 @@ Rectangle { property int moves: 0 property int dynamicFontSize: Math.round(height * 0.35) - width: parent.width - height: 60 color: "lightgray" - Row { - id: scoreContainer + Column { + anchors.left: parent.left + anchors.right: parent.right - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - spacing: 40 + Row { + id: scoreContainer - ScoreItem { - title: "SCORE" - value: scoreBarRoot.score - fontPixelSize: scoreBarRoot.dynamicFontSize - } + anchors.horizontalCenter: parent.horizontalCenter + spacing: 40 - ScoreItem { - /** - * Formats a given time in seconds as a string in the format HH:MM:SS. - * If hours is 0, it will instead format as HH:SS. - * - * @param {number} seconds - The time in seconds to be formatted. - * @returns {string} The formatted time string. - */ - function formatTime(seconds) { - var hours = Math.floor(seconds / 3600); - var minutes = Math.floor((seconds % 3600) / 60); - var remainingSeconds = seconds % 60; - // Format with leading zeros - var formattedTime = ""; - if (hours > 0) - formattedTime = (hours < 10 ? "0" : "") + hours + ":"; - - formattedTime += (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds; - return formattedTime; + ScoreItem { + title: "SCORE" + value: scoreBarRoot.score + fontPixelSize: scoreBarRoot.dynamicFontSize } - title: "TIME" - value: formatTime(scoreBarRoot.time) - fontPixelSize: scoreBarRoot.dynamicFontSize + ScoreItem { + /** + * Formats a given time in seconds as a string in the format HH:MM:SS. + * If hours is 0, it will instead format as HH:SS. + * + * @param {number} seconds - The time in seconds to be formatted. + * @returns {string} The formatted time string. + */ + function formatTime(seconds) { + var hours = Math.floor(seconds / 3600); + var minutes = Math.floor((seconds % 3600) / 60); + var remainingSeconds = seconds % 60; + // Format with leading zeros + var formattedTime = ""; + if (hours > 0) + formattedTime = (hours < 10 ? "0" : "") + hours + ":"; + + formattedTime += (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds; + return formattedTime; + } + + title: "TIME" + value: formatTime(scoreBarRoot.time) + fontPixelSize: scoreBarRoot.dynamicFontSize + } + + ScoreItem { + title: "MOVES" + value: scoreBarRoot.moves + fontPixelSize: scoreBarRoot.dynamicFontSize + } } - ScoreItem { - title: "MOVES" - value: scoreBarRoot.moves - fontPixelSize: scoreBarRoot.dynamicFontSize + Row { + id: statusContainer + + anchors.horizontalCenter: parent.horizontalCenter + spacing: 40 + + ScoreItem { + visible: GameState.isWinnable.winnable === false + title: "GAME LOST" + titleColor: "red" + fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 + } + + ScoreItem { + visible: GameState.preliminaryWin === true && GameState.gameWon === false + title: "PRE-WON" + titleColor: "green" + fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 + } + + ScoreItem { + visible: GameState.gameWon === true + title: "GAME WON" + titleColor: "green" + fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 + } + + ScoreItem { + visible: GameState.gameWon === false && GameState.preliminaryWin === false && GameState.isWinnable.winnable !== false + title: "PLAYING" + fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5 + } } } component ScoreItem: Column { required property string title - required property string value + property string value required property int fontPixelSize + property color titleColor + property color valueColor anchors.verticalCenter: parent.verticalCenter spacing: 4 Text { text: parent.title + color: parent.titleColor font.pixelSize: Math.round(parent.fontPixelSize * 0.4) // 40% of the dynamic font size font.bold: true horizontalAlignment: Text.AlignHCenter @@ -76,6 +116,7 @@ Rectangle { Text { text: parent.value + color: parent.valueColor font.pixelSize: parent.fontPixelSize // 100% of the dynamic font size horizontalAlignment: Text.AlignHCenter anchors.horizontalCenter: parent.horizontalCenter