Fix/603 loop visualization

course/lesson-17-while-loops/visuals/PrintWhileLoop.tscn

@@ -8,24 +8,31 @@ script/source = "extends OutputConsole
 
 func run() -> void:
 	clear_messages()
+	emit_signal(\"highlight_line\", 0)
+	yield()
 	var number = 0
+	emit_signal(\"highlight_line\", 1)
+	yield()
 	while number < 4:
+		emit_signal(\"highlight_line\", 2)
+		yield()
 		print_output([number])
+		emit_signal(\"highlight_line\", 3)
+		yield()
 		number += 1
+		emit_signal(\"highlight_line\", 4)
+		yield()
 "
 
 [node name="PrintWhileLoop" type="PanelContainer"]
 margin_right = 14.0
 margin_bottom = 14.0
 size_flags_horizontal = 3
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
 [node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
 margin_left = 7.0
 margin_top = 7.0
-margin_right = 764.0
+margin_right = 788.0
 margin_bottom = 267.0
 gdscript_code = "func run():
 	var number = 0
@@ -36,8 +43,8 @@ gdscript_code = "func run():
 [node name="OutputConsole" parent="RunnableCodeExample" instance=ExtResource( 2 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_left = 648.0
-margin_right = 757.0
+margin_left = 672.0
+margin_right = 781.0
 margin_bottom = 260.0
 size_flags_horizontal = 3
 script = SubResource( 1 )

course/lesson-18-for-loops/visuals/PrintForLoop.tscn

@@ -8,22 +8,25 @@ script/source = "extends OutputConsole
 
 func run() -> void:
 	clear_messages()
+	emit_signal(\"line_highlight_requested\", 0)
+	yield()
 	for number in range(3):
+		emit_signal(\"line_highlight_requested\", 1)
+		yield()
 		print_output([number])
+		emit_signal(\"line_highlight_requested\", 2)
+		yield()
 "
 
 [node name="PrintForLoop" type="PanelContainer"]
 margin_right = 14.0
 margin_bottom = 14.0
 size_flags_horizontal = 3
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
 [node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
 margin_left = 7.0
 margin_top = 7.0
-margin_right = 764.0
+margin_right = 788.0
 margin_bottom = 267.0
 gdscript_code = "func run():
 	for number in range(3):
@@ -32,8 +35,8 @@ gdscript_code = "func run():
 [node name="OutputConsole" parent="RunnableCodeExample" instance=ExtResource( 2 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_left = 648.0
-margin_right = 757.0
+margin_left = 672.0
+margin_right = 781.0
 margin_bottom = 260.0
 size_flags_horizontal = 3
 script = SubResource( 1 )

course/lesson-19-creating-arrays/lesson.tres

@@ -1,4 +1,4 @@
-[gd_resource type="Resource" load_steps=28 format=2]
+[gd_resource type="Resource" load_steps=31 format=2]
 
 [ext_resource path="res://resources/Lesson.gd" type="Script" id=1]
 [ext_resource path="res://resources/ContentBlock.gd" type="Script" id=2]
@@ -32,7 +32,7 @@ title = ""
 type = 0
 text = "A list of values, numbers or otherwise, has a precise name in code: we call them [i]arrays[/i]. So we can say calling the [code]range()[/code] function produces an [i]array[/i] of numbers.
 
-We could directly write and use that array inside our [code]for[/code] loop instead of the [code]range()[/code] function."
+We could directly write and use that array inside our [code]for[/code] loop instead of the [code]range()[/code] function. You can run the next function step-by-step to see how it works."
 visual_element_path = ""
 reverse_blocks = false
 has_separator = false
@@ -52,11 +52,43 @@ script = ExtResource( 2 )
 content_id = "res://course/lesson-19-creating-arrays/content-QiGjB7tK.tres"
 title = ""
 type = 0
-text = "As you can see, the code still works the same."
+text = "As you can see, the code still works the same. Notice that when we create a [code]for[/code] loop, we also create a local variable to which the loop assigns one value per iteration. Above, we named it [code]number[/code] because the array we loop over contains three numbers (0, 1, and 2).
+
+But we could name it anything we'd like!"
+visual_element_path = ""
+reverse_blocks = false
+has_separator = false
+
+[sub_resource type="Resource" id=25]
+script = ExtResource( 2 )
+content_id = "res://course/lesson-19-creating-arrays/content-Gx0c7DDi.tres"
+title = ""
+type = 0
+text = ""
+visual_element_path = "res://course/lesson-19-creating-arrays/visuals/ExampleForArrayDifferentName.tscn"
+reverse_blocks = false
+has_separator = false
+
+[sub_resource type="Resource" id=26]
+script = ExtResource( 2 )
+content_id = "res://course/lesson-19-creating-arrays/content-GjB7tKRH.tres"
+title = ""
+type = 0
+text = "If we \"unwrap\" the [code]for[/code] loop above, we'd get the following code with the exact same behaviour:"
 visual_element_path = ""
 reverse_blocks = false
 has_separator = false
 
+[sub_resource type="Resource" id=27]
+script = ExtResource( 2 )
+content_id = "res://course/lesson-19-creating-arrays/content-JMQ2XNwQ.tres"
+title = ""
+type = 0
+text = ""
+visual_element_path = "res://course/lesson-19-creating-arrays/visuals/ExampleForArrayUnwrapped.tscn"
+reverse_blocks = false
+has_separator = false
+
 [sub_resource type="Resource" id=4]
 script = ExtResource( 2 )
 content_id = "res://course/lesson-19-creating-arrays/content-RHJMQ2XN.tres"
@@ -290,5 +322,5 @@ description = "Write an array to select all units on the board in this strategy
 [resource]
 script = ExtResource( 1 )
 title = "Creating arrays"
-content_blocks = [ SubResource( 1 ), SubResource( 2 ), SubResource( 18 ), SubResource( 17 ), SubResource( 3 ), SubResource( 4 ), SubResource( 24 ), SubResource( 5 ), SubResource( 19 ), SubResource( 6 ), SubResource( 7 ), SubResource( 8 ), SubResource( 9 ), SubResource( 10 ), SubResource( 11 ), SubResource( 12 ), SubResource( 13 ), SubResource( 15 ), SubResource( 20 ), SubResource( 21 ), SubResource( 16 ) ]
+content_blocks = [ SubResource( 1 ), SubResource( 2 ), SubResource( 18 ), SubResource( 17 ), SubResource( 3 ), SubResource( 25 ), SubResource( 26 ), SubResource( 27 ), SubResource( 4 ), SubResource( 24 ), SubResource( 5 ), SubResource( 19 ), SubResource( 6 ), SubResource( 7 ), SubResource( 8 ), SubResource( 9 ), SubResource( 10 ), SubResource( 11 ), SubResource( 12 ), SubResource( 13 ), SubResource( 15 ), SubResource( 20 ), SubResource( 21 ), SubResource( 16 ) ]
 practices = [ SubResource( 22 ), SubResource( 23 ) ]

course/lesson-19-creating-arrays/visuals/ExampleForArray.tscn

@@ -7,8 +7,16 @@
 script/source = "extends OutputConsole
 
 func run():
+	clear_messages()
+	emit_signal(\"line_highlight_requested\", 0)
+	yield()
 	for i in [0, 1, 2]:
+		emit_signal(\"line_highlight_requested\", 1)
+		emit_signal(\"animate_arrow_requested\", [16 + 3*i,1], [5,6])
+		yield()
 		print_output([i])
+		emit_signal(\"line_highlight_requested\", 2)
+		yield()
 "
 
 [node name="Panel" type="PanelContainer"]
@@ -19,7 +27,7 @@ size_flags_horizontal = 3
 [node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
 margin_left = 7.0
 margin_top = 7.0
-margin_right = 764.0
+margin_right = 788.0
 margin_bottom = 267.0
 gdscript_code = "func run():
 	for number in [0, 1, 2]:
@@ -28,8 +36,8 @@ gdscript_code = "func run():
 [node name="OutputConsole" parent="RunnableCodeExample" instance=ExtResource( 2 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_left = 648.0
-margin_right = 757.0
+margin_left = 672.0
+margin_right = 781.0
 margin_bottom = 260.0
 size_flags_horizontal = 3
 script = SubResource( 1 )

course/lesson-19-creating-arrays/visuals/ExampleForArrayDifferentName.tscn

@@ -0,0 +1,43 @@
+[gd_scene load_steps=4 format=2]
+
+[ext_resource path="res://ui/components/RunnableCodeExample.tscn" type="PackedScene" id=1]
+[ext_resource path="res://ui/components/OutputConsole.tscn" type="PackedScene" id=2]
+
+[sub_resource type="GDScript" id=1]
+script/source = "extends OutputConsole
+
+func run():
+	clear_messages()
+	emit_signal(\"line_highlight_requested\", 0)
+	yield()
+	for i in [0, 1, 2]:
+		emit_signal(\"line_highlight_requested\", 1)
+		emit_signal(\"animate_arrow_requested\", [17 + 3*i,1], [5,7])
+		yield()
+		print_output([i])
+		emit_signal(\"line_highlight_requested\", 2)
+		yield()
+"
+
+[node name="Panel" type="PanelContainer"]
+margin_right = 14.0
+margin_bottom = 14.0
+size_flags_horizontal = 3
+
+[node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
+margin_left = 7.0
+margin_top = 7.0
+margin_right = 788.0
+margin_bottom = 267.0
+gdscript_code = "func run():
+	for element in [0, 1, 2]:
+		print(element)"
+
+[node name="OutputConsole" parent="RunnableCodeExample" instance=ExtResource( 2 )]
+anchor_right = 0.0
+anchor_bottom = 0.0
+margin_left = 672.0
+margin_right = 781.0
+margin_bottom = 260.0
+size_flags_horizontal = 3
+script = SubResource( 1 )

course/lesson-19-creating-arrays/visuals/ExampleForArrayUnwrapped.tscn

@@ -0,0 +1,74 @@
+[gd_scene load_steps=4 format=2]
+
+[ext_resource path="res://ui/components/RunnableCodeExample.tscn" type="PackedScene" id=1]
+[ext_resource path="res://ui/components/OutputConsole.tscn" type="PackedScene" id=2]
+
+[sub_resource type="GDScript" id=1]
+script/source = "extends OutputConsole
+
+func run():
+	clear_messages()
+	emit_signal(\"line_highlight_requested\", 0)
+	yield()
+
+	var array = [0, 1, 2]
+	emit_signal(\"line_highlight_requested\", 1)
+	yield()
+
+	var number
+	emit_signal(\"line_highlight_requested\", 2)
+	yield()
+
+	number = array[0]
+	emit_signal(\"line_highlight_requested\", 4)
+	yield()
+	print_output([number])
+	emit_signal(\"line_highlight_requested\", 5)
+	yield()
+
+	number = array[1]
+	emit_signal(\"line_highlight_requested\", 7)
+	yield()
+	print_output([number])
+	emit_signal(\"line_highlight_requested\", 8)
+	yield()
+
+	number = array[2]
+	emit_signal(\"line_highlight_requested\", 10)
+	yield()
+	print_output([number])
+	emit_signal(\"line_highlight_requested\", 11)
+	yield()
+"
+
+[node name="Panel" type="PanelContainer"]
+margin_right = 14.0
+margin_bottom = 14.0
+size_flags_horizontal = 3
+
+[node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
+margin_left = 7.0
+margin_top = 7.0
+margin_right = 788.0
+margin_bottom = 267.0
+gdscript_code = "func run():
+	var array = [0, 1, 2]
+	var element
+
+	element = array[0]
+	print(element)
+
+	element = array[1]
+	print(element)
+
+	element = array[2]
+	print(element)"
+
+[node name="OutputConsole" parent="RunnableCodeExample" instance=ExtResource( 2 )]
+anchor_right = 0.0
+anchor_bottom = 0.0
+margin_left = 672.0
+margin_right = 781.0
+margin_bottom = 260.0
+size_flags_horizontal = 3
+script = SubResource( 1 )

course/lesson-19-creating-arrays/visuals/ExampleForRange.tscn

@@ -7,22 +7,26 @@
 script/source = "extends OutputConsole
 
 func run():
+	clear_messages()
+	emit_signal(\"line_highlight_requested\", 0)
+	yield()
 	for i in range(3):
+		emit_signal(\"line_highlight_requested\", 1)
+		yield()
 		print_output([i])
+		emit_signal(\"line_highlight_requested\", 2)
+		yield()
 "
 
 [node name="Panel" type="PanelContainer"]
 margin_right = 14.0
 margin_bottom = 14.0
 size_flags_horizontal = 3
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
 [node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
 margin_left = 7.0
 margin_top = 7.0
-margin_right = 764.0
+margin_right = 788.0
 margin_bottom = 267.0
 gdscript_code = "func run():
 	for number in range(3):
@@ -31,8 +35,8 @@ gdscript_code = "func run():
 [node name="OutputConsole" parent="RunnableCodeExample" instance=ExtResource( 2 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_left = 648.0
-margin_right = 757.0
+margin_left = 672.0
+margin_right = 781.0
 margin_bottom = 260.0
 size_flags_horizontal = 3
 script = SubResource( 1 )

course/lesson-19-creating-arrays/visuals/ExamplePrint.tscn

@@ -8,22 +8,25 @@ script/source = "extends OutputConsole
 
 func run() -> void:
 	clear_messages()
+	emit_signal(\"line_highlight_requested\", 0)
+	yield()
 	for number in range(3):
+		emit_signal(\"line_highlight_requested\", 1)
+		yield()
 		print_output([number])
+		emit_signal(\"line_highlight_requested\", 2)
+		yield()
 "
 
 [node name="PrintForLoop" type="PanelContainer"]
 margin_right = 14.0
 margin_bottom = 14.0
 size_flags_horizontal = 3
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
 [node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
 margin_left = 7.0
 margin_top = 7.0
-margin_right = 764.0
+margin_right = 788.0
 margin_bottom = 267.0
 gdscript_code = "func run():
 	for number in range(3):
@@ -32,8 +35,8 @@ gdscript_code = "func run():
 [node name="OutputConsole" parent="RunnableCodeExample" instance=ExtResource( 2 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_left = 648.0
-margin_right = 757.0
+margin_left = 672.0
+margin_right = 781.0
 margin_bottom = 260.0
 size_flags_horizontal = 3
 script = SubResource( 1 )