Yew App - Sudoku solver

How would be a Yew app Sudoku solver ?

sudoku solver can  basically be  a backtracking algorithm . Last month I implemented a Rat-Maze problem solver with Yew App. But it does not look visually much attractive to some of my friends. So thought of doing a sudoku solver with same code modifying the logic for sudoku.

Demo video 

if you are interested to see the code, it here ( Note: its an ugly code)

https://github.com/davnav/sudokuyewapp

Rat-Maze problem - Yew app - PART2

Rust Yew app:

Last week I wrote about the  Rat-Maze problem - Yew app.

Writing code  in Rust programming language is always fun and a learning.So thought of making some enhancements to the yew app 

1. add colors to the cells

2. after solving the path, change the color of the cells in the path. ..etc

This gave an opportunity to work with CSS and Yew. I think still there is no full support for CSS from Yew as you might have seen in React. But I was managed to change the color with "class" property in CSS.

index.css

.game-celluley {

display: inline-block;

width: 20px;

height: 20px;

border: 1px solid #ccc;

background-color: yellow;

text-align: center;

}

.game-celluleg {

display: inline-block;

width: 20px;

height: 20px;

border: 1px solid #ccc;

background-color: green;

text-align: center;

}

lib.rs

html!{

<div key=x class=format!("game-cellule{}",cell_color)>{ cell.value } </div>

}

Source Code:

github- Yew app

How to compile and run:

output:

Rat-Maze problem - Yew app built with rustwasm

 Backtracking Algorithms

I just started loving the algorithms , especially backtracking algorithms.This geekforgeeks page gives more details on backtracking 

https://www.geeksforgeeks.org/rat-in-a-maze-backtracking-2/

Solving this problem in Rust programming  will be  a little more interesting. Even more fun if we can build this as  Rust Wasm app. Webassembly (wasm) is one of the latest technology that web developers are interested in. So thought of building  the rat-maze as a Yew app.

Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly

Read mroe about Yew here - https://yew.rs/docs/en/

I used following dependencies - 

yew="0.17"

wasm-bindgen="0.2.67"

web-sys = "0.3.46"

wasm-logger = "0.2.0"

log = "0.4.6"

Backtracking -

This is one of the algorithm every programmer should try and understand. It will involve recursion and push and pop values from Results.

In my program, "solve" is the method actually implemented this backtracking

///Actual method where the backtracking algorithm is implemented

/// this method will be recursively called based the choices

/// we will be adding the "path" in this algorithm, before calling the method recursively

/// if we couldn't solve the Maze, pop the added "path" and next choice we have.

Yew Component:

///Grid is our component which displays the maze

/// Its also contains the path , once we solve it

struct Grid{

link:ComponentLink<Self>,

cell:[[u8;4];4],

path:Vec<(usize,usize)>,

}

The full program is below for your reference:

Full Code for Rat Maze

Output: