Add tooltip for upgrade buttons (WIP)

TODO: Text must be different for each button.
TODO: Magic values should be replaced with constants.

src/state/game.rs

@@ -45,8 +45,8 @@ const TOP_BAR_SEPARATOR_WIDTH: f32 = 1.5;
 
 // The sum of the following should add up to 100.0.
 const CODE_VIEW_WIDTH: f32 = 35.0;
-const ENTITY_VIEW_WIDTH: f32 = 45.0;
-const SYSTEMS_VIEW_WIDTH: f32 = 30.0;
+const ENTITY_VIEW_WIDTH: f32 = 40.0;
+const SYSTEMS_VIEW_WIDTH: f32 = 25.0;
 
 #[derive(AssetCollection, Resource, Reflect, Default)]
 #[reflect(Resource)]

src/state/game/systems_view.rs

@@ -1,3 +1,5 @@
+use bevy::ui::RelativeCursorPosition;
+
 use super::*;
 use crate::ui::vh;
 use crate::ui::vw;
@@ -16,8 +18,22 @@ const BUTTON_NORMAL_COLOR: Color = Color::rgb(0.165, 0.18, 0.184);
 const BUTTON_HOVERED_COLOR: Color = Color::rgb(0.265, 0.28, 0.284);
 const BUTTON_PRESSED_COLOR: Color = Color::rgb(0.065, 0.08, 0.084);
 
+const TOOLTIP_TEXT_STYLE: TextStyle = TextStyle {
+    font: FONT_HANDLE,
+    font_size: 0.0,
+    color: Color::WHITE,
+};
+const TOOLTIP_FONT_SIZE: f32 = 4.0;
+const TOOLTIP_BACKGROUND_COLOR: Color = Color::rgba(0.106, 0.118, 0.122, 0.75);
+
+#[derive(Component)]
+pub struct Tooltip;
+
+#[derive(Component)]
+pub struct TooltipText;
+
 pub fn init(commands: &mut Commands, root: &Res<AppRoot>) {
-    let code_view = commands
+    let systems_view = commands
         .spawn((
             Name::new("SystemsView"),
             NodeBundle {
@@ -31,6 +47,7 @@ pub fn init(commands: &mut Commands, root: &Res<AppRoot>) {
                 ..default()
             },
         ))
+        .insert(RelativeCursorPosition::default())
         .set_parent(root.ui)
         .id();
 
@@ -51,7 +68,7 @@ pub fn init(commands: &mut Commands, root: &Res<AppRoot>) {
                 ..default()
             },
         ))
-        .set_parent(code_view)
+        .set_parent(systems_view)
         .id();
 
     commands
@@ -79,9 +96,42 @@ pub fn init(commands: &mut Commands, root: &Res<AppRoot>) {
                 ..default()
             },
         ))
-        .set_parent(code_view)
+        .set_parent(systems_view)
         .id();
 
+    // Tooltip
+    commands
+        .spawn((
+            NodeBundle {
+                style: Style {
+                    position_type: PositionType::Absolute,
+                    min_width: Val::Percent(30.0),
+                    max_width: Val::Percent(30.0),
+                    min_height: Val::Percent(30.0),
+                    padding: UiRect::axes(Val::VMin(2.0), Val::VMin(2.0)),
+                    margin: UiRect {
+                        left: Val::Percent(45.0),
+                        top: vh(20.0),
+                        right: Val::Percent(25.0),
+                        ..Default::default()
+                    },
+                    ..Default::default()
+                },
+                z_index: ZIndex::Global(1000),
+                background_color: TOOLTIP_BACKGROUND_COLOR.into(),
+                visibility: Visibility::Hidden,
+                ..Default::default()
+            },
+            Tooltip,
+        ))
+        .with_children(|builder| {
+            builder.spawn((
+                TextBundle::from_section("", TOOLTIP_TEXT_STYLE),
+                FontSize::new(vh(TOOLTIP_FONT_SIZE)),
+                TooltipText,
+            ));
+        });
+
     // Buttons
 
     for _ in 0..4 {
@@ -115,12 +165,28 @@ pub fn button_color_system(
         (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
+    mut tooltip: Query<(&mut Visibility, &mut Style), With<Tooltip>>,
+    relative_cursor_position_query: Query<&RelativeCursorPosition>,
+    mut tooltip_text: Query<&mut Text, With<TooltipText>>,
 ) {
+    let (mut tooltip_visibility, mut tooltip_style) = tooltip.single_mut();
+    let mut tooltip_text = tooltip_text.single_mut();
     for (interaction, mut color) in &mut interaction_query {
         *color = match interaction {
             Interaction::Pressed => BUTTON_PRESSED_COLOR,
-            Interaction::Hovered => BUTTON_HOVERED_COLOR,
-            Interaction::None => BUTTON_NORMAL_COLOR,
+            Interaction::Hovered => {
+                *tooltip_visibility = Visibility::Inherited;
+                if let Some(cursor) = relative_cursor_position_query.single().normalized {
+                    let percent = (cursor.y * 50.0).min(70.0);
+                    tooltip_style.margin.top = Val::Percent(percent);
+                }
+                tooltip_text.sections[0].value = "This is a tooltip text.".to_string();
+                BUTTON_HOVERED_COLOR
+            },
+            Interaction::None => {
+                *tooltip_visibility = Visibility::Hidden;
+                BUTTON_NORMAL_COLOR
+            },
         }
         .into()
     }