head damage ui

src/heads_ui.rs

@@ -1,11 +1,17 @@
 use bevy::prelude::*;
 
-#[derive(Component, Default)]
+#[derive(Component, Reflect, Default)]
+#[reflect(Component)]
 struct HeadSelector(pub usize);
 
-#[derive(Component, Default)]
+#[derive(Component, Reflect, Default)]
+#[reflect(Component)]
 struct HeadImage(pub usize);
 
+#[derive(Component, Reflect, Default)]
+#[reflect(Component)]
+struct HeadDamage(pub usize);
+
 #[derive(Resource, Default)]
 struct HeadsImages {
     heads: Vec<Handle<Image>>,
@@ -21,6 +27,7 @@ struct ActiveHeads {
 pub struct HeadChanged(pub usize);
 
 pub fn plugin(app: &mut App) {
+    app.register_type::<HeadDamage>();
     app.add_systems(Startup, setup);
     app.add_systems(Update, (update, toggle_heads));
 }
@@ -28,6 +35,7 @@ pub fn plugin(app: &mut App) {
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     let bg = asset_server.load("ui/head_bg.png");
     let regular = asset_server.load("ui/head_regular.png");
+    let damage = asset_server.load("ui/head_damage.png");
     let selector = asset_server.load("ui/selector.png");
 
     commands
@@ -39,11 +47,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             ..default()
         })
         .with_children(|parent| {
-            spawn_head_ui(parent, bg.clone(), regular.clone(), selector.clone(), 0);
+            for i in 0..5 {
-            spawn_head_ui(parent, bg.clone(), regular.clone(), selector.clone(), 1);
+                spawn_head_ui(
-            spawn_head_ui(parent, bg.clone(), regular.clone(), selector.clone(), 2);
+                    parent,
-            spawn_head_ui(parent, bg.clone(), regular.clone(), selector.clone(), 3);
+                    bg.clone(),
-            spawn_head_ui(parent, bg.clone(), regular.clone(), selector.clone(), 4);
+                    regular.clone(),
+                    selector.clone(),
+                    damage.clone(),
+                    i,
+                );
+            }
         });
 
     let head_01 = asset_server.load("ui/heads/angry demonstrator.png");
@@ -67,20 +80,25 @@ fn spawn_head_ui(
     bg: Handle<Image>,
     regular: Handle<Image>,
     selector: Handle<Image>,
+    damage: Handle<Image>,
     head: usize,
 ) {
+    const SIZE: f32 = 90.0;
+    const DAMAGE_SIZE: f32 = 74.0;
+
     parent
         .spawn((Node {
             position_type: PositionType::Relative,
             justify_content: JustifyContent::Center,
-            width: Val::Px(74.0),
+            align_items: AlignItems::Center,
+            width: Val::Px(SIZE),
             ..default()
         },))
         .with_children(|parent| {
             parent.spawn((
                 Node {
                     position_type: PositionType::Absolute,
-                    top: Val::Px(-20.0),
+                    top: Val::Px(-30.0),
                     ..default()
                 },
                 Visibility::Hidden,
@@ -97,10 +115,8 @@ fn spawn_head_ui(
             parent.spawn((
                 Node {
                     position_type: PositionType::Absolute,
-                    left: Val::Px(2.0),
+                    // width: Val::Px(66.0),
-                    right: Val::Px(2.0),
+                    // height: Val::Px(66.0),
-                    top: Val::Px(2.0),
-                    bottom: Val::Px(2.0),
                     ..default()
                 },
                 ImageNode::default(),
@@ -114,6 +130,29 @@ fn spawn_head_ui(
                 },
                 ImageNode::new(regular),
             ));
+            parent
+                .spawn((Node {
+                    height: Val::Px(DAMAGE_SIZE),
+                    width: Val::Px(DAMAGE_SIZE),
+                    ..default()
+                },))
+                .with_children(|parent| {
+                    parent
+                        .spawn((
+                            HeadDamage(head),
+                            Node {
+                                position_type: PositionType::Absolute,
+                                display: Display::Block,
+                                overflow: Overflow::clip(),
+                                top: Val::Px(0.),
+                                left: Val::Px(0.),
+                                right: Val::Px(0.),
+                                height: Val::Percent(25.),
+                                ..default()
+                            },
+                        ))
+                        .with_child(ImageNode::new(damage));
+                });
         });
 }