From c2bb6210058100fbe43c3fafee4e3a46cd1d42b6 Mon Sep 17 00:00:00 2001 From: AlexBuz Date: Sun, 17 Dec 2023 02:51:05 -0600 Subject: [PATCH] Fix cell resizing issue and work on mobile support This resolves #5 and #6 --- Cargo.toml | 4 +- index.html | 1 + main.css | 40 +++++++++++++----- src/client/mod.rs | 101 ++++++++++++++++++++++++---------------------- 4 files changed, 87 insertions(+), 59 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 98c7e53..eb60ba3 100644 --- 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 index d371bb5..dbc17a7 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Mindsweeper diff --git a/main.css b/main.css index a6efb64..82c5b81 100644 --- 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 index 5e60937..bbb64a5 100644 --- a/src/client/mod.rs +++ b/src/client/mod.rs @@ -122,6 +122,18 @@ impl Client { 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 Component for Client { }) }); let stop_propagation = |e: MouseEvent| e.stop_propagation(); + self.update_css_board_width(); html! {<>
@@ -694,53 +707,34 @@ impl Component for Client {
- - - - - - - - - - + + { "⚑: " } { self.remaining_flag_count() } + + TimerMode::Reset, + Some(GameStatus::Ongoing) => TimerMode::Running, + Some(GameStatus::Won) => TimerMode::Stopped { won_game: true }, + Some(GameStatus::Lost) => TimerMode::Stopped { won_game: false }, + } + }/> + + { "Safe: " } + { self.game + .as_ref() + .map_or_else( + || self.game_config.grid_config.safe_count(), + Game::hidden_safe_count + ) + } + + +
+
-
- - -
-
-
- - { "⚑: " } { self.remaining_flag_count() } - - TimerMode::Reset, - Some(GameStatus::Ongoing) => TimerMode::Running, - Some(GameStatus::Won) => TimerMode::Stopped { won_game: true }, - Some(GameStatus::Lost) => TimerMode::Stopped { won_game: false }, - } - }/> - - { "Safe: " } - { self.game - .as_ref() - .map_or_else( - || self.game_config.grid_config.safe_count(), - Game::hidden_safe_count - ) - } - -
-
None, @@ -756,8 +750,17 @@ impl Component for Client { { for row.map(|tile_id| self.view_tile(tile_id, analyzer.as_ref(), scope)) } }) - } -
+ } + +
+ + +
} } }