hovered

crates/border-wars/src/lib.rs

@@ -5,7 +5,7 @@ use bevy::prelude::*;
 pub mod scenes;
 
 /// The current scene of the game.
-#[derive(Debug, Clone, Copy, Default, Eq, PartialEq, Hash, States)]
+#[derive(Debug, Clone, Copy, Default, Eq, PartialEq, Hash, States, Component)]
 pub enum CurrentScene {
     /// When we are in the main menu.
     #[default]
@@ -16,10 +16,13 @@ pub enum CurrentScene {
 
     /// When we play this wonderful game.
     Game,
+
+    /// When we are in the settings menu.
+    Setting,
 }
 
+/// Calculates the ui_scale.0 depending on the size of the main node
 pub fn change_scaling(mut ui_scale: ResMut<UiScale>, window: Query<&Window>) {
-    // Calculates the ui_scale depending on the size of the main node
     let window = window.single();
     let (a, b) = (
         window.resolution.width() / 1280.,

crates/border-wars/src/main.rs

@@ -1,10 +1,14 @@
 //! The main entry point of the game.
 
-use bevy::prelude::*;
+use bevy::{prelude::*, text::TextSettings};
 use border_wars::scenes::ScenesPlugin;
 
 fn main() {
     App::new()
+        .insert_resource(TextSettings {
+            allow_dynamic_font_size: true,
+            ..default()
+        })
         .add_plugins(DefaultPlugins)
         .add_plugins(ScenesPlugin)
         .run();

crates/border-wars/src/scenes/menu.rs

@@ -11,11 +11,19 @@ impl Plugin for MenuPlugin {
     fn build(&self, app: &mut App) {
         app.add_systems(Startup, menu_ui.run_if(in_state(CurrentScene::Menu)));
         app.add_systems(Update, change_scaling);
+        app.add_systems(Update, handle_button);
     }
 }
 
+/// TODO
+#[derive(Component, Clone)]
+struct HoveredTexture {
+    texture: Handle<Image>,
+    hovered_texture: Handle<Image>,
+}
+
 /// Display the UI of the menu to host a game or join one.
-fn menu_ui(mut commands: Commands) {
+fn menu_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2dBundle::default());
 
     commands
@@ -28,9 +36,118 @@ fn menu_ui(mut commands: Commands) {
                 ..default()
             },
             z_index: ZIndex::Local(0),
+            background_color: Color::GREEN.into(),
             ..default()
         })
-        .with_children(|main_node| {
+        .with_children(|node| main_node(node));
+
+    create_side_button(
+        UiRect {
+            left: Val::Px(25.),
+            right: Val::Auto,
+            top: Val::Px(25.),
+            bottom: Val::Auto,
+        },
+        CurrentScene::Lobby,
+        &mut commands,
+        HoveredTexture {
+            texture: asset_server.load("button_settings_icon.png"),
+            hovered_texture: asset_server.load("button_menu_icon.png"),
+        },
+    );
+
+    create_side_button(
+        UiRect {
+            left: Val::Auto,
+            right: Val::Px(25.),
+            top: Val::Px(25.),
+            bottom: Val::Auto,
+        },
+        CurrentScene::Lobby,
+        &mut commands,
+        HoveredTexture {
+            texture: asset_server.load("button_menu_icon.png"),
+            hovered_texture: asset_server.load("button_settings_icon.png"),
+        },
+    );
+}
+
+/// TODO
+fn create_side_button(
+    margin: UiRect,
+    target_scene: CurrentScene,
+    commands: &mut Commands,
+    textures: HoveredTexture,
+) {
+    commands
+        .spawn(ButtonBundle {
+            style: Style {
+                width: Val::Px(75.),
+                aspect_ratio: Some(1.),
+                margin,
+                ..default()
+            },
+            z_index: ZIndex::Local(1),
+            background_color: Color::NONE.into(),
+            ..default()
+        })
+        .insert((target_scene, textures.clone()))
+        .with_children(|button| {
+            button.spawn(ImageBundle {
+                style: Style {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    ..default()
+                },
+                image: textures.texture.into(),
+                ..default()
+            });
+        });
+}
+
+fn handle_button(
+    interaction_query: Query<
+        (&Interaction, &CurrentScene, &mut Children, &HoveredTexture),
+        (Changed<Interaction>, With<Button>),
+    >,
+    mut image_query: Query<&mut UiImage>,
+    mut next_scene: ResMut<NextState<CurrentScene>>,
+) {
+    for (interaction, target_scene, children, textures) in interaction_query.iter() {
+        match *interaction {
+            Interaction::Pressed => {
+                next_scene.set(*target_scene);
+            }
+            Interaction::Hovered => {
+                hover_system(children, &mut image_query, textures.texture.clone())
+            }
+            Interaction::None => hover_system(children, &mut image_query, textures.hovered_texture.clone()),
+        }
+    }
+}
+
+fn hover_system(
+    children: &Children,
+    image_query: &mut Query<&mut UiImage>,
+    texture: Handle<Image>,
+) {
+    let mut image = image_query.get_mut(children[0]).unwrap();
+    image.texture = texture
+}
+
+/// TODO
+fn default_style() -> Style {
+    Style {
+        flex_direction: FlexDirection::Column,
+        width: Val::Percent(100.),
+        height: Val::Percent(45.),
+        margin: UiRect::all(Val::Auto),
+        ..default()
+    }
+}
+
+/// TODO
+fn main_node(main_node: &mut ChildBuilder<'_, '_, '_>) {
     main_node.spawn(NodeBundle {
         style: Style {
             margin: UiRect {
@@ -67,6 +184,7 @@ fn menu_ui(mut commands: Commands) {
             container
                 .spawn(NodeBundle {
                     style: default_style(),
+                    background_color: Color::YELLOW_GREEN.into(),
                     ..default()
                 })
                 .with_children(|host| {
@@ -85,6 +203,7 @@ fn menu_ui(mut commands: Commands) {
             container
                 .spawn(NodeBundle {
                     style: default_style(),
+                    background_color: Color::YELLOW_GREEN.into(),
                     ..default()
                 })
                 .with_children(|join| {
@@ -100,49 +219,4 @@ fn menu_ui(mut commands: Commands) {
                     });
                 });
         });
-        });
-
-    commands.spawn(NodeBundle {
-        style: Style {
-            width: Val::Px(75.),
-            aspect_ratio: Some(1.),
-            margin: UiRect {
-                left: Val::Px(25.),
-                right: Val::Auto,
-                top: Val::Px(25.),
-                bottom: Val::Auto,
-            },
-            ..default()
-        },
-        z_index: ZIndex::Local(1),
-        background_color: BackgroundColor(Color::BLUE),
-        ..default()
-    });
-
-    commands.spawn(NodeBundle {
-        style: Style {
-            width: Val::Px(75.),
-            aspect_ratio: Some(1.),
-            margin: UiRect {
-                left: Val::Auto,
-                right: Val::Px(25.),
-                top: Val::Px(25.),
-                bottom: Val::Auto,
-            },
-            ..default()
-        },
-        z_index: ZIndex::Local(1),
-        background_color: BackgroundColor(Color::BLUE),
-        ..default()
-    });
-}
-
-fn default_style() -> Style {
-    Style {
-        flex_direction: FlexDirection::Column,
-        width: Val::Percent(100.),
-        height: Val::Percent(45.),
-        margin: UiRect::all(Val::Auto),
-        ..default()
-    }
 }