login screen in macroquad

frontend/src/main.rs

@@ -1,15 +1,40 @@
-use macroquad::prelude::*;
+use macroquad::hash;
+use macroquad::{prelude::*, ui::root_ui};
 
-#[macroquad::main("BasicShapes")]
+#[macroquad::main("Play of the Game")]
 async fn main() {
+    let mut username = String::new();
+    let mut rooom_code = String::new();
     loop {
-        clear_background(RED);
+        clear_background(WHITE);
 
-        draw_line(40.0, 40.0, 100.0, 200.0, 15.0, BLUE);
+        let group_size = Vec2::new(screen_width() * 0.25, screen_height() * 0.05);
-        draw_rectangle(screen_width() / 2.0 - 60.0, 100.0, 120.0, 60.0, GREEN);
+        let window_size = Vec2::new(screen_width() * 0.25, screen_height() * 0.25);
-        draw_circle(screen_width() - 30.0, screen_height() - 30.0, 15.0, YELLOW);
 
-        draw_text("IT WORKS!", 20.0, 20.0, 30.0, DARKGRAY);
+        root_ui().window(
+            hash!("Window"),
+            Vec2::new(
+                screen_width() * 0.5 - window_size.x * 0.5,
+                screen_height() * 0.5 - window_size.x * 0.5,
+            ),
+            Vec2::new(screen_width() * 0.25, screen_height() * 0.25),
+            |ui| {
+                ui.group(hash!("User Group"), group_size, |ui| {
+                    ui.input_text(hash!("Username In"), "Username", &mut username);
+                });
+                ui.group(hash!("Room Group"), group_size, |ui| {
+                    ui.input_text(hash!("Room Code In"), "Room Code", &mut rooom_code);
+                });
+                ui.group(hash!("Join Group"), group_size, |ui| {
+                    if ui.button(Vec2::new(group_size.x * 0.45, 0.0), "Join") {
+                        info!(
+                            "User pressed joined with name={} room_code={}",
+                            username, rooom_code
+                        );
+                    }
+                });
+            },
+        );
 
         next_frame().await
     }