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:

How to make dereference for your struct in Rust

 Dereference operator ( *)  in Rust

Dereference operator we have seen in C programming language. Yes , I am talking about the ' * ' operator that we use for dereferencing a pointer in C.

I am not sure how * operator works behind the seen, but the it dereference the pointer and give us the value in that address. 

But in Rust implementation is more obvious  that the type has to implement the trait 'Deref".

https://doc.rust-lang.org/std/ops/trait.Deref.html 

So let's see how should be convert our struct to dereference the value whatever way that we like.

Rust  Deref example

This is simple program to use * operator on MyStruct. And it is only to demonstrate the capabilities of Deref trait, not an idiomatic code.

Here we are derefencing the second field value when we use * operator on MyStruct instance.

use std::ops::Deref; struct MyStruct{ x: i32, y:String, } impl Deref for MyStruct{ //the Deref trait implementation should have Target //associated type type Target = String; // trait mandotory function implementation fn deref(&self) -> &Self::Target{ &self.y } } fn main(){ let my = MyStruct { x:4,y:"hello".to_string() }; //derefencing our struct with * operator println!("{}",*my); }

Conclusion:

Even though references and dereferencing are essential part of most of the system programming languages, how they are implemented  are always hidden behind the language implementations ( in my knowledge) . But Rust gives that insight and flexibility to use them on custom references.