From 59714f52080b7bf4512e3c61d239c1d11eeed0ff Mon Sep 17 00:00:00 2001
From: Jonni Liljamo <jonni@liljamo.com>
Date: Tue, 31 Jan 2023 09:29:58 +0200
Subject: [PATCH] feat(sdbclient): new settings UI

---
 sdbclient/assets/ui.ess                       |  15 +++
 sdbclient/src/plugins/menu/mod.rs             |  49 +--------
 .../src/plugins/menu/settingsaudioscreen.rs   |  81 --------------
 .../src/plugins/menu/settingsdisplayscreen.rs |  81 --------------
 .../src/plugins/menu/settingsmenuscreen.rs    | 103 ------------------
 .../src/plugins/menu/settingsmiscscreen.rs    |  81 --------------
 sdbclient/src/plugins/menu/settingsscreen.rs  |  42 +++++++
 7 files changed, 63 insertions(+), 389 deletions(-)
 delete mode 100644 sdbclient/src/plugins/menu/settingsaudioscreen.rs
 delete mode 100644 sdbclient/src/plugins/menu/settingsdisplayscreen.rs
 delete mode 100644 sdbclient/src/plugins/menu/settingsmenuscreen.rs
 delete mode 100644 sdbclient/src/plugins/menu/settingsmiscscreen.rs
 create mode 100644 sdbclient/src/plugins/menu/settingsscreen.rs

diff --git a/sdbclient/assets/ui.ess b/sdbclient/assets/ui.ess
index 373ae81..47e6147 100644
--- a/sdbclient/assets/ui.ess
+++ b/sdbclient/assets/ui.ess
@@ -4,6 +4,10 @@
   font-size: 38px;
 }
 
+.hidden {
+  display: none;
+}
+
 .menu {
   flex-direction: column;
   justify-content: center;
@@ -12,6 +16,17 @@
   height: 100%;
 }
 
+.settingsmenu {
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.settingstab {
+  width: 200px;
+  height: 65px;
+}
+
 .menutitle {
   font-size: 60px;
   margin: 40px;
diff --git a/sdbclient/src/plugins/menu/mod.rs b/sdbclient/src/plugins/menu/mod.rs
index c56b45a..2b40c24 100644
--- a/sdbclient/src/plugins/menu/mod.rs
+++ b/sdbclient/src/plugins/menu/mod.rs
@@ -6,7 +6,7 @@
  * See LICENSE for licensing information.
  */
 
-use bevy::{app::AppExit, prelude::*};
+use bevy::prelude::*;
 use iyes_loopless::prelude::*;
 
 use crate::cfg::CfgUser;
@@ -16,17 +16,8 @@ use crate::{despawn_screen, remove_ui, GameState};
 mod mainmenuscreen;
 use mainmenuscreen::*;
 
-mod settingsmenuscreen;
-use settingsmenuscreen::*;
-
-mod settingsdisplayscreen;
-use settingsdisplayscreen::*;
-
-mod settingsaudioscreen;
-use settingsaudioscreen::*;
-
-mod settingsmiscscreen;
-use settingsmiscscreen::*;
+mod settingsscreen;
+use settingsscreen::*;
 
 mod accountscreenloggedout;
 use accountscreenloggedout::*;
@@ -62,18 +53,9 @@ impl Plugin for MenuPlugin {
                     .with_system(handle_exit_event.run_on_event::<ExitEvent>())
                     .into()
             )
-            // Systems for settings menu screen
-            .add_enter_system(MenuState::Settings, settings_menu_setup)
-            .add_exit_system(MenuState::Settings, despawn_screen::<OnSettingsMenuScreen>)
-            // Systems for settings display screen
-            .add_enter_system(MenuState::SettingsDisplay, settings_display_setup)
-            .add_exit_system(MenuState::SettingsDisplay, despawn_screen::<OnSettingsDisplayScreen>)
-            // Systems for settings audio screen
-            .add_enter_system(MenuState::SettingsAudio, settings_audio_setup)
-            .add_exit_system(MenuState::SettingsAudio, despawn_screen::<OnSettingsAudioScreen>)
-            // Systems for settings misc screen
-            .add_enter_system(MenuState::SettingsMisc, settings_misc_setup)
-            .add_exit_system(MenuState::SettingsMisc, despawn_screen::<OnSettingsMiscScreen>)
+            // Systems for the settings screen
+            .add_enter_system(MenuState::Settings, settings_setup)
+            .add_exit_system(MenuState::Settings, remove_ui)
             // Systems for account loggedout screen
             .add_enter_system(MenuState::AccountLoggedOut, account_loggedout_setup)
             .add_exit_system(MenuState::AccountLoggedOut, despawn_screen::<OnAccountLoggedOutScreen>)
@@ -107,9 +89,6 @@ pub enum MenuState {
     CreateGame,
     JoinGame,
     Settings,
-    SettingsDisplay,
-    SettingsAudio,
-    SettingsMisc,
     AccountLoggedIn,
     AccountLoggedOut,
     AccountLogin,
@@ -132,14 +111,10 @@ struct SelectedSettingsTab;
 /// All button actions
 #[derive(Component)]
 enum MenuButtonAction {
-    SettingsDisplay,
-    SettingsAudio,
-    SettingsMisc,
     AccountLogin,
     AccountRegister,
     AccountLogout,
     BackToMainMenu,
-    BackToSettings,
 }
 
 fn menu_action(
@@ -154,15 +129,6 @@ fn menu_action(
     for (interaction, menu_button_action) in &interaction_query {
         if *interaction == Interaction::Clicked {
             match menu_button_action {
-                MenuButtonAction::SettingsDisplay => {
-                    commands.insert_resource(NextState(MenuState::SettingsDisplay))
-                }
-                MenuButtonAction::SettingsAudio => {
-                    commands.insert_resource(NextState(MenuState::SettingsAudio))
-                }
-                MenuButtonAction::SettingsMisc => {
-                    commands.insert_resource(NextState(MenuState::SettingsMisc))
-                }
                 MenuButtonAction::AccountLogin => {
                     commands.insert_resource(NextState(MenuState::AccountLogin));
                     commands.insert_resource(NextState(accountlogin::LoginState::Input));
@@ -181,9 +147,6 @@ fn menu_action(
 
                     commands.insert_resource(NextState(MenuState::AccountLoggedOut))
                 }
-                MenuButtonAction::BackToSettings => {
-                    commands.insert_resource(NextState(MenuState::Settings))
-                }
                 MenuButtonAction::BackToMainMenu => {
                     commands.insert_resource(NextState(MenuState::Main))
                 }
diff --git a/sdbclient/src/plugins/menu/settingsaudioscreen.rs b/sdbclient/src/plugins/menu/settingsaudioscreen.rs
deleted file mode 100644
index 9f83137..0000000
--- a/sdbclient/src/plugins/menu/settingsaudioscreen.rs
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * This file is part of sdbclient
- * Copyright (C) 2022 Jonni Liljamo <jonni@liljamo.com>
- *
- * Licensed under GPL-3.0-only.
- * See LICENSE for licensing information.
- */
-
-use bevy::{
-    prelude::*,
-    ui::{JustifyContent, Size, Style, Val},
-};
-
-use crate::constants::TEXT_COLOR;
-
-use super::{MenuButtonAction, NORMAL_BUTTON};
-
-/// Tag component for tagging entities on settings volume screen
-#[derive(Component)]
-pub struct OnSettingsAudioScreen;
-
-pub fn settings_audio_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    let button_style = Style {
-        size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-        margin: UiRect::all(Val::Px(20.0)),
-        justify_content: JustifyContent::Center,
-        align_items: AlignItems::Center,
-        ..default()
-    };
-
-    let button_text_style = TextStyle {
-        font: asset_server.load("fonts/FiraMono-Regular.ttf"),
-        font_size: 40.0,
-        color: TEXT_COLOR,
-    };
-
-    commands
-        .spawn((
-            NodeBundle {
-                style: Style {
-                    size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                    align_items: AlignItems::Center,
-                    justify_content: JustifyContent::Center,
-                    ..default()
-                },
-                ..default()
-            },
-            OnSettingsAudioScreen,
-        ))
-        .with_children(|parent| {
-            parent
-                .spawn(NodeBundle {
-                    style: Style {
-                        flex_direction: FlexDirection::Column,
-                        align_items: AlignItems::Center,
-                        ..default()
-                    },
-                    background_color: Color::GRAY.into(),
-                    ..default()
-                })
-                .with_children(|parent| {
-                    for (action, text) in [(MenuButtonAction::BackToSettings, "Back")] {
-                        parent
-                            .spawn((
-                                ButtonBundle {
-                                    style: button_style.clone(),
-                                    background_color: NORMAL_BUTTON.into(),
-                                    ..default()
-                                },
-                                action,
-                            ))
-                            .with_children(|parent| {
-                                parent.spawn(TextBundle::from_section(
-                                    text,
-                                    button_text_style.clone(),
-                                ));
-                            });
-                    }
-                });
-        });
-}
diff --git a/sdbclient/src/plugins/menu/settingsdisplayscreen.rs b/sdbclient/src/plugins/menu/settingsdisplayscreen.rs
deleted file mode 100644
index 51a4b36..0000000
--- a/sdbclient/src/plugins/menu/settingsdisplayscreen.rs
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * This file is part of sdbclient
- * Copyright (C) 2022 Jonni Liljamo <jonni@liljamo.com>
- *
- * Licensed under GPL-3.0-only.
- * See LICENSE for licensing information.
- */
-
-use bevy::{
-    prelude::*,
-    ui::{JustifyContent, Size, Style, Val},
-};
-
-use crate::constants::TEXT_COLOR;
-
-use super::{MenuButtonAction, NORMAL_BUTTON};
-
-/// Tag component for tagging entities on settings display screen
-#[derive(Component)]
-pub struct OnSettingsDisplayScreen;
-
-pub fn settings_display_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    let button_style = Style {
-        size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-        margin: UiRect::all(Val::Px(20.0)),
-        justify_content: JustifyContent::Center,
-        align_items: AlignItems::Center,
-        ..default()
-    };
-
-    let button_text_style = TextStyle {
-        font: asset_server.load("fonts/FiraMono-Regular.ttf"),
-        font_size: 40.0,
-        color: TEXT_COLOR,
-    };
-
-    commands
-        .spawn((
-            NodeBundle {
-                style: Style {
-                    size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                    align_items: AlignItems::Center,
-                    justify_content: JustifyContent::Center,
-                    ..default()
-                },
-                ..default()
-            },
-            OnSettingsDisplayScreen,
-        ))
-        .with_children(|parent| {
-            parent
-                .spawn(NodeBundle {
-                    style: Style {
-                        flex_direction: FlexDirection::Column,
-                        align_items: AlignItems::Center,
-                        ..default()
-                    },
-                    background_color: Color::GRAY.into(),
-                    ..default()
-                })
-                .with_children(|parent| {
-                    for (action, text) in [(MenuButtonAction::BackToSettings, "Back")] {
-                        parent
-                            .spawn((
-                                ButtonBundle {
-                                    style: button_style.clone(),
-                                    background_color: NORMAL_BUTTON.into(),
-                                    ..default()
-                                },
-                                action,
-                            ))
-                            .with_children(|parent| {
-                                parent.spawn(TextBundle::from_section(
-                                    text,
-                                    button_text_style.clone(),
-                                ));
-                            });
-                    }
-                });
-        });
-}
diff --git a/sdbclient/src/plugins/menu/settingsmenuscreen.rs b/sdbclient/src/plugins/menu/settingsmenuscreen.rs
deleted file mode 100644
index aa72221..0000000
--- a/sdbclient/src/plugins/menu/settingsmenuscreen.rs
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * This file is part of sdbclient
- * Copyright (C) 2022 Jonni Liljamo <jonni@liljamo.com>
- *
- * Licensed under GPL-3.0-only.
- * See LICENSE for licensing information.
- */
-
-use bevy::{
-    prelude::*,
-    ui::{JustifyContent, Size, Style, Val},
-};
-
-use crate::constants::TEXT_COLOR;
-
-use super::{MenuButtonAction, NORMAL_BUTTON};
-
-/// Tag component for tagging entities on settings menu screen
-#[derive(Component)]
-pub struct OnSettingsMenuScreen;
-
-pub fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    let font = asset_server.load("fonts/FiraMono-Regular.ttf");
-
-    let button_style = Style {
-        size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-        margin: UiRect::all(Val::Px(20.0)),
-        justify_content: JustifyContent::Center,
-        align_items: AlignItems::Center,
-        ..default()
-    };
-
-    let button_text_style = TextStyle {
-        font: font.clone(),
-        font_size: 40.0,
-        color: TEXT_COLOR,
-    };
-
-    commands
-        .spawn((
-            NodeBundle {
-                style: Style {
-                    size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                    align_items: AlignItems::Center,
-                    justify_content: JustifyContent::Center,
-                    flex_direction: FlexDirection::Column,
-                    ..default()
-                },
-                ..default()
-            },
-            OnSettingsMenuScreen,
-        ))
-        .with_children(|parent| {
-            parent.spawn(
-                TextBundle::from_section(
-                    "Settings",
-                    TextStyle {
-                        font: font.clone(),
-                        font_size: 60.0,
-                        color: TEXT_COLOR,
-                    },
-                )
-                .with_style(Style {
-                    margin: UiRect::all(Val::Px(50.)),
-                    ..Default::default()
-                }),
-            );
-            parent
-                .spawn(NodeBundle {
-                    style: Style {
-                        flex_direction: FlexDirection::Column,
-                        align_items: AlignItems::Center,
-                        ..default()
-                    },
-                    background_color: Color::GRAY.into(),
-                    ..default()
-                })
-                .with_children(|parent| {
-                    for (action, text) in [
-                        (MenuButtonAction::SettingsDisplay, "Display"),
-                        (MenuButtonAction::SettingsAudio, "Audio"),
-                        (MenuButtonAction::SettingsMisc, "Misc"),
-                        (MenuButtonAction::BackToMainMenu, "Back"),
-                    ] {
-                        parent
-                            .spawn((
-                                ButtonBundle {
-                                    style: button_style.clone(),
-                                    background_color: NORMAL_BUTTON.into(),
-                                    ..default()
-                                },
-                                action,
-                            ))
-                            .with_children(|parent| {
-                                parent.spawn(TextBundle::from_section(
-                                    text,
-                                    button_text_style.clone(),
-                                ));
-                            });
-                    }
-                });
-        });
-}
diff --git a/sdbclient/src/plugins/menu/settingsmiscscreen.rs b/sdbclient/src/plugins/menu/settingsmiscscreen.rs
deleted file mode 100644
index 2f43128..0000000
--- a/sdbclient/src/plugins/menu/settingsmiscscreen.rs
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * This file is part of sdbclient
- * Copyright (C) 2022 Jonni Liljamo <jonni@liljamo.com>
- *
- * Licensed under GPL-3.0-only.
- * See LICENSE for licensing information.
- */
-
-use bevy::{
-    prelude::*,
-    ui::{JustifyContent, Size, Style, Val},
-};
-
-use crate::constants::TEXT_COLOR;
-
-use super::{MenuButtonAction, NORMAL_BUTTON};
-
-/// Tag component for tagging entities on settings misc screen
-#[derive(Component)]
-pub struct OnSettingsMiscScreen;
-
-pub fn settings_misc_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    let button_style = Style {
-        size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-        margin: UiRect::all(Val::Px(20.0)),
-        justify_content: JustifyContent::Center,
-        align_items: AlignItems::Center,
-        ..default()
-    };
-
-    let button_text_style = TextStyle {
-        font: asset_server.load("fonts/FiraMono-Regular.ttf"),
-        font_size: 40.0,
-        color: TEXT_COLOR,
-    };
-
-    commands
-        .spawn((
-            NodeBundle {
-                style: Style {
-                    size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                    align_items: AlignItems::Center,
-                    justify_content: JustifyContent::Center,
-                    ..default()
-                },
-                ..default()
-            },
-            OnSettingsMiscScreen,
-        ))
-        .with_children(|parent| {
-            parent
-                .spawn(NodeBundle {
-                    style: Style {
-                        flex_direction: FlexDirection::Column,
-                        align_items: AlignItems::Center,
-                        ..default()
-                    },
-                    background_color: Color::GRAY.into(),
-                    ..default()
-                })
-                .with_children(|parent| {
-                    for (action, text) in [(MenuButtonAction::BackToSettings, "Back")] {
-                        parent
-                            .spawn((
-                                ButtonBundle {
-                                    style: button_style.clone(),
-                                    background_color: NORMAL_BUTTON.into(),
-                                    ..default()
-                                },
-                                action,
-                            ))
-                            .with_children(|parent| {
-                                parent.spawn(TextBundle::from_section(
-                                    text,
-                                    button_text_style.clone(),
-                                ));
-                            });
-                    }
-                });
-        });
-}
diff --git a/sdbclient/src/plugins/menu/settingsscreen.rs b/sdbclient/src/plugins/menu/settingsscreen.rs
new file mode 100644
index 0000000..a537030
--- /dev/null
+++ b/sdbclient/src/plugins/menu/settingsscreen.rs
@@ -0,0 +1,42 @@
+/*
+ * This file is part of sdbclient
+ * Copyright (C) 2023 Jonni Liljamo <jonni@liljamo.com>
+ *
+ * Licensed under GPL-3.0-only.
+ * See LICENSE for licensing information.
+ */
+
+use bevy::prelude::*;
+use iyes_loopless::prelude::*;
+
+use belly::prelude::*;
+
+use super::MenuState;
+
+pub(super) fn settings_setup(mut commands: Commands) {
+    commands.add(eml! {
+        <body>
+            <div c:settingsmenu>
+                <buttongroup on:value_change=connect!(|ctx| {
+                    let ev = ctx.event();
+                    ctx.select(ev.old_value()).add_class("hidden");
+                    ctx.select(ev.new_value()).remove_class("hidden");
+                })>
+                    <button c:settingstab value=".tabdisplay" pressed>"Display"</button>
+                    <button c:settingstab value=".tabaudio">"Audio"</button>
+                    <button c:settingstab value=".tabmisc">"Misc"</button>
+                </buttongroup>
+                <div>
+                    <div c:tabdisplay>"display"</div>
+                    <div c:tabaudio c:hidden>"audio"</div>
+                    <div c:tabmisc c:hidden>"misc"</div>
+                </div>
+                <button c:menubutton on:press=connect!(|ctx| {
+                    ctx.commands().insert_resource(NextState(MenuState::Main))
+                })>
+                    "Back"
+                </button>
+            </div>
+        </body>
+    });
+}
-- 
2.44.1