Show game status in scorebar

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 {
+    Column {
-        id: scoreContainer
+        anchors.left: parent.left
+        anchors.right: parent.right
 
-        anchors.horizontalCenter: parent.horizontalCenter
+        Row {
-        anchors.verticalCenter: parent.verticalCenter
+            id: scoreContainer
-        spacing: 40
 
-        ScoreItem {
+            anchors.horizontalCenter: parent.horizontalCenter
-            title: "SCORE"
+            spacing: 40
-            value: scoreBarRoot.score
-            fontPixelSize: scoreBarRoot.dynamicFontSize
-        }
 
-        ScoreItem {
+            ScoreItem {
-            /**
+                title: "SCORE"
-             * Formats a given time in seconds as a string in the format HH:MM:SS.
+                value: scoreBarRoot.score
-             * If hours is 0, it will instead format as HH:SS.
+                fontPixelSize: scoreBarRoot.dynamicFontSize
-             *
-             * @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"
+            ScoreItem {
-            value: formatTime(scoreBarRoot.time)
+                /**
-            fontPixelSize: scoreBarRoot.dynamicFontSize
+                * 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 {
+        Row {
-            title: "MOVES"
+            id: statusContainer
-            value: scoreBarRoot.moves
+
-            fontPixelSize: scoreBarRoot.dynamicFontSize
+            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