pop
/
monologue-trees
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Technically usable. calling it a night

Browse Source
main
Elijah Voigt 2 years ago
parent 87a4c6fd40
commit fc02df8638
2 changed files with 343 additions and 222 deletions
Show Stats Download Patch File Download Diff File

411
bin/ui-wtf.rs
Unescape Escape View File

@ -1,9 +1,7 @@
use bevy::{ // TODO: Z-index of children should be higher than parents
input::{keyboard::KeyboardInput, ButtonState},
prelude::*, use bevy::prelude::*;
window::PrimaryWindow, use monologue_trees::ui::*;
};
use monologue_trees::{debug::*, ui::*};
fn main() { fn main() {
App::new() App::new()
@ -21,31 +19,80 @@ fn main() {
// .init_resource::<Icon>() // .init_resource::<Icon>()
.add_systems(Startup, init_ui2) .add_systems(Startup, init_ui2)
.add_systems(Update, toggle) .add_systems(Update, toggle)
.add_systems(PostUpdate, selection)
// .add_systems(Startup, init_ui) // .add_systems(Startup, init_ui)
// .add_systems(Update, (cursors, container())) // .add_systems(Update, (cursors, container))
.run(); .run();
} }
fn container() -> NodeBundle { #[derive(Debug, Bundle)]
NodeBundle { struct UiKitContainer {
style: Style { node_bundle: NodeBundle,
border: UiRect::all(Val::Px(2.0)), select: Select,
right: Val::Percent(-100.0), }
top: Val::Px(-4.0),
#[derive(Copy, Clone)]
enum UiKitPosition {
Top,
Left,
Right,
}
impl UiKitContainer {
fn new(position: UiKitPosition) -> Self {
let style = match position {
UiKitPosition::Top => Style {
border: UiRect::all(Val::Px(1.0)),
top: Val::Percent(102.0),
left: Val::Px(-2.0),
flex_direction: FlexDirection::Column,
align_items: AlignItems::FlexStart,
display: Display::None,
..default()
},
UiKitPosition::Left => Style {
border: UiRect::all(Val::Px(1.0)),
left: Val::Percent(100.0),
top: Val::Px(-2.0),
flex_direction: FlexDirection::Column,
justify_items: JustifyItems::Start,
display: Display::None,
..default()
},
UiKitPosition::Right => Style {
border: UiRect::all(Val::Px(1.0)),
right: Val::Percent(104.0),
top: Val::Px(-2.0),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_items: JustifyItems::Start,
display: Display::None, display: Display::None,
..default() ..default()
}, },
};
UiKitContainer {
node_bundle: NodeBundle {
style,
background_color: BackgroundColor(Color::PURPLE), background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK), border_color: BorderColor(Color::BLACK),
..default() ..default()
},
select: Select::None,
} }
}
}
#[derive(Debug, Bundle)]
struct UiKitButton {
button_bundle: ButtonBundle,
select: Select,
} }
fn spec(color: Color) -> ButtonBundle { impl UiKitButton {
ButtonBundle { fn new(color: Color) -> Self {
UiKitButton {
button_bundle: ButtonBundle {
style: Style { style: Style {
border: UiRect::all(Val::Px(2.0)), border: UiRect::all(Val::Px(1.0)),
width: Val::Px(100.0), width: Val::Px(100.0),
height: Val::Px(50.0), height: Val::Px(50.0),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
@ -54,35 +101,88 @@ fn spec(color: Color) -> ButtonBundle {
background_color: BackgroundColor(color), background_color: BackgroundColor(color),
border_color: BorderColor(Color::BLACK), border_color: BorderColor(Color::BLACK),
..default() ..default()
},
select: Select::None,
}
} }
} }
fn toggle( #[derive(Debug, Component, Copy, Clone)]
mut events: Query< enum Select {
(&mut BackgroundColor, &Interaction, &Children), Active,
(Changed<Interaction>, With<Button>), None,
>, }
/// When an item is selected/de-selected change it's display accordingly
fn selection(
mut events: Query<(&mut BackgroundColor, &Select, &Children), (Changed<Select>, With<Button>)>,
mut styles: Query<&mut Style>, mut styles: Query<&mut Style>,
) { ) {
events events
.iter_mut() .iter_mut()
.for_each(|(mut bg_color, interaction, children)| match interaction { .for_each(|(mut bg_color, select, children)| {
Interaction::Pressed => { bg_color.0 = match select {
bg_color.0 = Color::RED; Select::Active => Color::RED,
Select::None => Color::WHITE,
};
children.iter().for_each(|&child| { children.iter().for_each(|&child| {
if let Ok(mut style) = styles.get_mut(child) { if let Ok(mut style) = styles.get_mut(child) {
style.display = match style.display { style.display = match select {
Display::Flex => Display::None, Select::Active => Display::Flex,
Display::None | _ => Display::Flex, Select::None => Display::None,
}; }
}
});
});
}
/// Toggle a UI Nav tree open/closed
///
/// PERF: This is hella not performant, we just usually don't have many elements to iterate over so
/// it's tolerable.
///
// TODO: Should not be able to select multiple children in branch of tree
// TODO: Port to ui.rs
fn toggle(
events: Query<Entity, (Changed<Interaction>, With<Button>)>,
interactions: Query<&Interaction>,
mut selects: Query<&mut Select>,
children: Query<&Children>,
) {
events.iter().for_each(|entity| {
// If all interactions are inactive, set all selections to None
if interactions
.iter()
.all(|&interaction| interaction == Interaction::None)
{
selects.iter_mut().for_each(|mut select| {
*select = Select::None;
});
// Otherwise change this item's selection
} else {
let mut select = selects
.get_mut(entity)
.expect("Entity has Select component");
let interaction = interactions
.get(entity)
.expect("Entity has Interaction component");
*select = match interaction {
Interaction::Pressed | Interaction::Hovered => Select::Active,
Interaction::None => {
let children_inactive = children.iter_descendants(entity).all(|child| {
if let Ok(&c) = interactions.get(child) {
c == Interaction::None
} else {
true
} }
}); });
if children_inactive {
Select::None
} else {
Select::Active
}
} }
Interaction::Hovered => {
bg_color.0 = Color::RED;
} }
Interaction::None => {
bg_color.0 = Color::PINK;
} }
}); });
} }
@ -125,98 +225,205 @@ fn toggle(
// CursorIcon::RowResize, // CursorIcon::RowResize,
// ]; // ];
fn init_ui2(mut commands: Commands) { fn spawn_tree(parent: &mut ChildBuilder, pos: UiKitPosition) {
commands.spawn(( let pos2 = match pos {
Camera2dBundle { ..default() }, UiKitPosition::Top => UiKitPosition::Left,
UiCameraConfig { show_ui: true }, _ => pos,
)); };
parent
commands .spawn(UiKitButton::new(Color::PINK))
.spawn(NodeBundle { .with_children(|parent| {
style: Style { parent
border: UiRect::all(Val::Px(2.0)), .spawn(UiKitContainer::new(pos))
flex_direction: FlexDirection::Column,
..default()
},
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(spec(Color::PINK)).with_children(|parent| { parent
parent.spawn(container()).with_children(|parent| { .spawn(UiKitButton::new(Color::PINK))
parent.spawn(spec(Color::PINK)).with_children(|parent| { .with_children(|parent| {
parent.spawn(container()).with_children(|parent| { parent
parent.spawn(spec(Color::PINK)); .spawn(UiKitContainer::new(pos2))
parent.spawn(spec(Color::PINK)); .with_children(|parent| {
parent.spawn(spec(Color::PINK)); parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
});
});
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
}); });
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| { parent
parent.spawn(container()).with_children(|parent| { .spawn(UiKitButton::new(Color::PINK))
parent.spawn(spec(Color::PINK)); .with_children(|parent| {
parent.spawn(spec(Color::PINK)); parent
parent.spawn(spec(Color::PINK)); .spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
});
}); });
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
}); });
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos))
.with_children(|parent| {
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
}); });
}); });
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
}); });
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
}); });
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
}); });
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos))
.with_children(|parent| {
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
}); });
}); });
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
}); });
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos2))
.with_children(|parent| {
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
parent.spawn(UiKitButton::new(Color::PINK));
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
}); });
}); });
parent.spawn(spec(Color::PINK)).with_children(|parent| {
parent.spawn(container()).with_children(|parent| {
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
parent.spawn(spec(Color::PINK));
}); });
}
fn init_ui2(mut commands: Commands) {
commands.spawn((
Camera2dBundle { ..default() },
UiCameraConfig { show_ui: true },
));
commands
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
justify_content: JustifyContent::SpaceEvenly,
..default()
},
background_color: BackgroundColor(Color::FUCHSIA),
..default()
})
.with_children(|parent| {
parent
.spawn(NodeBundle {
style: Style {
border: UiRect::all(Val::Px(1.0)),
left: Val::Px(0.0),
flex_direction: FlexDirection::Column,
position_type: PositionType::Absolute,
align_self: AlignSelf::Center,
..default()
},
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
})
.with_children(|parent| {
spawn_tree(parent, UiKitPosition::Left);
}); });
parent
.spawn(NodeBundle {
style: Style {
border: UiRect::all(Val::Px(1.0)),
right: Val::Px(0.0),
flex_direction: FlexDirection::Column,
position_type: PositionType::Absolute,
align_self: AlignSelf::Center,
..default()
},
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
})
.with_children(|parent| {
spawn_tree(parent, UiKitPosition::Right);
}); });
parent
.spawn(NodeBundle {
style: Style {
border: UiRect::all(Val::Px(1.0)),
top: Val::Px(0.0),
flex_direction: FlexDirection::Row,
position_type: PositionType::Absolute,
..default()
},
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
})
.with_children(|parent| {
spawn_tree(parent, UiKitPosition::Top);
}); });
}); });
} }
@ -258,7 +465,7 @@ fn init_ui2(mut commands: Commands) {
// )) // ))
// .with_children(|parent| { // .with_children(|parent| {
// parent.spawn(( // parent.spawn((
// container, // UiKitContainer::new,
// GameUiSet, // GameUiSet,
// // Name::new("Grow/Shrink Set"), // // Name::new("Grow/Shrink Set"),
// NodeBundle { ..default() }, // NodeBundle { ..default() },
@ -316,7 +523,7 @@ fn init_ui2(mut commands: Commands) {
// } // }
// //
// #[derive(Debug, Component)] // #[derive(Debug, Component)]
// struct container; // struct Container;
// //
// fn container( // fn container(
// mut events: EventReader<KeyboardInput>, // mut events: EventReader<KeyboardInput>,

94
src/ui.rs
Unescape Escape View File

@ -7,95 +7,9 @@ pub struct GameUiPlugin;
impl Plugin for GameUiPlugin { impl Plugin for GameUiPlugin {
fn build(&self, app: &mut App) { fn build(&self, app: &mut App) {
app.add_systems(PreUpdate, (spawn_nav, spawn_tab, spawn_set, spawn_button)) app;
.add_systems(Update, (manage_names, manage_tab)); // .add_systems(PreUpdate, )
// .add_systems(Update,)
// .add_systems(PostUpdate, );
} }
} }
/// Navigation UI Container
/// Buttons in a nav correspond to Tabs in a navbar/navmenu
#[derive(Component, PartialEq)]
pub struct GameUiNav;
/// Sets contain a variety of elements like action buttons
/// Usually the "leaf" of a navigation tree
#[derive(Component, PartialEq)]
pub struct GameUiSet;
/// Buttons are used for interaction in the UI
#[derive(Component, PartialEq)]
pub struct GameUiButton;
#[derive(Component, PartialEq)]
pub struct GameUiTab;
fn spawn_nav(events: Query<(Entity, &GameUiNav), Added<GameUiNav>>, mut commands: Commands) {
events.iter().for_each(|(entity, _)| {
info!("Spawning Nav UI");
});
}
fn spawn_tab(events: Query<Entity, Added<GameUiTab>>, mut commands: Commands) {
events.iter().for_each(|entity| {});
}
fn spawn_set(events: Query<Entity, Added<GameUiSet>>, mut commands: Commands) {
events.iter().for_each(|entity| {});
}
fn spawn_button(
events: Query<(Entity, &GameUiButton), Added<GameUiButton>>,
mut commands: Commands,
) {
events.iter().for_each(|(entity, _)| {
info!("Spawning UI Button");
commands.entity(entity).insert(ButtonBundle {
style: Style {
padding: UiRect::all(Val::Px(3.0)),
margin: UiRect::all(Val::Px(3.0)),
..default()
},
background_color: BackgroundColor(Color::BLUE),
..default()
});
});
}
fn manage_names(
events: Query<
(Entity, &Name),
(
Or<(With<GameUiNav>, With<GameUiButton>)>,
Or<(Added<Name>, Changed<Name>)>,
),
>,
mut commands: Commands,
) {
events.iter().for_each(|(entity, name)| {
commands.entity(entity).with_children(|parent| {
parent
.spawn(NodeBundle {
style: Style {
align_self: AlignSelf::FlexStart,
padding: UiRect::all(Val::Px(3.0)),
margin: UiRect::all(Val::Px(3.0)),
..default()
},
background_color: BackgroundColor(Color::CRIMSON),
..default()
})
.with_children(|parent| {
parent.spawn(TextBundle::from_section(
name.as_str(),
TextStyle { ..default() },
));
});
});
});
}
fn manage_tab(events: Query<&Interaction, Changed<Interaction>>) {
events.iter().for_each(|interaction| {
info!("When tab is clicked, show/hide content");
});
}

Write Preview
Loading…
Cancel
Save