Add a basic texture for the top app bar. Refactor timer code to have basic view model layering.

Author: telrikk

entities/time_component.gd

@@ -0,0 +1,16 @@
+extends Node2D
+
+@onready var view_model = TimerViewModel.new()
+
+var time_since_last_update = 0
+var time = Time.get_unix_time_from_system()
+
+func _ready():
+	ViewModelRegistry.register(ViewModelRegistry.Keys.TIMER, view_model)
+	
+func _process(delta: float): 
+	time_since_last_update += delta 
+	if time_since_last_update > 1:
+		time_since_last_update = 0
+		time += 86400 # seconds in a day
+		view_model.set_time(time)

entities/time_component.tscn

@@ -0,0 +1,6 @@
+[gd_scene load_steps=2 format=3 uid="uid://b1x0140gst6wf"]
+
+[ext_resource type="Script" path="res://entities/time_component.gd" id="1_bhnnc"]
+
+[node name="TimeComponent" type="Node2D"]
+script = ExtResource("1_bhnnc")

project.godot

@@ -15,6 +15,10 @@ run/main_scene="res://scenes/main/main.tscn"
 config/features=PackedStringArray("4.2", "Forward Plus")
 config/icon="res://icon.svg"
 
+[autoload]
+
+VMRegistry="*res://ui/viewmodels/vm_registry.gd"
+
 [display]
 
 window/size/viewport_width=1280

scenes/main/main.tscn

@@ -1,12 +1,19 @@
-[gd_scene load_steps=5 format=3 uid="uid://d3nj6rt0cm53e"]
+[gd_scene load_steps=6 format=3 uid="uid://d3nj6rt0cm53e"]
 
 [ext_resource type="PackedScene" uid="uid://xlfbl7fowoic" path="res://scenes/worldmap/world_map.tscn" id="1_cjno1"]
 [ext_resource type="PackedScene" uid="uid://bnqxch8qylr8l" path="res://ui/widgets/hud.tscn" id="2_jggq6"]
 [ext_resource type="PackedScene" uid="uid://2hgdqurtbrxg" path="res://scenes/common/player_controller.tscn" id="3_jr0xa"]
 [ext_resource type="PackedScene" uid="uid://dcnty7qxod06" path="res://scenes/components/camera_component.tscn" id="4_xha1d"]
+[ext_resource type="PackedScene" uid="uid://b1x0140gst6wf" path="res://entities/time_component.tscn" id="5_6js18"]
 
 [node name="World" type="Node2D"]
 
+[node name="Components" type="Node" parent="."]
+
+[node name="CameraComponent" parent="Components" instance=ExtResource("4_xha1d")]
+
+[node name="TimeComponent" parent="Components" instance=ExtResource("5_6js18")]
+
 [node name="WorldMap" parent="." instance=ExtResource("1_cjno1")]
 position = Vector2(0, 1)
 
@@ -19,7 +26,3 @@ position = Vector2(0, 1)
 [node name="PlayerController" parent="Controllers" node_paths=PackedStringArray("hud", "camera_component") instance=ExtResource("3_jr0xa")]
 hud = NodePath("../../CanvasLayer/HUD")
 camera_component = NodePath("../../Components/CameraComponent")
-
-[node name="Components" type="Node" parent="."]
-
-[node name="CameraComponent" parent="Components" instance=ExtResource("4_xha1d")]

ui/viewmodels/vm_base.gd

@@ -0,0 +1,2 @@
+extends Node
+class_name ViewModelBase

ui/viewmodels/vm_registry.gd

@@ -0,0 +1,11 @@
+extends Node
+class_name ViewModelRegistry
+
+enum Keys { TIMER }
+static var registry = {}
+
+static func register(key: Keys, view_model: ViewModelBase):
+	registry[key] = view_model
+	
+static func retrieve(key: Keys) -> ViewModelBase:
+	return registry.get(key)

ui/viewmodels/vm_timer.gd

@@ -0,0 +1,25 @@
+extends ViewModelBase
+class_name TimerViewModel
+
+signal on_formatted_time_updated (new_time: String)
+
+func set_time(new_timestamp: int):
+	var now_dict := Time.get_datetime_dict_from_unix_time(new_timestamp)
+	var formatted_datetime = _format_datetime(now_dict)
+	on_formatted_time_updated.emit(formatted_datetime)
+
+func _format_datetime(datetime: Dictionary) -> String:
+	var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+	var day = datetime["day"]
+	var year = datetime["year"]
+	var month_name = months[datetime["month"] - 1]
+
+	var suffix = "th"
+	if day % 10 == 1 and day % 100 != 11:
+		suffix = "st"
+	elif day % 10 == 2 and day % 100 != 12:
+		suffix = "nd"
+	elif day % 10 == 3 and day % 100 != 13:
+		suffix = "rd"
+	
+	return "%s %d%s, %d" % [month_name, day, suffix, year]

ui/widgets/GameTimeLabel.gd

@@ -1,33 +1,10 @@
 extends Label
 
-# todo: move all of this out of the view and make it not hard coded
-var time_since_last_update = 0
-var time = Time.get_unix_time_from_system()
+var view_model: TimerViewModel
 
 func _ready() -> void:
-	var now_dict := Time.get_datetime_dict_from_unix_time(time)
-	text = format_datetime(now_dict)
+	view_model = ViewModelRegistry.retrieve(ViewModelRegistry.Keys.TIMER) as TimerViewModel
+	view_model.on_formatted_time_updated.connect(_handle_formatted_datetime_changed)
 
-func _process(delta: float): 
-	time_since_last_update += delta 
-	if time_since_last_update > 1:
-		time_since_last_update = 0
-		time += 86400 # seconds in a day
-		var time_dict := Time.get_datetime_dict_from_unix_time(time)
-		text = format_datetime(time_dict)
-
-func format_datetime(datetime: Dictionary) -> String:
-	var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-	var day = datetime["day"]
-	var year = datetime["year"]
-	var month_name = months[datetime["month"] - 1]
-
-	var suffix = "th"
-	if day % 10 == 1 and day % 100 != 11:
-		suffix = "st"
-	elif day % 10 == 2 and day % 100 != 12:
-		suffix = "nd"
-	elif day % 10 == 3 and day % 100 != 13:
-		suffix = "rd"
-	
-	return "%s %d%s, %d" % [month_name, day, suffix, year]
+func _handle_formatted_datetime_changed(new_datetime: String):
+	text = new_datetime

ui/widgets/hud.tscn

@@ -14,4 +14,3 @@ size_flags_vertical = 3
 
 [node name="TopAppBar" parent="." instance=ExtResource("1_kowid")]
 layout_mode = 1
-scale = Vector2(1.5, 1.5)

ui/widgets/top_app_bar.tscn

@@ -1,21 +1,40 @@
-[gd_scene load_steps=3 format=3 uid="uid://ci04dr1xobg8"]
+[gd_scene load_steps=4 format=3 uid="uid://ci04dr1xobg8"]
 
 [ext_resource type="Theme" uid="uid://dxgsaua2q7y8i" path="res://ui/themes/hud.tres" id="2_7qrg5"]
 [ext_resource type="Script" path="res://ui/widgets/GameTimeLabel.gd" id="3_08rmb"]
+[ext_resource type="Texture2D" uid="uid://uwdw62p64s6" path="res://vendor/kenney_ui-pack-pixel-adventure/Tiles/Large tiles/Thick outline/tile_0028.png" id="3_rb1vo"]
 
 [node name="TopAppBar" type="Control"]
 layout_mode = 3
-anchors_preset = 5
-anchor_left = 0.5
-anchor_right = 0.5
+anchors_preset = 10
+anchor_right = 1.0
+offset_bottom = 50.0
 grow_horizontal = 2
 
-[node name="GameTimeLabel" type="Label" parent="."]
-layout_mode = 0
-offset_left = 87.0
-offset_top = 7.0
-offset_right = 244.0
-offset_bottom = 31.0
+[node name="Background" type="NinePatchRect" parent="."]
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_bottom = 50.0
+grow_horizontal = 2
+texture = ExtResource("3_rb1vo")
+patch_margin_left = 11
+patch_margin_top = 11
+patch_margin_right = 11
+patch_margin_bottom = 11
+
+[node name="GameTimeLabel" type="Label" parent="Background"]
+layout_mode = 1
+anchors_preset = 6
+anchor_left = 1.0
+anchor_top = 0.5
+anchor_right = 1.0
+anchor_bottom = 0.5
+offset_left = -157.0
+offset_top = -12.0
+offset_bottom = 12.0
+grow_horizontal = 0
+grow_vertical = 2
 theme = ExtResource("2_7qrg5")
 text = "January 1st, 2022"
 script = ExtResource("3_08rmb")