Loading the RPG HUD…

A WoW-style HUD where every element is XAML: vitals bars, cooldown sweeps, timed buffs, quest tracker, rarity-colored loot toasts. A tiny combat simulation drives it all through the element-query API.

How it's built

From examples/rpg_hud.rs — every HUD element is XAML; systems only push numbers.

1. A vitals bar is just a Border with a fill child

Track + named fill + bound value text, overlapped in a single-cell Grid.

<Border Width="220" Height="18" Background="#B0000000" BorderBrush="#FFC8A24B" CornerRadius="3">
  <Grid>
    <Border x:Name="HpFill" Background="#FF3FBF4A" HorizontalAlignment="Left" Width="100"/>
    <TextBlock Text="{Binding hp_text}" Foreground="White" FontSize="11"
               HorizontalAlignment="Center" VerticalAlignment="Center"/>
  </Grid>
</Border>
2. The game pushes state into the markup

One system sizes fills and cooldown sweeps by name each frame.

let mut set_fill = |name: &str, frac: f32, full: f32| {
    if let Some(e) = ui.by_name(name)
        && let Ok(mut n) = nodes.get_mut(e) {
        n.width = Val::Px(full * frac.clamp(0.0, 1.0));
    }
};
set_fill("HpFill", sim.hp / sim.hp_max, 218.0);
set_fill("XpFill", sim.xp / sim.xp_max, 402.0);
3. Rarity-colored loot toasts

WoW-ladder colors applied to a toast TextBlock as loot drops.

const RARITY: [(&str, &str); 6] = [
    ("#FF9D9D9D", "Worn Dagger"), ("#FFFFFFFF", "Linen Cloth"),
    ("#FF1EFF00", "Sturdy Boots"), ("#FF0070DD", "Sapphire Ring"),
    ("#FFA335EE", "Shadow Cowl"), ("#FFFF8000", "Dragonfang Blade"),
];
// on drop: set toast text + TextColor from the ladder, show for 3 s