update main screen scaling and hide quit button from wasm

closes #56
closes #54

Author: it-me-joda

art/fonts.aseprite

@@ -59,6 +59,7 @@ impl Plugin for AppPlugin {
                         mode: WindowMode::BorderlessFullscreen(MonitorSelection::Current),
                         #[cfg(debug_assertions)]
                         mode: WindowMode::Windowed,
+                        // resolution: WindowResolution::new(853, 480),
                         resolution: WindowResolution::new(1920, 1080),
                         resizable: false,
                         position: WindowPosition::Centered(MonitorSelection::Current),
@@ -69,6 +70,8 @@ impl Plugin for AppPlugin {
                 .set(ImagePlugin::default_nearest()),
         );
 
+        app.insert_resource(ScaleFactor(1.0));
+
         app.add_plugins(InputPlugin);
 
         app.add_plugins(audio::plugin);
@@ -132,9 +135,13 @@ fn spawn_camera(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
     commands.spawn((Camera2d, Msaa::Off, OuterCamera, HIGH_RES_LAYERS));
 }
 
+#[derive(Resource)]
+pub struct ScaleFactor(f32);
+
 fn fit_canvas(
     mut resize_messages: MessageReader<WindowResized>,
     mut projection: Single<&mut Projection, With<OuterCamera>>,
+    mut scale_factor: ResMut<ScaleFactor>,
 ) {
     let Projection::Orthographic(proj) = &mut **projection else {
         return;
@@ -143,6 +150,8 @@ fn fit_canvas(
     for msg in resize_messages.read() {
         let h_scale = msg.width / RES_WIDTH as f32;
         let v_scale = msg.height / RES_HEIGHT as f32;
-        proj.scale = 1. / h_scale.min(v_scale);
+        let scale = h_scale.min(v_scale);
+        proj.scale = 1. / scale;
+        scale_factor.0 = scale;
     }
 }

assets/font.ttf

@@ -2,7 +2,7 @@ use bevy::prelude::*;
 use leafwing_input_manager::prelude::ActionState;
 
 use crate::{
-    HIGH_RES_LAYERS, PIXEL_PERFECT_LAYERS,
+    PIXEL_PERFECT_LAYERS, ScaleFactor,
     input::Action,
     screens::{Screen, splash::Title},
     sundry::{MEDIUM_GRAY, TRANSPARENT_MEDIUM_GRAY, WHITE},
@@ -37,112 +37,56 @@ fn spawn_title_screen(
     mut commands: Commands,
     asset_server: Res<AssetServer>,
     mut title_transform: Query<&mut Transform, With<Title>>,
+    scale_factor: Res<ScaleFactor>,
 ) {
+    let scale = scale_factor.0;
     let mut transform = title_transform.single_mut().unwrap();
     transform.translation = Vec3::new(0.0, 32.0, 0.0);
-    let font_handle = asset_server.load("font.ttf");
+    let font_handle: Handle<Font> = asset_server.load("font.ttf");
+
+    let new_game = title_menu_button(
+        "NEW GAME",
+        0,
+        MenuButton::NewGame,
+        font_handle.clone(),
+        scale,
+    );
+    let settings = title_menu_button(
+        "SETTINGS",
+        1,
+        MenuButton::Settings,
+        font_handle.clone(),
+        scale,
+    );
+    let quit = title_menu_button("QUIT", 2, MenuButton::Quit, font_handle.clone(), scale);
+
+    #[cfg(target_arch = "wasm32")]
+    let menu_buttons = children![new_game, settings];
+    #[cfg(not(target_arch = "wasm32"))]
+    let menu_buttons = children![new_game, settings, quit];
+
     commands.spawn((
         Node {
-            width: Val::Px(512.0),
-            height: Val::Px(400.0),
-            bottom: Val::Px(0.0),
-            position_type: PositionType::Absolute,
-            flex_direction: FlexDirection::Column,
-            align_items: AlignItems::Center,
-            justify_content: JustifyContent::Center,
-            padding: UiRect::all(Val::Px(32.0)),
-            margin: UiRect::all(Val::Auto),
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            padding: UiRect::all(Val::Px(8.0 * scale)),
             ..default()
         },
         DespawnOnExit(Screen::Title),
+        PIXEL_PERFECT_LAYERS,
         children![(
             Name::new("Title Screen Menu"),
             Node {
-                width: Val::Percent(70.0),
-                max_width: Val::Px(900.0),
-                margin: UiRect::all(Val::Auto),
+                width: Val::Percent(100.0),
                 flex_direction: FlexDirection::Column,
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
+                position_type: PositionType::Absolute,
+                bottom: Val::Px(8.0 * scale),
                 ..default()
             },
-            children![
-                (
-                    Name::new("New Game Button"),
-                    Button,
-                    Node {
-                        width: Val::Percent(100.0),
-                        height: Val::Px(100.0),
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                    MenuButton::NewGame,
-                    PIXEL_PERFECT_LAYERS,
-                    children![(
-                        Name::new("New Game Text"),
-                        Text::new("NEW GAME"),
-                        TextColor(TRANSPARENT_MEDIUM_GRAY),
-                        ButtonText(0),
-                        TextFont {
-                            font_size: 32.0,
-                            font: font_handle.clone(),
-                            ..default()
-                        },
-                        FadeIn,
-                    )]
-                ),
-                (
-                    Name::new("Settings Button"),
-                    Button,
-                    MenuButton::Settings,
-                    Node {
-                        width: Val::Percent(100.0),
-                        height: Val::Px(100.0),
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                    HIGH_RES_LAYERS,
-                    children![(
-                        Name::new("Settings"),
-                        Text::new("SETTINGS"),
-                        TextColor(TRANSPARENT_MEDIUM_GRAY),
-                        ButtonText(1),
-                        TextFont {
-                            font_size: 32.0,
-                            font: font_handle.clone(),
-                            ..default()
-                        },
-                        FadeIn,
-                    )]
-                ),
-                (
-                    Name::new("Quit Button"),
-                    Button,
-                    MenuButton::Quit,
-                    Node {
-                        width: Val::Percent(100.0),
-                        height: Val::Px(100.0),
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                    HIGH_RES_LAYERS,
-                    children![(
-                        Name::new("Quit Text"),
-                        Text::new("QUIT"),
-                        TextColor(TRANSPARENT_MEDIUM_GRAY),
-                        ButtonText(2),
-                        TextFont {
-                            font_size: 32.0,
-                            font: font_handle.clone(),
-                            ..default()
-                        },
-                        FadeIn,
-                    )]
-                )
-            ]
+            PIXEL_PERFECT_LAYERS,
+            menu_buttons,
         )],
     ));
 }
@@ -156,16 +100,21 @@ fn input_system(
 ) {
     let action_state = input_query.single().unwrap();
 
+    #[cfg(not(target_arch = "wasm32"))]
+    let max_index = 2;
+    #[cfg(target_arch = "wasm32")]
+    let max_index = 1;
+
     if action_state.just_pressed(&Action::Up) {
         if active_index.0 == 0 {
-            active_index.0 = 2;
+            active_index.0 = max_index;
         } else {
             active_index.0 -= 1;
         }
     }
 
     if action_state.just_pressed(&Action::Down) {
-        if active_index.0 == 2 {
+        if active_index.0 == max_index {
             active_index.0 = 0
         } else {
             active_index.0 += 1
@@ -255,3 +204,37 @@ fn fade_in(
         }
     }
 }
+
+fn title_menu_button(
+    button: &str,
+    button_index: usize,
+    menu_button: MenuButton,
+    font_handle: Handle<Font>,
+    scale: f32,
+) -> impl Bundle {
+    (
+        Name::new(format!("{button} Button")),
+        Button,
+        Node {
+            width: Val::Percent(100.0),
+            height: Val::Px(32.0 * scale),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        },
+        menu_button,
+        PIXEL_PERFECT_LAYERS,
+        children![(
+            Name::new(format!("{button}Text")),
+            Text::new(button.to_string()),
+            TextColor(TRANSPARENT_MEDIUM_GRAY),
+            ButtonText(button_index),
+            TextFont {
+                font_size: 16.0 * scale,
+                font: font_handle,
+                ..default()
+            },
+            FadeIn,
+        )],
+    )
+}