resolution and scaling are all messed up

Makefile

@@ -79,5 +79,8 @@ web/release/serve: web/release/build
 	cd ./out/release/; simple-http-server
 ###
 
+zip: web/release/build
+	cd out/release && zip -r set.zip ./* && mv set.zip ../
+
 clean:
 	rm ./target/*/*/set* ./out/*/set*

flake.nix

@@ -45,6 +45,8 @@
           wasm-bindgen-cli
           simple-http-server
           aseprite
+          zip
+          unzip
         ] ++ buildInputs ++ nativeBuildInputs;
       in
       rec {

src/animation.rs

@@ -77,9 +77,9 @@ pub(crate) fn setup_animations(
         // For each spot on board
         RangeInclusive::<u8>::new(0, 3).for_each(|x| {
             RangeInclusive::<u8>::new(0, 3).for_each(|y| {
-                let a = Vec3::new(-400.0, -200.0, 0.0);
+                let a = Vec3::new(-200.0, 0.0, 0.0);
                 let b = play::card_placement(&play::PlayLocation { x, y });
-                let c = Vec3::new(400.0, -200.0, 0.0);
+                let c = Vec3::new(200.0, 0.0, 0.0);
 
                 // Serve Deck -> Spot Animation
                 {

src/audio.rs

@@ -22,13 +22,16 @@ pub(crate) fn toggle_music(
     server: Res<AssetServer>,
 ) {
     let sink = sinks.single();
-    let mut image = images.single_mut();
-
     if sink.is_paused() {
         sink.play();
-        image.image = server.load("kenney_game-icons/PNG/White/1x/musicOn.png");
     } else {
         sink.pause();
+    }
+    images.iter_mut().for_each(|mut image| {
+        if sink.is_paused() {
             image.image = server.load("kenney_game-icons/PNG/White/1x/musicOff.png");
+        } else {
+            image.image = server.load("kenney_game-icons/PNG/White/1x/musicOn.png");
         }
+    });
 }

src/main.rs

@@ -10,22 +10,32 @@ mod view;
 #[cfg(debug_assertions)]
 mod debug;
 
-use bevy::prelude::*;
+use bevy::{asset::AssetMetaCheck, prelude::*, window::WindowResolution};
 
 fn main() {
-    let primary_window = Some(Window {
+    let image_plugin = ImagePlugin::default_nearest();
+    let window_plugin = {
+        let resolution = WindowResolution::new(640.0, 360.0);
+        WindowPlugin {
+            primary_window: Some(Window {
                 // web: fill the window
                 fit_canvas_to_parent: true,
+                resolution,
                 ..default()
-    });
+            }),
+            ..default()
+        }
+    };
+    let asset_plugin = AssetPlugin {
+        meta_check: AssetMetaCheck::Never,
+        ..default()
+    };
     App::new()
         .add_plugins(
             DefaultPlugins
-                .set(ImagePlugin::default_nearest())
+                .set(image_plugin)
-                .set(WindowPlugin {
+                .set(window_plugin)
-                    primary_window,
+                .set(asset_plugin),
-                    ..default()
-                }),
         )
         .add_plugins((
             animation::AnimationPlugin,

src/menu.rs

@@ -41,8 +41,8 @@ fn button_builder(node: Node) -> (Button, BackgroundColor, Node, BorderColor) {
         Button,
         BackgroundColor(BLACK.with_alpha(0.9).into()),
         Node {
-            padding: UiRect::all(Val::Px(10.)),
+            padding: UiRect::all(Val::Px(5.)),
-            margin: UiRect::top(Val::Px(25.)),
+            margin: UiRect::top(Val::Px(5.)),
             border: UiRect::all(Val::Px(1.0)),
             ..node
         },
@@ -64,12 +64,43 @@ fn setup(mut commands: Commands, server: Res<AssetServer>) {
             },
         ))
         .with_children(|parent| {
+            parent
+                .spawn((
+                    Button,
+                    BackgroundColor(BLACK.with_alpha(0.9).into()),
+                    Node {
+                        margin: UiRect::all(Val::Px(5.0)),
+                        padding: UiRect::all(Val::Px(5.0)),
+                        border: UiRect::all(Val::Px(1.0)),
+                        height: Val::Px(40.0),
+                        position_type: PositionType::Absolute,
+                        top: Val::Px(0.0),
+                        left: Val::Px(0.0),
+                        ..default()
+                    },
+                    BorderColor(WHITE.into()),
+                    GlobalZIndex(1),
+                ))
+                .with_children(|parent| {
+                    parent.spawn((
+                        ImageNode {
+                            image: server.load("kenney_game-icons/PNG/White/1x/musicOn.png"),
+                            ..default()
+                        },
+                        audio::MusicIcon,
+                    ));
+                })
+                .observe(button_hover_on)
+                .observe(button_hover_off)
+                .observe(audio::toggle_music);
+
             parent
                 .spawn(Node {
                     width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
                     flex_direction: FlexDirection::Column,
                     align_items: AlignItems::Center,
-                    justify_content: JustifyContent::Center,
+                    justify_content: JustifyContent::SpaceAround,
                     ..default()
                 })
                 .with_children(|parent| {
@@ -79,11 +110,20 @@ fn setup(mut commands: Commands, server: Res<AssetServer>) {
                             ..default()
                         },
                         Node {
-                            height: Val::Px(300.0),
+                            height: Val::Percent(40.0),
                             ..default()
                         },
                     ));
 
+                    parent
+                        .spawn(Node {
+                            height: Val::Percent(40.0),
+                            flex_direction: FlexDirection::Column,
+                            align_items: AlignItems::Center,
+                            justify_content: JustifyContent::FlexEnd,
+                            ..default()
+                        })
+                        .with_children(|parent| {
                             parent
                                 .spawn((
                                     button_builder(Node::default()),
@@ -132,6 +172,7 @@ fn setup(mut commands: Commands, server: Res<AssetServer>) {
                                 .observe(quit_button);
                         });
                 });
+        });
 }
 
 #[derive(Component)]
@@ -289,7 +330,7 @@ fn setup_about(mut commands: Commands, server: Res<AssetServer>) {
             ViewState::About,
             Node {
                 width: Val::Percent(100.0),
-                justify_content: JustifyContent::SpaceBetween,
+                justify_content: JustifyContent::FlexStart,
                 ..default()
             },
         ))
@@ -319,6 +360,32 @@ fn setup_about(mut commands: Commands, server: Res<AssetServer>) {
                     .observe(button_hover_off)
                     .observe(button_set_state(ViewState::Menu));
             });
+            parent
+                .spawn((
+                    Button,
+                    BackgroundColor(BLACK.with_alpha(0.9).into()),
+                    Node {
+                        margin: UiRect::all(Val::Px(5.0)),
+                        padding: UiRect::all(Val::Px(5.0)),
+                        border: UiRect::all(Val::Px(1.0)),
+                        height: Val::Px(40.0),
+                        ..default()
+                    },
+                    BorderColor(WHITE.into()),
+                    GlobalZIndex(1),
+                ))
+                .with_children(|parent| {
+                    parent.spawn((
+                        ImageNode {
+                            image: server.load("kenney_game-icons/PNG/White/1x/musicOn.png"),
+                            ..default()
+                        },
+                        audio::MusicIcon,
+                    ));
+                })
+                .observe(button_hover_on)
+                .observe(button_hover_off)
+                .observe(audio::toggle_music);
         });
 
     commands
@@ -377,7 +444,7 @@ fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>, server: Res<AssetS
             ViewState::HowToPlay,
             Node {
                 width: Val::Percent(100.0),
-                justify_content: JustifyContent::SpaceBetween,
+                justify_content: JustifyContent::FlexStart,
                 ..default()
             },
         ))
@@ -407,6 +474,32 @@ fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>, server: Res<AssetS
                     .observe(button_hover_off)
                     .observe(button_set_state(ViewState::Menu));
             });
+            parent
+                .spawn((
+                    Button,
+                    BackgroundColor(BLACK.with_alpha(0.9).into()),
+                    Node {
+                        margin: UiRect::all(Val::Px(5.0)),
+                        padding: UiRect::all(Val::Px(5.0)),
+                        border: UiRect::all(Val::Px(1.0)),
+                        height: Val::Px(40.0),
+                        ..default()
+                    },
+                    BorderColor(WHITE.into()),
+                    GlobalZIndex(1),
+                ))
+                .with_children(|parent| {
+                    parent.spawn((
+                        ImageNode {
+                            image: server.load("kenney_game-icons/PNG/White/1x/musicOn.png"),
+                            ..default()
+                        },
+                        audio::MusicIcon,
+                    ));
+                })
+                .observe(button_hover_on)
+                .observe(button_hover_off)
+                .observe(audio::toggle_music);
         });
     commands
         .spawn((
@@ -517,6 +610,7 @@ fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>, server: Res<AssetS
                                 ..default()
                             },
                             Text(t.to_string()),
+                            TextFont::default().with_font_size(16.0),
                         ));
                         parent.spawn(Node {
                             ..default()

src/play.rs

@@ -254,7 +254,7 @@ pub(crate) fn shuffle_card(
         let (mut t, mut v, mut ap) = query.get_mut(trigger.entity()).unwrap();
         *v = Visibility::Hidden;
         ap.rewind_all().stop_all();
-        t.translation = Vec3::new(-400.0, -200.0, 0.0);
+        t.translation = Vec3::new(-200.0, 0.0, 0.0);
         t.rotation = Quat::IDENTITY;
     }
     commands
@@ -301,7 +301,7 @@ pub(crate) fn card_placement(PlayLocation { x, y }: &PlayLocation) -> Vec3 {
         ((*x as f32) * card_size[0]) - offset.x,
         ((*y as f32) * card_size[1]) - offset.y,
         0.0,
-    )
+    ) / 2.25
 }
 
 pub(crate) fn check_for_sets(

src/setup.rs

@@ -36,6 +36,7 @@ pub(crate) fn setup_cards(
     animation_store: Res<AnimationStore>,
 ) {
     let animation_player = AnimationPlayer::default();
+    let card_size = Vec2::new(40.0, 64.0);
     commands
         .spawn((
             Transform::default(),
@@ -47,11 +48,11 @@ pub(crate) fn setup_cards(
             // Top of card pile is a "face down" card
             {
                 let top_card_transform = Transform {
-                    translation: Vec3::new(-400.0, -200.0, 99.0),
+                    translation: Vec3::new(-200.0, 0.0, 99.0),
                     ..default()
                 };
                 let top_card_sprite = Sprite {
-                    custom_size: Some(Vec2::new(80.0, 128.0)),
+                    custom_size: Some(card_size),
                     texture_atlas: Some(TextureAtlas {
                         index: 108,
                         layout: layouts.add(TextureAtlasLayout::from_grid(
@@ -80,7 +81,7 @@ pub(crate) fn setup_cards(
                     .unwrap_or_else(|| panic!("fech card sprite {:?}", this_card))
                     .clone();
                 let this_sprite = Sprite {
-                    custom_size: Some(Vec2::new(80.0, 128.0)),
+                    custom_size: Some(card_size),
                     ..this.clone()
                 };
                 let order = play::DeckOrder(i as u8);
@@ -92,7 +93,7 @@ pub(crate) fn setup_cards(
                 let animation_target_id = AnimationTargetId::from_name(&name);
 
                 let this_transform =
-                    Transform::default().with_translation(Vec3::new(-400.0, -200.0, 0.0));
+                    Transform::default().with_translation(Vec3::new(-200.0, 0.0, 0.0));
                 let visibility = Visibility::Hidden;
 
                 // Spawn card with a simple Transform parent so we can adjust the Z-axis for

todo.txt

@@ -1,5 +1,10 @@
 TODO:
 * Make "set" button visually interesting when 3 cards selected
+* Make "how to play" fit on smaller screen resolution.
+  * I think scrolling makes the most sense... unfortunately
+* Make background scale with window
+* Scale cards with window resolution
+  * Genuinely not sure how to do this...
 
 Later:
 * Make button(s) look pretty