feat(UI): add title

src/constants.rs

@@ -2,3 +2,4 @@ pub const MOVEMENT_THRESHOLD: f32 = 0.01;
 pub const WALL_OVERLAP_MODIFIER: f32 = 1.25;
 pub const FLOOR_Y_OFFSET: u8 = 200;
 pub const MOVEMENT_COOLDOWN: f32 = 1.0; // one second cooldown
+pub const TITLE: &'static str = "Maze Ascension: The Labyrinth of Echoes";

src/lib.rs

@@ -14,6 +14,7 @@ use bevy::{
     audio::{AudioPlugin, Volume},
     prelude::*,
 };
+use constants::TITLE;
 use theme::{palette::rose_pine, prelude::ColorScheme};
 
 pub struct AppPlugin;
@@ -41,7 +42,7 @@ impl Plugin for AppPlugin {
                 })
                 .set(WindowPlugin {
                     primary_window: Window {
-                        title: "Maze Ascension: The Labyrinth of Echoes".to_string(),
+                        title: TITLE.to_string(),
                         canvas: Some("#bevy".to_string()),
                         fit_canvas_to_parent: true,
                         prevent_default_event_handling: true,

src/screens/loading.rs

@@ -21,8 +21,8 @@ fn spawn_loading_screen(mut commands: Commands) {
     commands
         .ui_root()
         .insert(StateScoped(Screen::Loading))
-        .with_children(|children| {
+        .with_children(|parent| {
-            children.label("Loading...").insert(Node {
+            parent.label("Loading...").insert(Node {
                 justify_content: JustifyContent::Center,
                 ..default()
             });

src/screens/title.rs

@@ -12,11 +12,12 @@ fn spawn_title_screen(mut commands: Commands) {
     commands
         .ui_root()
         .insert(StateScoped(Screen::Title))
-        .with_children(|children| {
+        .with_children(|parent| {
-            children.button("Play").observe(enter_gameplay_screen);
+            parent.header("Maze Ascension");
+            parent.button("Play").observe(enter_gameplay_screen);
 
             #[cfg(not(target_family = "wasm"))]
-            children.button("Exit").observe(exit_app);
+            parent.button("Quit").observe(exit_app);
         });
 }
 

src/theme/palette/mod.rs

@@ -2,15 +2,6 @@ pub mod rose_pine;
 
 use bevy::prelude::*;
 
-pub const BUTTON_HOVERED_BACKGROUND: Color = Color::srgb(0.186, 0.328, 0.573);
-pub const BUTTON_PRESSED_BACKGROUND: Color = Color::srgb(0.286, 0.478, 0.773);
-
-pub const BUTTON_TEXT: Color = Color::srgb(0.925, 0.925, 0.925);
-pub const LABEL_TEXT: Color = Color::srgb(0.867, 0.827, 0.412);
-pub const HEADER_TEXT: Color = Color::srgb(0.867, 0.827, 0.412);
-
-pub const NODE_BACKGROUND: Color = Color::srgb(0.286, 0.478, 0.773);
-
 const MAX_COLOR_VALUE: f32 = 255.;
 
 pub(super) const fn rgb_u8(red: u8, green: u8, blue: u8) -> Color {

src/theme/widgets.rs

@@ -1,9 +1,12 @@
 //! Helper traits for creating common widgets.
 
 use bevy::{ecs::system::EntityCommands, prelude::*, ui::Val::*};
+use rose_pine::RosePineDawn;
 
 use crate::theme::{interaction::InteractionPalette, palette::*};
 
+use super::prelude::ColorScheme;
+
 /// An extension trait for spawning UI widgets.
 pub trait Widgets {
     /// Spawn a simple button with text.
@@ -22,7 +25,7 @@ impl<T: SpawnUi> Widgets for T {
             Name::new("Button"),
             Button,
             ImageNode {
-                color: NODE_BACKGROUND,
+                color: RosePineDawn::Surface.to_color(),
                 ..default()
             },
             Node {
@@ -30,23 +33,26 @@ impl<T: SpawnUi> Widgets for T {
                 height: Px(65.0),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
+                border: UiRect::all(Px(4.)),
                 ..default()
             },
+            BorderRadius::all(Px(8.)),
+            BorderColor(RosePineDawn::Text.to_color()),
             InteractionPalette {
-                none: NODE_BACKGROUND,
+                none: RosePineDawn::HighlightLow.to_color(),
-                hovered: BUTTON_HOVERED_BACKGROUND,
+                hovered: RosePineDawn::HighlightMed.to_color(),
-                pressed: BUTTON_PRESSED_BACKGROUND,
+                pressed: RosePineDawn::HighlightHigh.to_color(),
             },
         ));
-        entity.with_children(|children| {
+        entity.with_children(|parent| {
-            children.spawn_ui((
+            parent.spawn_ui((
                 Name::new("Button Text"),
                 Text(text.into()),
                 TextFont {
                     font_size: 40.0,
                     ..default()
                 },
-                TextColor(BUTTON_TEXT),
+                TextColor(RosePineDawn::Text.to_color()),
             ));
         });
 
@@ -63,38 +69,38 @@ impl<T: SpawnUi> Widgets for T {
                 align_items: AlignItems::Center,
                 ..default()
             },
-            BackgroundColor(NODE_BACKGROUND),
         ));
-        entity.with_children(|children| {
+        entity.with_children(|parent| {
-            children.spawn_ui((
+            parent.spawn_ui((
                 Name::new("Header Text"),
                 Text(text.into()),
                 TextFont {
-                    font_size: 40.0,
+                    font_size: 60.0,
                     ..default()
                 },
-                TextColor(HEADER_TEXT),
+                TextLayout {
+                    justify: JustifyText::Center,
+                    ..default()
+                },
+                TextColor(RosePineDawn::Text.to_color()),
             ));
         });
         entity
     }
 
-    fn label(&mut self, _text: impl Into<String>) -> EntityCommands {
+    fn label(&mut self, text: impl Into<String>) -> EntityCommands {
         let entity = self.spawn_ui((
             Name::new("Label"),
-            Text::default(),
+            Text(text.into()),
-            // TextBundle::from_section(
+            TextFont {
-            //     text,
+                font_size: 24.0,
-            //     TextStyle {
+                ..default()
-            //         font_size: 24.0,
+            },
-            //         color: LABEL_TEXT,
+            TextColor(RosePineDawn::Text.to_color()),
-            //         ..default()
+            Node {
-            //     },
+                width: Px(500.),
-            // )
+                ..default()
-            // .with_style(Style {
+            },
-            //     width: Px(500.0),
-            //     ..default()
-            // }),
         ));
         entity
     }