starting to learn how to make UI in godot

Scene/Game.tscn

@@ -1,8 +1,9 @@
-[gd_scene load_steps=5 format=3 uid="uid://drs4bhpd3vrh2"]
+[gd_scene load_steps=6 format=3 uid="uid://drs4bhpd3vrh2"]
 
 [ext_resource type="Script" path="res://Scripts/GameManager.gd" id="1_lps27"]
 [ext_resource type="Texture2D" uid="uid://vv33w22kwgpc" path="res://Assets/tile.png" id="2_wiemx"]
 [ext_resource type="Script" path="res://Scripts/TileColors.gd" id="3_gnesl"]
+[ext_resource type="Script" path="res://Scripts/UI/SliderLabel.gd" id="4_7lfe4"]
 
 [sub_resource type="Resource" id="Resource_22g0s"]
 script = ExtResource("3_gnesl")
@@ -17,11 +18,106 @@ apple = Color(1, 0, 0, 1)
 
 [node name="Map" type="Node2D" parent="."]
 script = ExtResource("1_lps27")
+map_size = 25
 texture = ExtResource("2_wiemx")
+gaps = 5
 tile_color = SubResource("Resource_22g0s")
 
 [node name="Camera2D" type="Camera2D" parent="."]
 
-[node name="Tile" type="Sprite2D" parent="."]
+[node name="HBoxContainer" type="HBoxContainer" parent="."]
-position = Vector2(182, 214)
+anchors_preset = 8
-texture = ExtResource("2_wiemx")
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+offset_left = -117.5
+offset_top = -104.5
+offset_right = 117.5
+offset_bottom = 104.5
+grow_horizontal = 2
+grow_vertical = 2
+size_flags_horizontal = 3
+size_flags_vertical = 3
+
+[node name="Buttons" type="VBoxContainer" parent="HBoxContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+theme_override_constants/separation = 8
+
+[node name="PanelContainer" type="PanelContainer" parent="HBoxContainer/Buttons"]
+layout_mode = 2
+
+[node name="Resume" type="Button" parent="HBoxContainer/Buttons"]
+layout_mode = 2
+text = "Resume"
+
+[node name="Restart" type="Button" parent="HBoxContainer/Buttons"]
+layout_mode = 2
+text = "Restart"
+
+[node name="Quit" type="Button" parent="HBoxContainer/Buttons"]
+layout_mode = 2
+text = "Quit"
+
+[node name="Sliders" type="VBoxContainer" parent="HBoxContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+theme_override_constants/separation = -1
+
+[node name="Grid Size" type="VBoxContainer" parent="HBoxContainer/Sliders"]
+layout_mode = 2
+size_flags_vertical = 4
+theme_override_constants/separation = -12
+
+[node name="Label" type="Label" parent="HBoxContainer/Sliders/Grid Size"]
+layout_mode = 2
+text = "Grid Size"
+horizontal_alignment = 1
+
+[node name="HBoxContainer" type="HBoxContainer" parent="HBoxContainer/Sliders/Grid Size"]
+layout_mode = 2
+
+[node name="HSlider" type="HSlider" parent="HBoxContainer/Sliders/Grid Size/HBoxContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+size_flags_vertical = 4
+min_value = 5.0
+max_value = 32.0
+value = 5.0
+
+[node name="Count" type="Label" parent="HBoxContainer/Sliders/Grid Size/HBoxContainer" node_paths=PackedStringArray("slider")]
+layout_mode = 2
+text = "12"
+vertical_alignment = 1
+script = ExtResource("4_7lfe4")
+slider = NodePath("../HSlider")
+
+[node name="Speed" type="VBoxContainer" parent="HBoxContainer/Sliders"]
+layout_mode = 2
+size_flags_vertical = 4
+theme_override_constants/separation = -12
+
+[node name="Label" type="Label" parent="HBoxContainer/Sliders/Speed"]
+layout_mode = 2
+text = "Speed
+"
+horizontal_alignment = 1
+
+[node name="HBoxContainer" type="HBoxContainer" parent="HBoxContainer/Sliders/Speed"]
+layout_mode = 2
+
+[node name="HSlider" type="HSlider" parent="HBoxContainer/Sliders/Speed/HBoxContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+size_flags_vertical = 4
+min_value = 1.0
+max_value = 10.0
+value = 1.0
+
+[node name="Count" type="Label" parent="HBoxContainer/Sliders/Speed/HBoxContainer" node_paths=PackedStringArray("slider")]
+layout_mode = 2
+text = "12"
+vertical_alignment = 1
+script = ExtResource("4_7lfe4")
+slider = NodePath("../HSlider")

Scripts/GameManager.gd

@@ -2,8 +2,7 @@ extends Node
 
 @export var map_size := 15
 @export var texture : Texture2D
-@export var scale := 32.0
+@export var gaps := 10
-@export var gaps := 4
 @export var speed := 0.25
 
 @export var tile_color := TileColors.new()
@@ -16,16 +15,16 @@ var snake_length : int
 var rng = RandomNumberGenerator.new()
 var timer := 0.0
 
+var game_is_running := true
+
 func generate_tiles():
+	
 	for x in range(map_size):
 		tiles.append([])
 		tiles[x] = []
 		for y in range(map_size):
-			var tile = Tile.new()
+			var tile = Tile.new(x ,y, texture, tile_color)
-			tile.texture = texture
+			tile.calculate_tile_position_and_size(min(DisplayServer.window_get_size(DisplayServer.get_window_list()[0]).x, DisplayServer.window_get_size(DisplayServer.get_window_list()[0]).y), gaps, map_size, x, y)
-			tile.tile_color = tile_color
-			tile.scale = Vector2(scale, scale)
-			tile.position = Vector2(x * ( scale + gaps ) -  map_size / 2 * (scale + gaps), y * (scale + gaps)  -  map_size / 2 * (scale + gaps))
 			self.add_child(tile)
 			tiles[x].append([])
 			tiles[x][y] = tile
@@ -71,6 +70,9 @@ func process_tiles():
 					tile.state = Tile.States.EMPTY
 	
 	var was_apple = new_snake_head.state == Tile.States.APPLE
+	if  new_snake_head.state == Tile.States.SNAKE:
+		game_stop()
+		return
 	new_snake_head.snake_pos = 1
 	new_snake_head.state = Tile.States.SNAKE
 	last_snake_move_vector = snake_move_vector
@@ -81,7 +83,6 @@ func process_tiles():
 
 func process_snake_rotation():
 	var input = read_input()
-	print(input)
 	# Return if no Input or Input into multiple directions
 	if input.length() == 0 || input.length() > 1:
 		return
@@ -93,6 +94,7 @@ func process_snake_rotation():
 
 func _ready():
 	game_start()
+	get_tree().get_root().size_changed.connect(onScreenResize) 
 	pass
 	
 func game_start():
@@ -107,12 +109,23 @@ func game_start():
 	
 func game_stop():
 	print("dead")
+	game_is_running = false
 	pass
 
 func _process(delta):
+	if !game_is_running:
+		return
 	process_snake_rotation()
 	if(timer >= speed):
 		timer = 0
 		process_tiles()
 	timer += delta
 	pass
+
+
+
+func onScreenResize():
+	for x in range(map_size):
+		for y in range(map_size):
+			tiles[x][y].calculate_tile_position_and_size(min(DisplayServer.window_get_size(DisplayServer.get_window_list()[0]).x, DisplayServer.window_get_size(DisplayServer.get_window_list()[0]).y), gaps, map_size, x, y)
+	pass

Scripts/Tile.gd

@@ -13,8 +13,15 @@ enum States {
 @export var snake_pos := 0
 @export var tile_color : TileColors
 
-func _init():
+@export var x : int
+@export var y : int
+
+func _init(_x : int, _y : int, _texture : Texture2D, _tile_colors : TileColors):
 	state = States.EMPTY
+	self.x = _x
+	self.y = _y
+	self.texture = _texture
+	self.tile_color = _tile_colors
 
 func update_color():
 	match state:
@@ -25,7 +32,14 @@ func update_color():
 		States.APPLE:
 			self.modulate = tile_color.apple
 	pass
+	
+func calculate_tile_position_and_size(viewport_min : int, gaps : int, map_size: int, x : int, y : int):
+	var tile_scale = ( viewport_min - gaps ) / map_size - gaps
+	self.scale = Vector2(tile_scale, tile_scale)
+	self.position = Vector2(x * ( tile_scale + gaps ) -  map_size / 2 * (tile_scale + gaps), y * (tile_scale + gaps)  -  map_size / 2 * (tile_scale + gaps))
+	pass
 
 func _process(delta):
 	update_color()
 	pass
+	

Scripts/UI/SliderLabel.gd

@@ -0,0 +1,6 @@
+extends Label
+
+@export var slider : Slider
+
+func _process(delta):
+	self.text = str(round(slider.value))

project.godot

@@ -15,6 +15,12 @@ run/main_scene="res://Scene/Game.tscn"
 config/features=PackedStringArray("4.0", "GL Compatibility")
 config/icon="res://icon.svg"
 
+[display]
+
+window/size/viewport_width=1920
+window/size/viewport_height=1080
+window/stretch/aspect="keep_width"
+
 [input]
 
 left={
@@ -41,6 +47,11 @@ down={
 , Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":4194322,"key_label":0,"unicode":0,"echo":false,"script":null)
 ]
 }
+pause={
+"deadzone": 0.5,
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":4194305,"key_label":0,"unicode":0,"echo":false,"script":null)
+]
+}
 
 [rendering]