WIP: Adding the menu #110

Draft
raphael wants to merge 13 commits from new-menu into main
Showing only changes of commit f9eb0c0e1e - Show all commits

View file

@ -19,66 +19,72 @@ impl Plugin for MenuPlugin {
} }
} }
/// Display the UI of the menu to host a game or join one. #[derive(Component)]
// fn old_menu( struct Host;
// mut ctx: EguiContexts,
// mut connection_string: Local<String>,
// mut next_scene: ResMut<NextState<CurrentScene>>,
// mut request_join: EventWriter<SendTo<RequestJoin>>,
// mut name: Local<String>,
// connection: Res<Connection>,
// mut commands: Commands,
// ) {
// let Some(uuid) = connection.identifier() else {
// return;
// };
// egui::CentralPanel::default().show(ctx.ctx_mut(), |ui| { #[derive(Component)]
// ui.heading("Border Wars"); struct Join;
// ui.separator(); // Display the UI of the menu to host a game or join one.
fn old_menu(
mut ctx: EguiContexts,
mut connection_string: Local<String>,
mut next_scene: ResMut<NextState<CurrentScene>>,
mut request_join: EventWriter<SendTo<RequestJoin>>,
mut name: Local<String>,
connection: Res<Connection>,
mut commands: Commands,
) {
let Some(uuid) = connection.identifier() else {
return;
};
// ui.label("Name"); egui::CentralPanel::default().show(ctx.ctx_mut(), |ui| {
// ui.text_edit_singleline(&mut *name); ui.heading("Border Wars");
// ui.separator(); ui.separator();
// ui.label("Connect to an existing game:"); ui.label("Name");
// ui.horizontal(|ui| { ui.text_edit_singleline(&mut *name);
// ui.label("Game ID: ");
// ui.text_edit_singleline(&mut *connection_string);
// let Ok(game_id) = Uuid::parse_str(&connection_string) else { ui.separator();
// return;
// };
// if ui.button("Join").clicked() { ui.label("Connect to an existing game:");
// next_scene.set(CurrentScene::Lobby); ui.horizontal(|ui| {
// request_join.send(SendTo( ui.label("Game ID: ");
// game_id, ui.text_edit_singleline(&mut *connection_string);
// RequestJoin(Player {
// name: name.clone(),
// rank: PlayerRank::Player,
// uuid,
// color: rand::random::<(u8, u8, u8)>(),
// }),
// ));
// }
// });
// ui.separator(); let Ok(game_id) = Uuid::parse_str(&connection_string) else {
return;
};
// if ui.button("Create new game").clicked() { if ui.button("Join").clicked() {
// next_scene.set(CurrentScene::Lobby); next_scene.set(CurrentScene::Lobby);
// commands.spawn(Player { request_join.send(SendTo(
// name: name.clone(), game_id,
// rank: PlayerRank::Admin, RequestJoin(Player {
// uuid, name: name.clone(),
// color: rand::random::<(u8, u8, u8)>(), rank: PlayerRank::Player,
// }); uuid,
// } color: rand::random::<(u8, u8, u8)>(),
// }); }),
// } ));
}
});
ui.separator();
if ui.button("Create new game").clicked() {
next_scene.set(CurrentScene::Lobby);
commands.spawn(Player {
name: name.clone(),
rank: PlayerRank::Admin,
uuid,
color: rand::random::<(u8, u8, u8)>(),
});
}
});
}
/// A Component to identify menus entities. /// A Component to identify menus entities.

Put some comments to tell which élément you are creating

Put some comments to tell which élément you are creating
/// In order to be able to remove them later. /// In order to be able to remove them later.
@ -88,12 +94,13 @@ struct MenuEntity;
type TargetScene = crate::Scene; type TargetScene = crate::Scene;
fn menu_ui(mut commands: Commands, asset_server: Res<AssetServer>) { fn menu_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
// Create the background.
commands commands
.spawn(ImageBundle { .spawn(ImageBundle {
style: Style { style: Style {
margin: UiRect::all(Val::Auto), margin: UiRect::all(Val::Auto),
width: Val::Px(1280.), width: px(1280.),
height: Val::Px(720.), height: px(720.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
..default() ..default()
}, },
@ -104,11 +111,12 @@ fn menu_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
.insert(MenuEntity) .insert(MenuEntity)
.with_children(|child: &mut ChildBuilder| creation_menu_ui(child, &asset_server)); .with_children(|child: &mut ChildBuilder| creation_menu_ui(child, &asset_server));
// Create the settings button.
create_side_button( create_side_button(
UiRect { UiRect {
left: Val::Px(25.), left: px(25.),
right: Val::Auto, right: Val::Auto,
top: Val::Px(25.), top: px(25.),
bottom: Val::Auto, bottom: Val::Auto,
}, },
TargetScene::Lobby, TargetScene::Lobby,
@ -119,11 +127,12 @@ fn menu_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
}, },
); );
// Create the info button.
create_side_button( create_side_button(
UiRect { UiRect {
left: Val::Auto, left: Val::Auto,
right: Val::Px(25.), right: px(25.),
top: Val::Px(25.), top: px(25.),
bottom: Val::Auto, bottom: Val::Auto,
}, },
TargetScene::Lobby, TargetScene::Lobby,
@ -145,7 +154,7 @@ fn create_side_button(
commands commands
.spawn(ButtonBundle { .spawn(ButtonBundle {
style: Style { style: Style {
width: Val::Px(53.), width: px(53.),
aspect_ratio: Some(1.), aspect_ratio: Some(1.),
margin, margin,
..default() ..default()
@ -157,147 +166,153 @@ fn create_side_button(
.insert((target_scene, textures, MenuEntity)); .insert((target_scene, textures, MenuEntity));
} }
/// That function create all elements of the menu.
fn creation_menu_ui(commands: &mut ChildBuilder, asset_server: &Res<AssetServer>) { fn creation_menu_ui(commands: &mut ChildBuilder, asset_server: &Res<AssetServer>) {
// Create the title.
create_object( create_object(
commands, commands,
(UiImage { (UiImage {
texture: asset_server.load("menu/border_wars.png"), texture: asset_server.load("menu/border_wars.png"),
..default() ..default()
},), },),
Val::Px(78.), (px(614.), px(78.)),
Val::Px(614.), (px(333.), px(25.)),
Val::Px(25.),
Val::Px(333.),
); );
// Create the host icon.
create_object( create_object(
commands, commands,
(UiImage { (UiImage {
texture: asset_server.load("menu/host_icon.png"), texture: asset_server.load("menu/host_icon.png"),
..default() ..default()
},), },),
Val::Px(42.), (px(53.), px(42.)),
Val::Px(53.), (px(356.), px(223.)),
Val::Px(223.),
Val::Px(356.),
); );
// Create the host title.
create_object( create_object(
commands, commands,
(UiImage { (UiImage {
texture: asset_server.load("menu/host.png"), texture: asset_server.load("menu/host.png"),
..default() ..default()
},), },),
Val::Px(38.), (px(105.), px(38.)),
Val::Px(105.), (px(429.), px(229.)),
Val::Px(229.),
Val::Px(429.),
); );
// Create the host line.
create_object( create_object(
commands, commands,
(UiImage { (UiImage {
texture: asset_server.load("menu/trait.png"), texture: asset_server.load("menu/line.png"),
..default() ..default()
},), },),
Val::Px(7.), (px(427.), px(7.)),
Val::Px(427.), (px(426.), px(279.)),
Val::Px(279.),
Val::Px(426.),
); );
// Create the host button.
create_object( create_object(
commands, commands,
(UiImage { (
texture: asset_server.load("menu/button.png"), UiImage {
..default() texture: asset_server.load("menu/button.png"),
},), ..default()
Val::Px(34.), },
Val::Px(253.), Button,
Val::Px(299.), Host,
Val::Px(513.), ),
(px(253.), px(34.)),
(px(513.), px(299.)),
); );
// Create the join icon.
create_object( create_object(
commands, commands,
(UiImage { (UiImage {
texture: asset_server.load("menu/join_icon.png"), texture: asset_server.load("menu/join_icon.png"),
..default() ..default()
},), },),
Val::Px(41.), (px(63.), px(41.)),
Val::Px(63.), (px(353.), px(393.)),
Val::Px(393.),
Val::Px(353.),
); );
// Create the join title.
create_object( create_object(
commands, commands,
(UiImage { (UiImage {
texture: asset_server.load("menu/join.png"), texture: asset_server.load("menu/join.png"),
..default() ..default()
},), },),
Val::Px(38.), (px(101.), px(38.)),
Val::Px(101.), (px(428.), px(392.)),
Val::Px(392.),
Val::Px(428.),
); );
// Create the join line.
create_object( create_object(
commands, commands,
(UiImage { (UiImage {
texture: asset_server.load("menu/trait.png"), texture: asset_server.load("menu/line.png"),
..default() ..default()
},), },),
Val::Px(7.), (px(427.), px(7.)),
Val::Px(427.), (px(426.), px(443.)),
Val::Px(443.),
Val::Px(426.),
); );
// Create the join button.
create_object( create_object(
commands, commands,
(UiImage { (
texture: asset_server.load("menu/button.png"), UiImage {
..default() texture: asset_server.load("menu/button.png"),
},), ..default()
Val::Px(34.), },
Val::Px(253.), Button,
Val::Px(463.), Join,
Val::Px(513.), ),
(px(253.), px(34.)),
(px(513.), px(463.)),
); );
// Create the airplane.
create_object( create_object(
commands, commands,
(UiImage { (
texture: asset_server.load("menu/airplane.png"), UiImage {
..default() texture: asset_server.load("menu/airplane.png"),
},), ..default()
Val::Px(30.), },
Val::Px(35.), Button,
Val::Px(465.), ),
Val::Px(777.), (px(35.), px(30.)),
(px(777.), px(465.)),
); );
} }

This does not render anything, it only create ui elements

This does not render anything, it only create ui elements
/// A function that create objets with the given parameters.
fn create_object<T: Bundle>( fn create_object<T: Bundle>(
background: &mut ChildBuilder, background: &mut ChildBuilder,
textures: T, bundle: T,
height: Val, size: (Val, Val),
width: Val, pos: (Val, Val),
top: Val,
left: Val,
) { ) {
background background
.spawn(ImageBundle { .spawn(ImageBundle {
style: Style { style: Style {
height, width: size.0,
width, height: size.1,
top, left: pos.0,
left, top: pos.1,
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
..default() ..default()
}, },
..default() ..default()
}) })
.insert(textures); .insert(bundle);
}
/// Translate a f32 into a `Val::Px'.
fn px(value: f32) -> Val {
Val::Px(value)
} }