Add player count to server list

5 files changed, 97 insertions, 10 deletions

diff --git a/client/menu/play.gd b/client/menu/play.gd
index 05105ced..25645522 100644
--- a/client/menu/play.gd
+++ b/client/menu/play.gd
@@ -15,6 +15,7 @@
 #
 extends Menu
 
+var server_list_item: PackedScene = preload("res://menu/ui_elements/server_list_item.tscn")
 var url_regex: RegEx = RegEx.new()
 
 @onready var server_list: VBoxContainer = $side/margin/options/second/ScrollContainerCustom/ServerList
@@ -63,7 +64,7 @@ func update_server_list(lists: Array[Array]):
 	# Find out the index of the currently focused server in the list
 	var prev_selected_idx := -1
 	for i in range(server_list.get_children().size()):
-		if server_list.get_child(i).has_focus():
+		if server_list.get_child(i).button.has_focus():
 			prev_selected_idx = i
 			break
 	
@@ -73,17 +74,14 @@ func update_server_list(lists: Array[Array]):
 	var idx := 0
 	for l in lists:
 		for i in l:
-			var b := Button.new()
-			b.text_overrun_behavior = TextServer.OVERRUN_TRIM_WORD_ELLIPSIS
-			b.text = tr("c.menu.play.list_item").format([i.name, roundi(i.players_online)])
+			var server_item: ServerListItem = server_list_item.instantiate()
+			server_list.add_child(server_item)
 			# TODO: Implement fallback address correctly
-			if i.version[0] != Multiplayer.VERSION_MAJOR or i.version[1] > Multiplayer.VERSION_MINOR:
-				b.disabled = true
-			b.pressed.connect(connect_to.bind(i.address[0]))
-			server_list.add_child(b)
+			server_item.setup(i.name, roundi(i.players_online), i.version)
+			server_item.button.pressed.connect(connect_to.bind(i.address[0]))
 			# Focus the same server with the same index as the previously focused one
 			if idx == prev_selected_idx:
-				b.grab_focus()
+				server_item.button.grab_focus()
 			idx += 1
 	
 	if prev_selected_idx > idx:
@@ -91,7 +89,7 @@ func update_server_list(lists: Array[Array]):
 		if idx - 1 < 0:
 			connect_uri.grab_focus()
 		else:
-			server_list.get_child(idx - 1).grab_focus()
+			server_list.get_child(idx - 1).button.grab_focus()
 	
 	# Show message if no servers available
 	server_list_empty.visible = idx == 0
diff --git a/client/menu/theme/style/error_focus_style.tres b/client/menu/theme/style/error_focus_style.tres
new file mode 100644
index 00000000..f7c44505
--- /dev/null
+++ b/client/menu/theme/style/error_focus_style.tres
@@ -0,0 +1,17 @@
+[gd_resource type="StyleBoxFlat" format=3 uid="uid://devnduinj535f"]
+
+[resource]
+content_margin_left = 10.0
+content_margin_top = 10.0
+content_margin_right = 10.0
+content_margin_bottom = 10.0
+bg_color = Color(1, 0, 0, 0.12549)
+border_width_left = 2
+border_width_top = 2
+border_width_right = 2
+border_width_bottom = 2
+border_color = Color(1, 0.81804, 0.818076, 1)
+corner_radius_top_left = 5
+corner_radius_top_right = 5
+corner_radius_bottom_right = 5
+corner_radius_bottom_left = 5
diff --git a/client/menu/ui_elements/server_list_item.gd b/client/menu/ui_elements/server_list_item.gd
new file mode 100644
index 00000000..d9838234
--- /dev/null
+++ b/client/menu/ui_elements/server_list_item.gd
@@ -0,0 +1,32 @@
+# Hurry Curry! - a game about cooking
+# Copyright (C) 2025 Hurry Curry! contributors
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, version 3 of the License only.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+class_name ServerListItem
+extends PanelContainer
+
+var error_style_focus: StyleBoxFlat = preload("res://menu/theme/style/error_focus_style.tres")
+@onready var title: Label = $MarginContainer/VBoxContainer/Title
+@onready var info: Label = $MarginContainer/VBoxContainer/Info
+@onready var button: Button = $Button
+
+func setup(name_: String, online_players: int, version: Array):
+	title.text = name_
+	if version[0] != Multiplayer.VERSION_MAJOR or version[1] > Multiplayer.VERSION_MINOR:
+		button.disabled = true
+		button.add_theme_stylebox_override("focus", error_style_focus)
+		info.text = tr("c.menu.play.server_version_mismatch")
+		info.add_theme_color_override("font_color", Color("ff2222"))
+		return
+	info.text = tr("c.menu.play.server_players").format([online_players])
diff --git a/client/menu/ui_elements/server_list_item.gd.uid b/client/menu/ui_elements/server_list_item.gd.uid
new file mode 100644
index 00000000..276bb06f
--- /dev/null
+++ b/client/menu/ui_elements/server_list_item.gd.uid
@@ -0,0 +1 @@
+uid://xr5oigbgd0aw
diff --git a/client/menu/ui_elements/server_list_item.tscn b/client/menu/ui_elements/server_list_item.tscn
new file mode 100644
index 00000000..4a551ae1
--- /dev/null
+++ b/client/menu/ui_elements/server_list_item.tscn
@@ -0,0 +1,39 @@
+[gd_scene load_steps=3 format=3 uid="uid://t2h60dhuvfsk"]
+
+[ext_resource type="Script" uid="uid://xr5oigbgd0aw" path="res://menu/ui_elements/server_list_item.gd" id="1_1n1yg"]
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_1n1yg"]
+
+[node name="ServerListItem" type="PanelContainer"]
+offset_right = 400.0
+offset_bottom = 40.0
+size_flags_horizontal = 3
+theme_override_styles/panel = SubResource("StyleBoxEmpty_1n1yg")
+script = ExtResource("1_1n1yg")
+
+[node name="Button" type="Button" parent="."]
+layout_mode = 2
+
+[node name="MarginContainer" type="MarginContainer" parent="."]
+layout_mode = 2
+mouse_filter = 2
+theme_override_constants/margin_left = 10
+theme_override_constants/margin_top = 10
+theme_override_constants/margin_right = 10
+theme_override_constants/margin_bottom = 10
+
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer"]
+layout_mode = 2
+mouse_filter = 2
+
+[node name="Title" type="Label" parent="MarginContainer/VBoxContainer"]
+layout_mode = 2
+theme_override_colors/font_color = Color(0.87451, 0.87451, 0.87451, 1)
+theme_override_font_sizes/font_size = 18
+text = "Example Server"
+
+[node name="Info" type="Label" parent="MarginContainer/VBoxContainer"]
+layout_mode = 2
+theme_override_colors/font_color = Color(0.749781, 0.74978, 0.74978, 1)
+theme_override_font_sizes/font_size = 14
+text = "5 players online"