Add card tooltips on hover

Author: benfrankel

src/game/card.rs

@@ -154,6 +154,7 @@ fn card(key: impl Into<String>, active: bool) -> impl EntityCommand {
         let icon = r!(config.card_icon_map.get(&card.icon_key)).clone();
         let name = format!("Card(\"{}\")", card.name);
         let height = config.card_height;
+        let tooltip_text = format!("{}\n\n{}", card.name, card.description);
 
         world
             .entity_mut(entity)
@@ -168,6 +169,12 @@ fn card(key: impl Into<String>, active: bool) -> impl EntityCommand {
                     ..default()
                 },
                 ThemeColor::CardBorder.target::<BorderColor>(),
+                Interaction::default(),
+                Tooltip {
+                    text: tooltip_text,
+                    side: TooltipSide::Top,
+                    offset: Vec2::ZERO,
+                },
             ))
             .with_children(|children| {
                 children.spawn_with(background).with_children(|children| {

src/screen/playing/level_up_menu.rs

@@ -10,6 +10,8 @@ use crate::ui::prelude::*;
 use crate::util::prelude::*;
 
 // TODO: Deck actions in deck.rs, but disabled by default. Enable them during this menu.
+// TODO: Random card selection to add to deck.
+// TODO: Helpful message if the player is at deck capacity.
 pub(super) fn plugin(app: &mut App) {
     app.add_systems(
         StateFlush,
@@ -32,7 +34,7 @@ fn open_level_up_menu(mut commands: Commands, ui_root: Res<UiRoot>) {
 }
 
 fn level_up_overlay(mut entity: EntityWorldMut) {
-    entity.add(widget::blocking_overlay).insert((
+    entity.add(widget::overlay).insert((
         Name::new("LevelUpOverlay"),
         ZIndex::Global(1),
         StateScope::<PlayingMenu>::default(),

src/screen/playing/pause_menu.rs

@@ -23,7 +23,7 @@ fn open_pause_menu(mut commands: Commands, ui_root: Res<UiRoot>) {
 }
 
 fn pause_overlay(mut entity: EntityWorldMut) {
-    entity.add(widget::blocking_overlay).insert((
+    entity.add(widget::overlay).insert((
         Name::new("PauseOverlay"),
         ZIndex::Global(1),
         ThemeColor::Overlay.target::<BackgroundColor>(),

src/ui.rs

@@ -20,6 +20,8 @@ pub mod prelude {
     pub use super::font::THICK_FONT_HANDLE;
     pub use super::interaction::InteractionTable;
     pub use super::interaction::IsDisabled;
+    pub use super::tooltip::Tooltip;
+    pub use super::tooltip::TooltipSide;
     pub use super::widget;
     pub use super::UiRoot;
     pub use crate::core::theme::ThemeColor;

src/ui/tooltip.rs

@@ -54,7 +54,8 @@ impl FromWorld for TooltipRoot {
                             font: FONT_HANDLE,
                             ..default()
                         },
-                    ),
+                    )
+                    .with_text_justify(JustifyText::Center),
                     // TODO: Adjustable font sizes in ThemeConfig
                     DynamicFontSize::new(Px(16.0)),
                     ThemeColorForText(vec![ThemeColor::BodyText]),
@@ -85,10 +86,12 @@ pub struct Tooltip {
 impl Configure for Tooltip {
     fn configure(app: &mut App) {
         app.register_type::<Self>();
-        app.add_systems(Update, show_tooltip_on_hover.in_set(UpdateSet::SyncLate));
+        app.add_systems(Update, show_tooltip_on_hover.in_set(UpdateSet::RecordInput));
     }
 }
 
+// TODO: Set text in an early system, then set position in a late system.
+//       That way the tooltip can use its own calculated size to support centering.
 fn show_tooltip_on_hover(
     window_root: Res<WindowRoot>,
     window_query: Query<&Window>,
@@ -97,35 +100,41 @@ fn show_tooltip_on_hover(
     mut text_query: Query<&mut Text>,
     interaction_query: Query<(&Interaction, &Tooltip, &GlobalTransform, &Node)>,
 ) {
-    let window = r!(window_query.get(window_root.primary));
     let (mut visibility, mut style) = r!(container_query.get_mut(tooltip_root.container));
     let mut text = r!(text_query.get_mut(tooltip_root.text));
+    let window = r!(window_query.get(window_root.primary));
+    let width = window.width();
+    let height = window.height();
 
     for (interaction, tooltip, gt, node) in &interaction_query {
+        // Skip nodes that are not hovered.
         if matches!(interaction, Interaction::None) {
             *visibility = Visibility::Hidden;
             continue;
         }
 
-        let rect = node.logical_rect(gt);
+        // Set the tooltip text and make it visible.
+        *visibility = Visibility::Inherited;
+        text.sections[0].value.clone_from(&tooltip.text);
 
-        let width = window.width();
-        let height = window.height();
+        // Get the left, right, top, bottom of the target node.
+        let rect = node.logical_rect(gt);
         let (left, right, top, bottom) = (
             rect.min.x + tooltip.offset.x,
             rect.max.x + tooltip.offset.x,
             rect.min.y + tooltip.offset.y,
             rect.max.y + tooltip.offset.y,
         );
 
-        *visibility = Visibility::Inherited;
-        text.sections[0].value.clone_from(&tooltip.text);
+        // Set the left, right, top, bottom of the tooltip node.
         (style.left, style.right, style.top, style.bottom) = match tooltip.side {
             TooltipSide::Left => (Auto, Px(width - left), Auto, Px(height - bottom)),
             TooltipSide::Right => (Px(right), Auto, Auto, Px(height - bottom)),
             TooltipSide::Top => (Px(left), Auto, Auto, Px(height - top)),
             TooltipSide::Bottom => (Px(left), Auto, Px(bottom), Auto),
         };
+
+        // Exit early (because there's only one tooltip).
         return;
     }
 }