From 0db4d1b73671266ebb075e19ece678fc2dbb012b Mon Sep 17 00:00:00 2001 From: Guilleag01 Date: Mon, 7 Aug 2023 10:21:42 +0200 Subject: [PATCH] Animation when breaking cell --- src/app.rs | 14 ++----- src/components/button.rs | 12 ++++-- src/minesweeper/board.rs | 3 ++ src/minesweeper/cell.rs | 14 ++++++- src/minesweeper/mod.rs | 79 +++++++++++++++++++++++++++++++++------- styles.css | 6 +-- 6 files changed, 95 insertions(+), 33 deletions(-) diff --git a/src/app.rs b/src/app.rs index b389105..165ed87 100644 --- a/src/app.rs +++ b/src/app.rs @@ -27,24 +27,16 @@ pub struct App { game: Game } - -// #[function_component(App)] -// pub fn app() -> Html { -// html! { - -// } -// } - impl Component for App { type Message = Msg; type Properties = (); fn create(ctx: &Context) -> Self { - let mut game = Game::new(10, 10, 5); + let mut game = Game::new(50, 40, 200); game.start_board(); - info!("\n{}", game.get_board().to_string()); + // info!("\n{}", game.get_board().to_string()); Self { link: ctx.link().clone(), @@ -69,7 +61,7 @@ impl Component for App { self.game.show(cell.get_pos()); // info!("celhid (from App): {}", format!("{:?}", self.game.get_cell(cell.get_pos()).is_hidden())); - info!("\n{}", self.game.get_board().to_string()) + // info!("\n{}", self.game.get_board().to_string()) } } true diff --git a/src/components/button.rs b/src/components/button.rs index 757cd5f..d98ae05 100644 --- a/src/components/button.rs +++ b/src/components/button.rs @@ -1,6 +1,4 @@ - use yew::{prelude::*, html::Scope}; - use crate::minesweeper::cell::Cell; use log::info; @@ -14,6 +12,7 @@ pub struct Button { pub enum Msg { Clicked, + RightClicked } #[derive(Clone, PartialEq, Properties)] @@ -35,14 +34,19 @@ impl Component for Button { } fn view(&self, ctx: &Context) -> 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!{ diff --git a/src/minesweeper/board.rs b/src/minesweeper/board.rs index 0bbd0b5..ff7d526 100644 --- a/src/minesweeper/board.rs +++ b/src/minesweeper/board.rs @@ -80,6 +80,9 @@ impl Board { self.board[pos.0][pos.1].show(); } + pub fn set_delay(&mut self, pos: (usize, usize), delay: f32) { + self.board[pos.0][pos.1].set_delay(delay) + } } impl ToString for Board { diff --git a/src/minesweeper/cell.rs b/src/minesweeper/cell.rs index 2a893ef..e80a5b0 100644 --- a/src/minesweeper/cell.rs +++ b/src/minesweeper/cell.rs @@ -4,7 +4,8 @@ pub struct Cell { mine: bool, value: usize, hidden: bool, - flagged: bool + flagged: bool, + delay: f32 } impl Cell { @@ -14,7 +15,8 @@ impl Cell { mine: false, value: 0, hidden: true, - flagged: false + flagged: false, + delay: 0.0 }; } @@ -54,6 +56,14 @@ impl Cell { self.flagged = new_flag; } + pub fn get_delay(&self) -> f32 { + self.delay + } + + pub fn set_delay(&mut self, delay: f32) { + self.delay = delay; + } + } impl ToString for Cell { diff --git a/src/minesweeper/mod.rs b/src/minesweeper/mod.rs index 6e24b15..59a47c4 100644 --- a/src/minesweeper/mod.rs +++ b/src/minesweeper/mod.rs @@ -6,6 +6,9 @@ use cell::Cell; use rand::Rng; // use getrandom::getrandom; +use log::info; +use wasm_bindgen::JsValue; + pub struct Game { board: Board, } @@ -39,21 +42,71 @@ impl Game { } } - pub fn show(&mut self, pos: (usize, usize)) { - self.board.show_cell(pos); - if self.board.get_value(pos) == 0 { - for i in -1..=1 { - for j in -1..=1 { - if pos.0 as isize + i >= 0 && - pos.0 as isize + i < self.get_height() as isize && - pos.1 as isize + j >= 0 && - pos.1 as isize + j < self.get_width() as isize && - self.board.get_cell(((pos.0 as isize + i) as usize , (pos.1 as isize + j) as usize)).is_hidden() { - self.show(((pos.0 as isize + i) as usize , (pos.1 as isize + j) as usize)) + pub fn show(&mut self, init_pos: (usize, usize)) { + if self.board.get_cell(init_pos).get_value() != 0 { + self.board.show_cell(init_pos); + return; + } + + let mut cells_to_show = Vec::<(usize, usize)>::new(); + + cells_to_show.push(init_pos); + + let mut added_cells = 1; + + while added_cells > 0 { + // info!("{:?}", cells_to_show.len() - added_cells); + let new_cells = cells_to_show.len() - added_cells; + added_cells = 0; + + cells_to_show = cells_to_show[new_cells..cells_to_show.len()].to_vec(); + + for k in 0..cells_to_show.len() { + let pos = cells_to_show[k]; + for i in -1..=1 { + for j in -1..=1 { + let new_pos = ((pos.0 as isize + i) as usize, (pos.1 as isize + j) as usize); + if pos.0 as isize + i < 0 || + pos.0 as isize + i >= self.get_height() as isize || + pos.1 as isize + j < 0 || + pos.1 as isize + j >= self.get_width() as isize || + !self.board.get_cell(new_pos).is_hidden() { + continue; + } + if self.board.get_cell(new_pos).get_value() == 0 { + cells_to_show.push(new_pos); + added_cells += 1; + } + self.board.set_delay(new_pos, f32::sqrt(((init_pos.0 as isize - new_pos.0 as isize).pow(2) + (init_pos.1 as isize - new_pos.1 as isize).pow(2)) as f32) * 0.05); + self.board.show_cell(new_pos); } } - } + } } + + // for pos in cells_to_show { + // self.board.show_cell(pos); + // } + + + + + // self.board.show_cell(pos); + // if self.board.get_value(pos) == 0 { + // for i in -1..=1 { + // for j in -1..=1 { + // if pos.0 as isize + i >= 0 && + // pos.0 as isize + i < self.get_height() as isize && + // pos.1 as isize + j >= 0 && + // pos.1 as isize + j < self.get_width() as isize && + // self.board.get_cell(((pos.0 as isize + i) as usize , (pos.1 as isize + j) as usize)).is_hidden() { + // self.show(((pos.0 as isize + i) as usize , (pos.1 as isize + j) as usize)) + // } + // } + // } + // } + + } pub fn get_height(&self) -> usize { @@ -68,7 +121,7 @@ impl Game { return &self.board; } - pub fn get_cell(&self,pos: (usize, usize)) -> Cell { + pub fn get_cell(&self, pos: (usize, usize)) -> Cell { self.board.get_cell(pos) } } \ No newline at end of file diff --git a/styles.css b/styles.css index fc3f86a..9f13c04 100644 --- a/styles.css +++ b/styles.css @@ -68,7 +68,7 @@ button { border-radius: 8px; border: 1px solid transparent; font-weight: 500; - color: #ffffff; + color: #0f0f0f98; background-color: #0f0f0f98; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); height: 50px; @@ -86,7 +86,7 @@ button { border: 1px solid transparent; font-size: 20px; font-weight: 500; - color: #ffffff; + /* color: #2f2f2f; */ background-color: #2f2f2f; height: 50px; width: 50px; @@ -119,7 +119,7 @@ button { @media (prefers-color-scheme: dark) { :root { - color: #f6f6f6; + /* color: #f6f6f6; */ background-color: #2f2f2f; }