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::{
input::{keyboard::KeyboardInput, ButtonState},
prelude::*,
window::PrimaryWindow,
};
use monologue_trees::{debug::*, ui::*};
// TODO: Z-index of children should be higher than parents
use bevy::prelude::*;
use monologue_trees::ui::*;
fn main() {
App::new()
@ -21,31 +19,80 @@ fn main() {
// .init_resource::<Icon>()
.add_systems(Startup, init_ui2)
.add_systems(Update, toggle)
.add_systems(PostUpdate, selection)
// .add_systems(Startup, init_ui)
// .add_systems(Update, (cursors, container()))
// .add_systems(Update, (cursors, container))
.run();
}
fn container() -> NodeBundle {
NodeBundle {
style: Style {
border: UiRect::all(Val::Px(2.0)),
right: Val::Percent(-100.0),
top: Val::Px(-4.0),
#[derive(Debug, Bundle)]
struct UiKitContainer {
node_bundle: NodeBundle,
select: Select,
}
#[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,
justify_items: JustifyItems::Start,
display: Display::None,
..default()
},
};
UiKitContainer {
node_bundle: NodeBundle {
style,
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
},
select: Select::None,
}
}
}
#[derive(Debug, Bundle)]
struct UiKitButton {
button_bundle: ButtonBundle,
select: Select,
}
fn spec(color: Color) -> ButtonBundle {
ButtonBundle {
impl UiKitButton {
fn new(color: Color) -> Self {
UiKitButton {
button_bundle: ButtonBundle {
style: Style {
border: UiRect::all(Val::Px(2.0)),
border: UiRect::all(Val::Px(1.0)),
width: Val::Px(100.0),
height: Val::Px(50.0),
flex_direction: FlexDirection::Column,
@ -54,35 +101,88 @@ fn spec(color: Color) -> ButtonBundle {
background_color: BackgroundColor(color),
border_color: BorderColor(Color::BLACK),
..default()
},
select: Select::None,
}
}
}
fn toggle(
mut events: Query<
(&mut BackgroundColor, &Interaction, &Children),
(Changed<Interaction>, With<Button>),
>,
#[derive(Debug, Component, Copy, Clone)]
enum Select {
Active,
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>,
) {
events
.iter_mut()
.for_each(|(mut bg_color, interaction, children)| match interaction {
Interaction::Pressed => {
bg_color.0 = Color::RED;
.for_each(|(mut bg_color, select, children)| {
bg_color.0 = match select {
Select::Active => Color::RED,
Select::None => Color::WHITE,
};
children.iter().for_each(|&child| {
if let Ok(mut style) = styles.get_mut(child) {
style.display = match style.display {
Display::Flex => Display::None,
Display::None | _ => Display::Flex,
};
style.display = match select {
Select::Active => 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,
// ];
fn init_ui2(mut commands: Commands) {
commands.spawn((
Camera2dBundle { ..default() },
UiCameraConfig { show_ui: true },
));
commands
.spawn(NodeBundle {
style: Style {
border: UiRect::all(Val::Px(2.0)),
flex_direction: FlexDirection::Column,
..default()
},
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
})
fn spawn_tree(parent: &mut ChildBuilder, pos: UiKitPosition) {
let pos2 = match pos {
UiKitPosition::Top => UiKitPosition::Left,
_ => pos,
};
parent
.spawn(UiKitButton::new(Color::PINK))
.with_children(|parent| {
parent
.spawn(UiKitContainer::new(pos))
.with_children(|parent| {
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(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(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(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| {
// parent.spawn((
// container,
// UiKitContainer::new,
// GameUiSet,
// // Name::new("Grow/Shrink Set"),
// NodeBundle { ..default() },
@ -316,7 +523,7 @@ fn init_ui2(mut commands: Commands) {
// }
//
// #[derive(Debug, Component)]
// struct container;
// struct Container;
//
// fn container(
// mut events: EventReader<KeyboardInput>,

94
src/ui.rs
Unescape Escape View File

@ -7,95 +7,9 @@ pub struct GameUiPlugin;
impl Plugin for GameUiPlugin {
fn build(&self, app: &mut App) {
app.add_systems(PreUpdate, (spawn_nav, spawn_tab, spawn_set, spawn_button))
.add_systems(Update, (manage_names, manage_tab));
app;
// .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