fix the lobby privacy radio

src/debug.rs

@@ -24,6 +24,9 @@ impl Plugin for DebugInspectorPlugin {
 fn toggle_inspector(keys: Res<ButtonInput<KeyCode>>, mut enabled: ResMut<InspectorEnabled>) {
     if keys.just_pressed(KeyCode::F1) {
         enabled.0 = !enabled.0;
-        info!("lobby ui inspector toggled {}", if enabled.0 { "on" } else { "off" });
+        info!(
+            "lobby ui inspector toggled {}",
+            if enabled.0 { "on" } else { "off" }
+        );
     }
 }

src/lobby.rs

@@ -3,30 +3,42 @@ use bevy::{
     input_focus::tab_navigation::TabIndex,
     prelude::*,
     text::{EditableText, EditableTextFilter, TextCursorStyle},
-    ui::{Checked, Pressed},
+    ui::Checked,
-    ui_widgets::{RadioButton, RadioGroup, ValueChange, radio_self_update},
+    ui_widgets::{RadioButton, RadioGroup, ValueChange},
 };
 
 use crate::AppState;
 
+const PANEL_BACKGROUND: Color = Color::srgb(0.4, 0.4, 0.4);
+const TEXT_COLOR: Color = Color::srgb(0.9, 0.9, 0.9);
+
+const TEXT_INPUT_BACKGROUND: Color = Color::srgb(0.48, 0.84, 0.87);
+
+const OPTION_BORDER_COLOR: Color = Color::srgb(0.12, 0.16, 0.22);
+const OPTION_TEXT_COLOR: Color = Color::srgb(0.92, 0.94, 0.98);
+const OPTION_BACKGROUND: Color = Color::srgb(0.18, 0.22, 0.29);
+const OPTION_HOVERED_BACKGROUND: Color = Color::srgb(0.26, 0.33, 0.42);
+const OPTION_SELECTED_BACKGROUND: Color = Color::srgb(0.08, 0.42, 0.52);
+const OPTION_SELECTED_PRESSED_BACKGROUND: Color = Color::srgb(0.07, 0.36, 0.44);
+
 pub struct LobbyPlugin;
 
 #[derive(Resource, Debug, Clone, Copy, PartialEq, Eq, Reflect)]
 #[reflect(Resource)]
 pub struct LobbyUiState {
-    pub visibility: LobbyVisibility,
+    pub privacy: LobbyPrivacy,
 }
 
 impl Default for LobbyUiState {
     fn default() -> Self {
         Self {
-            visibility: LobbyVisibility::Public,
+            privacy: LobbyPrivacy::Public,
         }
     }
 }
 
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Reflect)]
-pub enum LobbyVisibility {
+pub enum LobbyPrivacy {
     #[default]
     Public,
     FriendsOnly,
@@ -34,7 +46,7 @@ pub enum LobbyVisibility {
 }
 
 #[derive(Component, Debug, Clone, Copy, Default, PartialEq, Eq)]
-struct LobbyVisibilityOption(LobbyVisibility);
+struct LobbyPrivacyOption(LobbyPrivacy);
 
 impl Plugin for LobbyPlugin {
     fn build(&self, app: &mut App) {
@@ -46,10 +58,9 @@ impl Plugin for LobbyPlugin {
         )
         .add_systems(
             Update,
-            (sync_visibility_options, style_visibility_options).chain(),
+            (update_privacy_controls, style_privacy_options).chain(),
         );
-        app.add_observer(radio_self_update);
+        app.add_observer(on_privacy_changed);
-        app.add_observer(on_visibility_changed);
     }
 }
 
@@ -58,6 +69,9 @@ impl Plugin for LobbyPlugin {
 struct LobbyUiRoot;
 
 fn setup_lobby(mut commands: Commands) {
+    // TODO: build from whatever info we have from the loaded save
+    commands.insert_resource(LobbyUiState::default());
+
     commands.spawn_scene(bsn! {
         #LobbyUiRoot
         LobbyUiRoot
@@ -84,7 +98,7 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
             border_radius: BorderRadius::all(px(24)),
             padding: Val::all(px(24)),
         }
-        BackgroundColor(Color::srgb(0.4, 0.4, 0.4))
+        BackgroundColor(PANEL_BACKGROUND)
         Children [
             (
                 Text("Server Settings")
@@ -94,7 +108,7 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
                 TextFont {
                     font_size: px(100.0),
                 }
-                TextColor(Color::srgb(0.9, 0.9, 0.9))
+                TextColor(TEXT_COLOR)
                 TextShadow
             ),
             (
@@ -107,9 +121,9 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
                 }
                 TabIndex(0)
                 Children [
-                    visibility_option("Public", LobbyVisibility::Public, BorderRadius::px(16., 0., 0., 16.)),
+                    privacy_option("Public", LobbyPrivacy::Public, BorderRadius::px(16., 0., 0., 16.)),
-                    visibility_option("Friends Only", LobbyVisibility::FriendsOnly, BorderRadius::ZERO),
+                    privacy_option("Friends Only", LobbyPrivacy::FriendsOnly, BorderRadius::ZERO),
-                    visibility_option("Invite Only", LobbyVisibility::InviteOnly, BorderRadius::px(0., 16., 16., 0.)),
+                    privacy_option("Invite Only", LobbyPrivacy::InviteOnly, BorderRadius::px(0., 16., 16., 0.)),
                 ]
             ),
             (
@@ -121,7 +135,7 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
                     // font: FontSourceTemplate::Handle("fonts/FiraSans-Bold.ttf"),
                     font_size: px(66.0),
                 }
-                TextColor(Color::srgb(0.9, 0.9, 0.9))
+                TextColor(TEXT_COLOR)
                 TextShadow
             ),
             (
@@ -144,7 +158,7 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
                     color: Color::BLACK
                 }
                 TabIndex(0)
-                BackgroundColor(Color::srgb(0.48, 0.84, 0.87))
+                BackgroundColor(TEXT_INPUT_BACKGROUND)
             ),
         ]
     });
@@ -157,7 +171,7 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
             border_radius: BorderRadius::all(px(24)),
             padding: Val::all(px(24)),
         }
-        BackgroundColor(Color::srgb(0.4, 0.4, 0.4))
+        BackgroundColor(PANEL_BACKGROUND)
         Children [
             (
                 Text("Lobby")
@@ -167,7 +181,7 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
                 TextFont {
                     font_size: px(100.0),
                 }
-                TextColor(Color::srgb(0.9, 0.9, 0.9))
+                TextColor(TEXT_COLOR)
                 TextShadow
             ),
             (
@@ -179,7 +193,7 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
                     // font: FontSourceTemplate::Handle("fonts/FiraSans-Bold.ttf"),
                     font_size: px(66.0),
                 }
-                TextColor(Color::srgb(0.9, 0.9, 0.9))
+                TextColor(TEXT_COLOR)
                 TextShadow
             ),
             (
@@ -202,20 +216,21 @@ fn build_lobby_ui(mut commands: Commands, root_ui: Single<Entity, With<LobbyUiRo
                     color: Color::BLACK
                 }
                 TabIndex(0)
-                BackgroundColor(Color::srgb(0.48, 0.84, 0.87))
+                BackgroundColor(TEXT_INPUT_BACKGROUND)
             ),
         ]
     });
 }
 
-fn visibility_option(
+fn privacy_option(
     label: &'static str,
-    visibility: LobbyVisibility,
+    privacy: LobbyPrivacy,
     border_radius: BorderRadius,
 ) -> impl Scene {
     bsn! {
         RadioButton
-        LobbyVisibilityOption(visibility)
+        LobbyPrivacyOption(privacy)
+        Interaction
         Node {
             display: Display::Flex,
             flex_grow: 1.,
@@ -224,66 +239,192 @@ fn visibility_option(
             border: UiRect::all(px(3)),
             border_radius,
         }
-        BorderColor::all(Color::srgb(0.12, 0.16, 0.22))
+        BorderColor::all(OPTION_BORDER_COLOR)
-        BackgroundColor(Color::srgb(0.18, 0.22, 0.29))
+        BackgroundColor(OPTION_BACKGROUND)
         Children [(
             Text(label)
             TextFont {
                 font_size: px(38.0),
             }
-            TextColor(Color::srgb(0.92, 0.94, 0.98))
+            TextColor(OPTION_TEXT_COLOR)
         )]
     }
 }
 
-fn sync_visibility_options(
+/// Updates the privacy control items from the [`LobbyUiState`] resource.
+fn update_privacy_controls(
     lobby_ui: Res<LobbyUiState>,
     mut commands: Commands,
-    options: Query<
+    options: Query<(Entity, &LobbyPrivacyOption, &Interaction, Has<Checked>), With<RadioButton>>,
-        (Entity, &LobbyVisibilityOption),
-        (With<RadioButton>, Added<LobbyVisibilityOption>),
-    >,
 ) {
-    for (entity, option) in &options {
+    for (entity, option, interaction, checked) in &options {
-        if option.0 == lobby_ui.visibility {
+        let should_be_checked = option.0 == lobby_ui.privacy;
+        if should_be_checked && !checked {
             commands.entity(entity).insert(Checked);
-        } else {
+        } else if !should_be_checked && checked {
-            commands.entity(entity).remove::<Checked>();
+            commands
+                .entity(entity)
+                .remove::<Checked>()
+                // Reinserting the interaction will trigger the visual redraw
+                .insert(*interaction);
         }
     }
 }
 
-fn on_visibility_changed(
+/// Updates the lobby privacy in response to the RadioGroup change.
+fn on_privacy_changed(
     value_change: On<ValueChange<Entity>>,
-    options: Query<&LobbyVisibilityOption>,
+    options: Query<&LobbyPrivacyOption>,
     mut lobby_ui: ResMut<LobbyUiState>,
 ) {
     if let Ok(option) = options.get(value_change.value) {
-        lobby_ui.visibility = option.0;
+        lobby_ui.privacy = option.0;
     }
 }
 
-fn style_visibility_options(
+/// Styles the UI options according to their interactions.
+fn style_privacy_options(
     mut options: Query<
+        (&Interaction, Has<Checked>, &mut BackgroundColor),
         (
-            &Interaction,
+            With<LobbyPrivacyOption>,
-            Has<Checked>,
+            Or<(Changed<Interaction>, Changed<Checked>)>,
-            Has<Pressed>,
-            &mut BackgroundColor,
-        ),
-        (
-            With<LobbyVisibilityOption>,
-            // Or<(Changed<Interaction>, Changed<Checked>, Changed<Pressed>)>,
         ),
     >,
 ) {
-    for (interaction, checked, pressed, mut background) in &mut options {
+    for (interaction, checked, mut bg) in options.iter_mut() {
-        background.0 = match (checked, pressed, *interaction) {
+        bg.0 = match (checked, *interaction) {
-            (true, true, _) => Color::srgb(0.08, 0.48, 0.58),
+            // Hovering a selected radio is a no-op (pressing it changes
-            (true, _, Interaction::Hovered) => Color::srgb(0.10, 0.58, 0.68),
+            // nothing), so it keeps its selected color; pressing it darkens.
-            (true, _, _) => Color::srgb(0.08, 0.42, 0.52),
+            (true, Interaction::Pressed) => OPTION_SELECTED_PRESSED_BACKGROUND,
-            (false, _, Interaction::Hovered) => Color::srgb(0.26, 0.33, 0.42),
+            (true, _) => OPTION_SELECTED_BACKGROUND,
-            (false, _, _) => Color::srgb(0.18, 0.22, 0.29),
+            (false, Interaction::Hovered) => OPTION_HOVERED_BACKGROUND,
+            (false, _) => OPTION_BACKGROUND,
         };
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn option(privacy: LobbyPrivacy) -> impl Bundle {
+        (
+            RadioButton,
+            LobbyPrivacyOption(privacy),
+            BackgroundColor(OPTION_BACKGROUND),
+        )
+    }
+
+    #[test]
+    fn checked_option_is_styled() {
+        let mut world = World::new();
+        world.insert_resource(LobbyUiState::default());
+
+        let checked = world
+            .spawn((
+                option(LobbyPrivacy::Public),
+                Interaction::default(),
+                Checked,
+            ))
+            .id();
+        let unchecked = world
+            .spawn((option(LobbyPrivacy::FriendsOnly), Interaction::default()))
+            .id();
+        // Regression: without `Interaction` the style system can never match the
+        // option, so the background stays at the spawn-time color.
+        let missing_interaction = world.spawn(option(LobbyPrivacy::Public)).id();
+
+        let mut schedule = Schedule::default();
+        schedule.add_systems((update_privacy_controls, style_privacy_options).chain());
+        schedule.run(&mut world);
+
+        let checked_bg = *world.get::<BackgroundColor>(checked).unwrap();
+        assert_eq!(
+            checked_bg.0, OPTION_SELECTED_BACKGROUND,
+            "checked option must be restyled"
+        );
+
+        let unchecked_bg = *world.get::<BackgroundColor>(unchecked).unwrap();
+        assert_eq!(
+            unchecked_bg.0, OPTION_BACKGROUND,
+            "unchecked option must keep its base color"
+        );
+
+        let untouched_bg = *world.get::<BackgroundColor>(missing_interaction).unwrap();
+        assert_eq!(
+            untouched_bg.0, OPTION_BACKGROUND,
+            "option without Interaction is never styled"
+        );
+    }
+
+    #[test]
+    fn selected_option_interactions() {
+        let mut world = World::new();
+        world.insert_resource(LobbyUiState::default());
+
+        let hovered = world
+            .spawn((option(LobbyPrivacy::Public), Interaction::Hovered, Checked))
+            .id();
+        let pressed = world
+            .spawn((option(LobbyPrivacy::Public), Interaction::Pressed, Checked))
+            .id();
+
+        let mut schedule = Schedule::default();
+        schedule.add_systems(style_privacy_options);
+        schedule.run(&mut world);
+
+        assert_eq!(
+            world.get::<BackgroundColor>(hovered).unwrap().0,
+            OPTION_SELECTED_BACKGROUND,
+            "selected option must not change on hover"
+        );
+        assert_eq!(
+            world.get::<BackgroundColor>(pressed).unwrap().0,
+            OPTION_SELECTED_PRESSED_BACKGROUND,
+            "selected option must darken when pressed"
+        );
+    }
+
+    #[test]
+    fn deselected_option_is_restyled() {
+        let mut world = World::new();
+        world.insert_resource(LobbyUiState::default());
+
+        let first = world
+            .spawn((
+                option(LobbyPrivacy::Public),
+                Interaction::default(),
+                Checked,
+            ))
+            .id();
+        let second = world
+            .spawn((option(LobbyPrivacy::FriendsOnly), Interaction::default()))
+            .id();
+
+        let mut schedule = Schedule::default();
+        schedule.add_systems((update_privacy_controls, style_privacy_options).chain());
+        schedule.run(&mut world);
+        assert_eq!(
+            world.get::<BackgroundColor>(first).unwrap().0,
+            OPTION_SELECTED_BACKGROUND,
+            "first option must be styled as checked"
+        );
+
+        // Selecting the other option moves the resource; `sync_privacy_options`
+        // must then move `Checked` and the style system must react to the move.
+        world.resource_mut::<LobbyUiState>().privacy = LobbyPrivacy::FriendsOnly;
+        schedule.run(&mut world);
+
+        assert_eq!(
+            world.get::<BackgroundColor>(first).unwrap().0,
+            OPTION_BACKGROUND,
+            "deselected option must be restyled to base color"
+        );
+        assert_eq!(
+            world.get::<BackgroundColor>(second).unwrap().0,
+            OPTION_SELECTED_BACKGROUND,
+            "newly checked option must be styled as checked"
+        );
+    }
+}

src/main.rs

@@ -4,8 +4,8 @@ use networking::NetworkingPlugin;
 
 use crate::{debug::DebugInspectorPlugin, lobby::LobbyPlugin, save::SavePlugin};
 
-mod lobby;
 mod debug;
+mod lobby;
 mod main_menu;
 mod networking;
 mod save;