Animation when breaking cell

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>) -> 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

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<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!{
 
             <button 
                 class={if self.cell.is_hidden() {"button-hidden"} else {"button-shown"}}
                 onclick={self.link.callback(|_| Msg::Clicked)}
                 // oncontextmenu={self.link.callback(|_| Msg::Clicked)}
-                oncontextmenu={self.link.callback(|_| Msg::Clicked)}>
+                oncontextmenu={self.link.callback(|_| Msg::RightClicked)}
+                // style={(if !self.cell.is_hidden() {format!("background-color: #2f2f2f; transition: background-color 0.5s; transition-delay: {}s;", self.cell.get_delay())} else {"".to_string()}).as_str()}
+                style={style}>
                 { &self.cell.to_string() }
             </button>
 

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 {

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 {

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)) {
+    pub fn show(&mut self, init_pos: (usize, usize)) {
-        self.board.show_cell(pos);
+        if self.board.get_cell(init_pos).get_value() != 0 {
-        if self.board.get_value(pos) == 0 {
+            self.board.show_cell(init_pos);
-            for i in -1..=1 {
+            return;
-                for j in -1..=1 {
+        }
-                    if pos.0 as isize + i >= 0 && 
+
-                        pos.0 as isize + i < self.get_height() as isize &&
+        let mut cells_to_show = Vec::<(usize, usize)>::new();
-                        pos.1 as isize + j >= 0 &&
+        
-                        pos.1 as isize + j < self.get_width() as isize &&
+        cells_to_show.push(init_pos);
-                        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))
+        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)
     }
 }

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;
   }