Visual overhaul: theme, illustrations, redesigned screens (0.3.0)

Phase "habillage" of the post-0.1.0 plan. Rendering was reviewed on real
screenshots (new tools/screenshot.gd, `make screenshot`), which also
caught and fixed map markers overlapping and truncated titles.

- Global Godot theme (Atkinson Hyperlegible font, cream/green/gold
  palette, raised buttons, rounded cards, thick keyboard focus).
- Original vector art: forest/marsh backdrops, Plume the owl, stars,
  exercise-type icons, correct/try-again icons, 10 collection items.
- Redesigned world map (markers as cards with icon, title and stars,
  responsive layout), profile screens, mission intro, exercise host,
  rule/feedback panels, reward screen and collection grid.
- Motion helper (pop-in, fade) honouring an animations setting.
- Settings: animations flag; base window 1152x648 with canvas_items.

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

scenes/world/mission_intro.gd

@@ -4,7 +4,6 @@ extends Control
 ## (voir "Points durs" du prompt de lancement, Sens de l'aventure).
 
 @onready var _title_label: Label = %TitleLabel
-@onready var _narrative_label: Label = %NarrativeLabel
 @onready var _guide: Control = %Guide
 @onready var _start_button: Button = %StartButton
 @onready var _back_button: Button = %BackButton
@@ -13,8 +12,9 @@ extends Control
 func _ready() -> void:
     var mission := ExerciseEngine.get_mission(GameManager.pending_mission_id)
     _title_label.text = mission.get("title", "")
-    _narrative_label.text = mission.get("narrative_context", "")
     _guide.say(mission.get("narrative_context", ""))
+    var rule := ExerciseEngine.get_rule(mission.get("rule_id", ""))
+    $Backdrop.kind = "marsh" if rule.get("level", "CE1") == "CE2" else "forest"
 
     _start_button.text = UIText.get_text("mission_intro.start_button")
     _back_button.text = UIText.get_text("mission_intro.back_button")

scenes/world/mission_intro.tscn

@@ -1,7 +1,8 @@
-[gd_scene load_steps=3 format=3]
+[gd_scene load_steps=4 format=3]
 
 [ext_resource type="Script" path="res://scenes/world/mission_intro.gd" id="1"]
 [ext_resource type="PackedScene" path="res://scenes/characters/guide_owl.tscn" id="2"]
+[ext_resource type="PackedScene" path="res://scenes/ui/backdrop.tscn" id="backdrop"]
 
 [node name="MissionIntro" type="Control"]
 layout_mode = 3
@@ -12,6 +13,14 @@ grow_horizontal = 2
 grow_vertical = 2
 script = ExtResource("1")
 
+[node name="Backdrop" parent="." instance=ExtResource("backdrop")]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+
 [node name="Margin" type="MarginContainer" parent="."]
 layout_mode = 1
 anchors_preset = 15
@@ -19,40 +28,45 @@ anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
-theme_override_constants/margin_left = 32
-theme_override_constants/margin_top = 32
-theme_override_constants/margin_right = 32
-theme_override_constants/margin_bottom = 32
+theme_override_constants/margin_left = 48
+theme_override_constants/margin_top = 40
+theme_override_constants/margin_right = 48
+theme_override_constants/margin_bottom = 40
 
-[node name="VBox" type="VBoxContainer" parent="Margin"]
+[node name="Center" type="CenterContainer" parent="Margin"]
 layout_mode = 2
-theme_override_constants/separation = 16
 
-[node name="TitleLabel" type="Label" parent="Margin/VBox"]
-unique_name_in_owner = true
-layout_mode = 2
-theme_override_font_sizes/font_size = 32
-
-[node name="NarrativeLabel" type="Label" parent="Margin/VBox"]
+[node name="Card" type="PanelContainer" parent="Margin/Center"]
+layout_mode = 2
+custom_minimum_size = Vector2(760, 0)
+
+[node name="VBox" type="VBoxContainer" parent="Margin/Center/Card"]
+layout_mode = 2
+theme_override_constants/separation = 18
+
+[node name="TitleLabel" type="Label" parent="Margin/Center/Card/VBox"]
 unique_name_in_owner = true
+theme_type_variation = &"CardTitle"
 layout_mode = 2
+horizontal_alignment = 1
 autowrap_mode = 2
-size_flags_vertical = 3
 
-[node name="Guide" type="Control" parent="Margin/VBox" instance=ExtResource("2")]
+[node name="Guide" type="Control" parent="Margin/Center/Card/VBox" instance=ExtResource("2")]
 unique_name_in_owner = true
 layout_mode = 2
+custom_minimum_size = Vector2(0, 150)
 
-[node name="Buttons" type="HBoxContainer" parent="Margin/VBox"]
+[node name="Buttons" type="HBoxContainer" parent="Margin/Center/Card/VBox"]
 layout_mode = 2
 theme_override_constants/separation = 16
 
-[node name="BackButton" type="Button" parent="Margin/VBox/Buttons"]
+[node name="BackButton" type="Button" parent="Margin/Center/Card/VBox/Buttons"]
 unique_name_in_owner = true
+theme_type_variation = &"SecondaryButton"
 layout_mode = 2
 custom_minimum_size = Vector2(0, 56)
 
-[node name="StartButton" type="Button" parent="Margin/VBox/Buttons"]
+[node name="StartButton" type="Button" parent="Margin/Center/Card/VBox/Buttons"]
 unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3

scenes/world/mission_marker.gd

@@ -0,0 +1,37 @@
+extends Button
+## Un lieu de la carte : pictogramme du type d'exercice, titre, etoiles
+## gagnees (pleines/vides : la forme porte l'information, pas la couleur) et
+## etat de la competence. Scene autonome : la carte la configure et ecoute
+## `pressed`.
+
+const STAR_FULL := preload("res://assets/interface/star_full.svg")
+const STAR_EMPTY := preload("res://assets/interface/star_empty.svg")
+const TYPE_ICONS := {
+    "multiple_choice": "res://assets/interface/icon_multiple_choice.svg",
+    "sentence_correction": "res://assets/interface/icon_sentence_correction.svg",
+    "dictation": "res://assets/interface/icon_dictation.svg",
+}
+const STAR_SIZE := 24.0
+
+@onready var _type_icon: TextureRect = %TypeIcon
+@onready var _title_label: Label = %TitleLabel
+@onready var _stars_row: HBoxContainer = %StarsRow
+@onready var _status_label: Label = %StatusLabel
+
+
+func setup(mission: Dictionary, stars: int, max_stars: int, status_text: String) -> void:
+    _title_label.text = mission["title"]
+    _status_label.text = status_text
+    _status_label.visible = not status_text.is_empty()
+    _type_icon.texture = load(TYPE_ICONS.get(mission["exercise_type"], TYPE_ICONS["multiple_choice"]))
+
+    for child in _stars_row.get_children():
+        child.queue_free()
+    for i in max_stars:
+        var star := TextureRect.new()
+        star.texture = STAR_FULL if i < stars else STAR_EMPTY
+        star.custom_minimum_size = Vector2(STAR_SIZE, STAR_SIZE)
+        star.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
+        star.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_CENTERED
+        star.mouse_filter = Control.MOUSE_FILTER_IGNORE
+        _stars_row.add_child(star)

scenes/world/mission_marker.gd.uid

@@ -0,0 +1 @@
+uid://cd6db5ude6pwq

scenes/world/mission_marker.tscn

@@ -0,0 +1,59 @@
+[gd_scene load_steps=3 format=3]
+
+[ext_resource type="Script" path="res://scenes/world/mission_marker.gd" id="1"]
+[ext_resource type="Texture2D" path="res://assets/interface/star_empty.svg" id="2"]
+
+[node name="MissionMarker" type="Button"]
+theme_type_variation = &"MarkerButton"
+custom_minimum_size = Vector2(220, 120)
+script = ExtResource("1")
+
+[node name="Content" type="VBoxContainer" parent="."]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+mouse_filter = 2
+theme_override_constants/separation = 2
+alignment = 1
+
+[node name="Header" type="HBoxContainer" parent="Content"]
+layout_mode = 2
+mouse_filter = 2
+theme_override_constants/separation = 8
+alignment = 1
+
+[node name="TypeIcon" type="TextureRect" parent="Content/Header"]
+unique_name_in_owner = true
+layout_mode = 2
+custom_minimum_size = Vector2(36, 36)
+size_flags_vertical = 4
+mouse_filter = 2
+expand_mode = 1
+stretch_mode = 5
+
+[node name="TitleLabel" type="Label" parent="Content/Header"]
+unique_name_in_owner = true
+layout_mode = 2
+size_flags_horizontal = 3
+mouse_filter = 2
+theme_override_font_sizes/font_size = 18
+autowrap_mode = 3
+max_lines_visible = 3
+text_overrun_behavior = 3
+vertical_alignment = 1
+
+[node name="StarsRow" type="HBoxContainer" parent="Content"]
+unique_name_in_owner = true
+layout_mode = 2
+mouse_filter = 2
+alignment = 1
+
+[node name="StatusLabel" type="Label" parent="Content"]
+unique_name_in_owner = true
+layout_mode = 2
+mouse_filter = 2
+theme_type_variation = &"Small"
+horizontal_alignment = 1

scenes/world/world_map.gd

@@ -3,20 +3,22 @@ extends Control
 ## (cahier des charges §15) se limitait a trois lieux ; le perimetre a ete
 ## etendu (docs/specs/decisions.md, points 25 et 27). La position de chaque
 ## mission vient de data/missions/*.json (fractions 0..1 de la zone de
-## carte), jamais d'une position fixe en dur dans le script. Un profil CE2
-## peut basculer sur la carte CE1 pour revoir les notions precedentes.
+## carte), jamais d'une position fixe en dur dans le script : chaque lieu est
+## replace quand la zone change de taille. Un profil CE2 peut basculer sur la
+## carte CE1 pour revoir les notions precedentes.
 
-const MARKER_HALF_WIDTH := 80.0
-const MARKER_HALF_HEIGHT := 48.0
+const MARKER_SCENE := preload("res://scenes/world/mission_marker.tscn")
 
 var _viewed_level := "CE1"
 
+@onready var _backdrop: Control = %Backdrop
 @onready var _title_label: Label = %TitleLabel
 @onready var _map_area: Control = %MapArea
 @onready var _level_toggle_button: Button = %LevelToggleButton
 @onready var _total_stars_label: Label = %TotalStarsLabel
 @onready var _collection_button: Button = %CollectionButton
 @onready var _profile_button: Button = %ProfileButton
+@onready var _guide: Control = %Guide
 
 
 func _ready() -> void:
@@ -27,19 +29,19 @@ func _ready() -> void:
     _collection_button.pressed.connect(_on_collection_pressed)
     _profile_button.text = UIText.get_text("world_map.change_profile_button")
     _profile_button.pressed.connect(_on_change_profile_pressed)
+    _map_area.resized.connect(_layout_markers)
+    _guide.say(UIText.get_text("world_map.guide_hint"))
     _refresh()
 
 
 func _refresh() -> void:
-    var title_key := "world_map.title_ce2" if _viewed_level == "CE2" else "world_map.title"
-    _title_label.text = UIText.get_text(title_key)
-    var toggle_key := (
-        "world_map.review_ce1_button" if _viewed_level == "CE2" else "world_map.back_to_ce2_button"
-    )
-    _level_toggle_button.text = UIText.get_text(toggle_key)
-    _total_stars_label.text = (
-        "%s %d" % [UIText.get_text("world_map.total_stars_label"), ProgressManager.stars()]
+    var is_ce2 := _viewed_level == "CE2"
+    _backdrop.kind = "marsh" if is_ce2 else "forest"
+    _title_label.text = UIText.get_text("world_map.title_ce2" if is_ce2 else "world_map.title")
+    _level_toggle_button.text = UIText.get_text(
+        "world_map.review_ce1_button" if is_ce2 else "world_map.back_to_ce2_button"
     )
+    _total_stars_label.text = str(ProgressManager.stars())
     _populate_missions()
 
 
@@ -48,8 +50,64 @@ func _populate_missions() -> void:
         _map_area.remove_child(child)
         child.queue_free()
 
+    var index := 0
     for mission: Dictionary in ExerciseEngine.get_missions_for_level(_viewed_level):
-        _map_area.add_child(_build_marker(mission))
+        var marker: Button = MARKER_SCENE.instantiate()
+        _map_area.add_child(marker)
+        marker.set_meta("map_position", mission["map_position"])
+        marker.setup(
+            mission,
+            ProgressManager.mission_best_stars(mission["mission_id"]),
+            MissionScoring.MAX_STARS,
+            _status_label_for(mission)
+        )
+        marker.pressed.connect(_on_mission_pressed.bind(mission["mission_id"]))
+        Motion.pop_in(marker, 0.04 * index)
+        index += 1
+    _layout_markers()
+
+
+## Replace chaque lieu selon sa position fractionnelle. Les positions du
+## niveau affiche sont etalees sur toute la zone (la plus petite colle au
+## bord, la plus grande au bord oppose) : les lieux restent entierement
+## visibles et ne se chevauchent pas, quelle que soit la taille de la fenetre.
+func _layout_markers() -> void:
+    var markers: Array[Control] = []
+    var low := Vector2(INF, INF)
+    var high := Vector2(-INF, -INF)
+    for child in _map_area.get_children():
+        var control := child as Control
+        if control == null or not control.has_meta("map_position"):
+            continue
+        var fraction: Dictionary = control.get_meta("map_position")
+        var point := Vector2(float(fraction["x"]), float(fraction["y"]))
+        low = Vector2(minf(low.x, point.x), minf(low.y, point.y))
+        high = Vector2(maxf(high.x, point.x), maxf(high.y, point.y))
+        markers.append(control)
+
+    for control in markers:
+        var fraction: Dictionary = control.get_meta("map_position")
+        var free_space := _map_area.size - control.size
+        control.position = Vector2(
+            _spread(float(fraction["x"]), low.x, high.x) * maxf(free_space.x, 0.0),
+            _spread(float(fraction["y"]), low.y, high.y) * maxf(free_space.y, 0.0)
+        )
+
+
+func _spread(value: float, low: float, high: float) -> float:
+    if high - low < 0.0001:
+        return 0.5
+    return (value - low) / (high - low)
+
+
+func _status_label_for(mission: Dictionary) -> String:
+    var rule: Dictionary = ExerciseEngine.get_rule(mission["rule_id"])
+    var skill_id: String = rule.get("skill", "")
+    var skill_state := ProgressManager.get_skill_state(skill_id)
+    var status: String = skill_state["status"]
+    if status == "decouverte":
+        return ""
+    return UIText.get_text("world_map.status_%s" % status)
 
 
 ## Revient au choix du profil sans rien perdre : la progression est ecrite
@@ -68,44 +126,6 @@ func _on_level_toggle_pressed() -> void:
     _refresh()
 
 
-func _build_marker(mission: Dictionary) -> Control:
-    var button := Button.new()
-    button.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
-    button.text = (
-        "%s\n%s\n%s %d/%d"
-        % [
-            mission["title"],
-            _status_label_for(mission),
-            UIText.get_text("world_map.mission_stars_label"),
-            ProgressManager.mission_best_stars(mission["mission_id"]),
-            MissionScoring.MAX_STARS,
-        ]
-    )
-
-    var map_position: Dictionary = mission["map_position"]
-    var x: float = map_position["x"]
-    var y: float = map_position["y"]
-    button.anchor_left = x
-    button.anchor_right = x
-    button.anchor_top = y
-    button.anchor_bottom = y
-    button.offset_left = -MARKER_HALF_WIDTH
-    button.offset_right = MARKER_HALF_WIDTH
-    button.offset_top = -MARKER_HALF_HEIGHT
-    button.offset_bottom = MARKER_HALF_HEIGHT
-
-    button.pressed.connect(_on_mission_pressed.bind(mission["mission_id"]))
-    return button
-
-
-func _status_label_for(mission: Dictionary) -> String:
-    var rule: Dictionary = ExerciseEngine.get_rule(mission["rule_id"])
-    var skill_id: String = rule.get("skill", "")
-    var skill_state := ProgressManager.get_skill_state(skill_id)
-    var status: String = skill_state["status"]
-    return UIText.get_text("world_map.status_%s" % status)
-
-
 func _on_mission_pressed(mission_id: String) -> void:
     GameManager.pending_mission_id = mission_id
     GameManager.goto(GameManager.SCENE_MISSION_INTRO)

scenes/world/world_map.tscn

@@ -1,7 +1,9 @@
-[gd_scene load_steps=3 format=3]
+[gd_scene load_steps=5 format=3]
 
 [ext_resource type="Script" path="res://scenes/world/world_map.gd" id="1"]
 [ext_resource type="PackedScene" path="res://scenes/characters/guide_owl.tscn" id="2"]
+[ext_resource type="PackedScene" path="res://scenes/ui/backdrop.tscn" id="backdrop"]
+[ext_resource type="Texture2D" path="res://assets/interface/star_full.svg" id="3"]
 
 [node name="WorldMap" type="Control"]
 layout_mode = 3
@@ -12,55 +14,89 @@ grow_horizontal = 2
 grow_vertical = 2
 script = ExtResource("1")
 
-[node name="Background" type="ColorRect" parent="."]
+[node name="Backdrop" parent="." instance=ExtResource("backdrop")]
+unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
-color = Color(0.3, 0.52, 0.33, 1)
 
-[node name="VBox" type="VBoxContainer" parent="."]
+[node name="Margin" type="MarginContainer" parent="."]
 layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
+theme_override_constants/margin_left = 20
+theme_override_constants/margin_top = 14
+theme_override_constants/margin_right = 20
+theme_override_constants/margin_bottom = 10
+
+[node name="VBox" type="VBoxContainer" parent="Margin"]
+layout_mode = 2
+theme_override_constants/separation = 8
+
+[node name="TopBar" type="HBoxContainer" parent="Margin/VBox"]
+layout_mode = 2
 theme_override_constants/separation = 12
 
-[node name="TitleLabel" type="Label" parent="VBox"]
+[node name="ProfileButton" type="Button" parent="Margin/VBox/TopBar"]
 unique_name_in_owner = true
+theme_type_variation = &"SecondaryButton"
 layout_mode = 2
-theme_override_font_sizes/font_size = 32
+custom_minimum_size = Vector2(0, 52)
+
+[node name="TitleLabel" type="Label" parent="Margin/VBox/TopBar"]
+unique_name_in_owner = true
+theme_type_variation = &"HeaderTitle"
+layout_mode = 2
+size_flags_horizontal = 3
 horizontal_alignment = 1
 
-[node name="TotalStarsLabel" type="Label" parent="VBox"]
+[node name="StarsBadge" type="PanelContainer" parent="Margin/VBox/TopBar"]
+theme_type_variation = &"Pill"
+layout_mode = 2
+
+[node name="Row" type="HBoxContainer" parent="Margin/VBox/TopBar/StarsBadge"]
+layout_mode = 2
+
+[node name="StarIcon" type="TextureRect" parent="Margin/VBox/TopBar/StarsBadge/Row"]
+layout_mode = 2
+custom_minimum_size = Vector2(34, 34)
+size_flags_vertical = 4
+texture = ExtResource("3")
+expand_mode = 1
+stretch_mode = 5
+
+[node name="TotalStarsLabel" type="Label" parent="Margin/VBox/TopBar/StarsBadge/Row"]
+unique_name_in_owner = true
+theme_type_variation = &"Emphasis"
+layout_mode = 2
+
+[node name="CollectionButton" type="Button" parent="Margin/VBox/TopBar"]
 unique_name_in_owner = true
 layout_mode = 2
-horizontal_alignment = 1
+custom_minimum_size = Vector2(0, 52)
 
-[node name="MapArea" type="Control" parent="VBox"]
+[node name="MapArea" type="Control" parent="Margin/VBox"]
 unique_name_in_owner = true
 layout_mode = 2
 size_flags_vertical = 3
 
-[node name="LevelToggleButton" type="Button" parent="VBox"]
-unique_name_in_owner = true
+[node name="BottomBar" type="HBoxContainer" parent="Margin/VBox"]
 layout_mode = 2
-custom_minimum_size = Vector2(0, 48)
+theme_override_constants/separation = 12
 
-[node name="CollectionButton" type="Button" parent="VBox"]
+[node name="Guide" type="Control" parent="Margin/VBox/BottomBar" instance=ExtResource("2")]
 unique_name_in_owner = true
 layout_mode = 2
-custom_minimum_size = Vector2(0, 48)
 
-[node name="ProfileButton" type="Button" parent="VBox"]
-unique_name_in_owner = true
-layout_mode = 2
-custom_minimum_size = Vector2(0, 48)
-
-[node name="Guide" type="Control" parent="VBox" instance=ExtResource("2")]
+[node name="LevelToggleButton" type="Button" parent="Margin/VBox/BottomBar"]
 unique_name_in_owner = true
+theme_type_variation = &"SecondaryButton"
 layout_mode = 2
+size_flags_vertical = 4
+custom_minimum_size = Vector2(0, 52)