From 87a4c6fd409d15ea120bfa5f7397c7e48e9116f9 Mon Sep 17 00:00:00 2001
From: Elijah Voigt <elijah.caine.mv@gmail.com>
Date: Sat, 12 Aug 2023 23:09:52 -0700
Subject: [PATCH] well it only works vertically (probably) but it works. Im
 tired.

---
 bin/ui-wtf.rs | 453 ++++++++++++++++++++++++++++++++++----------------
 src/ui.rs     | 205 ++++++-----------------
 2 files changed, 354 insertions(+), 304 deletions(-)

diff --git a/bin/ui-wtf.rs b/bin/ui-wtf.rs
index dba218d..a39bd28 100644
--- a/bin/ui-wtf.rs
+++ b/bin/ui-wtf.rs
@@ -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();
+//                     });
+//                 }
+//                 _ => (),
+//             }
+//         },
+//     )
+// }
diff --git a/src/ui.rs b/src/ui.rs
index a04e006..c0e1846 100644
--- a/src/ui.rs
+++ b/src/ui.rs
@@ -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");
+    });
 }