fix the lobby privacy radio
This commit is contained in:
+195
-54
@@ -3,30 +3,42 @@ use bevy::{
|
||||
input_focus::tab_navigation::TabIndex,
|
||||
prelude::*,
|
||||
text::{EditableText, EditableTextFilter, TextCursorStyle},
|
||||
ui::{Checked, Pressed},
|
||||
ui_widgets::{RadioButton, RadioGroup, ValueChange, radio_self_update},
|
||||
ui::Checked,
|
||||
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_visibility_changed);
|
||||
app.add_observer(on_privacy_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.)),
|
||||
visibility_option("Friends Only", LobbyVisibility::FriendsOnly, BorderRadius::ZERO),
|
||||
visibility_option("Invite Only", LobbyVisibility::InviteOnly, BorderRadius::px(0., 16., 16., 0.)),
|
||||
privacy_option("Public", LobbyPrivacy::Public, BorderRadius::px(16., 0., 0., 16.)),
|
||||
privacy_option("Friends Only", LobbyPrivacy::FriendsOnly, BorderRadius::ZERO),
|
||||
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))
|
||||
BackgroundColor(Color::srgb(0.18, 0.22, 0.29))
|
||||
BorderColor::all(OPTION_BORDER_COLOR)
|
||||
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<
|
||||
(Entity, &LobbyVisibilityOption),
|
||||
(With<RadioButton>, Added<LobbyVisibilityOption>),
|
||||
>,
|
||||
options: Query<(Entity, &LobbyPrivacyOption, &Interaction, Has<Checked>), With<RadioButton>>,
|
||||
) {
|
||||
for (entity, option) in &options {
|
||||
if option.0 == lobby_ui.visibility {
|
||||
for (entity, option, interaction, checked) in &options {
|
||||
let should_be_checked = option.0 == lobby_ui.privacy;
|
||||
if should_be_checked && !checked {
|
||||
commands.entity(entity).insert(Checked);
|
||||
} else {
|
||||
commands.entity(entity).remove::<Checked>();
|
||||
} else if !should_be_checked && 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,
|
||||
Has<Checked>,
|
||||
Has<Pressed>,
|
||||
&mut BackgroundColor,
|
||||
),
|
||||
(
|
||||
With<LobbyVisibilityOption>,
|
||||
// Or<(Changed<Interaction>, Changed<Checked>, Changed<Pressed>)>,
|
||||
With<LobbyPrivacyOption>,
|
||||
Or<(Changed<Interaction>, Changed<Checked>)>,
|
||||
),
|
||||
>,
|
||||
) {
|
||||
for (interaction, checked, pressed, mut background) in &mut options {
|
||||
background.0 = match (checked, pressed, *interaction) {
|
||||
(true, true, _) => Color::srgb(0.08, 0.48, 0.58),
|
||||
(true, _, Interaction::Hovered) => Color::srgb(0.10, 0.58, 0.68),
|
||||
(true, _, _) => Color::srgb(0.08, 0.42, 0.52),
|
||||
(false, _, Interaction::Hovered) => Color::srgb(0.26, 0.33, 0.42),
|
||||
(false, _, _) => Color::srgb(0.18, 0.22, 0.29),
|
||||
for (interaction, checked, mut bg) in options.iter_mut() {
|
||||
bg.0 = match (checked, *interaction) {
|
||||
// Hovering a selected radio is a no-op (pressing it changes
|
||||
// nothing), so it keeps its selected color; pressing it darkens.
|
||||
(true, Interaction::Pressed) => OPTION_SELECTED_PRESSED_BACKGROUND,
|
||||
(true, _) => OPTION_SELECTED_BACKGROUND,
|
||||
(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"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user