added checking whether selected tiles have identical symbols

src/common/constants.rs

@@ -1,6 +1,9 @@
+pub const SELECTION_MAX: usize = 3;
 pub const TILE_SIZE: u16 = 70;
+pub const TILE_HALF_SIZE: f64 = (TILE_SIZE / 2) as f64;
 pub const TILE_GAP: u16 = 5;
 pub const TILE_SELECTION_BORDER: f64 = 5.0;
 pub const TILE_SIZE_N_GAP: u16 = TILE_SIZE + TILE_GAP;
 pub const MOVE_SIZE: f64 = 0.3;
 pub const TILE_SIZE_IN_MOVES: u16 = (TILE_SIZE_N_GAP as f64 / MOVE_SIZE) as u16;
+pub const FONT: &str = "43px serif";

src/components/playground.rs

@@ -5,7 +5,8 @@ use super::{tile::Tile, tiles_column::draw_tiles_column};
 use crate::common::{
     canvas::clear_canvas,
     constants::{
-        MOVE_SIZE, TILE_GAP, TILE_SELECTION_BORDER, TILE_SIZE, TILE_SIZE_IN_MOVES, TILE_SIZE_N_GAP,
+        FONT, MOVE_SIZE, SELECTION_MAX, TILE_GAP, TILE_SELECTION_BORDER, TILE_SIZE,
+        TILE_SIZE_IN_MOVES, TILE_SIZE_N_GAP,
     },
 };
 
@@ -43,6 +44,7 @@ impl Playground {
         ctx.set_fill_style(&JsValue::from_str("aqua"));
         ctx.set_stroke_style(&JsValue::from_str("red"));
         ctx.set_line_width(TILE_SELECTION_BORDER);
+        ctx.set_font(FONT);
 
         for col in self.tiles_cols.iter() {
             draw_tiles_column(ctx, col)
@@ -71,15 +73,38 @@ impl Playground {
     }
 
     pub fn on_click(&mut self, x: f64, y: f64) {
+        let mut selected_symbols = Vec::with_capacity(SELECTION_MAX);
+
+        // selecting element and counting selected elements
         for col in self.tiles_cols.iter_mut() {
             for tile in col.iter_mut() {
-                if tile.x < x
+                if tile.is_selected {
+                    selected_symbols.push(&tile.symbol);
+                } else if tile.x < x
                     && tile.y < y
                     && tile.x + TILE_SIZE as f64 > x
                     && tile.y + TILE_SIZE as f64 > y
                 {
                     tile.is_selected = true;
-                    return;
+                    selected_symbols.push(&tile.symbol);
+                }
+            }
+        }
+
+        if selected_symbols.len() < SELECTION_MAX {
+            return;
+        }
+
+        // checking selected symbols identity
+        if let Some((first, remaining)) = selected_symbols.split_first() {
+            if remaining.iter().all(|key| *key == *first) {
+                todo!()
+            }
+        } else {
+            // unselecting
+            for col in self.tiles_cols.iter_mut() {
+                for tile in col.iter_mut() {
+                    tile.is_selected = false
                 }
             }
         }

src/components/tile.rs

@@ -1,9 +1,14 @@
 use web_sys::CanvasRenderingContext2d;
 
-use crate::common::constants::TILE_SIZE;
+use crate::common::constants::{TILE_GAP, TILE_HALF_SIZE, TILE_SIZE};
 
 pub fn draw_tile(ctx: &CanvasRenderingContext2d, tile: &Tile) {
     ctx.fill_rect(tile.x, tile.y, TILE_SIZE.into(), TILE_SIZE.into());
+    let _ = ctx.fill_text(
+        &tile.symbol,
+        tile.x + TILE_GAP as f64,
+        tile.y + TILE_HALF_SIZE + (TILE_GAP * 2) as f64,
+    );
 
     if tile.is_selected {
         ctx.stroke_rect(tile.x, tile.y, TILE_SIZE.into(), TILE_SIZE.into())
@@ -14,6 +19,7 @@ pub fn draw_tile(ctx: &CanvasRenderingContext2d, tile: &Tile) {
 pub struct Tile {
     pub x: f64,
     pub y: f64,
+    pub symbol: String,
     pub is_selected: bool,
 }
 
@@ -22,6 +28,7 @@ impl Tile {
         Self {
             x,
             y,
+            symbol: "🍆".to_string(),
             is_selected: false,
         }
     }