Implement the layout of the systems view

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<AppRoot>, config: Res<Config>) {
     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<AppRoot>, mut transform_query: Query<&mut Transform>) {

src/state/game/code_view.rs

@@ -53,7 +53,7 @@ pub fn init(commands: &mut Commands, root: &Res<AppRoot>) {
             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,

src/state/game/entity_view.rs

@@ -27,7 +27,7 @@ pub fn init(commands: &mut Commands, root: &Res<AppRoot>) {
             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)),

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<AppRoot>) {
+    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<Interaction>, With<Button>),
+    >,
+) {
+    for (interaction, mut color) in &mut interaction_query {
+        *color = match interaction {
+            Interaction::Pressed => BUTTON_PRESSED_COLOR,
+            Interaction::Hovered => BUTTON_HOVERED_COLOR,
+            Interaction::None => BUTTON_NORMAL_COLOR,
+        }
+        .into()
+    }
+}