Fix cell resizing issue and work on mobile support

This resolves #5 and #6
AlexBuz · Dec 17, 2023 · c2bb621 · c2bb621
1 parent 295289d
commit c2bb621
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 59 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -17,8 +17,10 @@ num = { version = "0.4.1", features = ["rand"] }
 rayon = "1.7.0"
 yew = { version = "0.21.0", features = ["csr"] }
 web-sys = { version = "0.3.64", features = [
-    "HtmlSelectElement",
+    "CssStyleDeclaration",
     "HtmlDialogElement",
+    "HtmlElement",
+    "HtmlSelectElement",
 ] }
 js-sys = "0.3.64"
 wasm-bindgen = "0.2.87"

diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mindsweeper</title>
     <link data-trunk rel="icon" href="favicon.png">
     <link data-trunk rel="icon" href="favicon.svg">

diff --git a/main.css b/main.css
@@ -1,5 +1,7 @@
 body {
     font-family: Arial, Helvetica, sans-serif;
+    overflow: hidden;
+    margin: 0;
 }
 
 h2 {
@@ -24,7 +26,7 @@ dialog {
     box-shadow: 0 0 16px gray;
     border-radius: 20px;
     max-width: calc(min(90ch, 90vw));
-    max-height: 90vh;
+    max-height: 85vh;
     padding: 0;
 }
 
@@ -49,6 +51,15 @@ button#close-dialog {
     right: 15px;
 }
 
+#board {
+    width: calc(100vw - 16px);
+    max-height: calc(100vh - 128px);
+    overflow: auto;
+    margin: 0;
+    padding: 0 16px 16px 16px;
+    box-sizing: border-box;
+}
+
 table {
     margin: auto;
     border-collapse: collapse;
@@ -57,14 +68,17 @@ table {
     cursor: default;
 }
 
-thead td>div {
+#buttons, #info {
     display: flex;
+    align-items: center;
     justify-content: space-evenly;
+    font-size: 16px;
+    margin: 8px auto;
+    width: min(100%, var(--board-width));
 }
 
-thead td {
-    height: 30px;
-    font-size: 16px;
+#buttons button {
+    height: 32px;
 }
 
 .timer {
@@ -77,25 +91,27 @@ thead td {
     color: gray;
 }
 
-tbody:not(.punish-guessing) {
+table:not(.punish-guessing) {
     --shadow-red: 128;
 }
 
-tbody.autopilot {
+table.autopilot {
     --shadow-green: 128;
 }
 
-tbody.mindless {
+table.mindless {
     --shadow-blue: 128;
 }
 
-tbody {
+table {
     box-shadow: 8px 8px 8px rgba(var(--shadow-red, 0), var(--shadow-green, 0), var(--shadow-blue, 0), 0.2);
 }
 
 .tile {
     height: 36px;
     width: 36px;
+    min-height: 36px;
+    min-width: 36px;
     text-align: center;
     border: 1px solid black;
     font-size: 24px;
@@ -104,6 +120,12 @@ tbody {
     background-color: #eee;
 }
 
+.tile>div {
+    max-width: 36px;
+    max-height: 36px;
+    overflow: hidden;
+}
+
 .hidden {
     display: none;
 }

diff --git a/src/client/mod.rs b/src/client/mod.rs
@@ -122,6 +122,18 @@ impl<Game: Oracle> Client<Game> {
         self.get_dialog().close();
     }
 
+    fn update_css_board_width(&self) -> Option<()> {
+        web_sys::window()?
+            .document()?
+            .body()?
+            .style()
+            .set_property(
+                "--board-width",
+                &format!("{}px", self.game_config.grid_config.width() * 39),
+            )
+            .ok()
+    }
+
     /// Reduces first-click latency by pre-generating a game on mousedown
     fn prepare_for_click(&mut self, tile_id: usize) {
         if !self
@@ -507,6 +519,7 @@ impl<Game: Oracle> Component for Client<Game> {
             })
         });
         let stop_propagation = |e: MouseEvent| e.stop_propagation();
+        self.update_css_board_width();
         html! {<>
             <dialog ref={self.dialog_ref.clone()} onclick={scope.callback(|_| Msg::CloseDialog)}>
                 <div onclick={stop_propagation} oncontextmenu={stop_propagation}>
@@ -694,53 +707,34 @@ impl<Game: Oracle> Component for Client<Game> {
                     </form>
                 </div>
             </dialog>
-            <table>
-                <thead>
-                    <tr>
-                        <td colspan={self.game_config.grid_config.width().to_string()}>
-                            <div>
-                                <button onclick={scope.callback(|_| Msg::ShowDialog)}>
-                                    { "Options & Info" }
-                                </button>
-                                <button onclick={scope.callback(|_| Msg::NewGame)}
-                                        disabled={self.game.is_none()}>
-                                    { "New Game" }
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan={self.game_config.grid_config.width().to_string()}>
-                            <div>
-                                <span class={self.remaining_flag_count().is_negative().then_some("text-red")}>
-                                    { "⚑: " } { self.remaining_flag_count() }
-                                </span>
-                                <Timer
-                                    show_timer={self.theme.show_timer}
-                                    game_config={self.game_config}
-                                    timer_mode={
-                                        match self.game.as_ref().map(Game::status) {
-                                            None => TimerMode::Reset,
-                                            Some(GameStatus::Ongoing) => TimerMode::Running,
-                                            Some(GameStatus::Won) => TimerMode::Stopped { won_game: true },
-                                            Some(GameStatus::Lost) => TimerMode::Stopped { won_game: false },
-                                        }
-                                    }/>
-                                <span>
-                                    { "Safe: " }
-                                    { self.game
-                                        .as_ref()
-                                        .map_or_else(
-                                            || self.game_config.grid_config.safe_count(),
-                                            Game::hidden_safe_count
-                                        )
-                                    }
-                                </span>
-                            </div>
-                        </td>
-                    </tr>
-                </thead>
-                <tbody class={classes!(
+            <div id="info">
+                <span class={self.remaining_flag_count().is_negative().then_some("text-red")}>
+                    { "⚑: " } { self.remaining_flag_count() }
+                </span>
+                <Timer
+                    show_timer={self.theme.show_timer}
+                    game_config={self.game_config}
+                    timer_mode={
+                        match self.game.as_ref().map(Game::status) {
+                            None => TimerMode::Reset,
+                            Some(GameStatus::Ongoing) => TimerMode::Running,
+                            Some(GameStatus::Won) => TimerMode::Stopped { won_game: true },
+                            Some(GameStatus::Lost) => TimerMode::Stopped { won_game: false },
+                        }
+                    }/>
+                <span>
+                    { "Safe: " }
+                    { self.game
+                        .as_ref()
+                        .map_or_else(
+                            || self.game_config.grid_config.safe_count(),
+                            Game::hidden_safe_count
+                        )
+                    }
+                </span>
+            </div>
+            <div id="board">
+                <table class={classes!(
                     self.game_config.punish_guessing.then_some("punish-guessing"),
                     match self.game_config.mode {
                         GameMode::Normal => None,
@@ -756,8 +750,17 @@ impl<Game: Oracle> Component for Client<Game> {
                                 { for row.map(|tile_id| self.view_tile(tile_id, analyzer.as_ref(), scope)) }
                             </tr>
                         })
-                } </tbody>
-            </table>
+                } </table>
+            </div>
+            <div id="buttons">
+                <button onclick={scope.callback(|_| Msg::ShowDialog)}>
+                    { "Options & Info" }
+                </button>
+                <button onclick={scope.callback(|_| Msg::NewGame)}
+                        disabled={self.game.is_none()}>
+                    { "New Game" }
+                </button>
+            </div>
         </>}
     }
 }