Show game status in scorebar

qml/ScoreBar.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import Solitare
 
 Rectangle {
     id: scoreBarRoot
@@ -8,15 +9,16 @@ Rectangle {
     property int moves: 0
     property int dynamicFontSize: Math.round(height * 0.35)
 
-    width: parent.width
-    height: 60
     color: "lightgray"
 
+    Column {
+        anchors.left: parent.left
+        anchors.right: parent.right
+
         Row {
             id: scoreContainer
 
             anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
             spacing: 40
 
             ScoreItem {
@@ -58,16 +60,54 @@ Rectangle {
             }
         }
 
+        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