Attempt to fix UI scaling issue #3 + Fading label fix

jigsaw-game/Theme.tres

@@ -1,4 +1,4 @@
-[gd_resource type="Theme" load_steps=4 format=2]
+[gd_resource type="Theme" load_steps=5 format=2]
 
 [ext_resource path="res://DefaultFont.tres" type="DynamicFont" id=1]
 
@@ -12,19 +12,29 @@ border_width_top = 3
 border_width_right = 3
 border_width_bottom = 3
 border_color = Color( 0.8, 0.8, 0.8, 0 )
-corner_radius_top_left = 6
-corner_radius_top_right = 6
-corner_radius_bottom_right = 6
-corner_radius_bottom_left = 6
+corner_radius_top_left = 100
+corner_radius_top_right = 100
+corner_radius_bottom_right = 100
+corner_radius_bottom_left = 100
 
 [sub_resource type="StyleBoxFlat" id=1]
 content_margin_top = 6.0
 content_margin_bottom = 6.0
 bg_color = Color( 1, 0, 0, 1 )
-corner_radius_top_left = 8
-corner_radius_top_right = 8
-corner_radius_bottom_right = 8
-corner_radius_bottom_left = 8
+corner_radius_top_left = 100
+corner_radius_top_right = 100
+corner_radius_bottom_right = 100
+corner_radius_bottom_left = 100
+
+[sub_resource type="StyleBoxFlat" id=3]
+content_margin_top = 4.0
+content_margin_bottom = 4.0
+corner_radius_top_left = 100
+corner_radius_top_right = 100
+corner_radius_bottom_right = 100
+corner_radius_bottom_left = 100
+expand_margin_left = 10.0
+expand_margin_right = 10.0
 
 [resource]
 default_font = ExtResource( 1 )
@@ -38,3 +48,4 @@ HScrollBar/styles/grabber = SubResource( 2 )
 HScrollBar/styles/grabber_highlight = SubResource( 2 )
 HScrollBar/styles/grabber_pressed = SubResource( 2 )
 HScrollBar/styles/scroll = SubResource( 1 )
+Label/styles/normal = SubResource( 3 )

jigsaw-game/components/fading_label/fading_label.gd

@@ -8,7 +8,6 @@ onready var tween = $Tween
 export var modulate_on = Color(1.0, 1.0, 1.0, 1.0)
 export var modulate_off = Color(1.0, 1.0, 1.0, 0.0)
 
-
 func _ready():
 	modulate = modulate_off
 	timer.connect("timeout", self, "_on_timeout")
@@ -19,7 +18,7 @@ func update_text(update_text: String) -> void:
 	timer.start()
 	tween.stop_all()
 	tween.interpolate_property(self, "modulate",
-		modulate_off, modulate_on, 0.1,
+		modulate, modulate_on, 0.1,
 		Tween.TRANS_LINEAR, Tween.EASE_IN_OUT
 	)
 	tween.start()
@@ -28,7 +27,7 @@ func update_text(update_text: String) -> void:
 func _on_timeout() -> void:
 	tween.stop_all()
 	tween.interpolate_property(self, "modulate",
-		modulate_on, modulate_off, 0.2,
+		modulate, modulate_off, 0.2,
 		Tween.TRANS_LINEAR, Tween.EASE_IN_OUT
 	)
 	tween.start()

jigsaw-game/global/config/config.gd

@@ -14,15 +14,22 @@ func _ready():
 
 	var dpi = OS.get_screen_dpi()
 
+	print("DPI: %s" % dpi)
+
 	var ui_scale
 
-	if dpi < 240:
+	if OS.has_feature("JavaScript"):
+		ui_scale = JavaScript.eval("window.devicePixelRatio")
+	elif dpi < 240:
 		ui_scale = 1
 	elif dpi < 480:
 		ui_scale = 2
 	else:
 		ui_scale = 3
 
+	if not ui_scale:
+		ui_scale = 1
+
 	get_tree().set_screen_stretch(
 		SceneTree.STRETCH_MODE_DISABLED,
 		SceneTree.STRETCH_ASPECT_EXPAND,

jigsaw-game/global/theme_manager/theme_manager.gd

@@ -71,6 +71,9 @@ func load_telegram_colors():
 # colors here
 func update_theme():
 	theme.set_color("font_color", "Label", text_color)
+	theme.get_stylebox("normal", "Label").bg_color = secondary_bg_color
+
 	theme.get_stylebox("scroll", "HScrollBar").bg_color = transparent
 	theme.get_stylebox("grabber", "HScrollBar").bg_color = hint_color	
+
 	VisualServer.set_default_clear_color(bg_color)

jigsaw-game/scenes/main/Main.tscn

@@ -1,18 +1,47 @@
-[gd_scene load_steps=6 format=2]
+[gd_scene load_steps=7 format=2]
 
 [ext_resource path="res://components/web_socket_client/WebSocketManager.tscn" type="PackedScene" id=2]
 [ext_resource path="res://components/game/Game.tscn" type="PackedScene" id=3]
 [ext_resource path="res://components/game_manager/GameManager.tscn" type="PackedScene" id=4]
 [ext_resource path="res://components/fading_label/FadingLabel.tscn" type="PackedScene" id=5]
 [ext_resource path="res://Theme.tres" type="Theme" id=6]
 
+[sub_resource type="GDScript" id=1]
+script/source = "extends Node
+
+export(NodePath) onready var label = get_node(label) as FadingLabel
+
+export var enable: bool = false
+
+onready var timer := $Timer
+
+var test_text := [
+	\"Hello world!\",
+	\"KPidS joined the game\",
+	\"Apehum placed a tile\",
+	\"John left the game\",
+	\"SFSJLKFAJLGJSGK\"
+]
+
+func _ready():
+
+	timer.connect(\"timeout\", self, \"_on_timeout\")
+
+	if enable:
+		timer.start()
+
+func _on_timeout() -> void:
+	timer.wait_time = rand_range(0.5, 5)
+	label.update_text(test_text[rand_range(0, test_text.size() - 1)])
+"
+
 [node name="Main" type="Node"]
 
 [node name="GameManager" parent="." instance=ExtResource( 4 )]
 puzzle_uuid = "78f2f015-664b-48e7-9914-226ebefc02c4"
 web_socket_manager = NodePath("../WebSocketManager")
 game = NodePath("../Control/Game")
-status_label = NodePath("../Control/Header/FadingLabel")
+status_label = NodePath("../Control/Header/CenterContainer/FadingLabel")
 
 [node name="WebSocketManager" parent="." instance=ExtResource( 2 )]
 
@@ -28,20 +57,22 @@ margin_top = 48.0
 anchor_right = 1.0
 margin_bottom = 48.0
 
-[node name="FadingLabel" parent="Control/Header" instance=ExtResource( 5 )]
-anchor_left = 0.5
-anchor_top = 0.5
-anchor_right = 0.5
-anchor_bottom = 0.5
-margin_left = -68.0
-margin_top = -9.5
-margin_right = 68.0
-margin_bottom = 9.5
-text = "Pepegaetweewdsg"
+[node name="FadingLabelTest" type="Node" parent="Control/Header"]
+script = SubResource( 1 )
+label = NodePath("../CenterContainer/FadingLabel")
+
+[node name="Timer" type="Timer" parent="Control/Header/FadingLabelTest"]
+wait_time = 0.1
+
+[node name="CenterContainer" type="CenterContainer" parent="Control/Header"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+
+[node name="FadingLabel" parent="Control/Header/CenterContainer" instance=ExtResource( 5 )]
+margin_left = 694.0
+margin_top = 11.0
+margin_right = 745.0
+margin_bottom = 37.0
+text = "Pepega"
 align = 1
 valign = 1
-
-[node name="Label" type="Label" parent="Control/Header"]
-margin_right = 40.0
-margin_bottom = 18.0
-text = "Test Label"