improvement: redesign modulo examples to be more intuitive (#437)

fixes #430

course/lesson-15-modulo/visuals/ExampleModulo.tscn

@@ -7,27 +7,16 @@
 script/source = "tool
 extends RunnableCodeExample
 
+
 func _ready():
 	yield(self, \"ready\")
-	var number_slider = create_slider_for(\"number\", 1, 7, 1)
-	var modulo_slider = create_slider_for(\"modulo\", 1, 7, 1)
-	_scene_instance.connect(\"number_changed\", self, \"_on_number_changed\", [number_slider])
-	_scene_instance.connect(\"modulo_changed\", self, \"_on_modulo_changed\", [modulo_slider])
+	var number_slider = create_slider_for(\"number\", 1, 7, 1, _scene_instance.number_color)
+	var modulo_slider = create_slider_for(\"modulo\", 1, 7, 1, _scene_instance.modulo_color)
 
 
 func _set_instance_value(value: float, property_name: String, value_label: Label) -> void:
 	._set_instance_value(value, property_name, value_label)
 	_gdscript_text_edit.text = gdscript_code.replace(property_name, \"%s [=%s]\"%[property_name, value])
-
-
-func _on_number_changed(number: int, slider: HSlider) -> void:
-	if slider.value != number:
-		slider.value = number
-
-
-func _on_modulo_changed(modulo: int, slider: HSlider) -> void:
-	if slider.value != modulo:
-		slider.value = modulo
 "
 
 [node name="ExampleModulo" type="PanelContainer"]
@@ -37,15 +26,15 @@ margin_bottom = 14.0
 [node name="RunnableCodeExample" parent="." instance=ExtResource( 1 )]
 margin_left = 7.0
 margin_top = 7.0
-margin_right = 307.0
+margin_right = 387.0
 margin_bottom = 387.0
 script = SubResource( 1 )
 scene = ExtResource( 2 )
 
 [node name="Frame" parent="RunnableCodeExample" index="0"]
-margin_right = 300.0
+margin_right = 380.0
 margin_bottom = 380.0
-rect_min_size = Vector2( 300, 380 )
+rect_min_size = Vector2( 380, 380 )
 
 [node name="ResetButton" parent="RunnableCodeExample/Frame/HBoxContainer" index="0"]
 visible = false

course/lesson-15-modulo/visuals/Modulo.gd

@@ -1,77 +1,60 @@
 tool
 extends Node2D
 
-const color_green := Color("3dff6e")
-const color_red := Color("928fb8")
 
-export var _offset := Vector2.ZERO
-export (int, 1, 7) var number := 5 setget _set_number, get_number
-export (int, 1, 7) var modulo := 3 setget _set_modulo, get_modulo
+const NORMAL_STYLEBOX := preload("res://course/lesson-15-modulo/visuals/Modulo/normal_stylebox.tres")
+const REMAINDER_STYLEBOX := preload("res://course/lesson-15-modulo/visuals/Modulo/remainder_stylebox.tres")
+const MODULO_SIZE_X := 48
+const MODULO_GAP := 4
 
-onready var _blocks := $Blocks
-onready var _string := $String
-onready var _remainder := $Remainder
+export (int, 1, 7) var number := 5 setget _set_number
+export (int, 1, 7) var modulo := 3 setget _set_modulo
 
+var number_color := Color.black
+var modulo_color := Color.black
+
+onready var _result := $Result as Control
+onready var _result_blocks := $Result/HBoxContainerBlocks as HBoxContainer
+onready var _result_modulo := $Result/HBoxContainerModulo as HBoxContainer
+onready var _string := $String as RichTextLabel
+onready var _remainder := $Remainder as Label
 
 func _ready() -> void:
-	_align_blocks()
+	number_color = NORMAL_STYLEBOX.border_color
+	modulo_color = _result_modulo.get_child(0).get_stylebox("panel").border_color
 	_update_visual()
 
 
-func _align_blocks() -> void:
-	for c in _blocks.get_children():
-		c.modulate.a = 0.0
-
-	var row := 0
-	var column := 0
-	for i in range(max(number, modulo)):
-		_blocks.get_child(i).position = Vector2(40 * column, row * 40) + _offset
-		row += 1
-		if row % modulo == 0 and modulo < number:
-			column += 1
-			row = 0
-
-
 func _update_visual() -> void:
-	if number >= modulo:
-		for i in range(number):
-			_blocks.get_child(i).modulate.a = 0
-			if i < number - (number % modulo):
-				_blocks.get_child(i).modulate = color_red
-			else:
-				_blocks.get_child(i).modulate = color_green
-	else:
-		for i in range(modulo):
-			_blocks.get_child(i).modulate = color_green
-
-			if i >= number:
-				_blocks.get_child(i).modulate = color_red
-
-	_string.text = "%s %% %s" % [number, modulo]
+	var remainder := number % modulo
+	var cap := max(number, remainder)
+	for i in range(_result_blocks.get_child_count()):
+		var block: Panel = _result_blocks.get_child(i)
+		block.visible = i < cap
+		block.add_stylebox_override("panel", NORMAL_STYLEBOX if i < number - remainder else REMAINDER_STYLEBOX)
+
+	var rest := int(number / modulo)
+	for i in range(_result_modulo.get_child_count()):
+		var modulo_highlight: Panel = _result_modulo.get_child(i)
+		modulo_highlight.visible = i < rest
+		modulo_highlight.rect_min_size.x = MODULO_SIZE_X * modulo + MODULO_GAP * (modulo - 1)
+
+	_string.bbcode_text = (
+		"[center][color=#%s]%s[/color] %% [color=#%s]%s[/color][/center]" %
+		[number_color.to_html(), number, modulo_color.to_html(), modulo]
+	)
 	_remainder.text = "Remainder: %s" % [number % modulo]
 
 
 func _set_number(value: int) -> void:
 	number = value
-	emit_signal("number_changed", value)
-	if not _blocks:
+	if not _result:
 		return
-	_align_blocks()
 	_update_visual()
 
 
 func _set_modulo(value: int) -> void:
 	modulo = value
-	emit_signal("modulo_changed", value)
-	if not _blocks:
+	if not _result:
 		return
-	_align_blocks()
 	_update_visual()
-
-
-func get_number() -> int:
-	return number
-
-
-func get_modulo() -> int:
-	return modulo