feat: add sorting animation to merge sort

To do so, ArrayView had to be refactored to inherit Viewport so as to
hide rectangles outside of the display bounds.

Closes #2

Author: danielzting

levels/merge_sort.gd

@@ -31,18 +31,22 @@ func next(action):
     if _left == _get_middle():
         if action != null and action != ACTIONS.RIGHT:
             return emit_signal("mistake")
+        array.emit_signal("removed", _right)
         _right += 1
     elif _right == _get_end():
         if action != null and action != ACTIONS.LEFT:
             return emit_signal("mistake")
+        array.emit_signal("removed", _left)
         _left += 1
     elif array.at(_left) <= array.at(_right):
         if action != null and action != ACTIONS.LEFT:
             return emit_signal("mistake")
+        array.emit_signal("removed", _left)
         _left += 1
     else:
         if action != null and action != ACTIONS.RIGHT:
             return emit_signal("mistake")
+        array.emit_signal("removed", _right)
         _right += 1
     # If both ends have been reached, merge and advance to next block
     if _left == _get_middle() and _right == _get_end():

models/array_model.gd

@@ -1,7 +1,10 @@
 class_name ArrayModel
 extends Reference
 
-signal swapped(i, j) # where i <= j
+# For all parameterized signals, i <= j
+signal removed(i)
+signal swapped(i, j)
+signal sorted(i, j)
 
 var _array = []
 var size = 0 setget , get_size
@@ -38,6 +41,7 @@ func sort(i, j):
     sorted.sort()
     var back = _array.slice(j, size - 1) if j != size else []
     _array = front + sorted + back
+    emit_signal("sorted", i, j)
 
 func get_size():
     return _array.size()

project.godot

@@ -14,7 +14,7 @@ _global_script_classes=[ {
 "language": "GDScript",
 "path": "res://models/array_model.gd"
 }, {
-"base": "HBoxContainer",
+"base": "ViewportContainer",
 "class": "ArrayView",
 "language": "GDScript",
 "path": "res://views/array_view.gd"

views/array_view.gd

@@ -3,25 +3,30 @@ Visualization of an array as rectangles of varying heights.
 """
 
 class_name ArrayView
-extends HBoxContainer
+extends ViewportContainer
 
-const SWAP_DURATION = 0.1
+const ANIM_DURATION = 0.1
 
 var _tween = Tween.new()
 var _level: ComparisonSort
 var _rects = []
 var _positions = []
 var _unit_width: int
 var _unit_height: int
+var _viewport = Viewport.new()
 onready var _separation = 128 / _level.array.size
 
 func _init(level):
     _level = level
+    stretch = true
+    _viewport.usage = Viewport.USAGE_2D
     add_child(_level) # NOTE: This is necessary for it to read input
     add_child(_tween) # NOTE: This is necessary for it to animate
+    add_child(_viewport)
 
 func _ready():
     yield(get_tree(), "idle_frame")
+    _viewport.size = rect_size
     _unit_width = rect_size.x / _level.array.size
     _unit_height = rect_size.y / _level.array.size
     # Keep track of accumulated pixel error from integer division
@@ -45,16 +50,17 @@ func _ready():
         _positions.append(x)
         x += _unit_width
         _rects.append(rect)
-        add_child(rect)
+        _viewport.add_child(rect)
     _level.array.connect("swapped", self, "_on_ArrayModel_swapped")
+    _level.array.connect("sorted", self, "_on_ArrayModel_sorted")
 
 func _process(delta):
     for i in range(_rects.size()):
         _rects[i].color = _level.get_effect(i)
         _rects[i].scale.y = -float(_level.array.at(i)) / _level.array.size
 
 func _on_ArrayModel_swapped(i, j):
-    var time = SWAP_DURATION * (1 + float(j - i) / _level.array.size)
+    var time = ANIM_DURATION * (1 + float(j - i) / _level.array.size)
     _tween.interpolate_property(
         _rects[i], "position:x", null, _positions[j], time)
     _tween.interpolate_property(
@@ -63,3 +69,11 @@ func _on_ArrayModel_swapped(i, j):
     _rects[i] = _rects[j]
     _rects[j] = temp
     _tween.start()
+
+func _on_ArrayModel_sorted(i, j):
+    for x in range(i, j):
+        _rects[x].position.y = 0
+    for x in range(i, j):
+        _tween.interpolate_property(
+            _rects[x], "position:y", null, rect_size.y, ANIM_DURATION)
+    _tween.start()