From cc78457aee3f5e270cfc34e033dbacbdb68a0179 Mon Sep 17 00:00:00 2001 From: Guilleag01 Date: Wed, 9 Aug 2023 10:23:58 +0200 Subject: [PATCH] Auto resizing cells --- Cargo.toml | 1 + src-tauri/tauri.conf.json | 2 +- src/app.rs | 83 ++++++++++++++++++++++++++++++--------- src/components/board.rs | 15 +++++-- src/components/button.rs | 37 +++++++++++------ src/minesweeper/mod.rs | 1 - styles.css | 45 +++++++++++++-------- 7 files changed, 132 insertions(+), 52 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index bbb5ffb..6d0e1d0 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -16,6 +16,7 @@ getrandom = { version = "0.2.10", features = ["js"] } rand = "0.8.5" wasm-logger = "0.2.0" log = "0.4.19" +regex = "1.9.3" [workspace] members = ["src-tauri"] diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index b99c04c..d4d5528 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "minesweeper", - "version": "0.0.0" + "version": "1.0.0" }, "tauri": { "allowlist": { diff --git a/src/app.rs b/src/app.rs index f2f3fb3..c65d949 100644 --- a/src/app.rs +++ b/src/app.rs @@ -2,11 +2,15 @@ // use serde_wasm_bindgen::to_value; use wasm_bindgen::prelude::*; +use web_sys::HtmlInputElement; + // use wasm_bindgen_futures::spawn_local; use yew::{prelude::*, html::Scope}; // use log::info; -// use wasm_bindgen::JsValue; +use wasm_bindgen::JsValue; + +use regex::Regex; use minesweeper_ui::components::board::BoardComponent; @@ -22,7 +26,10 @@ pub enum Msg { Discover{ cell: Cell }, Flag{ cell: Cell }, Reset, - ToggleSettings + ToggleSettings, + UpdateHeight, + UpdateWidth, + UpdateMines, } pub struct App { @@ -59,12 +66,8 @@ impl Component for App { fn view(&self, _ctx: &Context) -> Html { let b = self.game.get_board().clone(); - let mut style = String::new(); - if !self.show_settings { - style = format!("height: 0px; transition: height 1s;"); - } else { - style = format!("height: 98px; transition: height 1s"); - } + let style = format!("height: {}px; transition: height 1s;", if !self.show_settings {0} else {98}).to_string(); + html!{
// Disable context menu @@ -96,17 +99,18 @@ impl Component for App {
{"Height "} - +
- //
{"Width "} - +
- //
{"Mines "} - +
@@ -115,10 +119,6 @@ impl Component for App {
- - // if self.show_settings { - // } -
@@ -132,19 +132,64 @@ impl Component for App { } fn update(&mut self, _ctx: &Context, msg: Self::Message) -> bool { + let d = web_sys::window().unwrap().document().unwrap(); + + let get_mines = || { + let text = d.get_element_by_id("mines-input").unwrap().dyn_into::().unwrap().value(); + + let re = Regex::new("^((0+)|((0*)(1|[2-9]|[1-9][0-9]|[1-8][0-9]{2}|9[0-8][0-9]|99[0-8]|999)))$").unwrap(); + let mut value: usize = self.num_mines; + if re.is_match(&text) { + value = text.parse().unwrap(); + } + return value; + }; + match msg { Msg::Discover {cell} => { self.game.show(cell.get_pos()); }, Msg::Flag {cell} => { self.game.set_flag(cell.get_pos(), !self.game.get_cell(cell.get_pos()).is_flagged()); - } + }, Msg::Reset => { self.game = Game::new(self.height, self.width, self.num_mines); self.game.start_board(); - } + }, Msg::ToggleSettings => { self.show_settings = !self.show_settings; + }, + Msg::UpdateHeight => { + let text = d.get_element_by_id("height-input").unwrap().dyn_into::().unwrap().value(); + + let re = Regex::new("^(0*)(1|[2-9]|[1-9][0-9]|[1-8][0-9]{2}|9[0-8][0-9]|99[0-8]|999)$").unwrap(); + if re.is_match(&text) { + self.height = text.parse().unwrap(); + let mines = get_mines(); + self.num_mines = mines.min(self.height * self.width); + self.game = Game::new(self.height, self.width, self.num_mines); + self.game.start_board(); + } + }, + Msg::UpdateWidth => { + let text = d.get_element_by_id("width-input").unwrap().dyn_into::().unwrap().value(); + + let re = Regex::new("^(0*)(1|[2-9]|[1-9][0-9]|[1-8][0-9]{2}|9[0-8][0-9]|99[0-8]|999)$").unwrap(); + if re.is_match(&text) { + self.width = text.parse().unwrap(); + let mines = get_mines(); + self.num_mines = mines.min(self.height * self.width); + self.game = Game::new(self.height, self.width, self.num_mines); + self.game.start_board(); + } + }, + Msg::UpdateMines => { + let mines = get_mines(); + if mines <= self.height * self.width { + self.num_mines = mines; + self.game = Game::new(self.height, self.width, self.num_mines); + self.game.start_board(); + } } } true diff --git a/src/components/board.rs b/src/components/board.rs index df3cf55..2d1fa5d 100644 --- a/src/components/board.rs +++ b/src/components/board.rs @@ -42,7 +42,10 @@ impl Component for BoardComponent { fn view(&self, ctx: &Context) -> Html { - let b = ctx.props().board.get_board().to_owned(); + let b = ctx.props().board.get_board().clone(); + + let height = self.board.get_height(); + let width = self.board.get_width(); html! {
@@ -51,7 +54,12 @@ impl Component for BoardComponent { <> {row.into_iter().map(|c| { html! { - - } } @@ -79,12 +89,15 @@ impl Component for Button { self.flagsignal.emit(self.cell); }, } - false + true } fn changed(&mut self, ctx: &Context, _old_props: &Self::Properties) -> bool { self.cell = ctx.props().cell.clone(); self.onsignal = ctx.props().onsignal.clone(); + self.flagsignal = ctx.props().flagsignal.clone(); + self.width = ctx.props().width.clone(); + self.height = ctx.props().height.clone(); true } } \ No newline at end of file diff --git a/src/minesweeper/mod.rs b/src/minesweeper/mod.rs index 1d2f098..a969af9 100644 --- a/src/minesweeper/mod.rs +++ b/src/minesweeper/mod.rs @@ -113,5 +113,4 @@ impl Game { pub fn set_flag(&mut self, pos: (usize, usize), flag: bool) { self.board.set_flag(pos, flag); } - } diff --git a/styles.css b/styles.css index 1c1d4ab..d7eed22 100644 --- a/styles.css +++ b/styles.css @@ -1,15 +1,15 @@ :root { font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 16px; line-height: 24px; font-weight: 400; color: #0f0f0f98; background-color: #2f2f2f; - + /* position: absolute; */ height: 100%; - display: flex; + width: auto; + display: inline-block; justify-content: center; - font-size: 25px; + text-align: center; font-synthesis: none; text-rendering: optimizeLegibility; @@ -19,10 +19,12 @@ } .container { - display: block; + display: flex; justify-content: center; - margin: 0; + flex-direction: column; padding: 10vh; + white-space: nowrap; + width: auto; } button { @@ -58,11 +60,18 @@ button { } .game { - position: relative; z-index: 1; display: flex; justify-content: center; background-color: #2f2f2f; + width: 100%; +} + +.board { + display: flexbox; + justify-content: center; + /* width: calc((min(10vw - (2vw), 10vh - (2vh) - (110px / 10)) + (1px * 10)) * 10); */ + width: 100%; } .button-reset { @@ -117,7 +126,7 @@ button { .custom-settings { display: flex; flex-direction: row; - justify-content: space-between; + justify-content: space-evenly; } .preset-settings { @@ -127,6 +136,7 @@ button { } .setting { + width: 176px; display: flex; justify-content: center; align-items: center; @@ -135,6 +145,7 @@ button { .preset-setting { /* height: 25px; */ + width: 176px; margin: 2px; border-radius: 8px; border: 1px solid transparent; @@ -165,24 +176,21 @@ button { } .button-hidden { - font-size: 25px; + aspect-ratio: 1 / 1; + /* font-size: 25px; */ color: rgba(15, 15, 15, 0.0); background-color: #0f0f0f98; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); - height: 50px; - width: 50px; transition: background-color 0.5s; -webkit-transition: background-color 0.5s; } .button-shown { - font-size: 25px; + aspect-ratio: 1 / 1; + font-size: calc(5 * min(1vw, 1vh)); font-weight: 700; - color: #0f0f0f98; + color: #0f0f0f98; background-color: #2f2f2f; - height: 50px; - width: 50px; - } .button-hidden:hover { @@ -204,6 +212,11 @@ button { -webkit-transition: background-color 0.5s; } +.button-icon { + width: 70%; + height: 70%; +} + input, button { outline: none;