Logo, misc cleanup for shipping

examples/parallax.rs

@@ -20,7 +20,9 @@ fn spawn_background(
 ) {
     commands.spawn((
         Name::new("Depth: 1.0"),
-        Transform::default().with_translation(Vec3::new(0.0, 0.0, 0.0)).with_scale(Vec3::splat(50.0)),
+        Transform::default()
+            .with_translation(Vec3::new(0.0, 0.0, 0.0))
+            .with_scale(Vec3::splat(50.0)),
         Mesh2d(meshes.add(Circle::new(1.0))),
         MeshMaterial2d(materials.add(ColorMaterial {
             texture: Some(server.load("bevy.png")),
@@ -32,7 +34,9 @@ fn spawn_background(
     ));
     commands.spawn((
         Name::new("Depth: 2.0"),
-        Transform::default().with_translation(Vec3::new(0.0, 0.0, -1.0)).with_scale(Vec3::splat(25.0)),
+        Transform::default()
+            .with_translation(Vec3::new(0.0, 0.0, -1.0))
+            .with_scale(Vec3::splat(25.0)),
         Mesh2d(meshes.add(Circle::new(2.0))),
         MeshMaterial2d(materials.add(ColorMaterial {
             texture: Some(server.load("bevy.png")),
@@ -44,7 +48,9 @@ fn spawn_background(
     ));
     commands.spawn((
         Name::new("Depth: 4.0"),
-        Transform::default().with_translation(Vec3::new(0.0, 0.0, -2.0)).with_scale(Vec3::splat(12.5)),
+        Transform::default()
+            .with_translation(Vec3::new(0.0, 0.0, -2.0))
+            .with_scale(Vec3::splat(12.5)),
         Mesh2d(meshes.add(Circle::new(4.0))),
         MeshMaterial2d(materials.add(ColorMaterial {
             texture: Some(server.load("bevy.png")),
@@ -56,7 +62,9 @@ fn spawn_background(
     ));
     commands.spawn((
         Name::new("Depth: 8.0"),
-        Transform::default().with_translation(Vec3::new(0.0, 0.0, -3.0)).with_scale(Vec3::splat(6.25)),
+        Transform::default()
+            .with_translation(Vec3::new(0.0, 0.0, -3.0))
+            .with_scale(Vec3::splat(6.25)),
         Mesh2d(meshes.add(Circle::new(8.0))),
         MeshMaterial2d(materials.add(ColorMaterial {
             texture: Some(server.load("bevy.png")),

flake.lock

@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1752480373,
-        "narHash": "sha256-JHQbm+OcGp32wAsXTE/FLYGNpb+4GLi5oTvCxwSoBOA=",
+        "lastModified": 1755615617,
+        "narHash": "sha256-HMwfAJBdrr8wXAkbGhtcby1zGFvs+StOp19xNsbqdOg=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "62e0f05ede1da0d54515d4ea8ce9c733f12d9f08",
+        "rev": "20075955deac2583bb12f07151c2df830ef346b4",
         "type": "github"
       },
       "original": {

flake.nix

@@ -51,6 +51,8 @@
                 git-bug
                 # wasm builder
                 wasm-bindgen-cli_0_2_100
+                # wasm-opt
+                binaryen
                 simple-http-server
                 # Itch.io uploads
                 butler

justfile

@@ -6,13 +6,18 @@ web GAME:
     mkdir -p dist/{{GAME}}/assets/{{GAME}}
 
     # wasm binary
-    cargo build --bin {{GAME}} --release --target wasm32-unknown-unknown
+    cargo build --bin {{GAME}} --profile wasm-release --target wasm32-unknown-unknown
+
+    # Size pass
+    wasm-opt -Oz \
+        -o dist/{{GAME}}.wasm \
+        ${CARGO_TARGET_DIR}/wasm32-unknown-unknown/release/{{GAME}}.wasm
 
     # wasm bindgen
     wasm-bindgen --no-typescript --target web \
         --out-dir ./dist/{{GAME}} \
         --out-name "bin" \
-      ${CARGO_TARGET_DIR}/wasm32-unknown-unknown/release/{{GAME}}.wasm
+        dist/{{GAME}}.wasm
 
     # index.html
     cp ./web/{{GAME}}.html ./dist/{{GAME}}/index.html
@@ -26,7 +31,7 @@ serve GAME: (web GAME)
     simple-http-server dist/{{GAME}}
 
 itchio GAME: (web GAME)
-    butler push dist/{{GAME}} popgame/{{GAME}}:html5 --userversion={{VERSION}}
+    butler push --dry-run dist/{{GAME}} popgame/{{GAME}}:html5 --userversion={{VERSION}}
 
 clean:
     rm -rf dist/*

src/bin/flappy/main.rs

@@ -6,6 +6,7 @@ use bevy::render::view::ColorGrading;
 use games::physics2d::*;
 use games::*;
 use std::hash::BuildHasher;
+use std::time::Instant;
 
 fn main() {
     App::new()
@@ -26,6 +27,7 @@ fn main() {
         .init_resource::<RewindFrames>()
         .init_resource::<Flaps>()
         .init_resource::<Deaths>()
+        .init_resource::<LongestRun>()
         .init_state::<PlayerState>()
         .add_systems(
             Startup,
@@ -39,8 +41,11 @@ fn main() {
                 tweak_camera.after(create_camera_2d),
             ),
         )
-        .add_systems(OnEnter(PlayerState::Alive), alive_bird)
-        .add_systems(OnEnter(PlayerState::Alive), reset_button::<FlapButton>)
+        .add_systems(
+            OnEnter(PlayerState::Alive),
+            (alive_bird, start_run, reset_button::<FlapButton>),
+        )
+        .add_systems(OnExit(PlayerState::Alive), end_run)
         .add_systems(OnEnter(PlayerState::Rewind), alive_bird)
         .add_systems(OnEnter(PlayerState::Pause), pause_bird)
         .add_systems(OnEnter(PlayerState::Stasis), pause_bird)
@@ -84,8 +89,9 @@ fn main() {
                 // Stats that get synced to the UI
                 (
                     sync_resource_to_ui::<Score>.run_if(resource_changed::<Score>),
-                    sync_resource_to_ui::<Flaps>.run_if(resource_changed::<Flaps>),
+                    sync_resource_to_ui::<LongestRun>.run_if(resource_changed::<LongestRun>),
                     sync_resource_to_ui::<Deaths>.run_if(resource_changed::<Deaths>),
+                    sync_resource_to_ui::<Flaps>.run_if(resource_changed::<Flaps>),
                     sync_resource_to_ui::<RewindFrames>.run_if(resource_changed::<RewindFrames>),
                 ),
                 (update_tooltip, debug_trail).run_if(in_state(DebuggingState::On)),
@@ -346,7 +352,8 @@ fn move_pipe(
     rand: Res<Rand>,
 ) {
     if let Ok((Batch(id), pipe, mut pipe_t)) = pipes.get_mut(trigger.target()) {
-        *pipe_t = {
+        *pipe_t =
+            {
                 let offset = {
                     let val = rand.0.hash_one(id);
 
@@ -361,12 +368,10 @@ fn move_pipe(
                 };
 
                 match pipe {
-                Pipe::Top => {
-                    Transform::from_xyz(0.0, 300.0 + offset, -2.0).with_scale(Vec3::splat(100.0))
-                }
-                Pipe::Bottom => {
-                    Transform::from_xyz(0.0, -300.0 + offset, -2.0).with_scale(Vec3::splat(100.0))
-                }
+                    Pipe::Top => Transform::from_xyz(0.0, 300.0 + offset, -2.0)
+                        .with_scale(Vec3::splat(100.0)),
+                    Pipe::Bottom => Transform::from_xyz(0.0, -300.0 + offset, -2.0)
+                        .with_scale(Vec3::splat(100.0)),
                 }
             };
     }
@@ -508,35 +513,50 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                 flex_direction: FlexDirection::Column,
                 ..default()
             },
+            BorderRadius::all(Val::Px(5.0)),
+            BackgroundColor(Color::WHITE),
+            BorderColor(BLACK.into()),
             PlayerState::Stasis,
         ))
         .with_children(|parent| {
             parent.spawn((
                 Text::new("Game Over...?"),
+                TextColor(BLACK.into()),
                 TextLayout::new_with_justify(JustifyText::Center),
             ));
             parent.spawn((
                 SyncResource::<Score>::default(),
                 Text::default(),
+                TextColor(BLACK.into()),
                 TextLayout::new_with_justify(JustifyText::Center),
             ));
             parent.spawn((
-                SyncResource::<Flaps>::default(),
+                SyncResource::<LongestRun>::default(),
                 Text::default(),
+                TextColor(BLACK.into()),
                 TextLayout::new_with_justify(JustifyText::Center),
             ));
             parent.spawn((
-                SyncResource::<RewindFrames>::default(),
+                SyncResource::<Deaths>::default(),
                 Text::default(),
+                TextColor(BLACK.into()),
                 TextLayout::new_with_justify(JustifyText::Center),
             ));
             parent.spawn((
-                SyncResource::<Deaths>::default(),
+                SyncResource::<Flaps>::default(),
+                Text::default(),
+                TextColor(BLACK.into()),
+                TextLayout::new_with_justify(JustifyText::Center),
+            ));
+            parent.spawn((
+                SyncResource::<RewindFrames>::default(),
                 Text::default(),
+                TextColor(BLACK.into()),
                 TextLayout::new_with_justify(JustifyText::Center),
             ));
             parent.spawn((
                 Text::new("Press R to Rewind"),
+                TextColor(BLACK.into()),
                 TextLayout::new_with_justify(JustifyText::Center),
             ));
             parent
@@ -564,12 +584,20 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                     parent
                         .spawn((
                             Button,
+                            BorderRadius::all(Val::Px(5.0)),
+                            BorderColor(BLACK.into()),
                             Node { ..default() },
-                            children![Text::new("Credits")],
+                            children![(TextColor(BLACK.into()), Text::new("Credits")),],
                         ))
                         .observe(show_credits);
                     parent
-                        .spawn((Button, Node { ..default() }, children![Text::new("Quit"),]))
+                        .spawn((
+                            BorderRadius::all(Val::Px(5.0)),
+                            BorderColor(BLACK.into()),
+                            Button,
+                            Node { ..default() },
+                            children![(Text::new("Quit"), TextColor(BLACK.into()))],
+                        ))
                         .observe(quit_game);
                 });
         });
@@ -588,9 +616,13 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                 flex_direction: FlexDirection::Column,
                 ..default()
             },
+            BorderRadius::all(Val::Px(5.0)),
+            BackgroundColor(WHITE.into()),
+            BorderColor(BLACK.into()),
             PlayerState::Credits,
             children![(
                 Text::new(credits_str),
+                TextColor(BLACK.into()),
                 TextLayout::new_with_justify(JustifyText::Center)
             )],
         ))
@@ -600,25 +632,57 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                     align_self: AlignSelf::Center,
                     ..default()
                 },
+                BorderRadius::all(Val::Px(5.0)),
+                BorderColor(BLACK.into()),
                 Button,
-                children![Text::new("Close")],
+                children![(Text::new("Close"), TextColor(BLACK.into()))],
             ));
         })
         .observe(hide_credits);
 
+    let logo =
+        server.load_with_settings("flappy/logo.png", |settings: &mut ImageLoaderSettings| {
+            // Need to use nearest filtering to avoid bleeding between the slices with tiling
+            settings.sampler = ImageSampler::nearest();
+        });
     commands.spawn((
         Node {
             align_self: AlignSelf::Center,
             justify_self: JustifySelf::Center,
             flex_direction: FlexDirection::Column,
+            align_items: AlignItems::Center,
+            justify_items: JustifyItems::Center,
             ..default()
         },
+        BackgroundColor(Color::NONE),
         PlayerState::Pause,
-        Text::new("PAUSED"),
+        children![
+            (
+                ImageNode {
+                    image: logo,
+                    ..default()
+                },
+                Node {
+                    width: Val::Px(256.0),
+                    ..default()
+                }
+            ),
+            (
+                Node {
+                    margin: UiRect::all(Val::Px(5.0)),
+                    ..default()
+                },
+                BorderRadius::all(Val::Px(5.0)),
+                BorderColor(BLACK.into()),
+                Text::new("(paused)"),
+                TextColor(BLACK.into()),
+            )
+        ],
     ));
 
     commands
-        .spawn(Node {
+        .spawn((
+            Node {
                 align_self: AlignSelf::End,
                 justify_self: JustifySelf::Center,
                 flex_direction: FlexDirection::Row,
@@ -626,7 +690,8 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                 width: Val::Percent(100.0),
                 min_height: Val::Percent(10.0),
                 ..default()
-        })
+            },
+        ))
         .with_children(|parent| {
             let rewind_image = server.load_with_settings(
                 "flappy/rewind.png",
@@ -644,8 +709,10 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                         justify_content: JustifyContent::Center,
                         ..default()
                     },
+                    BorderRadius::all(Val::Px(5.0)),
+                    BorderColor(BLACK.into()),
+                    BackgroundColor(Color::WHITE.with_alpha(0.9)),
                     Button,
-                    BackgroundColor::default(),
                     RewindButton,
                     children![
                         (
@@ -660,7 +727,8 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                             },
                         ),
                         (
-                            Text::new("Rewind! (R)"),
+                            Text::new("Rewind!\n(Hold R)"),
+                            TextColor(BLACK.into()),
                             TextFont::from_font_size(30.0),
                             TextLayout::new_with_justify(JustifyText::Center)
                         ),
@@ -684,11 +752,15 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                         justify_content: JustifyContent::Center,
                         ..default()
                     },
+                    BorderRadius::all(Val::Px(5.0)),
+                    BorderColor(BLACK.into()),
+                    BackgroundColor(Color::WHITE.with_alpha(0.9)),
                     Button,
                     FlapButton,
                     children![
                         (
-                            Text::new("Flap! (Spacebar)"),
+                            Text::new("Flap!\n(Spacebar)"),
+                            TextColor(BLACK.into()),
                             TextFont::from_font_size(30.0),
                             TextLayout::new_with_justify(JustifyText::Center)
                         ),
@@ -714,10 +786,13 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
             justify_self: JustifySelf::Center,
             ..default()
         },
-        BackgroundColor(WHITE.into()),
+        BorderRadius::all(Val::Px(5.0)),
+        BackgroundColor(Color::WHITE),
+        BorderColor(BLACK.into()),
         children![(
             SyncResource::<Score>::default(),
             Text::default(),
+            TextColor(BLACK.into()),
             TextLayout::new_with_justify(JustifyText::Center),
         )],
     ));
@@ -993,6 +1068,61 @@ impl Display for Flaps {
     }
 }
 
+/// Track the longest run a player has done
+/// Store the latest run and upsert latest run to the longest run if it is longer
+#[derive(Resource, Default)]
+struct LongestRun {
+    /// Longest run start
+    start: Option<Instant>,
+    /// Longest run end
+    end: Option<Instant>,
+    /// Latest run start
+    latest_start: Option<Instant>,
+    /// Latest run start
+    latest_end: Option<Instant>,
+}
+
+impl Display for LongestRun {
+    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
+        match (self.start, self.end) {
+            (Some(a), Some(b)) => {
+                if b > a {
+                    writeln!(f, "Longest Run: {:.2?}", b - a)
+                } else {
+                    writeln!(f, "Longest Run: ???")
+                }
+            }
+            _ => writeln!(f, "Longest Run: ???"),
+        }
+    }
+}
+
+fn start_run(mut longest_run: ResMut<LongestRun>) {
+    longest_run.latest_start = Some(Instant::now());
+    longest_run.latest_end = None;
+}
+
+fn end_run(mut longest_run: ResMut<LongestRun>) {
+    longest_run.latest_end = Some(Instant::now());
+
+    match (longest_run.start, longest_run.end) {
+        // Longest run hasn't been set yet, so set it to the latest run
+        (None, None) => {
+            longest_run.start = longest_run.latest_start;
+            longest_run.end = longest_run.latest_end;
+        }
+        // Longest run was previously set
+        (Some(start), Some(end)) => {
+            // Check if latest run is longer than current longest run
+            if longest_run.latest_end.unwrap() - longest_run.latest_start.unwrap() > end - start {
+                longest_run.start = longest_run.latest_start;
+                longest_run.end = longest_run.latest_end;
+            }
+        }
+        _ => panic!("What?"),
+    }
+}
+
 // Track number of times player died
 #[derive(Resource, Default)]
 struct Deaths(usize);
@@ -1142,10 +1272,10 @@ fn debug_trail(
 fn shimmer_button<T: Component>(mut bg: Single<&mut BackgroundColor, With<T>>, time: Res<Time>) {
     let t = time.elapsed_secs();
     let period = 3.0;
-    let r = (((t / period) % 1.0) * std::f32::consts::PI).cos();
-    let g = ((((t / period) + 0.3) % 1.0) * std::f32::consts::PI).cos();
-    let b = ((((t / period) + 0.6) % 1.0) * std::f32::consts::PI).cos();
-    bg.0 = Srgba::rgb(r, g, b).into();
+    let red = (((t / period) % 1.0) * std::f32::consts::PI).cos();
+    let green = ((((t / period) + 0.3) % 1.0) * std::f32::consts::PI).cos();
+    let blue = ((((t / period) + 0.6) % 1.0) * std::f32::consts::PI).cos();
+    bg.0 = Srgba { red, green, blue, alpha: bg.0.alpha() }.into();
 }
 
 fn reset_button<T: Component>(mut bg: Single<&mut BackgroundColor, With<T>>) {

src/debug.rs

@@ -73,8 +73,11 @@ fn init_debug_ui(mut commands: Commands) {
     commands.spawn((
         DebuggingState::On,
         Name::new("Version #"),
-        children![Text::new(VERSION),],
+        children![(TextColor(BLACK.into()), Text::new(VERSION),)],
         GlobalZIndex(i32::MAX - 1),
+        BorderRadius::all(Val::Px(5.0)),
+        BorderColor(BLACK.into()),
+        BackgroundColor(Color::WHITE),
         Node {
             max_width: Val::Percent(50.0),
             align_self: AlignSelf::End,
@@ -87,8 +90,15 @@ fn init_debug_ui(mut commands: Commands) {
         .spawn((
             DebuggingState::On,
             Name::new("Notice"),
-            children![(Text::new(""), SyncResource::<Notice>::default(),)],
+            children![(
+                TextColor(BLACK.into()),
+                Text::new(""),
+                SyncResource::<Notice>::default(),
+            )],
             GlobalZIndex(i32::MAX - 1),
+            BorderRadius::all(Val::Px(5.0)),
+            BorderColor(BLACK.into()),
+            BackgroundColor(Color::WHITE),
             Node {
                 max_width: Val::Percent(50.0),
                 align_self: AlignSelf::End,
@@ -110,7 +120,10 @@ fn init_debug_ui(mut commands: Commands) {
             DebuggingState::Off,
             Name::new("Debug Indicator"),
             GlobalZIndex(i32::MAX - 1),
-            children![Text("Debug: OFF".into()),],
+            BorderRadius::all(Val::Px(5.0)),
+            BorderColor(BLACK.into()),
+            BackgroundColor(Color::WHITE),
+            children![(Text("Debug: OFF".into()), TextColor(BLACK.into()),)],
             Button,
         ))
         .observe(toggle_debug);
@@ -124,6 +137,9 @@ fn init_debug_ui(mut commands: Commands) {
                 flex_direction: FlexDirection::Column,
                 ..default()
             },
+            BorderRadius::all(Val::Px(5.0)),
+            BorderColor(BLACK.into()),
+            BackgroundColor(Color::WHITE),
         ))
         .with_children(|parent| {
             parent
@@ -132,7 +148,7 @@ fn init_debug_ui(mut commands: Commands) {
                     DebuggingState::On,
                     Name::new("Debug Indicator"),
                     GlobalZIndex(i32::MAX - 1),
-                    children![Text("Debug: ON".into()),],
+                    children![(Text("Debug: ON".into()), TextColor(BLACK.into()),)],
                     Button,
                 ))
                 .observe(toggle_debug);
@@ -142,6 +158,7 @@ fn init_debug_ui(mut commands: Commands) {
                 Name::new("FPS"),
                 GlobalZIndex(i32::MAX - 1),
                 Text::new("FPS: ##.#"),
+                TextColor(BLACK.into()),
                 SyncResource::<Fps>::default(),
             ));
             parent.spawn((
@@ -150,6 +167,7 @@ fn init_debug_ui(mut commands: Commands) {
                 Name::new("Entity Count"),
                 GlobalZIndex(i32::MAX - 1),
                 Text::new("Entities: ###"),
+                TextColor(BLACK.into()),
                 SyncResource::<EntityCount>::default(),
             ));
         });
@@ -161,6 +179,9 @@ fn init_debug_ui(mut commands: Commands) {
             SyncResource::<ToolTip>::default(),
             Pickable::IGNORE,
             GlobalZIndex(i32::MAX),
+            BorderRadius::all(Val::Px(5.0)),
+            BorderColor(BLACK.into()),
+            BackgroundColor(Color::WHITE),
             Node {
                 position_type: PositionType::Absolute,
                 margin: UiRect {
@@ -175,6 +196,7 @@ fn init_debug_ui(mut commands: Commands) {
         .with_children(|parent| {
             parent.spawn((
                 Text("Tooltip Placeholder".into()),
+                TextColor(BLACK.into()),
                 SyncResource::<ToolTip>::default(),
             ));
         });

src/parallax.rs

@@ -1,5 +1,5 @@
-use bevy::render::primitives::Aabb;
 use bevy::render::mesh::MeshAabb;
+use bevy::render::primitives::Aabb;
 
 use super::*;
 
@@ -12,7 +12,7 @@ impl Plugin for ParallaxPlugin {
             (
                 move_parallax_items.run_if(any_component_changed::<Transform>),
                 wrap_parallax_items.run_if(any_component_changed::<ViewVisibility>),
-            )
+            ),
         );
     }
 }
@@ -57,7 +57,14 @@ fn move_parallax_items(
 }
 
 fn wrap_parallax_items(
-    mut items: Query<(&mut Transform, &GlobalTransform, &ViewVisibility, &Mesh2d), (With<ParallaxDepth>, Without<Camera2d>, Changed<ViewVisibility>)>,
+    mut items: Query<
+        (&mut Transform, &GlobalTransform, &ViewVisibility, &Mesh2d),
+        (
+            With<ParallaxDepth>,
+            Without<Camera2d>,
+            Changed<ViewVisibility>,
+        ),
+    >,
     camera: Single<(&Camera, &GlobalTransform), With<Camera2d>>,
     window: Single<&Window>,
     meshes: Res<Assets<Mesh>>,
@@ -70,7 +77,10 @@ fn wrap_parallax_items(
             let top_left = cam.viewport_to_world_2d(cam_gt, Vec2::ZERO).unwrap();
             let bottom_right = cam.viewport_to_world_2d(cam_gt, window.size()).unwrap();
 
-            Vec2::abs(Vec2::new(bottom_right.x - top_left.x, bottom_right.y - top_left.y))
+            Vec2::abs(Vec2::new(
+                bottom_right.x - top_left.x,
+                bottom_right.y - top_left.y,
+            ))
         };
 
         // for each item in the paralax items

src/ui.rs

@@ -139,21 +139,21 @@ fn add_ui_node(
     added.iter_mut().for_each(|(e, mut n)| {
         debug!("Updating node: {:?}", e);
 
-        // Update Node border
-        n.border = UiRect::all(Val::Px(2.0));
-
         let mut this = commands.entity(e);
 
         if text.contains(e) {
             // Only change text color for text
-            this.insert(TextColor(style.secondary));
+            this.insert_if_new(TextColor(style.secondary));
         } else if images.contains(e) {
             // Do nothing
         } else {
+            // Update Node border
+            n.border = UiRect::all(Val::Px(2.0));
+
             // Add extra stuff for non-text nodes
-            this.insert(BackgroundColor(style.primary));
-            this.insert(BorderColor(style.secondary));
-            this.insert(BorderRadius::all(Val::Px(5.0)));
+            this.insert_if_new(BackgroundColor(style.primary));
+            this.insert_if_new(BorderColor(style.secondary));
+            this.insert_if_new(BorderRadius::all(Val::Px(5.0)));
         }
     })
 }