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

well it only works vertically (probably) but it works. Im tired.

Browse Source
main
Elijah Voigt 2 years ago
parent 28d1bd8790
commit 87a4c6fd40
2 changed files with 354 additions and 304 deletions
Show Stats Download Patch File Download Diff File

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

@ -18,54 +18,114 @@ fn main() {
}),
GameUiPlugin,
))
.init_resource::<Icon>()
.add_systems(Startup, init_ui)
.add_systems(Update, (cursors, container))
// .init_resource::<Icon>()
.add_systems(Startup, init_ui2)
.add_systems(Update, toggle)
// .add_systems(Startup, init_ui)
// .add_systems(Update, (cursors, container()))
.run();
}
const CURSORS: [CursorIcon; 35] = [
CursorIcon::Default,
CursorIcon::Crosshair,
CursorIcon::Hand,
CursorIcon::Arrow,
CursorIcon::Move,
CursorIcon::Text,
CursorIcon::Wait,
CursorIcon::Help,
CursorIcon::Progress,
CursorIcon::NotAllowed,
CursorIcon::ContextMenu,
CursorIcon::Cell,
CursorIcon::VerticalText,
CursorIcon::Alias,
CursorIcon::Copy,
CursorIcon::NoDrop,
CursorIcon::Grab,
CursorIcon::Grabbing,
CursorIcon::AllScroll,
CursorIcon::ZoomIn,
CursorIcon::ZoomOut,
CursorIcon::EResize,
CursorIcon::NResize,
CursorIcon::NeResize,
CursorIcon::NwResize,
CursorIcon::SResize,
CursorIcon::SeResize,
CursorIcon::SwResize,
CursorIcon::WResize,
CursorIcon::EwResize,
CursorIcon::NsResize,
CursorIcon::NeswResize,
CursorIcon::NwseResize,
CursorIcon::ColResize,
CursorIcon::RowResize,
];
fn container() -> NodeBundle {
NodeBundle {
style: Style {
border: UiRect::all(Val::Px(2.0)),
right: Val::Percent(-100.0),
top: Val::Px(-4.0),
flex_direction: FlexDirection::Column,
display: Display::None,
..default()
},
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
}
}
#[derive(Debug, Component, Resource, Default)]
struct Icon(CursorIcon);
fn spec(color: Color) -> ButtonBundle {
ButtonBundle {
style: Style {
border: UiRect::all(Val::Px(2.0)),
width: Val::Px(100.0),
height: Val::Px(50.0),
flex_direction: FlexDirection::Column,
..default()
},
background_color: BackgroundColor(color),
border_color: BorderColor(Color::BLACK),
..default()
}
}
fn init_ui(mut commands: Commands) {
fn toggle(
mut events: Query<
(&mut BackgroundColor, &Interaction, &Children),
(Changed<Interaction>, 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;
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,
};
}
});
}
Interaction::Hovered => {
bg_color.0 = Color::RED;
}
Interaction::None => {
bg_color.0 = Color::PINK;
}
});
}
// const CURSORS: [CursorIcon; 35] = [
// CursorIcon::Default,
// CursorIcon::Crosshair,
// CursorIcon::Hand,
// CursorIcon::Arrow,
// CursorIcon::Move,
// CursorIcon::Text,
// CursorIcon::Wait,
// CursorIcon::Help,
// CursorIcon::Progress,
// CursorIcon::NotAllowed,
// CursorIcon::ContextMenu,
// CursorIcon::Cell,
// CursorIcon::VerticalText,
// CursorIcon::Alias,
// CursorIcon::Copy,
// CursorIcon::NoDrop,
// CursorIcon::Grab,
// CursorIcon::Grabbing,
// CursorIcon::AllScroll,
// CursorIcon::ZoomIn,
// CursorIcon::ZoomOut,
// CursorIcon::EResize,
// CursorIcon::NResize,
// CursorIcon::NeResize,
// CursorIcon::NwResize,
// CursorIcon::SResize,
// CursorIcon::SeResize,
// CursorIcon::SwResize,
// CursorIcon::WResize,
// CursorIcon::EwResize,
// CursorIcon::NsResize,
// CursorIcon::NeswResize,
// CursorIcon::NwseResize,
// CursorIcon::ColResize,
// CursorIcon::RowResize,
// ];
fn init_ui2(mut commands: Commands) {
commands.spawn((
Camera2dBundle { ..default() },
UiCameraConfig { show_ui: true },
@ -74,118 +134,217 @@ fn init_ui(mut commands: Commands) {
commands
.spawn(NodeBundle {
style: Style {
height: Val::Percent(100.0),
width: Val::Percent(100.0),
justify_content: JustifyContent::Start,
align_items: AlignItems::Start,
border: UiRect::all(Val::Px(2.0)),
flex_direction: FlexDirection::Column,
..default()
},
background_color: BackgroundColor(Color::GRAY),
background_color: BackgroundColor(Color::PURPLE),
border_color: BorderColor(Color::BLACK),
..default()
})
.with_children(|parent| {
parent
.spawn((
GameUi::Nav,
// Name::new("Game Nav"),
NodeBundle { ..default() },
))
.with_children(|parent| {
parent
.spawn((
GameUi::Tab,
Name::new("Grow/Shrink Tab"),
NodeBundle { ..default() },
))
.with_children(|parent| {
parent.spawn((
Container,
GameUi::Set,
// Name::new("Grow/Shrink Set"),
NodeBundle { ..default() },
));
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((
GameUi::Tab,
Name::new("Cursor Icons Tab"),
NodeBundle { ..default() },
))
.with_children(|parent| {
parent
.spawn((
GameUi::Set,
// Name::new("Cursor Icons Set"),
NodeBundle { ..default() },
))
.with_children(|parent| {
CURSORS.iter().for_each(|&icon| {
parent.spawn((
GameUi::Button,
Name::new(format!("{:?}", icon)),
NodeBundle { ..default() },
Icon(icon),
));
});
});
});
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 cursors(
events: Query<(&Interaction, &Icon), (Changed<Interaction>, With<Button>)>,
mut primary_window: Query<&mut Window, With<PrimaryWindow>>,
mut curr: ResMut<Icon>,
) {
events.iter().for_each(|(&interaction, &ref icon)| {
let mut window = primary_window.single_mut();
match interaction {
Interaction::Hovered => {
(*window).cursor.icon = icon.0.clone();
}
Interaction::Pressed => {
curr.0 = icon.0.clone();
}
Interaction::None => {
(*window).cursor.icon = curr.0.clone();
}
}
})
}
#[derive(Debug, Component)]
struct Container;
fn container(
mut events: EventReader<KeyboardInput>,
mut commands: Commands,
root: Query<Entity, With<Container>>,
children: Query<&Children, With<Container>>,
) {
events.iter().for_each(
|KeyboardInput {
key_code, state, ..
}| {
match (key_code, state) {
(Some(KeyCode::Up), ButtonState::Pressed) => {
commands.entity(root.single()).with_children(|parent| {
parent.spawn((
GameUi::Button,
Name::new("asdfwtf"),
NodeBundle { ..default() },
));
});
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));
});
});
}
(Some(KeyCode::Down), ButtonState::Pressed) => {
children.single().iter().last().iter().for_each(|&&child| {
commands.entity(child).despawn_recursive();
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(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(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));
});
});
});
});
});
}
// #[derive(Debug, Component, Resource, Default)]
// struct Icon(CursorIcon);
//
// fn init_ui(mut commands: Commands) {
// commands.spawn((
// Camera2dBundle { ..default() },
// UiCameraConfig { show_ui: true },
// ));
//
// commands
// .spawn(NodeBundle {
// style: Style {
// height: Val::Percent(100.0),
// width: Val::Percent(100.0),
// justify_content: JustifyContent::Start,
// align_items: AlignItems::Start,
// ..default()
// },
// background_color: BackgroundColor(Color::GRAY),
// ..default()
// })
// .with_children(|parent| {
// parent
// .spawn((
// GameUiNav,
// // Name::new("Game Nav"),
// NodeBundle { ..default() },
// ))
// .with_children(|parent| {
// parent
// .spawn((
// GameUiTab,
// Name::new("Grow/Shrink Tab"),
// NodeBundle { ..default() },
// ))
// .with_children(|parent| {
// parent.spawn((
// container,
// GameUiSet,
// // Name::new("Grow/Shrink Set"),
// NodeBundle { ..default() },
// ));
// });
//
// parent
// .spawn((
// GameUiTab,
// Name::new("Cursor Icons Tab"),
// NodeBundle { ..default() },
// ))
// .with_children(|parent| {
// parent
// .spawn((
// GameUiSet,
// // Name::new("Cursor Icons Set"),
// NodeBundle { ..default() },
// ))
// .with_children(|parent| {
// CURSORS.iter().for_each(|&icon| {
// parent.spawn((
// GameUiButton,
// Name::new(format!("{:?}", icon)),
// NodeBundle { ..default() },
// Icon(icon),
// ));
// });
// });
// });
// });
// });
// }
//
// fn cursors(
// events: Query<(&Interaction, &Icon), (Changed<Interaction>, With<Button>)>,
// mut primary_window: Query<&mut Window, With<PrimaryWindow>>,
// mut curr: ResMut<Icon>,
// ) {
// events.iter().for_each(|(&interaction, &ref icon)| {
// let mut window = primary_window.single_mut();
//
// match interaction {
// Interaction::Hovered => {
// (*window).cursor.icon = icon.0.clone();
// }
// Interaction::Pressed => {
// curr.0 = icon.0.clone();
// }
// Interaction::None => {
// (*window).cursor.icon = curr.0.clone();
// }
// }
// })
// }
//
// #[derive(Debug, Component)]
// struct container;
//
// fn container(
// mut events: EventReader<KeyboardInput>,
// mut commands: Commands,
// root: Query<Entity, With<container>>,
// children: Query<&Children, With<container>>,
// ) {
// events.iter().for_each(
// |KeyboardInput {
// key_code, state, ..
// }| {
// match (key_code, state) {
// (Some(KeyCode::Up), ButtonState::Pressed) => {
// commands.entity(root.single()).with_children(|parent| {
// parent.spawn((
// GameUiButton,
// Name::new("asdfwtf"),
// NodeBundle { ..default() },
// ));
// });
// }
// (Some(KeyCode::Down), ButtonState::Pressed) => {
// children.single().iter().last().iter().for_each(|&&child| {
// commands.entity(child).despawn_recursive();
// });
// }
// _ => (),
// }
// },
// )
// }

205
src/ui.rs
Unescape Escape View File

@ -12,129 +12,63 @@ impl Plugin for GameUiPlugin {
}
}
/// Component for marking UI Nodes
/// Navigation UI Container
/// Buttons in a nav correspond to Tabs in a navbar/navmenu
#[derive(Component, PartialEq)]
pub enum GameUi {
/// Navigation container
Nav,
/// Tab container
Tab,
/// Game UI Set
Set,
/// Game UI Button
Button,
}
pub struct GameUiNav;
fn spawn_nav(events: Query<(Entity, &GameUi), Added<GameUi>>, mut commands: Commands) {
events
.iter()
.filter(|(_, ui)| **ui == GameUi::Nav)
.for_each(|(entity, _)| {
info!("Spawning Nav UI");
commands.entity(entity).insert(NodeBundle {
style: Style {
flex_direction: FlexDirection::Row, // ?
padding: UiRect::all(Val::Px(3.0)),
margin: UiRect::all(Val::Px(3.0)),
width: Val::Percent(100.0),
max_height: Val::Percent(100.0),
overflow: Overflow::clip(),
justify_content: JustifyContent::Start,
align_items: AlignItems::Start,
..default()
},
background_color: BackgroundColor(Color::PURPLE),
..default()
});
});
}
/// Sets contain a variety of elements like action buttons
/// Usually the "leaf" of a navigation tree
#[derive(Component, PartialEq)]
pub struct GameUiSet;
fn spawn_tab(
events: Query<(Entity, &GameUi, &Name, &Parent), Added<GameUi>>,
mut commands: Commands,
) {
events
.iter()
.filter(|(_, ui, _, _)| **ui == GameUi::Tab)
.for_each(|(entity, _, name, parent)| {
info!("Spawning Tab");
// Create container for this tab
let parent_id = commands
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column,
padding: UiRect::all(Val::Px(3.0)),
margin: UiRect::all(Val::Px(3.0)),
..default()
},
background_color: BackgroundColor(Color::GREEN),
..default()
})
.set_parent(parent.get())
.with_children(|parent| {
parent.spawn((GameUi::Button, name.clone(), NodeBundle { ..default() }));
})
.id();
/// Buttons are used for interaction in the UI
#[derive(Component, PartialEq)]
pub struct GameUiButton;
// Insert spawn container with tab
commands
.entity(entity)
.remove::<Name>()
.insert(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column,
padding: UiRect::all(Val::Px(3.0)),
margin: UiRect::all(Val::Px(3.0)),
display: Display::None,
..default()
},
background_color: BackgroundColor(Color::PINK),
..default()
})
.set_parent(parent_id);
});
#[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_set(events: Query<(Entity, &GameUi), Added<GameUi>>, mut commands: Commands) {
events
.iter()
.filter(|(_, ui)| **ui == GameUi::Set)
.for_each(|(entity, _)| {
info!("Spawning UI Set");
commands.entity(entity).insert(NodeBundle {
style: Style {
flex_direction: FlexDirection::Row,
flex_wrap: FlexWrap::Wrap,
padding: UiRect::all(Val::Px(3.0)),
margin: UiRect::all(Val::Px(3.0)),
..default()
},
background_color: BackgroundColor(Color::RED),
..default()
});
});
fn spawn_tab(events: Query<Entity, Added<GameUiTab>>, mut commands: Commands) {
events.iter().for_each(|entity| {});
}
fn spawn_button(events: Query<(Entity, &GameUi), Added<GameUi>>, mut commands: Commands) {
events
.iter()
.filter(|(_, ui)| **ui == GameUi::Button)
.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),
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), (With<GameUi>, Or<(Added<Name>, Changed<Name>)>)>,
events: Query<
(Entity, &Name),
(
Or<(With<GameUiNav>, With<GameUiButton>)>,
Or<(Added<Name>, Changed<Name>)>,
),
>,
mut commands: Commands,
) {
events.iter().for_each(|(entity, name)| {
@ -160,51 +94,8 @@ fn manage_names(
});
}
fn manage_tab(
events: Query<
(&Interaction, Entity, &Parent),
(Changed<Interaction>, With<Button>, With<GameUi>),
>,
children: Query<&Children>,
parents: Query<&Parent>,
ui_elements: Query<(Entity, &GameUi)>,
mut styles: Query<&mut Style>,
mut commands: Commands,
) {
events
.iter()
.for_each(|(interaction, interacted_entity, parent)| {
// Checks:
// entity pressed
// entity is button
// entity parent is a tab
//
// Find all other tabs
// Display::None all except for tab button
match interaction {
Interaction::Pressed => {
children.get(parent.get()).iter().for_each(|&children| {
children
.iter()
.filter(|&child| *child != interacted_entity)
.for_each(|&child| {
let mut style = styles.get_mut(child).expect("child has style");
style.display = match style.display {
Display::Flex => Display::None,
Display::None => Display::Flex,
_ => Display::Flex, // Not Reachable
}
});
})
}
_ => (),
}
// When tab button is clicked
// For all children of parent (the tab)
// If selected:
// display: Display::Flex,
// else:
// Set display: Display::None,
});
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