Remove resize constraints from base game plugin

.cargo/config.toml

@@ -14,6 +14,10 @@ codegen-units = 1
 opt-level = "z"
 lto = "thin"
 
+[profile.wasm-dev]
+inherits = "dev"
+codegen-backend = "llvm"
+
 [profile.wasm-release]
 inherits = "release"
 opt-level = "s"

.gitignore

@@ -14,3 +14,6 @@ VERSION
 
 # Generated MONOLOGUES list for wasm build
 assets/trees/MONOLOGUES
+
+# Blender temp file(s)
+*.blend1

TODO

@@ -0,0 +1,2 @@
+* setup CI template in web server running on port 8000
+* setup mock bevy app running on port 8001 w/ first app running in iframe

assets/flappy/CREDITS

@@ -1,11 +1,15 @@
-Programming: Elijah Voigt
+Flappy Bird
+(with rewind)
 
-Art Assets: Kenney.nl
+A game by Elijah Voigt
-1-Bit Platformer Pack
+
-Impact Sounds
+Playtesters:
+Sam Hall
+Ari (gamer)
 
 Engine: Bevy
 Physics: Avian2D
 
 Inspired by:
-Flappy Bird (2013) by Dong Nguyen
+Flappy Bird (2013)
+by Dong Nguyen

examples/game2d.rs

@@ -5,6 +5,7 @@ fn main() {
         .add_plugins((BaseGamePlugin {
             name: "2d game example".into(),
             game_type: GameType::Two,
+            ..default()
         },))
         .add_systems(Startup, spawn_guy)
         .run();

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")),

examples/window.rs

@@ -0,0 +1,40 @@
+use games::*;
+
+fn main() {
+    App::new()
+        .add_plugins(BaseGamePlugin {
+            target_resolution: (360.0, 640.0).into(),
+            ..default()
+        })
+        .add_systems(Startup, init_window_info)
+        .add_systems(
+            Update,
+            update_window_info.run_if(any_component_changed::<Window>),
+        )
+        .run();
+}
+
+#[derive(Component)]
+struct WindowInfo;
+
+fn init_window_info(mut commands: Commands) {
+    commands.spawn((
+        Node {
+            align_self: AlignSelf::Center,
+            justify_self: JustifySelf::Center,
+            ..default()
+        },
+        children![(Text::new("Placeholder"), WindowInfo,)],
+    ));
+}
+
+fn update_window_info(mut text: Single<&mut Text, With<WindowInfo>>, window: Single<&Window>) {
+    text.0 = format!(
+        "Logical: {}x{}\nPhysical: {}x{}\nScale Factor: {}",
+        window.resolution.physical_width(),
+        window.resolution.physical_height(),
+        window.resolution.width(),
+        window.resolution.height(),
+        window.resolution.scale_factor(),
+    );
+}

flake.lock

@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1752480373,
+        "lastModified": 1755615617,
-        "narHash": "sha256-JHQbm+OcGp32wAsXTE/FLYGNpb+4GLi5oTvCxwSoBOA=",
+        "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

@@ -1,19 +1,39 @@
 VERSION := `git rev-parse --short HEAD`
 
+bindgen profile name:
+    mkdir -p ./dist/{{name}}
+
+    wasm-bindgen \
+        --no-typescript \
+        --target web \
+        --out-dir ./dist/{{name}} \
+        --out-name "bin" \
+       ${CARGO_TARGET_DIR}/wasm32-unknown-unknown/{{profile}}/{{name}}.wasm
+
+optimize NAME:
+    # Size pass
+    wasm-opt -Oz \
+        -o dist/{{NAME}}/bin_bg-tmp.wasm \
+        ./dist/{{NAME}}/bin_bg.wasm
+
+    # Replace old bin with new (compressed) bin
+    mv ./dist/{{NAME}}/bin_bg-tmp.wasm ./dist/{{NAME}}/bin_bg.wasm
+
+build-example EXAMPLE:
+    cargo build --example {{EXAMPLE}} --profile wasm-dev --target wasm32-unknown-unknown
+
+build-bin GAME:
+    # wasm binary
+    cargo build --bin {{GAME}} --profile wasm-release --target wasm32-unknown-unknown
+
+example NAME: (build-example NAME) (bindgen "wasm-dev" "examples"/NAME)
+    cp web/example.html ./dist/examples/{{NAME}}/index.html
+
 # Build the web version
-web GAME:
+web GAME: (build-bin GAME) (bindgen "wasm-release" GAME) (optimize GAME)
     # base directory
     mkdir -p dist/{{GAME}}/assets/{{GAME}}
 
-    # wasm binar
-    # cargo build --bin {{GAME}} --release --target wasm32-unknown-unknown
-
-    # wasm bindgen
-    wasm-bindgen --no-typescript --target web \
-        --out-dir ./dist/{{GAME}} \
-        --out-name "bin" \
-      ${CARGO_TARGET_DIR}/wasm32-unknown-unknown/release/{{GAME}}.wasm
-
     # index.html
     cp ./web/{{GAME}}.html ./dist/{{GAME}}/index.html
 
@@ -23,10 +43,13 @@ web GAME:
 
 # Helpful shorthand to serve files
 serve GAME: (web GAME)
-    cd dist/{{GAME}} && simple-http-server
+    simple-http-server dist/{{GAME}}
+
+itchio-dry GAME: (web GAME)
+    butler push --dry-run dist/{{GAME}} popgame/{{GAME}}:html5 --userversion={{VERSION}}
 
-# itchio GAME: (web GAME)
+itchio GAME: (web GAME)
-#    butler push dist/{{GAME}} popgame/{{GAME}}:html5 --userversion={{VERSION}}
+    butler push dist/{{GAME}} popgame/{{GAME}}:html5 --userversion={{VERSION}}
 
 clean:
     rm -rf dist/*

src/base_game.rs

@@ -1,5 +1,3 @@
-use bevy::platform::hash::RandomState;
-
 use super::*;
 
 /// A good starting place for creating a game building on top of the base Bevy app
@@ -7,6 +5,7 @@ pub struct BaseGamePlugin {
     pub title: String,
     pub name: String,
     pub game_type: GameType,
+    pub target_resolution: WindowResolution,
 }
 
 pub enum GameType {
@@ -20,6 +19,7 @@ impl Default for BaseGamePlugin {
             title: "My Game".into(),
             name: "mygame".into(),
             game_type: GameType::Three,
+            target_resolution: WindowResolution::default(),
         }
     }
 }
@@ -31,18 +31,24 @@ impl Plugin for BaseGamePlugin {
                 .set(WindowPlugin {
                     primary_window: Some(Window {
                         fit_canvas_to_parent: true,
-                        canvas: Some(format!("#{}-canvas", self.name)),
+                        resolution: self.target_resolution.clone(),
                         ..default()
                     }),
                     ..default()
                 })
-                .set(ImagePlugin::default_nearest()),
+                .set(ImagePlugin::default_nearest())
+                .set(AssetPlugin {
+                    meta_check: AssetMetaCheck::Never,
+                    ..default()
+                }),
         )
         .add_plugins(DebuggingPlugin)
         .add_plugins(MeshPickingPlugin)
         .add_plugins(LoadingPlugin)
         .add_plugins(BaseUiPlugin)
         .add_plugins(ParallaxPlugin)
+        // .add_systems(Update, scale_game.run_if(any_component_changed::<Window>))
+        .insert_resource(TargetResolution(self.target_resolution.clone()))
         .init_resource::<Rand>();
 
         match self.game_type {
@@ -52,6 +58,9 @@ impl Plugin for BaseGamePlugin {
     }
 }
 
+#[derive(Resource)]
+struct TargetResolution(WindowResolution);
+
 /// System to toggle the visibility of entities based on their state
 pub fn toggle_state_visibility<S: States + Component>(
     mut q: Query<(Entity, &mut Visibility, &S)>,
@@ -85,3 +94,22 @@ pub fn create_camera_2d(mut commands: Commands) {
 
 #[derive(Default, Resource)]
 pub struct Rand(pub RandomState);
+
+/// Scale the game based on the difference between the target and real resolution
+fn scale_game(
+    mut window: Single<&mut Window>,
+    target_resolution: Res<TargetResolution>,
+    mut last_scale_factor: Local<f32>,
+) {
+    let current_resolution: Vec2 = window.resolution.size();
+    let scale_width = current_resolution.x.round() / target_resolution.0.width().round();
+    let scale_height = current_resolution.y.round() / target_resolution.0.height().round();
+    let scale_factor = f32::min(scale_width, scale_height);
+    if window.resolution.scale_factor() != scale_factor {
+        // Need to check the previously set scale factor because the system can flip-flop otherwise
+        if scale_factor != *last_scale_factor {
+            *last_scale_factor = window.resolution.scale_factor();
+            window.resolution.set_scale_factor(scale_factor);
+        }
+    }
+}

src/bin/flappy/main.rs

@@ -1,8 +1,8 @@
 // Bevy basically forces "complex types" with Querys
 #![allow(clippy::type_complexity)]
 
-use bevy::audio::PlaybackMode;
 use bevy::image::{ImageLoaderSettings, ImageSampler};
+use bevy::platform::time::Instant;
 use bevy::render::view::ColorGrading;
 use games::physics2d::*;
 use games::*;
@@ -15,6 +15,8 @@ fn main() {
                 title: "flappy bird (with rewind)".into(),
                 name: "flappy".into(),
                 game_type: GameType::Two,
+                target_resolution: (360.0, 640.0).into(),
+                ..default()
             },
             Physics2dPlugin,
         ))
@@ -27,6 +29,7 @@ fn main() {
         .init_resource::<RewindFrames>()
         .init_resource::<Flaps>()
         .init_resource::<Deaths>()
+        .init_resource::<LongestRun>()
         .init_state::<PlayerState>()
         .add_systems(
             Startup,
@@ -40,9 +43,12 @@ fn main() {
                 tweak_camera.after(create_camera_2d),
             ),
         )
-        .add_systems(OnEnter(PlayerState::Alive), alive_bird)
+        .add_systems(
-        .add_systems(OnEnter(PlayerState::Alive), reset_button::<FlapButton>)
+            OnEnter(PlayerState::Alive),
-        .add_systems(OnEnter(PlayerState::Rewind), (start_rewinding, alive_bird))
+            (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)
         .add_systems(OnExit(PlayerState::Stasis), reset_button::<RewindButton>)
@@ -85,8 +91,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)),
@@ -101,6 +108,7 @@ fn main() {
         .add_observer(flap)
         .add_observer(populate_batch)
         .add_observer(populate_pipe)
+        .add_observer(move_pipe)
         .add_observer(populate_ground)
         .add_observer(populate_ceiling)
         .add_observer(populate_hitbox)
@@ -110,7 +118,7 @@ fn main() {
 fn tweak_camera(camera: Single<(Entity, &mut Camera)>, mut commands: Commands) {
     debug!("Tweaking camera");
     let (e, mut c) = camera.into_inner();
-    c.clear_color = ClearColorConfig::Custom(DEEP_SKY_BLUE.into());
+    c.clear_color = ClearColorConfig::Custom(SKY_BLUE.into());
     commands.entity(e).insert(ColorGrading { ..default() });
 }
 
@@ -200,11 +208,11 @@ impl Tape {
 fn init_bird(mut commands: Commands, bird_assets: Res<BirdAssets>) {
     let name = Name::new("bird");
 
-    let t = Transform::from_xyz(0.0, 0.0, 0.0).with_scale(Vec3::splat(50.0));
+    let t = Transform::from_xyz(0.0, 0.0, 0.0).with_scale(Vec3::new(62.5, 50.0, 50.0));
 
     let physics = (
         RigidBody::Static,
-        Collider::rectangle(1.0, 1.2),
+        Collider::rectangle(1.0, 1.0),
         Mass(10.0),
         ExternalImpulse::default().with_persistence(false),
         MaxLinearSpeed(500.0),
@@ -317,8 +325,8 @@ fn populate_ground(
         ground_assets.mesh.clone(),
         Name::new("ground"),
         RigidBody::Static,
-        Collider::rectangle(1.0, 1.0),
+        Collider::rectangle(1.0, 0.75),
-        Transform::from_xyz(100.0 * (*idx) as f32, -300.0, -1.0).with_scale(Vec3::splat(100.0)),
+        Transform::from_xyz(100.0 * (*idx) as f32, -275.0, -1.0).with_scale(Vec3::splat(100.0)),
     ));
 }
 
@@ -335,23 +343,53 @@ fn populate_ceiling(
         ceiling_assets.mesh.clone(),
         Name::new("ceiling"),
         RigidBody::Static,
-        Collider::rectangle(1.0, 1.0),
+        Collider::rectangle(1.0, 0.75),
         Transform::from_xyz(100.0 * (*idx) as f32, 300.0, -3.0).with_scale(Vec3::splat(100.0)),
     ));
 }
 
+fn move_pipe(
+    trigger: Trigger<OnInsert, Batch>,
+    mut pipes: Query<(&Batch, &Pipe, &mut Transform)>,
+    rand: Res<Rand>,
+) {
+    if let Ok((Batch(id), pipe, mut pipe_t)) = pipes.get_mut(trigger.target()) {
+        *pipe_t =
+            {
+                let offset = {
+                    let val = rand.0.hash_one(id);
+
+                    let option = val % 3;
+
+                    match option {
+                        0 => 100.0,
+                        1 => 0.0,
+                        2 => -100.0,
+                        _ => panic!("Can only pick 1 of 3 pipe offsets"),
+                    }
+                };
+
+                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)),
+                }
+            };
+    }
+}
+
 /// Based on if this is a Top or Bottom pipe the placement changes
 /// Otherwise this just spawns in the center of the batch.
 fn populate_pipe(
     trigger: Trigger<OnAdd, Pipe>,
-    pipes: Query<(&Pipe, &Batch)>,
+    pipes: Query<(&Batch, &Pipe)>,
     pipe_assets: Res<PipeAssets>,
     mut commands: Commands,
     rand: Res<Rand>,
 ) {
     let pipe_t = {
-        let (pipe, Batch(id)) = pipes.get(trigger.target()).unwrap();
+        let (Batch(id), pipe) = pipes.get(trigger.target()).unwrap();
-
         let offset = {
             let val = rand.0.hash_one(id);
 
@@ -374,6 +412,7 @@ fn populate_pipe(
             }
         }
     };
+
     commands.entity(trigger.target()).insert((
         pipe_t,
         pipe_assets.material.clone(),
@@ -440,14 +479,14 @@ fn init_assets(
 
     ground_assets.material = MeshMaterial2d(materials.add(ColorMaterial {
         texture: Some(server.load("flappy/ground.png")),
-        color: Srgba::new(0.9, 0.9, 0.9, 1.0).into(),
+        color: GREEN.into(),
         ..default()
     }));
     ground_assets.mesh = Mesh2d(meshes.add(Rectangle::new(1.0, 1.0)));
 
     ceiling_assets.material = MeshMaterial2d(materials.add(ColorMaterial {
         texture: Some(server.load("flappy/ceiling.png")),
-        color: Srgba::new(0.9, 0.9, 0.9, 1.0).into(),
+        color: FIRE_BRICK.into(),
         ..default()
     }));
     ceiling_assets.mesh = Mesh2d(meshes.add(Rectangle::new(1.0, 0.777)));
@@ -461,18 +500,9 @@ fn init_assets(
     bird_assets.mesh = Mesh2d(meshes.add(Rectangle::new(1.0, 1.2)));
 }
 
-#[derive(Component)]
-struct FlapSfx;
-
 #[derive(Component)]
 struct FlapButton;
 
-#[derive(Component)]
-struct BonkSfx;
-
-#[derive(Component)]
-struct RewindSfx;
-
 #[derive(Component)]
 struct RewindButton;
 
@@ -485,35 +515,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
@@ -523,14 +568,6 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                     ..default()
                 },))
                 .with_children(|parent| {
-                    fn quit_game(
-                        _trigger: Trigger<Pointer<Click>>,
-                        mut exit: EventWriter<AppExit>,
-                    ) {
-                        warn!("Quitting game");
-                        exit.write(AppExit::Success);
-                    }
-
                     fn show_credits(
                         _trigger: Trigger<Pointer<Click>>,
                         mut state: ResMut<NextState<PlayerState>>,
@@ -541,13 +578,33 @@ 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);
+
+                    #[cfg(not(target_arch = "wasm32"))]
+                    {
+                        fn quit_game(
+                            _trigger: Trigger<Pointer<Click>>,
+                            mut exit: EventWriter<AppExit>,
+                        ) {
+                            warn!("Quitting game");
+                            exit.write(AppExit::Success);
+                        }
+
                         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);
+                    }
                 });
         });
 
@@ -565,9 +622,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)
             )],
         ))
@@ -577,25 +638,56 @@ 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,
@@ -603,7 +695,7 @@ 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",
@@ -621,8 +713,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![
                         (
@@ -637,8 +731,9 @@ fn init_ui(mut commands: Commands, server: Res<AssetServer>) {
                             },
                         ),
                         (
-                            Text::new("Rewind! (R)"),
+                            Text::new("Rewind!\n(Hold R)"),
-                            TextFont::from_font_size(30.0),
+                            TextColor(BLACK.into()),
+                            TextFont::from_font_size(20.0),
                             TextLayout::new_with_justify(JustifyText::Center)
                         ),
                     ],
@@ -661,12 +756,16 @@ 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)"),
-                            TextFont::from_font_size(30.0),
+                            TextColor(BLACK.into()),
+                            TextFont::from_font_size(20.0),
                             TextLayout::new_with_justify(JustifyText::Center)
                         ),
                         (
@@ -691,10 +790,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),
         )],
     ));
@@ -709,36 +811,36 @@ fn init_background(
     {
         let material = MeshMaterial2d(materials.add(ColorMaterial {
             texture: Some(server.load("flappy/background-city.png")),
-            color: Srgba::new(0.3, 0.3, 0.3, 1.0).into(),
+            color: LIGHT_GREY.with_alpha(0.8).into(),
             alpha_mode: AlphaMode2d::Blend,
             ..default()
         }));
         let mesh = Mesh2d(meshes.add(Rectangle::new(1.0, 1.0)));
         {
             let t = Transform::from_xyz(-325.0, 0.0, -32.0).with_scale(Vec3::splat(650.0));
-            commands.spawn((ParallaxDepth(4.0), mesh.clone(), material.clone(), t));
+            commands.spawn((ParallaxDepth(24.0), mesh.clone(), material.clone(), t));
         }
 
         {
             let t = Transform::from_xyz(325.0, 0.0, -32.0).with_scale(Vec3::splat(650.0));
-            commands.spawn((ParallaxDepth(4.0), mesh.clone(), material.clone(), t));
+            commands.spawn((ParallaxDepth(24.0), mesh.clone(), material.clone(), t));
         }
     }
     {
         let material = MeshMaterial2d(materials.add(ColorMaterial {
             texture: Some(server.load("flappy/background-clouds.png")),
-            color: Srgba::new(0.2, 0.2, 0.2, 1.0).into(),
+            color: WHITE_SMOKE.with_alpha(0.8).into(),
             alpha_mode: AlphaMode2d::Blend,
             ..default()
         }));
         let mesh = Mesh2d(meshes.add(Rectangle::new(1.0, 1.0)));
         {
             let t = Transform::from_xyz(-325.0, 0.0, -64.0).with_scale(Vec3::splat(650.0));
-            commands.spawn((ParallaxDepth(8.0), mesh.clone(), material.clone(), t));
+            commands.spawn((ParallaxDepth(32.0), mesh.clone(), material.clone(), t));
         }
         {
             let t = Transform::from_xyz(325.0, 0.0, -64.0).with_scale(Vec3::splat(650.0));
-            commands.spawn((ParallaxDepth(8.0), mesh.clone(), material.clone(), t));
+            commands.spawn((ParallaxDepth(32.0), mesh.clone(), material.clone(), t));
         }
     }
 }
@@ -783,8 +885,6 @@ fn flap(
     trigger: Trigger<Flap>,
     mut bird: Query<&mut ExternalImpulse, With<Bird>>,
     mut flaps: ResMut<Flaps>,
-    server: ResMut<AssetServer>,
-    mut commands: Commands,
 ) {
     debug!("real flap for {:?}", trigger.target());
     // Increment flap stat
@@ -793,16 +893,6 @@ fn flap(
     // Flap birds wings
     if let Ok(mut f) = bird.get_mut(trigger.target()) {
         f.apply_impulse(Vec2::Y * 5000.0 + Vec2::X * 1000.0);
-
-        // Play flap sfx
-        commands.spawn((
-            AudioPlayer::new(server.load("flappy/bonk.ogg")),
-            PlaybackSettings {
-                mode: PlaybackMode::Despawn,
-                ..default()
-            },
-            BonkSfx,
-        ));
     }
 }
 
@@ -914,8 +1004,6 @@ fn detect_dead(
     bird: Single<&ColliderAabb, With<Bird>>,
     obstacles: Query<&ColliderAabb, Or<(With<Ground>, With<Pipe>, With<Ceiling>)>>,
     mut next: ResMut<NextState<PlayerState>>,
-    server: ResMut<AssetServer>,
-    mut commands: Commands,
 ) {
     #[cfg(debug_assertions)]
     debug_assert!(
@@ -925,16 +1013,6 @@ fn detect_dead(
 
     if obstacles.iter().any(|obstacle| bird.intersects(obstacle)) {
         next.set(PlayerState::Stasis);
-
-        // Play bonk sfx
-        commands.spawn((
-            AudioPlayer::new(server.load("flappy/flap.ogg")),
-            PlaybackSettings {
-                mode: PlaybackMode::Despawn,
-                ..default()
-            },
-            FlapSfx,
-        ));
     }
 }
 
@@ -994,6 +1072,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);
@@ -1140,24 +1273,16 @@ fn debug_trail(
     })
 }
 
-fn start_rewinding(server: ResMut<AssetServer>, mut commands: Commands) {
-    commands.spawn((
-        AudioPlayer::new(server.load("flappy/rewind-start.ogg")),
-        PlaybackSettings {
-            mode: PlaybackMode::Despawn,
-            ..default()
-        },
-        RewindSfx,
-    ));
-}
-
 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 lightness = 0.5;
-    let r = (((t / period) % 1.0) * std::f32::consts::PI).cos();
+    let chroma = 0.5;
-    let g = ((((t / period) + 0.3) % 1.0) * std::f32::consts::PI).cos();
+    let hue = (t * 60.0) % 360.0;
-    let b = ((((t / period) + 0.6) % 1.0) * std::f32::consts::PI).cos();
+    bg.0 = Oklcha {
-    bg.0 = Srgba::rgb(r, g, b).into();
+        lightness, chroma, hue,
+        alpha: bg.0.alpha(),
+    }
+    .into();
 }
 
 fn reset_button<T: Component>(mut bg: Single<&mut BackgroundColor, With<T>>) {

src/debug.rs

@@ -13,6 +13,7 @@ impl Plugin for DebuggingPlugin {
             .init_resource::<ToolTip>()
             .init_resource::<Fps>()
             .init_resource::<EntityCount>()
+            .init_resource::<WindowInfo>()
             .init_resource::<Notice>()
             .add_systems(Startup, init_debug_ui)
             .add_systems(
@@ -33,7 +34,9 @@ impl Plugin for DebuggingPlugin {
                         track_fps,
                         sync_resource_to_ui::<Fps>.run_if(resource_changed::<Fps>),
                         track_entity_count,
+                        track_window_info.run_if(any_component_changed::<Window>),
                         sync_resource_to_ui::<EntityCount>.run_if(resource_changed::<EntityCount>),
+                        sync_resource_to_ui::<WindowInfo>.run_if(resource_changed::<WindowInfo>),
                         sync_resource_to_ui::<Notice>.run_if(resource_changed::<Notice>),
                     )
                         .run_if(in_state(DebuggingState::On)),
@@ -73,8 +76,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 +93,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 +123,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 +140,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 +151,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 +161,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,8 +170,18 @@ fn init_debug_ui(mut commands: Commands) {
                 Name::new("Entity Count"),
                 GlobalZIndex(i32::MAX - 1),
                 Text::new("Entities: ###"),
+                TextColor(BLACK.into()),
                 SyncResource::<EntityCount>::default(),
             ));
+            parent.spawn((
+                // Window info
+                DebuggingState::On,
+                Name::new("Window Info"),
+                GlobalZIndex(i32::MAX - 1),
+                Text::new("Window Info..."),
+                TextColor(BLACK.into()),
+                SyncResource::<WindowInfo>::default(),
+            ));
         });
 
     // Tooltip
@@ -161,6 +191,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 +208,7 @@ fn init_debug_ui(mut commands: Commands) {
         .with_children(|parent| {
             parent.spawn((
                 Text("Tooltip Placeholder".into()),
+                TextColor(BLACK.into()),
                 SyncResource::<ToolTip>::default(),
             ));
         });
@@ -470,6 +504,33 @@ fn track_entity_count(query: Query<Entity>, mut count: ResMut<EntityCount>) {
     count.0 = query.iter().len();
 }
 
+#[derive(Resource, Default, Debug)]
+struct WindowInfo {
+    logical_size: (f32, f32),
+    physical_size: (f32, f32),
+    scale_factor: f32,
+    mode: String,
+}
+
+impl Display for WindowInfo {
+    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
+        writeln!(
+            f,
+            "Res (Logi): {:?}\nRes (Phys): {:?}\nWindow Scale: {}\nWindow Mode: {}",
+            self.logical_size, self.physical_size, self.scale_factor, self.mode
+        )
+    }
+}
+
+fn track_window_info(window: Single<&Window>, mut info: ResMut<WindowInfo>) {
+    (info.logical_size.0, info.logical_size.1) =
+        (window.resolution.size().x, window.resolution.size().y);
+    (info.physical_size.0, info.physical_size.1) =
+        (window.resolution.size().x, window.resolution.size().y);
+    info.scale_factor = window.resolution.scale_factor();
+    info.mode = format!("{:?}", window.mode);
+}
+
 /// Toggle the debug state when a button is clicked
 fn toggle_debug(
     _trigger: Trigger<Pointer<Click>>,

src/lib.rs

@@ -18,7 +18,7 @@ pub use std::fmt::Display;
 
 // Community libraries
 pub use bevy::{
-    asset::{AssetLoader, LoadContext, LoadState, LoadedFolder, io::Reader},
+    asset::{AssetLoader, AssetMetaCheck, LoadContext, LoadState, LoadedFolder, io::Reader},
     color::palettes::css::*,
     gizmos::{aabb::AabbGizmoPlugin, light::LightGizmoPlugin},
     input::{
@@ -29,11 +29,11 @@ pub use bevy::{
         mouse::{MouseScrollUnit, MouseWheel},
     },
     pbr::wireframe::{WireframeConfig, WireframePlugin},
-    platform::collections::HashMap,
+    platform::{collections::HashMap, hash::RandomState},
     prelude::*,
     reflect::TypePath,
     sprite::AlphaMode2d,
-    window::WindowResized,
+    window::{WindowResized, WindowResolution},
 };
 pub use serde::Deserialize;
 pub use thiserror::Error;

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,13 +77,16 @@ 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
         items.iter_mut().for_each(|(mut t, gt, v, Mesh2d(m))| {
             if !v.get() {
-                info!("Item is not visible");
+                debug!("Item is not visible");
                 // Get the total size (window + scale)
                 let half_extents = {
                     let Aabb { half_extents, .. } = meshes.get(m).unwrap().compute_aabb().unwrap();
@@ -84,16 +94,16 @@ fn wrap_parallax_items(
                 };
                 let object_size = t.scale.truncate() * 2.0;
                 let total_size = window_size_in_world_space + (object_size * half_extents);
-                info!("Sizes:\n\twindow {window_size_in_world_space}\n\tobject size: {object_size}\n\tAabb Half extents: {half_extents}\n\tTotal size: {total_size}");
+                debug!("Sizes:\n\twindow {window_size_in_world_space}\n\tobject size: {object_size}\n\tAabb Half extents: {half_extents}\n\tTotal size: {total_size}");
 
                 // Double check that item is out of bounds
                 let bounds_check = Vec2::abs(cam_gt.translation().truncate() - gt.translation().truncate());
                 let out_of_bounds = (total_size / 2.0) - bounds_check;
-                info!("Bounds check {bounds_check} | Out of bounds: {out_of_bounds:?}");
+                debug!("Bounds check {bounds_check} | Out of bounds: {out_of_bounds:?}");
 
-                info!("Starting position: {:?}", t.translation);
+                debug!("Starting position: {:?}", t.translation);
                 if out_of_bounds.x < 0.0 {
-                    info!("Object is actually out of bounds horizontally");
+                    debug!("Object is actually out of bounds horizontally");
                     // determine if should move to the left or right relative to camera
                     let move_right = cam_gt.translation().x > gt.translation().x;
 
@@ -105,7 +115,7 @@ fn wrap_parallax_items(
                     }
                 }
                 if out_of_bounds.y < 0.0 {
-                    info!("Object is actually out of bounds vertically");
+                    debug!("Object is actually out of bounds vertically");
                     let move_up = cam_gt.translation().y > gt.translation().y;
 
                     // move up or down
@@ -115,7 +125,7 @@ fn wrap_parallax_items(
                         t.translation.y -= total_size.y;
                     }
                 }
-                info!("Moved to {:?}", t.translation);
+                debug!("Moved to {:?}", t.translation);
             }
         });
     }

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_if_new(BackgroundColor(style.primary));
-            this.insert(BorderColor(style.secondary));
+            this.insert_if_new(BorderColor(style.secondary));
-            this.insert(BorderRadius::all(Val::Px(5.0)));
+            this.insert_if_new(BorderRadius::all(Val::Px(5.0)));
         }
     })
 }

web/example.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<body style="margin: 0px;">
+  <script type="module">
+    import init from './bin.js'
+
+    init().catch((error) => {
+      if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
+        throw error;
+      }
+    });
+  </script>
+</body>
+
+</html>

web/flappy.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
-<body>
+
-  <canvas id="flappy-canvas"></canvas>
+<body style="margin: 0px;">
   <script type="module">
     import init from './bin.js'
 
@@ -12,4 +12,5 @@
     });
   </script>
 </body>
+
 </html>