WIP: add gauges to the HUD on the bottom left

src/hud.rs

@@ -90,6 +90,14 @@ impl Plugin for HudPlugin {
 #[derive(Component)] pub struct IsTargeted;
 #[derive(Component)] pub struct PointOfInterestMarker(pub Entity);
 
+#[derive(Component, Debug, Copy, Clone)]
+enum Gauge {
+    Health,
+    Power,
+    Oxygen,
+    Fuel,
+}
+
 #[derive(Resource)]
 pub struct AugmentedRealityState {
     pub overlays_visible: bool,
@@ -335,6 +343,100 @@ fn setup(
         ));
     });
 
+    // HP/O2/Fuel/Power Gauges
+    let gauges_handle: Handle<Image> = asset_server.load("sprites/gauge_horizontal.png");
+    let gauges = [
+        ("sprites/dashboard_highbeams.png", Gauge::Health),
+        ("sprites/dashboard_highbeams.png", Gauge::Power),
+        ("sprites/dashboard_highbeams.png", Gauge::Oxygen),
+        ("sprites/dashboard_highbeams.png", Gauge::Fuel),
+    ];
+    for (i, (sprite, gauge)) in gauges.iter().enumerate() {
+        let bar_length = if i == 0 { 196.0 } else { 128.0 };
+
+        // The bar with variable width
+        commands.spawn((
+            NodeBundle {
+                style: Style {
+                    width: Val::Percent(30.0),
+                    height: Val::Percent(100.0),
+                    bottom: Val::Px(20.0 + 24.0 * i as f32),
+                    left: Val::VMin(2.0),
+                    align_items: AlignItems::End,
+                    overflow: Overflow::clip(),
+                    ..default()
+                },
+                visibility,
+                ..default()
+            },
+            Dashboard,
+            ToggleableHudElement,
+        )).with_children(|builder| {
+            builder.spawn((
+                NodeBundle {
+                    style: Style {
+                        width: Val::Px(118.0),
+                        height: Val::Px(10.0),
+                        bottom: Val::Px(8.0),
+                        left: Val::Px(32.0),
+                        ..Default::default()
+                    },
+                    visibility,
+                    background_color: settings.hud_color.into(),
+                    ..Default::default()
+                },
+                gauge.clone(),
+            ));
+        });
+
+        // The decorator sprites surrounding the bar
+        commands.spawn((
+            NodeBundle {
+                style: Style {
+                    width: Val::Percent(30.0),
+                    height: Val::Percent(100.0),
+                    bottom: Val::Px(20.0 + 24.0 * i as f32),
+                    left: Val::VMin(2.0),
+                    align_items: AlignItems::End,
+                    overflow: Overflow::clip(),
+                    ..default()
+                },
+                visibility,
+                ..default()
+            },
+            Dashboard,
+            ToggleableHudElement,
+        )).with_children(|builder| {
+            builder.spawn((
+                ImageBundle {
+                    image: UiImage::new(asset_server.load(sprite.to_string())),
+                    style: Style {
+                        width: Val::Px(28.0),
+                        height: Val::Px(28.0),
+                        ..Default::default()
+                    },
+                    visibility,
+                    ..Default::default()
+                },
+            ));
+            builder.spawn((
+                ImageBundle {
+                    image: UiImage::new(gauges_handle.clone()),
+                    style: Style {
+                        width: Val::Px(bar_length),
+                        height: Val::Px(10.0),
+                        bottom: Val::Px(8.0),
+                        left: Val::Px(4.0),
+                        ..Default::default()
+                    },
+                    visibility,
+                    ..Default::default()
+                },
+            ));
+        });
+    }
+
+
     // Car-Dashboard-Style icons
     let flashlight_visibility = bool2vis(visibility == Visibility::Visible && settings.flashlight_active);
     let dashboard_flashlight_handle: Handle<Image> = asset_server.load("sprites/dashboard_highbeams.png");