Refactor moves list into rust lib

Author: Mercotui

Cargo.toml

@@ -37,22 +37,26 @@ wasm-bindgen-futures = "0.4.50"
 [dependencies.web-sys]
 version = "0.3"
 features = [
-    'console',
-    'Document',
-    'Window',
-    'HtmlCanvasElement',
-    'ResizeObserver',
-    'ResizeObserverEntry',
-    'ResizeObserverSize',
-    'MouseEvent',
-    'MouseScrollEvent',
-    'CanvasRenderingContext2d',
-    'OffscreenCanvas',
-    'OffscreenCanvasRenderingContext2d',
-    'WebGl2RenderingContext',
+    "console",
+    "Document",
+    "Window",
+    "HtmlCanvasElement",
+    "HtmlDivElement",
+    "ResizeObserver",
+    "ResizeObserverEntry",
+    "ResizeObserverSize",
+    "PointerEvent",
+    "MouseEvent",
+    "MouseScrollEvent",
+    "CanvasRenderingContext2d",
+    "OffscreenCanvas",
+    "OffscreenCanvasRenderingContext2d",
+    "WebGl2RenderingContext",
     "WebGlVertexArrayObject",
-    'WebGlProgram',
-    'WebGlShader',
-    'WebGlBuffer',
-    'WebGlUniformLocation'
+    "WebGlProgram",
+    "WebGlShader",
+    "WebGlBuffer",
+    "WebGlUniformLocation",
+    "DomTokenList",
+    "CssStyleDeclaration",
 ]

src/board/mod.rs

@@ -7,25 +7,27 @@ mod unittest;
 use anyhow::{anyhow, Context, Result};
 use itertools::Itertools;
 use std::cmp::{Ordering, PartialEq};
+use std::fmt;
 use std::hash::{DefaultHasher, Hash, Hasher};
 use std::ops::Range;
-use wasm_bindgen::prelude::wasm_bindgen;
 
-#[wasm_bindgen]
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
 pub struct Coordinates {
     pub x: i32,
     pub y: i32,
 }
 
-#[wasm_bindgen]
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
 pub struct Size {
     pub x: i32,
     pub y: i32,
 }
 
-#[wasm_bindgen]
+pub enum Axis {
+    Horizontal,
+    Vertical,
+}
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
 pub enum SlideDirection {
     Up,
@@ -34,15 +36,13 @@ pub enum SlideDirection {
     Right,
 }
 
-#[wasm_bindgen]
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
 pub struct SlideMove {
     pub start: Coordinates,
     pub direction: SlideDirection,
     pub distance: u8,
 }
 
-#[wasm_bindgen]
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
 pub struct Piece {
     /// The coordinates of the piece's bottom left most tile
@@ -52,13 +52,9 @@ pub struct Piece {
 }
 
 /// A game board filled with all tiles
-#[wasm_bindgen]
 #[derive(Debug, Clone, Copy)]
 pub struct Board {
     pub size: Size,
-    // TODO(Menno 18.12.2024) https://github.com/rustwasm/wasm-bindgen/issues/122
-    //  Wasm bindgen doesn't support arrays at the moment, work around with custom getter.
-    #[wasm_bindgen(skip)]
     pub pieces: [Piece; 10],
 }
 
@@ -75,6 +71,46 @@ pub fn to_id(board: &Board) -> BoardId {
 /// Standard Klotski board is 4 by 5 tiles
 const SIZE: Size = Size { x: 4, y: 5 };
 
+impl fmt::Display for Coordinates {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        write!(
+            f,
+            "{}{}",
+            Self::axis_to_string(Axis::Horizontal, self.x as u8),
+            Self::axis_to_string(Axis::Vertical, self.y as u8)
+        )
+    }
+}
+
+impl Coordinates {
+    pub fn axis_to_string(axis: Axis, coordinate: u8) -> String {
+        match axis {
+            Axis::Horizontal => ((b'A' + coordinate) as char).to_string(),
+            Axis::Vertical => (coordinate + 1).to_string(),
+        }
+    }
+}
+
+impl fmt::Display for SlideMove {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        write!(f, "{}⮕{}", self.start, self.get_endpoint())
+    }
+}
+
+impl SlideMove {
+    fn get_endpoint(&self) -> Coordinates {
+        let mut end = self.start;
+        let distance = self.distance as i32;
+        match self.direction {
+            SlideDirection::Up => end.y += distance,
+            SlideDirection::Down => end.y -= distance,
+            SlideDirection::Left => end.x -= distance,
+            SlideDirection::Right => end.x += distance,
+        }
+        end
+    }
+}
+
 impl Eq for Board {}
 
 impl PartialEq<Self> for Board {
@@ -102,14 +138,6 @@ impl Hash for Board {
     }
 }
 
-#[wasm_bindgen]
-impl Board {
-    #[wasm_bindgen(getter)]
-    pub fn pieces(&self) -> Vec<Piece> {
-        self.pieces.to_vec()
-    }
-}
-
 pub fn get_start_board() -> Board {
     /// Standard Klotski board is:
     /// ABBC
@@ -304,13 +332,7 @@ pub fn make_move(board: &Board, slide_move: &SlideMove) -> Result<Board> {
         .context("No piece to move")?;
 
     // move the piece by specified distance
-    let distance: i32 = slide_move.distance as i32;
-    match slide_move.direction {
-        SlideDirection::Up => piece_to_move.position.y += distance,
-        SlideDirection::Down => piece_to_move.position.y -= distance,
-        SlideDirection::Left => piece_to_move.position.x -= distance,
-        SlideDirection::Right => piece_to_move.position.x += distance,
-    }
+    piece_to_move.position = slide_move.get_endpoint();
 
     // After modifying the board, we need to sort it to ensure correct ID calculation.
     new_board.pieces.sort();

src/graph/mod.rs

@@ -6,20 +6,16 @@ mod unittest;
 
 use crate::board::{to_id, Board, BoardId, SlideMove};
 use std::collections::{HashMap, VecDeque};
-use wasm_bindgen::prelude::wasm_bindgen;
 
-#[wasm_bindgen]
 #[derive(Clone)]
 pub struct Node {
     pub board: Board,
-    #[wasm_bindgen(getter_with_clone)]
     pub edges: Vec<Edge>,
     pub distance_to_start: Option<u32>,
     pub distance_to_solution: Option<u32>,
     pub on_shortest_path: bool,
 }
 
-#[wasm_bindgen]
 #[derive(Clone)]
 pub struct Edge {
     pub neighbor: BoardId,

src/lib.rs

@@ -6,30 +6,12 @@ mod graph;
 mod solver;
 mod views;
 
-use crate::board::{BoardId, SlideMove};
 use crate::solver::Solver;
 use crate::views::StatefulViews;
-use js_sys::Function;
 use std::cell::RefCell;
 use std::rc::Rc;
 use wasm_bindgen::prelude::*;
 
-#[wasm_bindgen]
-#[derive(Clone, Copy)]
-pub enum MoveEffectiveness {
-    Positive,
-    Neutral,
-    Negative,
-}
-
-#[wasm_bindgen]
-pub struct MoveInfo {
-    pub slide_move: SlideMove,
-    pub resulting_id: BoardId,
-    pub resulting_distance: u32,
-    pub effectiveness: MoveEffectiveness,
-}
-
 #[wasm_bindgen]
 pub struct WiggersGraaf {
     stateful_views: Rc<RefCell<StatefulViews>>,
@@ -41,21 +23,27 @@ impl WiggersGraaf {
     pub fn new(
         meta_canvas_id: &str,
         board_canvas_id: &str,
-        on_highlight: Function,
+        moves_div_id: &str,
+        restart_div_id: &str,
+        solve_div_id: &str,
     ) -> Result<Self, JsValue> {
         console_error_panic_hook::set_once();
         env_logger::init();
 
         let solver = Solver::new();
 
-        Ok(Self {
+        let instance = Self {
             stateful_views: StatefulViews::new(
                 solver.graph,
                 meta_canvas_id,
                 board_canvas_id,
-                on_highlight,
+                moves_div_id,
+                restart_div_id,
+                solve_div_id,
             )?,
-        })
+        };
+        StatefulViews::restart(&instance.stateful_views);
+        Ok(instance)
     }
 
     pub fn accumulate_translation(&self, delta_x: f32, delta_y: f32) {
@@ -69,22 +57,4 @@ impl WiggersGraaf {
             .borrow()
             .accumulate_zoom(zoom_movement, target_x, target_y);
     }
-
-    pub fn preview_move(&self, move_info: &MoveInfo) {
-        self.stateful_views.borrow().preview_move(move_info);
-    }
-
-    pub fn cancel_preview(&self) {
-        self.stateful_views.borrow().cancel_preview();
-    }
-
-    pub async fn do_move(&self, move_info: &MoveInfo) -> Option<Vec<MoveInfo>> {
-        // TODO(Menno 11.08.2025) I'm getting really annoyed at all this refcell trickery and struggling with async.
-        //  Dear future me, please review this code and clean it up?
-        StatefulViews::do_move(&self.stateful_views, move_info).await
-    }
-
-    pub fn restart(&self) -> Option<Vec<MoveInfo>> {
-        self.stateful_views.borrow().restart()
-    }
 }

src/solver.rs

@@ -6,12 +6,9 @@ use crate::board::{
     SlideDirection, SlideMove,
 };
 use crate::graph::Graph;
-use wasm_bindgen::prelude::wasm_bindgen;
 
-#[wasm_bindgen]
 pub struct Solver {
     // We only want the graph to be publicly accessible from Rust code, disable wasm binding
-    #[wasm_bindgen(skip)]
     pub graph: Graph,
     start_board: Board,
     solution_node: Board,

src/views/board_view/layout.rs

@@ -1,18 +1,14 @@
 // SPDX-FileCopyrightText: 2025 Menno van der Graaf <mennovandergraaf@hotmail.com>
 // SPDX-License-Identifier: MIT
 
+use crate::board::Axis;
 use crate::views::board_view::visual_board::{VisualCoordinates, VisualPiece, VisualSize};
 use crate::views::utils::{Coordinates, Size};
 
 const AXIS_PADDING: f64 = 4.0;
 const AXIS_GIRTH: f64 = 16.0;
 const PIECE_PADDING: f64 = 1.0;
 
-pub enum Axis {
-    Horizontal,
-    Vertical,
-}
-
 /// Layout of a board in canvas space, note we flip the Y-axis for this layout, 0 is at the bottom.
 #[derive(PartialEq, Copy, Clone)]
 pub struct Layout {

src/views/board_view/mod.rs

@@ -16,13 +16,14 @@ use crate::views::frame_scheduler::FrameScheduler;
 use crate::views::mouse_handler::{MouseEvent, MouseHandler};
 use crate::views::resize_observer::ResizeObserver;
 use crate::views::utils;
-use crate::views::utils::get_canvas;
+use crate::views::utils::get_element_of_type;
 use futures::channel::oneshot;
 use keyframe::{keyframes, AnimationSequence};
 use std::cell::RefCell;
 use std::rc::{Rc, Weak};
 use std::time::Duration;
 use wasm_bindgen::JsValue;
+use web_sys::HtmlCanvasElement;
 
 pub type OnDragMoveCb = dyn FnMut(DragMove) -> graph::Node;
 
@@ -41,7 +42,7 @@ impl BoardView {
         canvas_id: &str,
         on_drag_move_cb: Box<OnDragMoveCb>,
     ) -> Result<Rc<RefCell<Self>>, JsValue> {
-        let canvas = get_canvas(canvas_id)?;
+        let canvas: HtmlCanvasElement = get_element_of_type(canvas_id)?;
         Ok(Rc::new_cyclic(|self_ref: &Weak<RefCell<BoardView>>| {
             let self_ref_for_on_frame_cb = self_ref.clone();
             let self_ref_for_resize_observer_cb = self_ref.clone();
@@ -85,7 +86,7 @@ impl BoardView {
         }))
     }
 
-    pub fn preview_move(&mut self, target_move: Option<&SlideMove>) {
+    pub fn preview_move(&mut self, target_move: Option<SlideMove>) {
         let animation_done = match target_move {
             None => {
                 self.visual_board.highlight(&None);

src/views/board_view/renderer.rs

@@ -1,8 +1,9 @@
 // SPDX-FileCopyrightText: 2025 Menno van der Graaf <mennovandergraaf@hotmail.com>
 // SPDX-License-Identifier: MIT
 
-use crate::views::board_view::layout::Axis::{Horizontal, Vertical};
-use crate::views::board_view::layout::{Axis, Layout};
+use crate::board;
+use crate::board::Axis;
+use crate::views::board_view::layout::Layout;
 use crate::views::board_view::visual_board::{VisualBoard, VisualSize};
 use crate::views::utils::Coordinates;
 use wasm_bindgen::{JsCast, JsValue};
@@ -99,8 +100,8 @@ impl Renderer {
                 ctx.fill_rect(pos.x, pos.y, size.width, size.height);
             }
         };
-        draw_ticks(Horizontal, board_size.width as u32);
-        draw_ticks(Vertical, board_size.height as u32);
+        draw_ticks(Axis::Horizontal, board_size.width as u32);
+        draw_ticks(Axis::Vertical, board_size.height as u32);
 
         // Draw a label
         let draw_label = |position: Coordinates, label: String| {
@@ -110,14 +111,14 @@ impl Renderer {
 
         // draw X axis labes
         for x in 0..board_size.width as u32 {
-            let label = ((b'A' + x as u8) as char).to_string();
-            draw_label(self.layout.apply_to_axis_label(x, &Horizontal), label);
+            let label = board::Coordinates::axis_to_string(Axis::Horizontal, x as u8);
+            draw_label(self.layout.apply_to_axis_label(x, &Axis::Horizontal), label);
         }
 
         // draw Y axis labels
         for y in 0..board_size.height as u32 {
-            let label = (y + 1).to_string();
-            draw_label(self.layout.apply_to_axis_label(y, &Vertical), label);
+            let label = board::Coordinates::axis_to_string(Axis::Vertical, y as u8);
+            draw_label(self.layout.apply_to_axis_label(y, &Axis::Vertical), label);
         }
     }