Add animations to popups, points, songs, the winner and the tabs (#48)

Popups fade in while growing and close the reverse way, with the backdrop
fading along. The winner gets confetti, bouncing pictures and a score graph
that draws itself from the left. Filtered statistics cards and search rows
fade in, the tabs slide in from their side, and every button bounces on hover
and click (ButtonBounce, now added to all buttons).

In the player list the score pops on every point, the first point flashes the
row, and a player on match point glows with a "Match point!" tag. A song
starting fades in the title, flashes its row (kept across list rebuilds) and
pops the play button.

Common/anim.gd holds the helpers. A saved "Reduce animations" switch in
Settings turns all movement off; the tests use it. The flash colours are
theme colours (Palette first_point, match_point, flash) in every theme.

Closes #48

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

popups/SettingsPopup.tscn

@@ -164,6 +164,13 @@ layout_mode = 2
 focus_mode = 0
 text = "Fullscreen"
 
+[node name="ReduceAnimationsButton" type="CheckButton" parent="SettingsPanel/VBoxContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+focus_mode = 0
+action_mode = 0
+text = "Reduce animations"
+
 [node name="CacheRow" type="HBoxContainer" parent="SettingsPanel/VBoxContainer" unique_id=658210492]
 layout_mode = 2
 

popups/base_popup.gd

@@ -4,32 +4,79 @@ extends Control
 ##
 ## Clicking outside [member panel] closes it. Popups that need to prepare or clean up
 ## override [method open] or [method close] and call [code]super()[/code].
+##
+## The panel fades in while growing from [constant START_SCALE] of its size, and closing
+## does the reverse; the popup is hidden once that has finished. See [Anim].
+
+## Emitted when the popup opens, also when it is opened again while closing.
+signal opening
+## Emitted when the popup starts closing, before it is hidden, so the backdrop can fade
+## out with it.
+signal closing
+
+## How big the panel starts when it opens, and ends when it closes.
+const START_SCALE: float = 0.95
 
 ## The visible part of the popup. Clicks outside it close the popup.
-
 @export var panel: Control
 
+## True while the popup is fading out after [method close].
+var is_closing: bool = false
+
 
 ## Shows the popup.
 func open() -> void:
+	is_closing = false
 	visible = true
+	opening.emit()
+	var open_tween: Tween = Anim.tween(panel, &"popup")
+	panel.modulate.a = 1.0
+	panel.scale = Vector2.ONE
+	if open_tween == null:
+		return
+	Anim.center_pivot(panel)
+	panel.modulate.a = 0.0
+	panel.scale = Vector2.ONE * START_SCALE
+	open_tween.set_parallel()
+	open_tween.tween_property(panel, "modulate:a", 1.0, Anim.NORMAL)
+	open_tween.tween_property(panel, "scale", Vector2.ONE, Anim.NORMAL) \
+			.set_trans(Tween.TRANS_QUAD).set_ease(Tween.EASE_OUT)
 
 
 ## Hides the popup.
 func close() -> void:
-	visible = false
+	if !visible || is_closing:
+		return
+	is_closing = true
+	closing.emit()
+	var close_tween: Tween = Anim.tween(panel, &"popup")
+	if close_tween == null:
+		_hide()
+		return
+	Anim.center_pivot(panel)
+	close_tween.set_parallel()
+	close_tween.tween_property(panel, "modulate:a", 0.0, Anim.FAST)
+	close_tween.tween_property(panel, "scale", Vector2.ONE * START_SCALE, Anim.FAST)
+	close_tween.chain().tween_callback(_hide)
 
 
 ## Opens the popup if it is closed and closes it if it is open.
 func toggle() -> void:
-	if visible:
+	if visible && !is_closing:
 		close()
 	else:
 		open()
 
 
+func _hide() -> void:
+	is_closing = false
+	visible = false
+	panel.modulate.a = 1.0
+	panel.scale = Vector2.ONE
+
+
 func _input(event: InputEvent) -> void:
-	if !visible || !(event is InputEventMouseButton) || !event.pressed:
+	if !visible || is_closing || !(event is InputEventMouseButton) || !event.pressed:
 		return
 	var click: InputEventMouseButton = panel.make_input_local(event)
 	if !Rect2(Vector2.ZERO, panel.size).has_point(click.position):

popups/popup_backdrop.gd

@@ -23,6 +23,8 @@ static func add_to(parent: Control, popups: Array[BasePopup]) -> PopupBackdrop:
 	for popup: BasePopup in popups:
 		parent.move_child(popup, -1)
 		popup.visibility_changed.connect(backdrop._update)
+		popup.closing.connect(backdrop._on_popup_closing)
+		popup.opening.connect(backdrop._on_popup_opening)
 	backdrop._update()
 	return backdrop
 
@@ -34,4 +36,25 @@ func _notification(what: int) -> void:
 
 
 func _update() -> void:
+	var was_visible: bool = visible
 	visible = _popups.any(func(popup: BasePopup) -> bool: return popup.visible)
+	if visible && !was_visible:
+		Anim.fade_in(self)
+
+
+# A popup opened again while closing stops the backdrop fading out
+func _on_popup_opening() -> void:
+	var fade_tween: Tween = Anim.tween(self, &"fade")
+	if fade_tween == null || modulate.a >= 1.0:
+		modulate.a = 1.0
+		return
+	fade_tween.tween_property(self, "modulate:a", 1.0, Anim.FAST)
+
+
+# Fades out with the last open popup, which hides the backdrop when it has closed
+func _on_popup_closing() -> void:
+	if _popups.any(func(popup: BasePopup) -> bool: return popup.visible && !popup.is_closing):
+		return
+	var fade_tween: Tween = Anim.tween(self, &"fade")
+	if fade_tween != null:
+		fade_tween.tween_property(self, "modulate:a", 0.0, Anim.FAST)

popups/score_graph.gd

@@ -15,6 +15,13 @@ const MARGIN_BOTTOM: float = 44.0
 ## About how many song numbers fit along the bottom.
 const MAX_SONG_LABELS: int = 20
 
+## How much of the lines is drawn, from 0 (none) to 1 (all), so they can be drawn from
+## left to right.
+var progress: float = 1.0:
+	set(value):
+		progress = value
+		queue_redraw()
+
 var _history: ScoreHistory
 var _winning_score: int = 0
 
@@ -33,6 +40,32 @@ func show_history(history: ScoreHistory, winning_score: int) -> void:
 	queue_redraw()
 
 
+## Draws the lines from left to right over [param duration] seconds.
+func draw_lines_in(duration: float = 1.2) -> void:
+	var draw_tween: Tween = Anim.tween(self, &"draw")
+	progress = 1.0
+	if draw_tween == null:
+		return
+	progress = 0.0
+	draw_tween.tween_property(self, "progress", 1.0, duration) \
+			.set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_IN_OUT)
+
+
+## The part of [param points] left of [param limit_x], cut where the line crosses it.
+static func clip_line(points: PackedVector2Array, limit_x: float) -> PackedVector2Array:
+	var clipped: PackedVector2Array = []
+	for i: int in points.size():
+		if points[i].x <= limit_x:
+			clipped.append(points[i])
+			continue
+		if i > 0 && points[i - 1].x < limit_x:
+			var before: Vector2 = points[i - 1]
+			var weight: float = (limit_x - before.x) / (points[i].x - before.x)
+			clipped.append(before.lerp(points[i], weight))
+		break
+	return clipped
+
+
 ## The colour of the player at [param index] in the player list.
 func player_color(index: int) -> Color:
 	return get_theme_color(StringName("player_%d" % (index % 7 + 1)), THEME_TYPE)
@@ -63,13 +96,20 @@ func _draw() -> void:
 
 	var line_width: int = get_theme_constant(&"line_width", THEME_TYPE)
 	var dot_radius: int = get_theme_constant(&"dot_radius", THEME_TYPE)
+	var limit_x: float = lerpf(MARGIN_LEFT, size.x - MARGIN_RIGHT, progress)
 	for index: int in _history.players.size():
 		var color: Color = player_color(index)
 		var scores: Array[int] = _history.scores_after_songs(_history.players[index].id)
-		draw_polyline(line_points(index), color, line_width, true)
+		var points: PackedVector2Array = clip_line(line_points(index), limit_x)
+		if points.size() >= 2:
+			draw_polyline(points, color, line_width, true)
 		for song: int in range(1, scores.size()):
-			if scores[song] > scores[song - 1]:
-				draw_circle(_point(song, scores[song], index), dot_radius, color)
+			var dot: Vector2 = _point(song, scores[song], index)
+			if scores[song] > scores[song - 1] && dot.x <= limit_x:
+				draw_circle(dot, dot_radius, color)
+	# The final scores are written once the lines have reached them
+	if progress < 1.0:
+		return
 	var label_positions: Array[Vector2] = score_label_positions()
 	for index: int in _history.players.size():
 		draw_string(font, label_positions[index],

popups/search_popup.gd

@@ -54,6 +54,9 @@ func search() -> void:
 		var row: PanelContainer = _rows[shown[position]]
 		if row.get_index() != position:
 			search_results.move_child(row, position)
+		# Rows that come back with the search fade in
+		if !row.visible:
+			Anim.fade_in(row, Anim.FAST)
 		row.visible = true
 		row.theme_type_variation = &"ListRowOdd" if position % 2 != 0 else &"ListRowEven"
 		_show_name(row, soundtracks[shown[position]], search_text)

popups/settings_popup.gd

@@ -1,7 +1,7 @@
 class_name SettingsPopup
 extends BasePopup
 ## The application settings: which MusicServer or music folder to play from, the theme,
-## fullscreen, how many songs to download ahead, whether to prefer less played soundtracks
+## fullscreen, fewer animations, how many songs to download ahead, whether to prefer less played soundtracks
 ## and whether plays count in the statistics, and a button that opens the folder the
 ## settings are kept in. Opened from the Settings button in the top bar.
 ##
@@ -25,6 +25,7 @@ const PADDING: Vector2 = Vector2(20, 12)
 @onready var settings_panel: Panel = %SettingsPanel
 @onready var select_server_button: OptionButton = %SelectServerButton
 @onready var fullscreen_button: CheckButton = %FullscreenButton
+@onready var reduce_animations_button: CheckButton = %ReduceAnimationsButton
 @onready var theme_button: OptionButton = %ThemeButton
 @onready var cache_label: Label = %CacheLabel
 @onready var lower_cache_button: Button = %LowerCacheButton
@@ -66,6 +67,8 @@ func _ready() -> void:
 	cache_label.text = str(Playlist.number_of_tracks_to_preload)
 
 	fullscreen_button.pressed.connect(fullscreen)
+	reduce_animations_button.button_pressed = Settings.reduce_animations
+	reduce_animations_button.toggled.connect(set_reduce_animations)
 	choose_folder_button.pressed.connect(folder_dialog.popup_centered)
 	folder_dialog.dir_selected.connect(use_music_folder)
 	use_server_button.pressed.connect(use_server)
@@ -93,6 +96,12 @@ func select_theme(index: int) -> void:
 	Settings.apply_theme(Settings.THEMES[index].id)
 
 
+## Turns every animation off or on, and saves it.
+func set_reduce_animations(on: bool) -> void:
+	Settings.reduce_animations = on
+	Settings.save_settings()
+
+
 func fullscreen() -> void:
 	Settings.set_fullscreen(!Settings.fullscreen)
 

popups/sync_popup.gd

@@ -56,7 +56,7 @@ func show_section_if_has_data(data: Variant, vbox: VBoxContainer, separator: VSe
 
 func start_sync() -> void:
 	GameLog.debug("start_sync")
-	visible = true
+	open()
 	if has_synced:
 		# Already synced, just show the results
 		show_sync_result()

popups/winner_popup.gd

@@ -2,7 +2,12 @@ class_name WinnerPopup
 extends BasePopup
 ## Shows who won, with their character, where the other players placed, and how the game
 ## went: a graph of everyone's score after each song and a few facts about it.
+##
+## The winners' pictures bounce in, confetti falls over the panel and the graph draws its
+## lines from left to right. See [Anim].
 
+## How many pieces of confetti fly when someone wins.
+const CONFETTI_AMOUNT: int = 160
 ## Size of the coloured square in front of each name in the legend.
 const LEGEND_SQUARE_SIZE: Vector2 = Vector2(14, 14)
 
@@ -29,7 +34,7 @@ func show_winner(winner: PlayerObject) -> void:
 ## Shows [param winners], who share the top score, with everyone else's placing below.
 ## Tied players get the same placing. With no players, it says the quiz is over.
 func show_winners(winners: Array[PlayerObject]) -> void:
-	visible = true
+	open()
 	winner_label.text = winners_text(winners)
 	_show_pictures(winners)
 
@@ -49,6 +54,7 @@ func show_winners(winners: Array[PlayerObject]) -> void:
 		players_list.add_child(label)
 
 	show_history(ScoreHistory.from_playlist(Settings.player_array))
+	_celebrate()
 
 
 ## The headline for [param winners], e.g. "Crono won with 5 points!!" or "Crono and
@@ -80,6 +86,51 @@ static func placing(player: PlayerObject) -> int:
 	return place
 
 
+# The winners' pictures bounce in, confetti flies and the graph draws itself
+func _celebrate() -> void:
+	for picture: Node in winner_picture.get_parent().get_children():
+		if picture is TextureRect && (picture as TextureRect).visible:
+			Anim.bounce_in(picture)
+	score_graph.draw_lines_in()
+	if Anim.enabled():
+		_throw_confetti()
+
+
+# A burst of confetti from the top of the panel, in the players' graph colours
+func _throw_confetti() -> void:
+	var old: Node = winner_panel.get_node_or_null("Confetti")
+	if old != null:
+		old.free()
+	var confetti: CPUParticles2D = CPUParticles2D.new()
+	confetti.name = "Confetti"
+	confetti.position = Vector2(winner_panel.size.x / 2, 0)
+	confetti.emission_shape = CPUParticles2D.EMISSION_SHAPE_RECTANGLE
+	confetti.emission_rect_extents = Vector2(winner_panel.size.x / 2, 4)
+	confetti.amount = CONFETTI_AMOUNT
+	confetti.lifetime = 2.6
+	confetti.one_shot = true
+	confetti.explosiveness = 0.85
+	confetti.direction = Vector2.DOWN
+	confetti.spread = 35.0
+	confetti.gravity = Vector2(0, 260)
+	confetti.initial_velocity_min = 80.0
+	confetti.initial_velocity_max = 260.0
+	confetti.angular_velocity_min = -360.0
+	confetti.angular_velocity_max = 360.0
+	confetti.scale_amount_min = 5.0
+	confetti.scale_amount_max = 9.0
+	var colours: Gradient = Gradient.new()
+	colours.interpolation_mode = Gradient.GRADIENT_INTERPOLATE_CONSTANT
+	colours.offsets = PackedFloat32Array()
+	colours.colors = PackedColorArray()
+	for i: int in 7:
+		colours.add_point(i / 7.0, score_graph.player_color(i))
+	confetti.color_initial_ramp = colours
+	confetti.finished.connect(confetti.queue_free)
+	winner_panel.add_child(confetti)
+	confetti.emitting = true
+
+
 # One picture per winner, next to each other
 func _show_pictures(winners: Array[PlayerObject]) -> void:
 	var header: Node = winner_picture.get_parent()