ui: Visible item dragging

- Also tinting inventory slot on hover

src/inventory/ui.rs

@@ -19,8 +19,32 @@ pub struct UiInventorySlot(UVec2);
 #[require(Node, ImageNode)]
 pub struct UiItem(Entity);
 
+fn on_slot_over(e: On<Pointer<Over>>, mut query: Query<&mut ImageNode, With<UiInventorySlot>>) {
+    if let Ok(mut image) = query.get_mut(e.event_target()) {
+        image.color = Color::WHITE.darker(0.3);
+    }
+}
+
+fn on_slot_out(e: On<Pointer<Out>>, mut query: Query<&mut ImageNode, With<UiInventorySlot>>) {
+    if let Ok(mut image) = query.get_mut(e.event_target()) {
+        image.color = Color::WHITE;
+    }
+}
+
+fn on_item_drag(e: On<Pointer<Drag>>, mut query: Query<&mut UiTransform, With<UiItem>>) {
+    if let Ok(mut transform) = query.get_mut(e.event_target()) {
+        transform.translation = Val2::px(e.distance.x, e.distance.y);
+    }
+}
+
+fn on_item_drag_end(e: On<Pointer<DragEnd>>, mut query: Query<&mut UiTransform, With<UiItem>>) {
+    if let Ok(mut transform) = query.get_mut(e.event_target()) {
+        transform.translation = Val2::ZERO;
+    }
+}
+
 fn on_item_drag_drop(
-    mut event: On<Pointer<DragDrop>>,
+    event: On<Pointer<DragDrop>>,
     mut commands: Commands,
     ui_item_query: Query<(Entity, &UiItem)>,
     ui_inventory_query: Query<&UiInventory>,
@@ -54,8 +78,6 @@ fn on_item_drag_drop(
         item.position = Some(*new_position);
         commands.entity(ui_item_entity).insert(ChildOf(event.event_target()));
     }
-
-    event.propagate(false);
 }
 
 fn ui_inventory_bundle(
@@ -86,7 +108,6 @@ fn ui_inventory_bundle(
         },
         Pickable::IGNORE,
         GlobalZIndex::default(),
-        Observer::new(on_item_drag_drop),
         Name::new(format!("UiInventory ({}x{})", inventory.size.x, inventory.size.y)),
     )
 }
@@ -95,6 +116,7 @@ fn inventory_slot_bundle(x: u32, y: u32, image: Handle<Image>) -> impl Bundle {
     (
         UiInventorySlot(UVec2::new(x, y)),
         ImageNode {
+            color: Color::WHITE,
             image,
             image_mode: NodeImageMode::Stretch,
             ..default()
@@ -111,6 +133,7 @@ fn inventory_slot_bundle(x: u32, y: u32, image: Handle<Image>) -> impl Bundle {
             should_block_lower: true,
             is_hoverable: true,
         },
+        BackgroundColor::DEFAULT,
         Name::new(format!("UiInventorySlot({x},{y})")),
     )
 }
@@ -193,12 +216,20 @@ pub fn setup_ui_inventory(
             .with_children(|commands| {
                 for x in 0..inventory.size.x { for y in 0..inventory.size.y {
                     let mut slot_commands = commands.spawn(inventory_slot_bundle(x, y, ui_slot_image.clone()));
+                    slot_commands.observe(on_slot_over)
+                        .observe(on_slot_out)
+                        .observe(on_item_drag_drop);
                     if let Some((item, entity)) = items.iter()
                         .find(|(i, _)| i.position.unwrap_or_default() == UVec2::new(x, y)) {
-                        slot_commands.with_child(ui_item_bundle(item, *entity, temp_item_image.clone()));
+                        slot_commands.with_children(|commands| {
+                            commands.spawn(ui_item_bundle(item, *entity, temp_item_image.clone()))
+                                .observe(on_item_drag)
+                                .observe(on_item_drag_end);
+                        });
                     }
                 } }
-            }).id();
+            })
+            .id();
         commands.entity(root)
             .add_child(inventory_entity);