fix: redraw ArrayView when (un)maximizing window

To accomplish this, ArrayView now uses manually positioned Polygon2Ds
instead of ColorRects because Controls turned out to be extremely
finnicky to work with. Also changed default window size to 1280x720 for
convenience on smaller screens and refactored scenes/levels.tscn.

Author: danielzting

assets/theme.theme

@@ -75,8 +75,8 @@ GlobalTheme="*res://scripts/theme.gd"
 
 [display]
 
-window/size/width=1920
-window/size/height=1080
+window/size/width=1280
+window/size/height=720
 window/size/always_on_top=true
 window/dpi/allow_hidpi=true
 window/stretch/mode="2d"

project.godot

@@ -5,9 +5,8 @@
 [ext_resource path="res://scripts/border.gd" type="Script" id=3]
 
 [node name="Viewport" type="MarginContainer"]
-anchor_top = 0.00114754
 anchor_right = 1.0
-anchor_bottom = 1.00115
+anchor_bottom = 1.0
 theme = ExtResource( 2 )
 custom_constants/margin_right = 30
 custom_constants/margin_top = 30
@@ -20,61 +19,63 @@ __meta__ = {
 [node name="LevelSelect" type="HBoxContainer" parent="."]
 margin_left = 30.0
 margin_top = 30.0
-margin_right = 1890.0
-margin_bottom = 1050.0
+margin_right = 1250.0
+margin_bottom = 690.0
 script = ExtResource( 1 )
 
 [node name="LevelsBorder" type="MarginContainer" parent="LevelSelect"]
-margin_right = 480.0
-margin_bottom = 1020.0
-rect_min_size = Vector2( 480, 0 )
+margin_right = 303.0
+margin_bottom = 660.0
+size_flags_horizontal = 3
 script = ExtResource( 3 )
 
 [node name="Levels" type="VBoxContainer" parent="LevelSelect/LevelsBorder"]
 margin_left = 20.0
 margin_top = 20.0
-margin_right = 460.0
-margin_bottom = 1000.0
+margin_right = 283.0
+margin_bottom = 640.0
 
 [node name="Preview" type="VBoxContainer" parent="LevelSelect"]
-margin_left = 488.0
-margin_right = 1860.0
-margin_bottom = 1020.0
+margin_left = 311.0
+margin_right = 1220.0
+margin_bottom = 660.0
 size_flags_horizontal = 3
+size_flags_stretch_ratio = 3.0
 
 [node name="Display" type="MarginContainer" parent="LevelSelect/Preview"]
-margin_right = 1372.0
-margin_bottom = 640.0
-rect_min_size = Vector2( 0, 640 )
+margin_right = 909.0
+margin_bottom = 434.0
+size_flags_vertical = 3
+size_flags_stretch_ratio = 2.0
 script = ExtResource( 3 )
 
 [node name="InfoBorder" type="MarginContainer" parent="LevelSelect/Preview"]
-margin_top = 648.0
-margin_right = 1372.0
-margin_bottom = 1020.0
+margin_top = 442.0
+margin_right = 909.0
+margin_bottom = 660.0
 size_flags_vertical = 3
 script = ExtResource( 3 )
 
 [node name="Info" type="HBoxContainer" parent="LevelSelect/Preview/InfoBorder"]
 margin_left = 20.0
 margin_top = 20.0
-margin_right = 1352.0
-margin_bottom = 352.0
+margin_right = 889.0
+margin_bottom = 198.0
 custom_constants/separation = 50
 
 [node name="About" type="Label" parent="LevelSelect/Preview/InfoBorder/Info"]
-margin_right = 810.0
-margin_bottom = 332.0
-rect_min_size = Vector2( 810, 0 )
+margin_right = 546.0
+margin_bottom = 178.0
+size_flags_horizontal = 3
 size_flags_vertical = 3
+size_flags_stretch_ratio = 2.0
 text = "This is a short description of the algorithm. It should tell how it works in a simple yet complete way and explain its relevance in computer science. It should be accessible to the layman while not being oversimplifying."
 autowrap = true
 
 [node name="Controls" type="Label" parent="LevelSelect/Preview/InfoBorder/Info"]
-margin_left = 860.0
-margin_right = 1332.0
-margin_bottom = 332.0
-rect_min_size = Vector2( 450, 0 )
+margin_left = 596.0
+margin_right = 869.0
+margin_bottom = 178.0
 size_flags_horizontal = 3
 size_flags_vertical = 3
 text = "These are the controls for the level. They should be tailored to each level for maximum efficiency and simplicity."

scenes/levels.tscn

@@ -21,50 +21,50 @@ __meta__ = {
 [node name="MainMenu" type="VBoxContainer" parent="."]
 margin_left = 40.0
 margin_top = 30.0
-margin_right = 1879.0
-margin_bottom = 1049.0
+margin_right = 1239.0
+margin_bottom = 689.0
 script = ExtResource( 1 )
 
 [node name="Title" type="Label" parent="MainMenu"]
-margin_right = 1839.0
-margin_bottom = 38.0
+margin_right = 1199.0
+margin_bottom = 19.0
 text = "Human Computer Simulator"
 uppercase = true
 
 [node name="Display" type="MarginContainer" parent="MainMenu"]
-margin_top = 46.0
-margin_right = 1839.0
-margin_bottom = 965.0
+margin_top = 27.0
+margin_right = 1199.0
+margin_bottom = 624.0
 size_flags_vertical = 3
 script = ExtResource( 3 )
 __meta__ = {
 "_edit_use_anchors_": false
 }
 
 [node name="Spacing" type="Control" parent="MainMenu"]
-margin_top = 973.0
-margin_right = 1839.0
-margin_bottom = 973.0
+margin_top = 632.0
+margin_right = 1199.0
+margin_bottom = 632.0
 
 [node name="Buttons" type="HBoxContainer" parent="MainMenu"]
-margin_left = 555.0
-margin_top = 981.0
-margin_right = 1283.0
-margin_bottom = 1019.0
+margin_left = 289.0
+margin_top = 640.0
+margin_right = 909.0
+margin_bottom = 659.0
 size_flags_horizontal = 4
 custom_constants/separation = 500
 
 [node name="Start" type="Button" parent="MainMenu/Buttons"]
-margin_right = 95.0
-margin_bottom = 38.0
+margin_right = 50.0
+margin_bottom = 19.0
 size_flags_horizontal = 4
 text = "start"
 flat = true
 
 [node name="Credits" type="Button" parent="MainMenu/Buttons"]
-margin_left = 595.0
-margin_right = 728.0
-margin_bottom = 38.0
+margin_left = 550.0
+margin_right = 620.0
+margin_bottom = 19.0
 text = "credits"
 
 [node name="Timer" type="Timer" parent="."]

scenes/menu.tscn

@@ -13,18 +13,18 @@ var _timer = Timer.new()
 var _color_changes = 0
 
 func _ready():
-    """Time last return to green with reenabling of controls."""
+    # Time last return to green with reenabling of controls
     _timer.wait_time = ComparisonSort.DISABLE_TIME / COLOR_CHANGES
     _timer.connect("timeout", self, "_on_Timer_timeout")
     add_child(_timer)
 
 func flash():
-    """Immediately flash red and then start timer."""
+    # Immediately flash red and then start timer
     _on_Timer_timeout()
     _timer.start()
 
 func _on_Timer_timeout():
-    """Switch between green and red."""
+    # Switch between green and red
     if _color_changes == COLOR_CHANGES:
         _timer.stop()
         _color_changes = 0
@@ -35,5 +35,4 @@ func _on_Timer_timeout():
     update()
 
 func _draw():
-    """Draw the border."""
     draw_rect(Rect2(Vector2(), rect_size), _color, false, WIDTH)

scripts/border.gd

@@ -9,7 +9,6 @@ const LEVELS = [
 var _level: ComparisonSort
 
 func _ready():
-    """Dynamically load level data."""
     for level in LEVELS:
         var button = Button.new()
         button.text = level.NAME
@@ -30,8 +29,7 @@ func _ready():
         top_button.grab_focus()
 
 func _on_Button_focus_changed():
-    """Initialize the preview section."""
-    _level = get_level(get_focus_owner().text).new(ArrayModel.new())
+    _level = _get_level(get_focus_owner().text).new(ArrayModel.new())
     _level.active = false
     $Preview/InfoBorder/Info/About.text = _cleanup(_level.ABOUT)
     $Preview/InfoBorder/Info/Controls.text = _cleanup(_level.CONTROLS)
@@ -43,9 +41,9 @@ func _on_Button_focus_changed():
     $Preview/Display.add_child(ArrayView.new(_level))
 
 func _on_Button_pressed(name):
-    GlobalScene.change_scene("res://scenes/play.tscn", {"level": get_level(name)})
+    GlobalScene.change_scene("res://scenes/play.tscn", {"level": _get_level(name)})
 
-func get_level(name):
+func _get_level(name):
     for level in LEVELS:
         if level.NAME == name:
             return level

scripts/levels.gd

@@ -6,51 +6,48 @@ class_name ArrayView
 extends HBoxContainer
 
 const SWAP_DURATION = 0.1
+const SEPARATION = 8
 
 var _tween = Tween.new()
 var _level: ComparisonSort
 var _rects = []
-# Save initial positions to prevent animation race condition
-var _positions = []
+var _unit_width: int
 var _unit_height: int
 
 func _init(level):
-    """Add colored rectangles."""
     _level = level
-    _level.array.connect("swapped", self, "_on_ArrayModel_swapped")
     add_child(_level) # NOTE: This is necessary for it to read input
-    for i in range(level.array.size):
-        var rect = ColorRect.new()
-        rect.size_flags_horizontal = Control.SIZE_EXPAND_FILL
-        rect.size_flags_vertical = Control.SIZE_SHRINK_END
-        _rects.append(rect)
-        add_child(rect)
     add_child(_tween) # NOTE: This is necessary for it to animate
-    _positions.resize(_level.array.size)
 
 func _ready():
-    _level.connect("mistake", get_parent(), "flash")
-
-func _draw():
-    # HACK: Workaround for resized signal not firing when window resized
+    yield(get_tree(), "idle_frame")
+    _unit_width = rect_size.x / _level.array.size
     _unit_height = rect_size.y / _level.array.size
-    for i in range(_rects.size()):
-        _rects[i].rect_scale.y = -1
-        _positions[i] = _rects[i].rect_position
+    _level.connect("mistake", get_parent(), "flash")
+    for i in range(_level.array.size):
+        var rect = Polygon2D.new()
+        rect.polygon = [
+            Vector2(0, 0),
+            Vector2(0, rect_size.y),
+            Vector2(_unit_width - SEPARATION, rect_size.y),
+            Vector2(_unit_width - SEPARATION, 0),
+        ]
+        rect.position = Vector2(i * _unit_width, rect_size.y)
+        _rects.append(rect)
+        add_child(rect)
+    _level.array.connect("swapped", self, "_on_ArrayModel_swapped")
 
 func _process(delta):
-    """Update heights of rectangles based on array values."""
     for i in range(_rects.size()):
         _rects[i].color = _level.get_effect(i)
-        _rects[i].rect_size.y =  _level.array.at(i) * _unit_height
+        _rects[i].scale.y = -float(_level.array.at(i)) / _level.array.size
 
 func _on_ArrayModel_swapped(i, j):
-    """Produce a swapping animation."""
     var time = SWAP_DURATION * (1 + float(j - i) / _level.array.size)
     _tween.interpolate_property(
-        _rects[i], "rect_position", null, _positions[j], time)
+        _rects[i], "position:x", null, j * _unit_width, time)
     _tween.interpolate_property(
-        _rects[j], "rect_position", null, _positions[i], time)
+        _rects[j], "position:x", null, i * _unit_width, time)
     var temp = _rects[i]
     _rects[i] = _rects[j]
     _rects[j] = temp