From 292a6c79b1fac854c52082830ce1dd5c0150afe8 Mon Sep 17 00:00:00 2001 From: necrashter Date: Sun, 3 Dec 2023 21:37:47 +0300 Subject: [PATCH] Implement the layout of the systems view --- src/state/game.rs | 9 ++- src/state/game/code_view.rs | 2 +- src/state/game/entity_view.rs | 2 +- src/state/game/systems_view.rs | 127 +++++++++++++++++++++++++++++++++ 4 files changed, 137 insertions(+), 3 deletions(-) create mode 100644 src/state/game/systems_view.rs diff --git a/src/state/game.rs b/src/state/game.rs index b86a4ba..71db567 100644 --- a/src/state/game.rs +++ b/src/state/game.rs @@ -7,8 +7,8 @@ use crate::ui::BOLD_FONT_HANDLE; use crate::AppRoot; mod code_view; - mod entity_view; +mod systems_view; pub struct GameStatePlugin; @@ -24,6 +24,7 @@ impl Plugin for GameStatePlugin { code_view::typing_system, code_view::update_bar, entity_view::update_bar, + systems_view::button_color_system, ) .run_if(in_state(Game)), ); @@ -42,6 +43,11 @@ const TOP_BAR_BACKGROUND_COLOR: Color = Color::rgb(0.165, 0.18, 0.184); const TOP_BAR_SEPARATOR_COLOR: Color = Color::rgb(0.510, 0.612, 0.769); const TOP_BAR_SEPARATOR_WIDTH: f32 = 1.5; +// The sum of the following should add up to 100.0. +const CODE_VIEW_WIDTH: f32 = 35.0; +const ENTITY_VIEW_WIDTH: f32 = 45.0; +const SYSTEMS_VIEW_WIDTH: f32 = 30.0; + #[derive(AssetCollection, Resource, Reflect, Default)] #[reflect(Resource)] pub struct GameAssets {} @@ -50,6 +56,7 @@ fn enter_game(mut commands: Commands, root: Res, config: Res) { commands.insert_resource(ClearColor(config.bg_color)); code_view::init(&mut commands, &root); entity_view::init(&mut commands, &root); + systems_view::init(&mut commands, &root); } fn exit_game(root: Res, mut transform_query: Query<&mut Transform>) { diff --git a/src/state/game/code_view.rs b/src/state/game/code_view.rs index 3031421..9b79408 100644 --- a/src/state/game/code_view.rs +++ b/src/state/game/code_view.rs @@ -53,7 +53,7 @@ pub fn init(commands: &mut Commands, root: &Res) { Name::new("CodeView"), NodeBundle { style: Style { - width: Val::Percent(35.0), + width: Val::Percent(CODE_VIEW_WIDTH), height: Val::Percent(100.0), // padding: UiRect::axes(Val::VMin(3.5), Val::VMin(3.5)), // align_items: AlignItems::Center, diff --git a/src/state/game/entity_view.rs b/src/state/game/entity_view.rs index b9413ea..401f3b2 100644 --- a/src/state/game/entity_view.rs +++ b/src/state/game/entity_view.rs @@ -27,7 +27,7 @@ pub fn init(commands: &mut Commands, root: &Res) { Name::new("EntityHeaderContainer"), NodeBundle { style: Style { - width: Val::Percent(40.0), + width: Val::Percent(ENTITY_VIEW_WIDTH), height: vh(20.0), padding: UiRect::axes(Val::VMin(3.5), Val::VMin(3.5)), border: UiRect::left(vh(TOP_BAR_SEPARATOR_WIDTH)), diff --git a/src/state/game/systems_view.rs b/src/state/game/systems_view.rs new file mode 100644 index 0000000..cdbc562 --- /dev/null +++ b/src/state/game/systems_view.rs @@ -0,0 +1,127 @@ +use super::*; +use crate::ui::vh; +use crate::ui::vw; +use crate::ui::FontSize; +use crate::ui::FONT_HANDLE; + +const BACKGROUND_COLOR: Color = Color::rgb(0.106, 0.118, 0.122); + +const BUTTON_TEXT_STYLE: TextStyle = TextStyle { + font: FONT_HANDLE, + font_size: 0.0, + color: Color::WHITE, +}; +const BUTTON_FONT_SIZE: f32 = 4.0; +const BUTTON_NORMAL_COLOR: Color = Color::rgb(0.165, 0.18, 0.184); +const BUTTON_HOVERED_COLOR: Color = Color::rgb(0.265, 0.28, 0.284); +const BUTTON_PRESSED_COLOR: Color = Color::rgb(0.065, 0.08, 0.084); + +pub fn init(commands: &mut Commands, root: &Res) { + let code_view = commands + .spawn(( + Name::new("SystemsView"), + NodeBundle { + style: Style { + width: Val::Percent(SYSTEMS_VIEW_WIDTH), + height: Val::Percent(100.0), + flex_direction: FlexDirection::Column, + ..default() + }, + background_color: BACKGROUND_COLOR.into(), + ..default() + }, + )) + .set_parent(root.ui) + .id(); + + // Top bar part of the systems view. + let header_container = commands + .spawn(( + Name::new("SystemHeaderContainer"), + NodeBundle { + style: Style { + width: Val::Percent(100.0), + height: vh(20.0), + padding: UiRect::axes(Val::VMin(3.5), Val::VMin(3.5)), + border: UiRect::left(vh(TOP_BAR_SEPARATOR_WIDTH)), + ..default() + }, + background_color: TOP_BAR_BACKGROUND_COLOR.into(), + border_color: TOP_BAR_SEPARATOR_COLOR.into(), + ..default() + }, + )) + .set_parent(code_view) + .id(); + + commands + .spawn(( + Name::new("HeaderText"), + TextBundle::from_section("Upgrades", TOP_BAR_TEXT_STYLE) + .with_text_alignment(TextAlignment::Left), + FontSize::new(vh(TOP_BAR_FONT_SIZE)), + )) + .set_parent(header_container); + + // Actual content of the upgrades panel. + let content_container = commands + .spawn(( + Name::new("UpgradesPanel"), + NodeBundle { + style: Style { + width: Val::Percent(100.0), + height: Val::Percent(100.0), + padding: UiRect::axes(Val::VMin(3.5), Val::VMin(3.5)), + flex_direction: FlexDirection::Column, + ..default() + }, + background_color: BACKGROUND_COLOR.into(), + ..default() + }, + )) + .set_parent(code_view) + .id(); + + // Buttons + + for _ in 0..4 { + let button = commands + .spawn(( + Name::new("UpgradeButton"), + ButtonBundle { + style: Style { + margin: UiRect::bottom(vh(4.0)), + padding: UiRect::axes(vw(4.0), vh(4.0)), + ..default() + }, + background_color: BUTTON_NORMAL_COLOR.into(), + ..default() + }, + )) + .set_parent(content_container) + .id(); + + commands + .spawn(( + TextBundle::from_section("10x Dev Upgrade", BUTTON_TEXT_STYLE), + FontSize::new(vh(BUTTON_FONT_SIZE)), + )) + .set_parent(button); + } +} + +pub fn button_color_system( + mut interaction_query: Query< + (&Interaction, &mut BackgroundColor), + (Changed, With