DEVELOPMENT ENVIRONMENT

~liljamo/deck-builder

59714f52080b7bf4512e3c61d239c1d11eeed0ff — Jonni Liljamo 1 year, 10 months ago 100c9ff
feat(sdbclient): new settings UI
7 files changed, 63 insertions(+), 389 deletions(-)

M sdbclient/assets/ui.ess
M sdbclient/src/plugins/menu/mod.rs
D sdbclient/src/plugins/menu/settingsaudioscreen.rs
D sdbclient/src/plugins/menu/settingsdisplayscreen.rs
D sdbclient/src/plugins/menu/settingsmenuscreen.rs
D sdbclient/src/plugins/menu/settingsmiscscreen.rs
A sdbclient/src/plugins/menu/settingsscreen.rs
M sdbclient/assets/ui.ess => sdbclient/assets/ui.ess +15 -0
@@ 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;

M sdbclient/src/plugins/menu/mod.rs => sdbclient/src/plugins/menu/mod.rs +6 -43
@@ 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))
                }

D sdbclient/src/plugins/menu/settingsaudioscreen.rs => sdbclient/src/plugins/menu/settingsaudioscreen.rs +0 -81
@@ 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(),
                                ));
                            });
                    }
                });
        });
}

D sdbclient/src/plugins/menu/settingsdisplayscreen.rs => sdbclient/src/plugins/menu/settingsdisplayscreen.rs +0 -81
@@ 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(),
                                ));
                            });
                    }
                });
        });
}

D sdbclient/src/plugins/menu/settingsmenuscreen.rs => sdbclient/src/plugins/menu/settingsmenuscreen.rs +0 -103
@@ 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(),
                                ));
                            });
                    }
                });
        });
}

D sdbclient/src/plugins/menu/settingsmiscscreen.rs => sdbclient/src/plugins/menu/settingsmiscscreen.rs +0 -81
@@ 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(),
                                ));
                            });
                    }
                });
        });
}

A sdbclient/src/plugins/menu/settingsscreen.rs => sdbclient/src/plugins/menu/settingsscreen.rs +42 -0
@@ 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>
    });
}