Do things with deck display UI

Author: benfrankel

assets/config/card.ron

@@ -2,10 +2,9 @@
 (
     // Deck:
     deck_cap: 18,
-    deck_height: Px(96.0),
-    deck_column_gap: Px(-6.0),
 
     // Cards:
+    card_height: Px(96.0),
     card_background_map: {
         "yellow": CardBackground (
             texture: "image/card/yellow_card.png",
@@ -40,49 +39,55 @@
             ),
         ),
     },
+    card_icon_map: {
+        "step": CardIcon(texture: "image/card/step.png"),
+        "double_beat": CardIcon(texture: "image/card/double_beat.png"),
+        "counter_point": CardIcon(texture: "image/card/counter_point.png"),
+        "splits": CardIcon(texture: "image/card/splits.png"),
+    },
     card_map: {
         "step": Card(
             name: "Basic Step",
             description: "A-one and a-two and a-step.",
             background: "blue",
-            icon_texture: "image/card/step.png",
+            icon: "step",
             action: Step,
             action_config: CardActionConfig(
-               remove_on_beat: 2, 
+                remove_on_beat: 2,
             ),
         ),
         "double_beat": Card(
             name: "Double Beat",
             description: "Two beats, rapid fire!",
             background: "pink",
-            icon_texture: "image/card/double_beat.png",
+            icon: "double_beat",
             action: DoubleBeat,
             action_config: CardActionConfig(
-               remove_on_beat: 2, 
-               attack: Attack (
-                   power: 2.0,
-                   force: 4.0,
-                   projectile: Some("quarter_note")
-               )
+                remove_on_beat: 2,
+                attack: Attack (
+                    power: 2.0,
+                    force: 4.0,
+                    projectile: Some("quarter_note"),
+                ),
             ),
         ),
         "counter_point": Card(
             name: "Counter Point",
             description: "Notes that move apart synchronously",
             background: "pink",
-            icon_texture: "image/card/counter_point.png",
+            icon: "counter_point",
             action_config: CardActionConfig(
-               remove_on_beat: 2, 
+                remove_on_beat: 2,
             ),
         ),
         "splits": Card(
             name: "Splits",
             description: "Split in two!",
             background: "blue",
-            icon_texture: "image/card/splits.png",
+            icon: "splits",
             modifier: 1.0,
             action_config: CardActionConfig(
-               remove_on_beat: 2, 
+                remove_on_beat: 2,
             ),
         ),
     }

assets/config/theme.ron

@@ -25,5 +25,7 @@
         Srgba(Srgba(red: 0.106, green: 0.118, blue: 0.122, alpha: 0.850)),
         // Indicator
         Srgba(Srgba(red: 0.384, green: 0.827, blue: 0.769, alpha: 1.000)),
+        // CardBorder
+        Srgba(Srgba(red: 0.071, green: 0.082, blue: 0.133, alpha: 1.000)),
     )),
 )

assets/image/card/blue_card.aseprite

@@ -3,7 +3,7 @@ use pyri_state::prelude::*;
 
 use crate::core::PostColorSet;
 use crate::screen::Screen;
-use crate::util::despawn::DespawnSet;
+use crate::util::despawn::LateDespawn;
 use crate::util::prelude::*;
 
 pub(super) fn plugin(app: &mut App) {
@@ -35,7 +35,7 @@ impl FadeIn {
 
 fn apply_fade_in(
     time: Res<Time>,
-    mut despawn: ResMut<DespawnSet>,
+    mut despawn: ResMut<LateDespawn>,
     mut fade_query: Query<(Entity, &mut FadeIn, &mut BackgroundColor)>,
 ) {
     let dt = time.delta_seconds();
@@ -76,7 +76,7 @@ impl FadeOut {
 
 fn apply_fade_out(
     time: Res<Time>,
-    mut despawn: ResMut<DespawnSet>,
+    mut despawn: ResMut<LateDespawn>,
     mut screen: NextMut<Screen>,
     mut fade_query: Query<(Entity, &mut FadeOut, &mut BackgroundColor)>,
 ) {

assets/image/card/blue_card.png

@@ -60,8 +60,10 @@ pub enum UpdateSet {
     TriggerDeath,
     /// Detect XP and trigger level up.
     TriggerLevelUp,
-    /// Spawn and despawn entities.
-    SpawnDespawn,
+    /// Despawn entities.
+    Despawn,
+    /// Spawn entities.
+    Spawn,
     /// Synchronize end-of-frame values.
     SyncLate,
 }
@@ -78,7 +80,8 @@ impl Configure for UpdateSet {
                 Self::Update,
                 Self::TriggerDeath,
                 Self::TriggerLevelUp,
-                Self::SpawnDespawn,
+                Self::Despawn,
+                Self::Spawn,
                 Self::SyncLate,
             )
                 .chain(),

assets/image/card/double_beat.aseprite

@@ -70,6 +70,7 @@ pub enum ThemeColor {
     // Misc UI colors
     Popup,
     Indicator,
+    CardBorder,
 }
 
 impl ThemeColor {

assets/image/card/double_beat.png

@@ -37,7 +37,7 @@ pub struct Attack {
 impl Configure for Attack {
     fn configure(app: &mut App) {
         app.register_type::<Self>();
-        app.add_systems(Update, apply_attack.in_set(UpdateSet::Update));
+        app.add_systems(Update, apply_attack.in_set(UpdateSet::Spawn));
     }
 }
 

assets/image/card/green_card.aseprite

@@ -1,3 +1,4 @@
+use bevy::ecs::system::EntityCommand;
 use bevy::ecs::system::SystemState;
 use bevy::prelude::*;
 use bevy::utils::HashMap;
@@ -8,12 +9,12 @@ use crate::game::card::action::CardAction;
 use crate::game::card::action::CardActionConfig;
 use crate::game::card::action::CardActionKey;
 use crate::game::card::action::CardActionMap;
+use crate::ui::prelude::*;
 use crate::util::prelude::*;
 
 pub mod action;
 pub mod attack;
 pub mod deck;
-pub mod deck_dock;
 pub mod movement;
 
 pub(super) fn plugin(app: &mut App) {
@@ -23,7 +24,6 @@ pub(super) fn plugin(app: &mut App) {
         action::plugin,
         attack::plugin,
         deck::plugin,
-        deck_dock::plugin,
         movement::plugin,
     ));
 }
@@ -32,11 +32,11 @@ pub(super) fn plugin(app: &mut App) {
 pub struct CardConfig {
     // Deck:
     pub deck_cap: usize,
-    pub deck_height: Val,
-    pub deck_column_gap: Val,
 
     // Cards:
+    pub card_height: Val,
     pub card_background_map: HashMap<String, CardBackground>,
+    pub card_icon_map: HashMap<String, CardIcon>,
     pub card_map: HashMap<String, Card>,
 }
 
@@ -57,8 +57,11 @@ impl Config for CardConfig {
             background.texture_atlas_layout = layouts.add(&background.texture_atlas_grid);
         }
 
+        for icon in self.card_icon_map.values_mut() {
+            icon.texture = asset_server.load(&icon.texture_path);
+        }
+
         for card in self.card_map.values_mut() {
-            card.icon_texture = asset_server.load(&card.icon_texture_path);
             card.action = *c!(card_action_map.0.get(&card.action_key));
         }
     }
@@ -68,13 +71,13 @@ impl Config for CardConfig {
             .values()
             .all(|x| asset_server.is_loaded_with_dependencies(&x.texture))
             && self
-                .card_map
+                .card_icon_map
                 .values()
-                .all(|x| asset_server.is_loaded_with_dependencies(&x.icon_texture))
+                .all(|x| asset_server.is_loaded_with_dependencies(&x.texture))
     }
 }
 
-#[derive(Asset, Reflect, Serialize, Deserialize)]
+#[derive(Asset, Reflect, Serialize, Deserialize, Clone)]
 pub struct CardBackground {
     #[serde(rename = "texture")]
     texture_path: String,
@@ -83,24 +86,97 @@ pub struct CardBackground {
     texture_atlas_grid: TextureAtlasGrid,
     #[serde(skip)]
     pub texture_atlas_layout: Handle<TextureAtlasLayout>,
+    #[serde(skip)]
+    active: bool,
+}
+
+impl EntityCommand for CardBackground {
+    fn apply(self, id: Entity, world: &mut World) {
+        world.entity_mut(id).insert((
+            Name::new("CardBackground"),
+            ImageBundle {
+                image: UiImage::new(self.texture),
+                ..default()
+            },
+            TextureAtlas {
+                layout: self.texture_atlas_layout,
+                index: if self.active { 1 } else { 0 },
+            },
+        ));
+    }
+}
+
+#[derive(Asset, Reflect, Serialize, Deserialize, Clone)]
+pub struct CardIcon {
+    #[serde(rename = "texture")]
+    texture_path: String,
+    #[serde(skip)]
+    pub texture: Handle<Image>,
+}
+
+impl EntityCommand for CardIcon {
+    fn apply(self, id: Entity, world: &mut World) {
+        world.entity_mut(id).insert((
+            Name::new("CardIcon"),
+            ImageBundle {
+                image: UiImage::new(self.texture),
+                ..default()
+            },
+            ThemeColor::CardBorder.target::<UiImage>(),
+        ));
+    }
 }
 
-#[derive(Reflect, Serialize, Deserialize)]
+#[derive(Reflect, Serialize, Deserialize, Clone)]
 pub struct Card {
     pub name: String,
     pub description: String,
-    pub background: String,
-    #[serde(rename = "icon_texture")]
-    icon_texture_path: String,
-    #[serde(skip)]
-    pub icon_texture: Handle<Image>,
+    #[serde(rename = "background")]
+    pub background_key: String,
+    #[serde(rename = "icon")]
+    pub icon_key: String,
     #[serde(rename = "action", default)]
     action_key: CardActionKey,
     #[serde(skip)]
     pub action: CardAction,
     pub action_config: CardActionConfig, // TODO: Naming
 }
 
+fn card(key: impl Into<String>, active: bool) -> impl EntityCommand {
+    let key = key.into();
+
+    move |entity: Entity, world: &mut World| {
+        let config = SystemState::<ConfigRef<CardConfig>>::new(world).get(world);
+        let config = r!(config.get());
+        let card = r!(config.card_map.get(&key));
+        let mut background = r!(config.card_background_map.get(&card.background_key)).clone();
+        background.active = active;
+        let icon = r!(config.card_icon_map.get(&card.icon_key)).clone();
+        let name = format!("Card(\"{}\")", card.name);
+        let height = config.card_height;
+
+        world
+            .entity_mut(entity)
+            .insert((
+                Name::new(name),
+                NodeBundle {
+                    style: Style {
+                        height,
+                        border: UiRect::all(Px(4.0)),
+                        ..default()
+                    },
+                    ..default()
+                },
+                ThemeColor::CardBorder.target::<BorderColor>(),
+            ))
+            .with_children(|children| {
+                children.spawn_with(background).with_children(|children| {
+                    children.spawn_with(icon);
+                });
+            });
+    }
+}
+
 #[derive(Event)]
 pub struct AddCardEvent(pub String);
 

assets/image/card/green_card.png

@@ -69,7 +69,7 @@ impl FromWorld for CardActionMap {
     }
 }
 
-#[derive(Reflect, Serialize, Deserialize, Eq, PartialEq, Hash, Default)]
+#[derive(Reflect, Serialize, Deserialize, Eq, PartialEq, Hash, Copy, Clone, Default)]
 pub enum CardActionKey {
     #[default]
     Rest,