diff --git a/app/components/Settings.tscn b/app/components/Settings.tscn index 88dc6164..d6ffd7eb 100644 --- a/app/components/Settings.tscn +++ b/app/components/Settings.tscn @@ -12,7 +12,7 @@ theme = ExtResource( 1 ) script = ExtResource( 2 ) [node name="Window" type="PanelContainer" parent="."] -margin_right = 874.0 +margin_right = 862.0 margin_bottom = 516.0 rect_clip_content = true mouse_filter = 1 @@ -22,7 +22,7 @@ size_flags_vertical = 0 [node name="MainContainer" type="MarginContainer" parent="Window"] margin_left = 20.0 margin_top = 20.0 -margin_right = 854.0 +margin_right = 842.0 margin_bottom = 496.0 mouse_filter = 1 custom_constants/margin_right = 10 @@ -31,19 +31,19 @@ custom_constants/margin_bottom = 0 [node name="RowContainer" type="VBoxContainer" parent="Window/MainContainer"] margin_top = 5.0 -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 476.0 custom_constants/separation = 50 [node name="VFlowContainer" type="HBoxContainer" parent="Window/MainContainer/RowContainer"] -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 28.0 size_flags_horizontal = 3 alignment = 2 [node name="Close" type="Button" parent="Window/MainContainer/RowContainer/VFlowContainer"] -margin_left = 784.0 -margin_right = 824.0 +margin_left = 772.0 +margin_right = 812.0 margin_bottom = 28.0 mouse_default_cursor_shape = 2 theme_type_variation = "IconButton" @@ -66,8 +66,8 @@ margin_top = 1.0 margin_right = 378.0 margin_bottom = 81.0 size_flags_horizontal = 3 -size_flags_stretch_ratio = 0.51 -text = "Level Name" +text = "Name" +align = 2 [node name="LevelName" type="LineEdit" parent="Window/MainContainer/RowContainer/NewLevelContainer/HBoxContainer"] margin_left = 398.0 @@ -106,7 +106,7 @@ margin_bottom = 80.0 [node name="SettingsContainer" type="GridContainer" parent="Window/MainContainer/RowContainer"] margin_top = 78.0 -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 305.0 custom_constants/vseparation = 25 custom_constants/hseparation = 20 @@ -116,6 +116,7 @@ columns = 4 margin_right = 160.0 margin_bottom = 37.0 text = "Level" +align = 2 [node name="Levels" type="OptionButton" parent="Window/MainContainer/RowContainer/SettingsContainer"] margin_left = 180.0 @@ -127,13 +128,14 @@ enabled_focus_mode = 0 [node name="Label8" type="Label" parent="Window/MainContainer/RowContainer/SettingsContainer"] margin_left = 417.0 -margin_right = 587.0 +margin_right = 575.0 margin_bottom = 37.0 -text = " Player Color" +text = "Player Color" +align = 2 [node name="PlayerColors" type="OptionButton" parent="Window/MainContainer/RowContainer/SettingsContainer"] -margin_left = 607.0 -margin_right = 824.0 +margin_left = 595.0 +margin_right = 812.0 margin_bottom = 37.0 mouse_default_cursor_shape = 2 @@ -142,6 +144,7 @@ margin_top = 63.0 margin_right = 160.0 margin_bottom = 100.0 text = "Environment" +align = 2 [node name="Environments" type="OptionButton" parent="Window/MainContainer/RowContainer/SettingsContainer"] margin_left = 180.0 @@ -154,14 +157,15 @@ size_flags_horizontal = 3 [node name="Label3" type="Label" parent="Window/MainContainer/RowContainer/SettingsContainer"] margin_left = 417.0 margin_top = 63.0 -margin_right = 587.0 +margin_right = 575.0 margin_bottom = 100.0 -text = " Megapixels" +text = "Megapixels" +align = 2 [node name="HBoxContainer" type="HBoxContainer" parent="Window/MainContainer/RowContainer/SettingsContainer"] -margin_left = 607.0 +margin_left = 595.0 margin_top = 62.0 -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 101.0 custom_constants/separation = 20 @@ -198,6 +202,7 @@ margin_top = 127.0 margin_right = 160.0 margin_bottom = 164.0 text = "Font Size" +align = 2 [node name="HBoxContainer3" type="HBoxContainer" parent="Window/MainContainer/RowContainer/SettingsContainer"] margin_left = 180.0 @@ -237,14 +242,15 @@ text = " ↓ " [node name="Label2" type="Label" parent="Window/MainContainer/RowContainer/SettingsContainer"] margin_left = 417.0 margin_top = 127.0 -margin_right = 587.0 +margin_right = 575.0 margin_bottom = 164.0 -text = " Toolbar Size" +text = "Toolbar Size" +align = 2 [node name="HBoxContainer2" type="HBoxContainer" parent="Window/MainContainer/RowContainer/SettingsContainer"] -margin_left = 607.0 +margin_left = 595.0 margin_top = 126.0 -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 165.0 custom_constants/separation = 20 @@ -281,6 +287,7 @@ margin_top = 190.0 margin_right = 160.0 margin_bottom = 227.0 text = "Full Screen" +align = 2 [node name="FullScreen" type="Button" parent="Window/MainContainer/RowContainer/SettingsContainer"] margin_left = 180.0 @@ -319,39 +326,39 @@ rect_min_size = Vector2( 400, 140 ) [node name="RemoteContainer" type="MarginContainer" parent="Window/MainContainer/RowContainer"] margin_top = 355.0 -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 471.0 rect_clip_content = true mouse_filter = 1 custom_constants/margin_bottom = 20 [node name="VBoxContainer2" type="VBoxContainer" parent="Window/MainContainer/RowContainer/RemoteContainer"] -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 96.0 custom_constants/separation = 20 [node name="Label11" type="Label" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2"] -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 37.0 text = "Remote Server Address" align = 1 [node name="HBoxContainer" type="HBoxContainer" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2"] margin_top = 57.0 -margin_right = 824.0 +margin_right = 812.0 margin_bottom = 96.0 size_flags_horizontal = 3 custom_constants/separation = 20 -[node name="VSeparator" type="VSeparator" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2/HBoxContainer"] -margin_right = 127.0 +[node name="LeftSeparator" type="VSeparator" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2/HBoxContainer"] +margin_right = 125.0 margin_bottom = 39.0 size_flags_horizontal = 3 size_flags_stretch_ratio = 0.5 [node name="ServerAddress" type="LineEdit" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2/HBoxContainer"] -margin_left = 147.0 -margin_right = 402.0 +margin_left = 145.0 +margin_right = 396.0 margin_bottom = 39.0 mouse_filter = 1 size_flags_horizontal = 3 @@ -361,17 +368,17 @@ caret_blink = true caret_blink_speed = 0.5 [node name="Connect" type="Button" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2/HBoxContainer"] -margin_left = 422.0 -margin_right = 676.0 +margin_left = 416.0 +margin_right = 666.0 margin_bottom = 39.0 focus_mode = 0 mouse_default_cursor_shape = 2 size_flags_horizontal = 3 text = " Connect " -[node name="VSeparator2" type="VSeparator" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2/HBoxContainer"] -margin_left = 696.0 -margin_right = 824.0 +[node name="RightSeparator" type="VSeparator" parent="Window/MainContainer/RowContainer/RemoteContainer/VBoxContainer2/HBoxContainer"] +margin_left = 686.0 +margin_right = 812.0 margin_bottom = 39.0 size_flags_horizontal = 3 size_flags_stretch_ratio = 0.5 diff --git a/app/scenes/GUI.tscn b/app/scenes/GUI.tscn index 3a2e2840..6af9c375 100644 --- a/app/scenes/GUI.tscn +++ b/app/scenes/GUI.tscn @@ -255,13 +255,13 @@ mouse_filter = 2 columns = 2 [node name="Label" type="Label" parent="GridContainer"] -margin_right = 1042.0 +margin_right = 1054.0 margin_bottom = 516.0 size_flags_horizontal = 3 size_flags_vertical = 1 [node name="Settings" parent="GridContainer" instance=ExtResource( 12 )] -margin_left = 1046.0 +margin_left = 1058.0 margin_top = 0.0 margin_right = 1920.0 margin_bottom = 516.0 diff --git a/src/ui/action_button.nim b/src/ui/action_button.nim index 098d4901..4c505dce 100644 --- a/src/ui/action_button.nim +++ b/src/ui/action_button.nim @@ -1,14 +1,16 @@ import godotapi/[ button, style_box_flat, input_event_screen_touch, input_event_screen_drag, - scene_tree + scene_tree, viewport, ] import godot import ".."/[core, gdutils] gdobj ActionButton of Button: proc update_size(size: float) = - let toolbar_size = state.config.toolbar_size * state.config.screen_scale + var toolbar_size = state.config.toolbar_size * state.config.screen_scale + if (toolbar_size + 4) * 8 > self.get_viewport().size.x: + toolbar_size = self.get_viewport().size.x / 8 - 4 self.rect_min_size = vec2(toolbar_size, toolbar_size) for style in ["hover", "pressed", "focus", "normal"]: var stylebox = self.get_stylebox(style).as(StyleBoxFlat) @@ -21,6 +23,10 @@ gdobj ActionButton of Button: self.update_size state.config.toolbar_size self.bind_signals self, "pressed" + self.bind_signals self.get_viewport(), "size_changed" + + method on_size_changed() = + self.update_size(state.config.toolbar_size) method on_pressed*() = self.get_parent.trigger("action_changed", self.name) diff --git a/src/ui/settings.nim b/src/ui/settings.nim index bb7246c5..c5b2a1b7 100644 --- a/src/ui/settings.nim +++ b/src/ui/settings.nim @@ -2,7 +2,7 @@ import std/[algorithm, math, os] import godotapi/[ panel_container, option_button, line_edit, margin_container, tween, - input_event, scene_tree + input_event, scene_tree, v_separator, viewport, grid_container, ] import godot import core, gdutils, models/[colors, serializers] @@ -24,8 +24,10 @@ gdobj Settings of PanelContainer: megapixels_up, megapixels_down, font_size_up, font_size_down, toolbar_size_up, toolbar_size_down, switch_level, full_screen, run_server, connect, close, save, cancel: Button - remote_container, main_container, new_level_container, row_container, - settings_container, window: Container + remote_container, main_container, new_level_container, row_container, window: + Container + settings_container: GridContainer + left_separator, right_separator: VSeparator repeat_timers: Table[string, MonoTime] size_timer = MonoTime.high tween: Tween @@ -93,12 +95,13 @@ gdobj Settings of PanelContainer: main_container = find("MainContainer", Container) new_level_container = find("NewLevelContainer", Container) row_container = find("RowContainer", Container) - settings_container = find("SettingsContainer", Container) + settings_container = find("SettingsContainer", GridContainer) window = find("Window", Container) tween = find("Tween", Tween) close = find("Close", Button) - - self.separation = self.row_container.get_constant("separation") + separation = self.row_container.get_constant("separation") + left_separator = find("LeftSeparator", VSeparator) + right_separator = find("RightSeparator", VSeparator) self.environments.add_item("default") for env in environments.keys.to_seq.sorted: @@ -119,7 +122,7 @@ gdobj Settings of PanelContainer: for button in [ self.megapixels_up, self.megapixels_down, self.font_size_up, - self.font_size_down, self.toolbar_size_up, self.toolbar_size_down + self.font_size_down, self.toolbar_size_up, self.toolbar_size_down, ]: self.bind_signal(button, "pressed", button.name) self.bind_signal(button, "button_up", button.name) @@ -208,7 +211,7 @@ gdobj Settings of PanelContainer: (0.05, 0.4, 0.05), (0.4, 1.0, 0.1), (1.0, 4.0, 0.5), - (4.0, 10.0, 1.0) + (4.0, 10.0, 1.0), ] if name == "MegapixelsUp": let megapixels = state.config.megapixels @@ -258,7 +261,7 @@ gdobj Settings of PanelContainer: proc resize(start_margin, end_margin: float, node: Node, property: string) = discard self.tween.interpolate_property( node, property, start_margin.to_variant, end_margin.to_variant, - animation_duration, transition, EASE_IN_OUT + animation_duration, transition, EASE_IN_OUT, ) discard self.tween.start() @@ -304,14 +307,13 @@ gdobj Settings of PanelContainer: self.action_steps = @[ proc() = - self.window.anchor_left = 1.0 - , + self.window.anchor_left = 1.0, proc() = self.window.opacity = 1.0 - self.resize(1.0, 0.0, node = self.window, property = "anchor_right") - , + self.resize(1.0, 0.0, node = self.window, property = "anchor_right"), proc() = self.resize_y self.expanded_margin() + , ] proc close_window() = @@ -322,31 +324,27 @@ gdobj Settings of PanelContainer: self.resize_y self.collapsed_margin() , proc() = - self.resize(0.0, 1.0, node = self.window, property = "anchor_left") - , + self.resize(0.0, 1.0, node = self.window, property = "anchor_left"), proc() = self.window.opacity = 0.0 - self.window.visible = false + self.window.visible = false, ] else: @[ proc() = self.resize_y( self.expanded_new_level_margin, self.collapsed_new_level_margin - ) - , + ), proc() = self.new_level_container.visible = false self.main_container.add_constant_override( "margin_bottom", self.collapsed_margin - ) - , + ), proc() = - self.resize(0.0, 1.0, node = self.window, property = "anchor_left") - , + self.resize(0.0, 1.0, node = self.window, property = "anchor_left"), proc() = self.window.opacity = 0.0 - self.window.visible = false + self.window.visible = false, ] self.state = Closed @@ -361,16 +359,14 @@ gdobj Settings of PanelContainer: proc() = self.resize_y( self.expanded_new_level_margin, self.collapsed_new_level_margin - ) - , + ), proc() = self.new_level_container.visible = false self.main_container.add_constant_override( "margin_bottom", self.collapsed_margin - ) - , + ), proc() = - self.resize_y(self.collapsed_margin, self.expanded_margin) + self.resize_y(self.collapsed_margin, self.expanded_margin), ] proc show_new_level() = @@ -380,19 +376,17 @@ gdobj Settings of PanelContainer: self.action_steps = @[ proc() = - self.resize_y(self.expanded_margin, self.collapsed_margin) - , + self.resize_y(self.expanded_margin, self.collapsed_margin), proc() = self.new_level_container.visible = true self.level_name.grab_focus() self.main_container.add_constant_override( "margin_bottom", self.collapsed_new_level_margin - ) - , + ), proc() = self.resize_y( self.collapsed_new_level_margin, self.expanded_new_level_margin - ) + ), ] method on_button_up*(name: string) = @@ -450,6 +444,13 @@ gdobj Settings of PanelContainer: elif name == "ServerAddress": self.on_pressed("Connect") + proc approximate_full_width(): float = + let width = self.settings_container.rect_size.x + let columns = self.settings_container.columns + let column_width = width / float(columns) + result = + (column_width * 4) + 80 - (9 * float self.settings_container.columns) + method process*(delta: float) = let now = get_mono_time() for name, time in self.repeat_timers.mpairs: @@ -465,6 +466,19 @@ gdobj Settings of PanelContainer: self.state == Opened and self.margin_y != self.expanded_margin: self.resize_y(self.expanded_margin) + if self.state == Opened: + let viewport = self.get_viewport() + let width = self.approximate_full_width + if width > viewport.size.x and + (self.window.rect_size.y * 1.2) < viewport.size.y: + self.settings_container.columns = 2 + self.left_separator.size_flags_stretch_ratio = 0.0 + self.right_separator.size_flags_stretch_ratio = 0.0 + elif viewport.size.x > width + 10: + self.settings_container.columns = 4 + self.left_separator.size_flags_stretch_ratio = 0.5 + self.right_separator.size_flags_stretch_ratio = 0.5 + method input(event: InputEvent) = self.ignore_touches(event)