Add scorebar

CMakeLists.txt

@@ -17,6 +17,7 @@ qt_add_qml_module(appSolitare
     VERSION 1.0
     QML_FILES
         Main.qml
+        QML_FILES ScoreBar.qml
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

Main.qml

@@ -1,8 +1,19 @@
 import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
-Window {
+ApplicationWindow {
     width: 640
     height: 480
     visible: true
-    title: qsTr("Hello World")
+    title: qsTr("Solitare")
+
+    ScoreBar {
+        id: scoreBar
+        height: 50
+
+        score: 120
+        time: 500
+        moves: 64
+    }
 }

ScoreBar.qml

@@ -0,0 +1,87 @@
+import QtQuick
+
+Rectangle {
+    id: scoreBarRoot
+    width: parent.width
+    height: 60
+    color: "lightgray"
+
+    anchors.top: parent.top
+    anchors.horizontalCenter: parent.horizontalCenter
+
+    property int score: 0
+    property int time: 0
+    property int moves: 0
+
+    property int dynamicFontSize: Math.round(height * 0.35)
+
+    component ScoreItem: Column {
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 4
+
+        required property string title
+        required property string value
+        required property int fontPixelSize
+
+        Text {
+            text: parent.title
+            font.pixelSize: Math.round(parent.fontPixelSize * 0.4) // 40% of the dynamic font size
+            font.bold: true
+            horizontalAlignment: Text.AlignHCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+        Text {
+            text: parent.value
+            font.pixelSize: parent.fontPixelSize // 100% of the dynamic font size
+            horizontalAlignment: Text.AlignHCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    Row {
+        id: scoreContainer
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 40
+
+        ScoreItem {
+            title: "SCORE"
+            value: scoreBarRoot.score
+            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 + ":"; // include hours if > 0
+                }
+                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
+        }
+    }
+}