guillermo/minesweeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto resizing cells

Browse Source
This commit is contained in:
Guilleag01
2023-08-09 10:23:58 +02:00
parent 530d351c2a
commit cc78457aee
7 changed files with 132 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@@ -16,6 +16,7 @@ getrandom = { version = "0.2.10", features = ["js"] }
rand = "0.8.5" rand = "0.8.5"
wasm-logger = "0.2.0" wasm-logger = "0.2.0"
log = "0.4.19" log = "0.4.19"
regex = "1.9.3"
[workspace] [workspace]
members = ["src-tauri"] members = ["src-tauri"]

2
src-tauri/tauri.conf.json
View File

@@ -8,7 +8,7 @@
}, },
"package": { "package": {
"productName": "minesweeper", "productName": "minesweeper",
"version": "0.0.0" "version": "1.0.0"
}, },
"tauri": { "tauri": {
"allowlist": { "allowlist": {

83
src/app.rs
View File

@@ -2,11 +2,15 @@
// use serde_wasm_bindgen::to_value; // use serde_wasm_bindgen::to_value;
use wasm_bindgen::prelude::*; use wasm_bindgen::prelude::*;
use web_sys::HtmlInputElement;
// use wasm_bindgen_futures::spawn_local; // use wasm_bindgen_futures::spawn_local;
use yew::{prelude::*, html::Scope}; use yew::{prelude::*, html::Scope};
// use log::info; // use log::info;
// use wasm_bindgen::JsValue; use wasm_bindgen::JsValue;
use regex::Regex;
use minesweeper_ui::components::board::BoardComponent; use minesweeper_ui::components::board::BoardComponent;
@@ -22,7 +26,10 @@ pub enum Msg {
Discover{ cell: Cell }, Discover{ cell: Cell },
Flag{ cell: Cell }, Flag{ cell: Cell },
Reset, Reset,
ToggleSettings ToggleSettings,
UpdateHeight,
UpdateWidth,
UpdateMines,
} }
pub struct App { pub struct App {
@@ -59,12 +66,8 @@ impl Component for App {
fn view(&self, _ctx: &Context<Self>) -> Html { fn view(&self, _ctx: &Context<Self>) -> Html {
let b = self.game.get_board().clone(); let b = self.game.get_board().clone();
let mut style = String::new(); let style = format!("height: {}px; transition: height 1s;", if !self.show_settings {0} else {98}).to_string();
if !self.show_settings {
style = format!("height: 0px; transition: height 1s;");
} else {
style = format!("height: 98px; transition: height 1s");
}
html!{ html!{
<main class="container"> <main class="container">
// Disable context menu // Disable context menu
@@ -96,17 +99,18 @@ impl Component for App {
<div class="custom-settings"> <div class="custom-settings">
<div class="setting"> <div class="setting">
{"Height "} {"Height "}
<input class="text-input" id="height-input" type="text" value="10"/> <input class="text-input" id="height-input" type="text"
oninput={self.link.callback(|_| Msg::UpdateHeight)}/>
</div> </div>
// <br/>
<div class="setting"> <div class="setting">
{"Width "} {"Width "}
<input class="text-input" id="width-input" type="text" value="10"/> <input class="text-input" id="width-input" type="text"
oninput={self.link.callback(|_| Msg::UpdateWidth)}/>
</div> </div>
// <br/>
<div class="setting"> <div class="setting">
{"Mines "} {"Mines "}
<input class="text-input" id="mines-input" type="text" value="10"/> <input class="text-input" id="mines-input" type="text"
oninput={self.link.callback(|_| Msg::UpdateMines)}/>
</div> </div>
</div> </div>
<div class="preset-settings"> <div class="preset-settings">
@@ -115,10 +119,6 @@ impl Component for App {
<button class="preset-setting">{"Hard"}</button> <button class="preset-setting">{"Hard"}</button>
</div> </div>
</div> </div>
// if self.show_settings {
// }
</div> </div>
<div class="game"> <div class="game">
@@ -132,19 +132,64 @@ impl Component for App {
} }
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool { fn update(&mut self, _ctx: &Context<Self>, 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::<HtmlInputElement>().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 { match msg {
Msg::Discover {cell} => { Msg::Discover {cell} => {
self.game.show(cell.get_pos()); self.game.show(cell.get_pos());
}, },
Msg::Flag {cell} => { Msg::Flag {cell} => {
self.game.set_flag(cell.get_pos(), !self.game.get_cell(cell.get_pos()).is_flagged()); self.game.set_flag(cell.get_pos(), !self.game.get_cell(cell.get_pos()).is_flagged());
} },
Msg::Reset => { Msg::Reset => {
self.game = Game::new(self.height, self.width, self.num_mines); self.game = Game::new(self.height, self.width, self.num_mines);
self.game.start_board(); self.game.start_board();
} },
Msg::ToggleSettings => { Msg::ToggleSettings => {
self.show_settings = !self.show_settings; self.show_settings = !self.show_settings;
},
Msg::UpdateHeight => {
let text = d.get_element_by_id("height-input").unwrap().dyn_into::<HtmlInputElement>().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::<HtmlInputElement>().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 true

15
src/components/board.rs
View File

@@ -42,7 +42,10 @@ impl Component for BoardComponent {
fn view(&self, ctx: &Context<Self>) -> Html { fn view(&self, ctx: &Context<Self>) -> 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! { html! {
<div class="board"> <div class="board">
@@ -51,7 +54,12 @@ impl Component for BoardComponent {
<> <>
{row.into_iter().map(|c| { {row.into_iter().map(|c| {
html! { html! {
<Button onsignal={self.link.callback(move |_| Msg::Discover{cell: c})} flagsignal={self.link.callback(move |_| Msg::Flag{cell: c})} cell={c}/> <Button
onsignal={self.link.callback(move |_| Msg::Discover{cell: c})}
flagsignal={self.link.callback(move |_| Msg::Flag{cell: c})}
cell={c}
height={height}
width={width}/>
} }
}).collect::<Html>()} }).collect::<Html>()}
<br/> <br/>
@@ -71,12 +79,13 @@ impl Component for BoardComponent {
self.flagsignal.emit(cell); self.flagsignal.emit(cell);
} }
} }
false true
} }
fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool { fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
self.board = ctx.props().board.clone(); self.board = ctx.props().board.clone();
self.onsignal = ctx.props().onsignal.clone(); self.onsignal = ctx.props().onsignal.clone();
self.flagsignal = ctx.props().flagsignal.clone();
true true
} }

37
src/components/button.rs
View File

@@ -1,3 +1,5 @@
use std::fmt::format;
use yew::{prelude::*, html::Scope}; use yew::{prelude::*, html::Scope};
use crate::minesweeper::cell::Cell; use crate::minesweeper::cell::Cell;
@@ -8,7 +10,9 @@ pub struct Button {
link: Scope<Self>, link: Scope<Self>,
cell: Cell, cell: Cell,
onsignal: Callback<Cell>, onsignal: Callback<Cell>,
flagsignal: Callback<Cell> flagsignal: Callback<Cell>,
width: usize,
height: usize,
} }
pub enum Msg { pub enum Msg {
@@ -19,6 +23,8 @@ pub enum Msg {
#[derive(Clone, PartialEq, Properties)] #[derive(Clone, PartialEq, Properties)]
pub struct Props { pub struct Props {
pub cell: Cell, pub cell: Cell,
pub width: usize,
pub height: usize,
pub onsignal: Callback<Cell>, pub onsignal: Callback<Cell>,
pub flagsignal: Callback<Cell> pub flagsignal: Callback<Cell>
} }
@@ -32,30 +38,36 @@ impl Component for Button {
link: ctx.link().clone(), link: ctx.link().clone(),
cell: ctx.props().cell.clone(), cell: ctx.props().cell.clone(),
onsignal: ctx.props().onsignal.clone(), onsignal: ctx.props().onsignal.clone(),
flagsignal: ctx.props().flagsignal.clone() flagsignal: ctx.props().flagsignal.clone(),
width: ctx.props().width.clone(),
height: ctx.props().height.clone()
} }
} }
fn view(&self, _ctx: &Context<Self>) -> Html { fn view(&self, _ctx: &Context<Self>) -> Html {
let mut style = String::new();
if !self.cell.is_hidden() {
style = format!("background-color: #2f2f2f; color: #ffffff; transition: background-color 0.5s, color 0.5s; transition-delay: {}s, {}s;", self.cell.get_delay(), self.cell.get_delay());
}
html!{
let style_width = format!("width: calc(max(min({}vw - ({}vw), {}vh - ({}vh) - ({}px)), 25px)); ", (100 / self.width) as f32, (40 / self.width) as f32, (100 / self.height) as f32, (20 / self.height) as f32, (110 / self.height) as f32);
let style_font = format!("font-size: calc(0.5 * max(min({}vw - ({}vw), {}vh - ({}vh) - ({}px)), 20px)); ", (100 / self.width) as f32, (40 / self.width) as f32, (100 / self.height) as f32, (20 / self.height) as f32, (110 / self.height) as f32);
// 100% = 20hv + (2 * n + 1) + n * x
let mut style = if !self.cell.is_hidden() {format!("background-color: #2f2f2f; color: #ffffff; transition: background-color 0.5s, color 0.5s; transition-delay: {}s, {}s; ", self.cell.get_delay(), self.cell.get_delay())} else {"".to_string()};
style.push_str(&style_width);
style.push_str(&style_font);
html!{
<button <button
class={if self.cell.is_hidden() {"button-hidden"} else {"button-shown"}} class={if self.cell.is_hidden() {"button-hidden"} else {"button-shown"}}
onclick={self.link.callback(|_| Msg::Clicked)} onclick={self.link.callback(|_| Msg::Clicked)}
oncontextmenu={self.link.callback(|_| {Msg::RightClicked})} oncontextmenu={self.link.callback(|_| {Msg::RightClicked})}
style={style}> style={style}>
if self.cell.is_flagged() { if self.cell.is_flagged() {
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pennant-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" class="button-icon icon icon-tabler icon-tabler-pennant-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 2a1 1 0 0 1 .993 .883l.007 .117v.35l8.406 3.736c.752 .335 .79 1.365 .113 1.77l-.113 .058l-8.406 3.735v7.351h1a1 1 0 0 1 .117 1.993l-.117 .007h-4a1 1 0 0 1 -.117 -1.993l.117 -.007h1v-17a1 1 0 0 1 1 -1z" stroke-width="0" fill="#ffffff"></path> <path d="M10 2a1 1 0 0 1 .993 .883l.007 .117v.35l8.406 3.736c.752 .335 .79 1.365 .113 1.77l-.113 .058l-8.406 3.735v7.351h1a1 1 0 0 1 .117 1.993l-.117 .007h-4a1 1 0 0 1 -.117 -1.993l.117 -.007h1v-17a1 1 0 0 1 1 -1z" stroke-width="0" fill="#ffffff"></path>
</svg> </svg>
} else { } else {
if self.cell.is_mine() && !self.cell.is_hidden(){ if self.cell.is_mine() && !self.cell.is_hidden(){
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bomb-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" class="button-icon icon icon-tabler icon-tabler-bomb-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14.499 3.996a2.2 2.2 0 0 1 1.556 .645l3.302 3.301a2.2 2.2 0 0 1 0 3.113l-.567 .567l.043 .192a8.5 8.5 0 0 1 -3.732 8.83l-.23 .144a8.5 8.5 0 1 1 -2.687 -15.623l.192 .042l.567 -.566a2.2 2.2 0 0 1 1.362 -.636zm-4.499 5.004a4 4 0 0 0 -4 4a1 1 0 0 0 2 0a2 2 0 0 1 2 -2a1 1 0 0 0 0 -2z" stroke-width="0" fill="#ffffff"></path> <path d="M14.499 3.996a2.2 2.2 0 0 1 1.556 .645l3.302 3.301a2.2 2.2 0 0 1 0 3.113l-.567 .567l.043 .192a8.5 8.5 0 0 1 -3.732 8.83l-.23 .144a8.5 8.5 0 1 1 -2.687 -15.623l.192 .042l.567 -.566a2.2 2.2 0 0 1 1.362 -.636zm-4.499 5.004a4 4 0 0 0 -4 4a1 1 0 0 0 2 0a2 2 0 0 1 2 -2a1 1 0 0 0 0 -2z" stroke-width="0" fill="#ffffff"></path>
<path d="M21 2a1 1 0 0 1 .117 1.993l-.117 .007h-1c0 .83 -.302 1.629 -.846 2.25l-.154 .163l-1.293 1.293a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.293 -1.292c.232 -.232 .375 -.537 .407 -.86l.007 -.14a2 2 0 0 1 1.85 -1.995l.15 -.005h1z" stroke-width="0" fill="#ffffff"></path> <path d="M21 2a1 1 0 0 1 .117 1.993l-.117 .007h-1c0 .83 -.302 1.629 -.846 2.25l-.154 .163l-1.293 1.293a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.293 -1.292c.232 -.232 .375 -.537 .407 -.86l.007 -.14a2 2 0 0 1 1.85 -1.995l.15 -.005h1z" stroke-width="0" fill="#ffffff"></path>
@@ -64,9 +76,7 @@ impl Component for Button {
{&self.cell.to_string()} {&self.cell.to_string()}
} }
} }
// { }
</button> </button>
} }
} }
@@ -79,12 +89,15 @@ impl Component for Button {
self.flagsignal.emit(self.cell); self.flagsignal.emit(self.cell);
}, },
} }
false true
} }
fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool { fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
self.cell = ctx.props().cell.clone(); self.cell = ctx.props().cell.clone();
self.onsignal = ctx.props().onsignal.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 true
} }
} }

1
src/minesweeper/mod.rs
View File

@@ -113,5 +113,4 @@ impl Game {
pub fn set_flag(&mut self, pos: (usize, usize), flag: bool) { pub fn set_flag(&mut self, pos: (usize, usize), flag: bool) {
self.board.set_flag(pos, flag); self.board.set_flag(pos, flag);
} }
} }

45
styles.css
View File

@@ -1,15 +1,15 @@
:root { :root {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color: #0f0f0f98; color: #0f0f0f98;
background-color: #2f2f2f; background-color: #2f2f2f;
/* position: absolute; */
height: 100%; height: 100%;
display: flex; width: auto;
display: inline-block;
justify-content: center; justify-content: center;
font-size: 25px; text-align: center;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@@ -19,10 +19,12 @@
} }
.container { .container {
display: block; display: flex;
justify-content: center; justify-content: center;
margin: 0; flex-direction: column;
padding: 10vh; padding: 10vh;
white-space: nowrap;
width: auto;
} }
button { button {
@@ -58,11 +60,18 @@ button {
} }
.game { .game {
position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #2f2f2f; 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 { .button-reset {
@@ -117,7 +126,7 @@ button {
.custom-settings { .custom-settings {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-evenly;
} }
.preset-settings { .preset-settings {
@@ -127,6 +136,7 @@ button {
} }
.setting { .setting {
width: 176px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -135,6 +145,7 @@ button {
.preset-setting { .preset-setting {
/* height: 25px; */ /* height: 25px; */
width: 176px;
margin: 2px; margin: 2px;
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
@@ -165,24 +176,21 @@ button {
} }
.button-hidden { .button-hidden {
font-size: 25px; aspect-ratio: 1 / 1;
/* font-size: 25px; */
color: rgba(15, 15, 15, 0.0); color: rgba(15, 15, 15, 0.0);
background-color: #0f0f0f98; background-color: #0f0f0f98;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
height: 50px;
width: 50px;
transition: background-color 0.5s; transition: background-color 0.5s;
-webkit-transition: background-color 0.5s; -webkit-transition: background-color 0.5s;
} }
.button-shown { .button-shown {
font-size: 25px; aspect-ratio: 1 / 1;
font-size: calc(5 * min(1vw, 1vh));
font-weight: 700; font-weight: 700;
color: #0f0f0f98; color: #0f0f0f98;
background-color: #2f2f2f; background-color: #2f2f2f;
height: 50px;
width: 50px;
} }
.button-hidden:hover { .button-hidden:hover {
@@ -204,6 +212,11 @@ button {
-webkit-transition: background-color 0.5s; -webkit-transition: background-color 0.5s;
} }
.button-icon {
width: 70%;
height: 70%;
}
input, input,
button { button {
outline: none; outline: none;