Implement step by step solution

Author: cau777

package.json

@@ -22,6 +22,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "build:wasm:dev": "cd wasm && wasm-pack build --target web --out-dir pkg --dev",
     "build:wasm": "cd wasm && wasm-pack build --target web --out-dir pkg --release -- --features wasm_alloc"
   },
   "eslintConfig": {

src/App.css

@@ -16,6 +16,10 @@ button {
     border: solid 2px black;
 }
 
+button[disabled] {
+    background-color: #2f5e9b;
+}
+
 button:hover {
     cursor: pointer;
 }
@@ -46,6 +50,7 @@ hr {
     flex-direction: column;
     gap: 0.3rem;
     margin: 0.7rem 0;
+    min-width: 8rem;
 }
 
 .sudoku-controller {

src/SudokuBoard.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import {NumberCell} from "./NumberCell";
 import {ColRowCell} from "./ColRowCell";
-import {Board} from "./board";
+import {Board, Highlights} from "./board";
 import {CellBase} from "./CellBase";
-import {Highlights} from "./SudokuController";
 
 type Props = Highlights & {
     board: Board;
     setBoard: (board: Board) => void;
+    readonly: boolean;
 }
 
 export const SudokuBoard: React.FC<Props> = (props) => {
@@ -61,7 +61,7 @@ export const SudokuBoard: React.FC<Props> = (props) => {
                     <CellBase highlighted={props.highlightRow === r || props.highlightCol === c ||
                         (props.highlightBlock !== null && props.highlightBlock[0] === blockRow && props.highlightBlock[1] === blockCol)}>
                         <NumberCell index={2 + index++} num={board.get(r, c)}
-                                    setNum={(value) => updateBoard(r, c, value)}></NumberCell>
+                                    setNum={(value) => props.readonly || updateBoard(r, c, value)}></NumberCell>
                     </CellBase>
                 </td>
             );

src/SudokuController.tsx

@@ -1,27 +1,34 @@
 import React, {useState} from "react";
 import {SudokuBoard} from "./SudokuBoard";
-import {Board} from "./board";
+import {Board, Highlights} from "./board";
 import init, {find_errors, random_board, solve} from "wasm";
+import {AllNull} from "./util";
 
 type Props = {
     setLog: (log: string) => void;
 }
 
-export type Highlights = {
-    highlightRow: number | null;
-    highlightCol: number | null;
-    highlightBlock: [number, number] | null;
+type State = (Solution | AllNull<Solution>) & Highlights & {
+    board: Board;
 }
 
-type State = Highlights & {
-    board: Board;
+type Solution = {
+    steps: Step[];
+    currentStep: number;
+}
+
+type Step = Highlights & {
+    message: string;
+    literal: string;
 }
 
-function defaultState(board: Board) {
+function defaultState(board: Board): State {
     return {
         highlightBlock: null,
         highlightCol: null,
         highlightRow: null,
+        steps: null,
+        currentStep: null,
         board
     };
 }
@@ -63,23 +70,30 @@ export const SudokuController: React.FC<Props> = (props) => {
         })
     }
 
-    function solveBoard(board: Board) {
-        let start = Date.now();
-        
+    function solveBoard(board: Board, recordSteps: number) {
         init().then(() => {
-            let result = JSON.parse(solve(board.toLiteral(), board.blockSize, 0));
+            let result: Step[] | null = JSON.parse(solve(board.toLiteral(), board.blockSize, recordSteps));
             if (result === null) {
                 props.setLog("Couldn't find solution");
             } else {
-                let solution = result.solution;
-                props.setLog(`Found solution in ${Date.now() - start}ms`);
-                let solved = Board.fromLiteral(solution, board.blockSize);
                 console.log("res", result);
-                setState(s => ({...s, board: solved}));
+                setState(s => ({...s, currentStep: 0, steps: result!}));
+                changeCurrentStep(0, result);
             }
         })
     }
 
+    function hideSolution() {
+        setState(s => ({...s, currentStep: null, steps: null}));
+    }
+    
+    function changeCurrentStep(index: number, steps: Step[]) {
+        if (index < 0 || index >= steps.length) return;
+        
+        props.setLog(steps[index].message);
+        setState(s => ({...s, currentStep: index, steps}));
+    }
+    
     function clear() {
         setState(s => defaultState(Board.default(s.board.blockSize)));
     }
@@ -90,15 +104,20 @@ export const SudokuController: React.FC<Props> = (props) => {
             let blockSize = state!.board.blockSize;
             let result = random_board(coverage, blockSize);
             let board = Board.fromLiteral(result, blockSize);
+            hideSolution();
             setState(s => ({...s, board}));
-            props.setLog(`Generated random board in ${Date.now() - start}ms`)
+            props.setLog(`Generated random board in ${Date.now() - start}ms`);
         })
     }
 
+    let focus = state.steps !== null ? state.steps[state.currentStep] : state;
     return (
         <div className={"sudoku-controller"}>
-            <SudokuBoard board={state.board} setBoard={changeBoard} highlightRow={state.highlightRow}
-                         highlightCol={state.highlightCol} highlightBlock={state.highlightBlock}></SudokuBoard>
+            <SudokuBoard
+                board={state.steps !== null ? Board.fromLiteral(state.steps[state.currentStep].literal, state.board.blockSize) : state.board}
+                setBoard={changeBoard} highlightRow={focus.highlightRow}
+                highlightCol={focus.highlightCol} highlightBlock={focus.highlightBlock}
+                readonly={state.steps !== null}></SudokuBoard>
             <div className={"buttons"}>
                 <select defaultValue={3}
                         onChange={(e) => setState({
@@ -110,7 +129,6 @@ export const SudokuController: React.FC<Props> = (props) => {
                     <option value={4}>16x16</option>
                 </select>
                 <button onClick={() => check(state.board, true)}>Check</button>
-                <button onClick={() => solveBoard(state.board)}>Solve</button>
                 <button onClick={clear}>Clear</button>
                 <div>
                     <hr/>
@@ -119,6 +137,23 @@ export const SudokuController: React.FC<Props> = (props) => {
                 <button onClick={() => randomBoard(0.50)}>Random 50%</button>
                 <button onClick={() => randomBoard(0.25)}>Random 25%</button>
                 <button onClick={() => randomBoard(0.1)}>Random 10%</button>
+                <div>
+                    <hr/>
+                </div>
+                
+                {state.steps === null ?
+                    <>
+                        <button onClick={() => solveBoard(state.board, 0)}>Solve</button>
+                        <button onClick={() => solveBoard(state.board, 200)}>Solve step-by-step</button>
+                    </>
+                    :
+                    <>
+                        <button onClick={hideSolution}>Hide solution</button>
+                        <button disabled={state.currentStep <= 0} onClick={() => changeCurrentStep(state.currentStep! - 1, state.steps!)}>Prev step</button>
+                        <button disabled={state.currentStep >= state.steps!.length - 1} onClick={() => changeCurrentStep(state.currentStep! + 1, state.steps!)}>Next step</button>
+                    </>
+                }
+            
             </div>
         </div>
     )

src/board.ts

@@ -47,4 +47,10 @@ export class Board {
     public toLiteral() {
         return this.cells.reduce((acc, value) => acc + (value ?? "_") + " ", "");
     }
+}
+
+export type Highlights = {
+    highlightRow: number | null;
+    highlightCol: number | null;
+    highlightBlock: [number, number] | null;
 }

src/util.ts

@@ -0,0 +1,3 @@
+export type AllNull<T> = {
+    [P in keyof T]: null;
+}

wasm/Cargo.lock

@@ -14,6 +14,7 @@ getrandom = { version = "0.2.7", features = ["js"] }
 rand = "0.8.5"
 wee_alloc = "0.4.5"
 json = "0.12.4"
+instant =  { version = "0.1.12", features = [ "wasm-bindgen" ] }
 
 [dev-dependencies]
 criterion = "0.3.6"

wasm/Cargo.toml

@@ -5,6 +5,7 @@ mod number_options;
 mod util;
 mod solve_report;
 
+use instant::Instant;
 use json::{array, JsonValue, object};
 use rand::Rng;
 use wasm_bindgen::prelude::*;
@@ -33,29 +34,37 @@ pub fn solve(board_literal: &str, block_size: usize, record_steps: usize) -> Str
 fn solve_with_size<const SIZE: usize, const BLOCK_SIZE: usize>(board_literal: &str, record_steps: usize) -> String {
     let board = SudokuBoard::<SIZE, BLOCK_SIZE>::from_literal(board_literal);
     let mut solver = SudokuSolver::new(record_steps);
+    let start = Instant::now();
     let result = solver.solve(&board);
+    let elapsed = start.elapsed().as_micros();
+
     if result.is_none() {
         return JsonValue::Null.dump();
     }
 
-    let solution = result.unwrap().to_literal();
     let mut steps = JsonValue::new_array();
 
     for step in solver.steps {
-        let array: Vec<Option<u8>> = step.numbers.iter().flatten().map(|o| o.clone()).collect();
         steps.push(object! {
             message: step.message,
             highlightRow: step.highlight_row,
             highlightCol: step.highlight_col,
             highlightBlock: step.highlight_block.map(|[a, b]| array![a, b]),
-            numbers: array,
+            literal: step.literal,
         }).expect("Invalid Json object");
     }
 
-    return object! {
-        solution: solution,
-        steps: steps
-    }.dump();
+    let solution = result.unwrap().to_literal();
+    let solution_message = format!("Found solution in {elapsed}μs");
+    steps.push(object! {
+        message: solution_message,
+        highlightRow: JsonValue::Null,
+        highlightCol: JsonValue::Null,
+        highlightBlock: JsonValue::Null,
+        literal: solution
+    }).expect("Invalid Json object");
+
+    steps.dump()
 }
 
 #[wasm_bindgen]

wasm/src/lib.rs

@@ -1,9 +1,7 @@
-use crate::util::Array2D;
-
 pub struct ReportStep<const SIZE: usize, const BLOCK_SIZE: usize> {
     pub message: String,
     pub highlight_row: Option<u8>,
     pub highlight_col: Option<u8>,
     pub highlight_block: Option<[u8; 2]>,
-    pub numbers: Array2D<Option<u8>, SIZE>
+    pub literal: String
 }