Tuesday, December 29, 2020

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:




No comments: