Changes style of category selection

Author: Kesuaheli

assets/theme_small.tres

@@ -0,0 +1,4 @@
+[gd_resource type="Theme" format=3 uid="uid://bbjcf4njtb4tm"]
+
+[resource]
+default_font_size = 20

scenes/menu.tscn

@@ -1,6 +1,7 @@
 [gd_scene load_steps=10 format=3 uid="uid://yyc1l3e78qgl"]
 
 [ext_resource type="Script" path="res://scripts/menu.gd" id="1_f4qtc"]
+[ext_resource type="Theme" uid="uid://bbjcf4njtb4tm" path="res://assets/theme_small.tres" id="2_7ph5j"]
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_r2tkh"]
 bg_color = Color(0.239216, 0.239216, 0.239216, 1)
@@ -49,9 +50,6 @@ border_color = Color(0, 0, 0, 1)
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_eb82c"]
 bg_color = Color(0.137255, 0.137255, 0.137255, 1)
 
-[sub_resource type="Theme" id="Theme_31w7n"]
-default_font_size = 70
-
 [node name="Menu" type="CanvasLayer"]
 script = ExtResource("1_f4qtc")
 
@@ -126,7 +124,6 @@ theme_override_styles/focus = SubResource("StyleBoxFlat_sdl70")
 text = "Quit Game"
 
 [node name="RoundCreation" type="CanvasLayer" parent="."]
-visible = false
 
 [node name="ColorRect" type="ColorRect" parent="RoundCreation"]
 anchors_preset = 15
@@ -137,80 +134,118 @@ grow_vertical = 2
 color = Color(0.137255, 0.137255, 0.137255, 0.431373)
 
 [node name="CreationMenu" type="Panel" parent="RoundCreation"]
-anchors_preset = 8
-anchor_left = 0.5
-anchor_top = 0.5
-anchor_right = 0.5
-anchor_bottom = 0.5
-offset_left = -258.0
-offset_top = -454.5
-offset_right = 258.0
-offset_bottom = 454.5
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_left = 660.0
+offset_top = 80.0
+offset_right = -660.0
+offset_bottom = -80.0
 grow_horizontal = 2
 grow_vertical = 2
 theme_override_styles/panel = SubResource("StyleBoxFlat_yhbp7")
 
+[node name="ModeSelect" type="OptionButton" parent="RoundCreation/CreationMenu"]
+layout_mode = 1
+offset_left = 40.0
+offset_top = 100.0
+offset_right = 180.0
+offset_bottom = 140.0
+theme = ExtResource("2_7ph5j")
+theme_override_font_sizes/font_size = 40
+
+[node name="Label" type="Label" parent="RoundCreation/CreationMenu/ModeSelect"]
+layout_mode = 1
+offset_top = -40.0
+offset_right = 120.0
+theme = ExtResource("2_7ph5j")
+text = "Game Mode"
+vertical_alignment = 1
+
+[node name="RoundDuration" type="SpinBox" parent="RoundCreation/CreationMenu"]
+layout_mode = 1
+offset_left = 40.0
+offset_top = 200.0
+offset_right = 135.0
+offset_bottom = 240.0
+theme = ExtResource("2_7ph5j")
+min_value = 5.0
+max_value = 90.0
+value = 30.0
+suffix = "s"
+custom_arrow_step = 5.0
+
+[node name="Label" type="Label" parent="RoundCreation/CreationMenu/RoundDuration"]
+layout_mode = 1
+offset_top = -40.0
+offset_right = 160.0
+theme = ExtResource("2_7ph5j")
+text = "Round Duration"
+vertical_alignment = 1
+
+[node name="CategoryBox" type="Tree" parent="RoundCreation/CreationMenu"]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_left = 38.0
+offset_top = 260.0
+offset_right = -38.0
+offset_bottom = -114.0
+grow_horizontal = 2
+grow_vertical = 2
+theme_override_colors/font_color = Color(0.6, 0.6, 0.6, 1)
+theme_override_colors/relationship_line_color = Color(0.301961, 0.301961, 0.301961, 1)
+theme_override_colors/parent_hl_line_color = Color(1, 1, 1, 1)
+theme_override_colors/children_hl_line_color = Color(0.6, 0.6, 0.6, 1)
+theme_override_constants/inner_item_margin_left = 5
+theme_override_constants/draw_relationship_lines = 1
+theme_override_constants/relationship_line_width = 2
+theme_override_constants/parent_hl_line_width = 3
+theme_override_constants/children_hl_line_width = 3
+theme_override_constants/draw_guides = 0
+columns = 2
+column_titles_visible = true
+hide_root = true
+
 [node name="Cancel" type="Button" parent="RoundCreation/CreationMenu"]
-layout_mode = 0
-offset_left = 45.0
-offset_top = 821.0
-offset_right = 233.0
-offset_bottom = 896.0
+layout_mode = 1
+anchors_preset = 7
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+anchor_bottom = 1.0
+offset_left = -220.0
+offset_top = -100.0
+offset_right = -32.0
+offset_bottom = -25.0
+grow_horizontal = 2
+grow_vertical = 0
 theme_override_font_sizes/font_size = 30
 theme_override_styles/normal = SubResource("StyleBoxFlat_r78im")
 theme_override_styles/hover = SubResource("StyleBoxFlat_v1l70")
 theme_override_styles/pressed = SubResource("StyleBoxFlat_eb82c")
 text = "Cancel"
 
 [node name="Start" type="Button" parent="RoundCreation/CreationMenu"]
-layout_mode = 0
-offset_left = 286.0
-offset_top = 821.0
-offset_right = 474.0
-offset_bottom = 896.0
+layout_mode = 1
+anchors_preset = 7
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+anchor_bottom = 1.0
+offset_left = 40.0
+offset_top = -100.0
+offset_right = 228.0
+offset_bottom = -25.0
+grow_horizontal = 2
+grow_vertical = 0
 theme_override_font_sizes/font_size = 30
 theme_override_styles/normal = SubResource("StyleBoxFlat_r78im")
 theme_override_styles/hover = SubResource("StyleBoxFlat_v1l70")
 theme_override_styles/pressed = SubResource("StyleBoxFlat_eb82c")
 text = "Start Game"
 
-[node name="ModeSelect" type="OptionButton" parent="RoundCreation/CreationMenu"]
-layout_mode = 1
-offset_left = 43.0
-offset_top = 44.0
-offset_right = 299.0
-offset_bottom = 114.0
-theme_override_font_sizes/font_size = 40
-
-[node name="CategoryBox" type="Tree" parent="RoundCreation/CreationMenu"]
-layout_mode = 0
-offset_left = 58.0
-offset_top = 295.0
-offset_right = 478.0
-offset_bottom = 775.0
-columns = 2
-column_titles_visible = true
-hide_root = true
-
-[node name="RoundDuration" type="SpinBox" parent="RoundCreation/CreationMenu"]
-layout_mode = 1
-anchors_preset = 6
-anchor_left = 1.0
-anchor_top = 0.5
-anchor_right = 1.0
-anchor_bottom = 0.5
-offset_left = -472.0
-offset_top = -304.5
-offset_right = -199.775
-offset_bottom = -216.5
-grow_horizontal = 0
-grow_vertical = 2
-theme = SubResource("Theme_31w7n")
-min_value = 5.0
-max_value = 90.0
-value = 30.0
-suffix = "s"
-
 [connection signal="pressed" from="Buttons/Play" to="." method="on_play_pressed"]
 [connection signal="pressed" from="Buttons/Quit" to="." method="on_quit_pressed"]
 [connection signal="pressed" from="RoundCreation/CreationMenu/Cancel" to="." method="on_cancel_pressed"]

scripts/menu.gd

@@ -12,8 +12,15 @@ func _ready():
 		$RoundCreation/CreationMenu/RoundDuration.value = round_duration
 	api.category(on_category_response)
 
+	var category_tree: Tree = $RoundCreation/CreationMenu/CategoryBox
+	category_tree.create_item()
+	category_tree.set_column_title(0, "Category")
+	category_tree.set_column_title(1, "Amount")
+	category_tree.set_column_expand(1, false)
+	category_tree.set_column_custom_minimum_width(1, 100)
+
 ## on_category_response is called as when the categories api call completed.
-func on_category_response(success: bool, categories: Dictionary={}):
+func on_category_response(success: bool, categories: Dictionary = {}):
 	if !success:
 		print("failed to get categories!")
 		return
@@ -22,18 +29,26 @@ func on_category_response(success: bool, categories: Dictionary={}):
 ## update_category_list updates the category selection list with the given dictionary (mapping String to int).
 func update_category_list(groups: Dictionary):
 	var category_tree: Tree = $RoundCreation/CreationMenu/CategoryBox
-	var tree_root: TreeItem = category_tree.create_item()
-	category_tree.set_column_title(0, "Category")
-	category_tree.set_column_title(1, "Amount")
+	var tree_root: TreeItem = category_tree.get_root()
 	for group in groups:
 		var tree_group: TreeItem = category_tree.create_item(tree_root)
 		tree_group.set_text(0, group)
+		tree_group.set_custom_bg_color(0, Color(0.23, 0.23, 0.23))
+		tree_group.set_custom_bg_color(1, Color(0.23, 0.23, 0.23))
+		var bg_light: bool = false
 		for cat in groups[group]:
 			var category: TreeItem = category_tree.create_item(tree_group)
 			category.set_text(0, cat.description)
 			category.set_cell_mode(1, TreeItem.CELL_MODE_RANGE)
 			category.set_range_config(1, 0, cat.count, 1)
 			category.set_editable(1, true)
+			if bg_light:
+				category.set_custom_bg_color(0, Color(0.15, 0.15, 0.15))
+				category.set_custom_bg_color(1, Color(0.15, 0.15, 0.15))
+			else:
+				category.set_custom_bg_color(0, Color(0.05, 0.05, 0.05))
+				category.set_custom_bg_color(1, Color(0.05, 0.05, 0.05))
+			bg_light = !bg_light
 
 			var category_data: CategoryData = CategoryData.new()
 			category_data.id = cat.title