feat: make main_menu scalalble

src/bin/macroquad_client.rs

@@ -1,11 +1,13 @@
-use checkers::ui::{macroquad::main_menu::draw_main_menu, state::GuiState};
+use checkers::ui::{
+    macroquad::main_menu::{draw_main_menu, get_main_menu_style},
+    state::GuiState,
+};
 use macroquad::{
-    color::{BLACK, BLUE, RED, WHITE},
+    color::{BLUE, RED, WHITE},
     math::vec2,
     miniquad::{self, conf::LinuxBackend::WaylandWithX11Fallback},
-    prelude::ImageFormat,
+    texture::{DrawTextureParams, draw_texture_ex, load_texture},
-    texture::{DrawTextureParams, Image, Texture2D, draw_texture, draw_texture_ex, load_texture},
+    ui::root_ui,
-    ui::{Skin, root_ui},
     window::{Conf, clear_background, next_frame, screen_height, screen_width},
 };
 
@@ -26,32 +28,12 @@ pub async fn main() {
     env_logger::init();
 
     let mut state = Default::default();
-
     let background = load_texture("assets/background.png").await.unwrap();
 
-    let style = root_ui()
+    let main_menu_style = get_main_menu_style().await;
-        .style_builder()
+    root_ui().push_skin(&main_menu_style);
-        .text_color(WHITE)
-        .font_size(64)
-        .build();
-
-    let button_style = root_ui()
-        .style_builder()
-        .text_color(BLACK)
-        .font_size(32)
-        .build();
-
-    let skin = Skin {
-        label_style: style,
-        button_style: button_style,
-        ..root_ui().default_skin()
-    };
-
-    root_ui().push_skin(&skin);
 
     loop {
-        match state {
-            GuiState::MainMenu => {
         draw_texture_ex(
             &background,
             0.0,
@@ -62,6 +44,9 @@ pub async fn main() {
                 ..DrawTextureParams::default()
             },
         );
+
+        match state {
+            GuiState::MainMenu => {
                 draw_main_menu(&mut state).await;
             }
 

src/ui/macroquad/main_menu.rs

@@ -1,54 +1,48 @@
 use macroquad::{
-    color::WHITE,
+    color::{BLACK, GRAY, WHITE},
-    math::{Rect, Vec2, vec2},
+    math::vec2,
-    prelude::ImageFormat,
+    shapes::draw_rectangle,
-    texture::Image,
+    ui::{Skin, hash, root_ui, widgets::Group},
-    ui::{Layout, Skin, Ui, hash, root_ui, widgets::Button},
     window::{next_frame, screen_height, screen_width},
 };
 
-use crate::ui::state::GuiState;
+use crate::ui::{macroquad::menu_builder::MenuBuilder, state::GuiState};
 
-pub struct MenuBuilder {
+pub async fn get_main_menu_style() -> Skin {
-    center_x: f32,
+    let label_style = root_ui()
-    current_y: f32,
+        .style_builder()
-    button_size: Vec2,
+        .text_color(WHITE)
-    spacing: f32,
+        .font_size(64)
-}
+        .build();
 
-impl MenuBuilder {
+    let button_style = root_ui()
-    pub fn new(window_width: f32, start_y: f32) -> Self {
+        .style_builder()
-        let button_size = vec2(200.0, 50.0);
+        .text_color(BLACK)
-        Self {
+        .font_size(32)
-            center_x: (window_width - button_size.x) / 2.0,
+        .build();
-            current_y: start_y,
-            button_size,
-            spacing: 15.0,
-        }
-    }
 
-    pub fn button(&mut self, ui: &mut Ui, label: &str) -> bool {
+    Skin {
-        let clicked = Button::new(label)
+        label_style,
-            .position(vec2(self.center_x, self.current_y))
+        button_style,
-            .size(self.button_size)
+        ..root_ui().default_skin()
-            .ui(ui);
-
-        self.current_y += self.button_size.y + self.spacing;
-
-        clicked
     }
 }
 
 pub async fn draw_main_menu(state: &mut GuiState) {
-    let window_size = vec2(1200.0, 620.0);
+    let menu_size = vec2(screen_width() * 0.5, screen_height() * 0.5);
-    let mut menu_builder = MenuBuilder::new(screen_width(), 10.0);
+    let menu_pos = vec2(
+        screen_width() / 2.0 - menu_size.x / 2.0,
+        screen_height() / 2.0 - menu_size.y / 2.0,
+    );
 
-    root_ui().window(
+    let mut menu_builder = MenuBuilder::new(menu_size.x, menu_size.y * 0.1);
-        hash!(),
+
-        vec2(screen_width() / 2.0, screen_height() / 2.0),
+    draw_rectangle(menu_pos.x, menu_pos.y, menu_size.x, menu_size.y, GRAY);
-        window_size,
+
-        |ui| {
+    Group::new(hash!(), menu_size)
-            ui.label(None, "Main Menu");
+        .position(menu_pos)
+        .ui(&mut root_ui(), |ui| {
+            menu_builder.label(ui, "Main menu");
 
             if menu_builder.button(ui, "Play") {
                 *state = GuiState::Game;
@@ -61,8 +55,7 @@ pub async fn draw_main_menu(state: &mut GuiState) {
             if menu_builder.button(ui, "Quit") {
                 *state = GuiState::Exit;
             }
-        },
+        });
-    );
 
     next_frame().await;
 }

src/ui/macroquad/menu_builder.rs

@@ -0,0 +1,46 @@
+use macroquad::{
+    math::{Vec2, vec2},
+    ui::{
+        Ui, root_ui,
+        widgets::{Button, Label},
+    },
+};
+
+pub struct MenuBuilder {
+    center_x: f32,
+    current_y: f32,
+    button_size: Vec2,
+    spacing: f32,
+}
+
+impl MenuBuilder {
+    pub fn new(window_width: f32, start_y: f32) -> Self {
+        let button_size = vec2(200.0, 50.0);
+        Self {
+            center_x: (window_width - button_size.x) / 2.0,
+            current_y: start_y,
+            button_size,
+            spacing: 15.0,
+        }
+    }
+
+    pub fn label(&mut self, ui: &mut Ui, label: &str) {
+        Label::new(label)
+            .position(vec2(self.center_x, self.current_y))
+            .size(self.button_size)
+            .ui(ui);
+
+        self.current_y += self.button_size.y + self.spacing;
+    }
+
+    pub fn button(&mut self, ui: &mut Ui, label: &str) -> bool {
+        let clicked = Button::new(label)
+            .position(vec2(self.center_x, self.current_y))
+            .size(self.button_size)
+            .ui(ui);
+
+        self.current_y += self.button_size.y + self.spacing;
+
+        clicked
+    }
+}

src/ui/macroquad/mod.rs

@@ -1 +1,2 @@
 pub mod main_menu;
+mod menu_builder;