better menu

babylonia-terminal-gui/src/lib.rs

@@ -18,5 +18,36 @@ pub fn run() {
     let display = gdk::Display::default().unwrap();
     let theme = gtk::IconTheme::for_display(&display);
     theme.add_resource_path(&format!("{APP_RESOURCE_PATH}/icons"));
+
+    relm4::set_global_css(&format!(
+        "
+        progressbar > text {{
+            margin-bottom: 4px;
+        }}
+
+        window.classic-style {{
+            background-repeat: no-repeat;
+            background-size: cover;
+        }}
+
+        window.classic-style progressbar {{
+            background-color: #00000020;
+            border-radius: 16px;
+            padding: 8px 16px;
+        }}
+
+        window.classic-style progressbar:hover {{
+            background-color: #00000060;
+            color: #ffffff;
+            transition-duration: 0.5s;
+            transition-timing-function: linear;
+        }}
+
+        .round-bin {{
+            border-radius: 24px;
+        }}
+    "
+    ));
+
     ui::run(app);
 }

babylonia-terminal-gui/src/ui/mod.rs

@@ -4,7 +4,11 @@ use crate::manager;
 use babylonia_terminal_sdk::game_state::GameState;
 
 use relm4::{
-    adw::{self, ApplicationWindow},
+    adw::{
+        self,
+        prelude::{PreferencesGroupExt, PreferencesPageExt},
+        ApplicationWindow,
+    },
     gtk::{
         self,
         prelude::{BoxExt, ButtonExt, GtkWindowExt, OrientableExt, WidgetExt},
@@ -59,21 +63,44 @@ impl SimpleAsyncComponent for MainWindow {
 
                 adw::HeaderBar,
 
-                gtk::Image {
+                gtk::Box {
+                    set_orientation: gtk::Orientation::Vertical,
+                    set_vexpand: true,
+                    set_margin_horizontal: 50,
+                    set_valign: gtk::Align::Center,
+
+                    adw::PreferencesPage {
+                        add = &adw::PreferencesGroup {
+                            gtk::Picture {
                                 set_resource: Some(&format!("{APP_RESOURCE_PATH}/icons/hicolor/scalable/apps/icon.png")),
-                    set_height_request: 256,
+                                set_vexpand: true,
                             },
 
-                #[name(start_button)]
+                            gtk::Label {
+                                set_label: "Babylonia Terminal",
+                                set_margin_top: 24,
+                                add_css_class: "title-1",
+                            },
+                        },
+
+                        add = &adw::PreferencesGroup {
                             gtk::Button {
+                                set_css_classes: &["suggested-action", "pill"],
+
+                                set_label: "Start game",
+                                set_hexpand: false,
+                                set_width_request: 200,
+
                                 #[watch]
                                 set_sensitive: !model.is_game_running,
-                    set_label: "Start game",
                                 connect_clicked[sender = model.game_handler.sender().clone()] => move |_| {
                                     sender.send(manager::HandleGameProcessMsg::RunGame).unwrap();
                                 },
                             },
                         }
+                    },
+                }
+            }
         }
     }