fix: ui cue for mutable cells

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "sudoku-dioxus"
-version = "0.2.1"
+version = "0.2.2"
 edition = "2021"
 authors = ["Jose Storopoli <[email protected]>"]
 description = "Sudoku PWA with Dioxus"

assets/style.css

@@ -23,7 +23,6 @@ h1 {
   vertical-align: middle;
   line-height: 60px;
   font-size: 30px;
-  color: #38485f;
 }
 
 #container div:hover {

src/app.rs

@@ -17,16 +17,18 @@ use crate::components::board::{InitialSudokuPuzzle, SudokuBoard, SudokuPuzzle};
 ///
 /// It is designed to be used as the root of the web application,
 /// orchestrating the entire Sudoku game and its user interface.
+///
+/// ## Panics
+///
+/// The app will panic if fails to get initial Sudoku puzzle shared state.
 #[must_use]
 pub fn App(cx: Scope) -> Element {
     use_shared_state_provider(cx, InitialSudokuPuzzle::new);
     let initial_sudoku = use_shared_state::<InitialSudokuPuzzle>(cx)
-        .expect("failed to get sudoku puzzle shared state")
+        .expect("failed to get initial sudoku puzzle shared state")
         .read()
         .0;
-    use_shared_state_provider(cx, || SudokuPuzzle {
-        0: initial_sudoku.clone(),
-    });
+    use_shared_state_provider(cx, || SudokuPuzzle(initial_sudoku));
     cx.render(rsx!(
         h1 {
             class: "input",

src/components/board.rs

@@ -128,7 +128,7 @@ fn NumberButton(cx: Scope<NumberButtonProps>) -> Element {
 fn NewButton(cx: Scope) -> Element {
     // Unpack shared states
     let initial_sudoku = use_shared_state::<InitialSudokuPuzzle>(cx)
-        .expect("failed to get sudoku puzzle shared state");
+        .expect("failed to get initial sudoku puzzle shared state");
     let clicked = use_shared_state::<Clicked>(cx).expect("failed to get clicked cell shared state");
     let mutable = use_shared_state::<Mutable>(cx)
         .expect("failed to get clicked cell mutability shared state");
@@ -168,7 +168,7 @@ fn NewButton(cx: Scope) -> Element {
 pub fn SudokuBoard(cx: Scope) -> Element {
     // Unpack shared states
     let initial_sudoku = use_shared_state::<InitialSudokuPuzzle>(cx)
-        .expect("failed to get sudoku puzzle shared state")
+        .expect("failed to get initial sudoku puzzle shared state")
         .read()
         .0;
     let sudoku = use_shared_state::<SudokuPuzzle>(cx)
@@ -195,7 +195,7 @@ pub fn SudokuBoard(cx: Scope) -> Element {
                     value: value,
                     selected: clicked.expect("failed to get clicked shared state").read().0 == u8::try_from(index).expect("cannot convert from u8"),
                     highlighted: false,
-                    class: get_class(u8::try_from(index).expect("cannot convert from u8")),
+                    class: get_class(u8::try_from(index).expect("cannot convert from u8"), initial_sudoku[index] == 0),
                     mutable: initial_sudoku[index] == 0,
                 })
             }

src/components/cell.rs

@@ -11,6 +11,8 @@
 //! and handling user input,
 //! while conforming to the overall style and rules of the Sudoku game.
 
+use std::borrow::Cow;
+
 use crate::components::board::Clicked;
 use crate::utils::get_related_cells;
 use dioxus::prelude::*;
@@ -41,7 +43,7 @@ pub struct CellProps<'a> {
     value: u8,
     selected: bool,
     highlighted: bool,
-    class: &'a str,
+    class: Cow<'a, str>,
     mutable: bool,
 }
 

src/utils.rs

@@ -8,6 +8,8 @@
 //! different parts of the application to perform common operations
 //! or calculations.
 
+use std::borrow::Cow;
+
 use sudoku::board::Sudoku;
 
 /// Generates a new Sudoku puzzle.
@@ -30,26 +32,29 @@ pub fn create_sudoku() -> [u8; 81] {
     Sudoku::generate().to_bytes()
 }
 
-/// Returns the CSS class for a Sudoku cell based on its ID.
+/// Returns the CSS class for a Sudoku cell based on its ID and mutability.
 ///
 /// The Sudoku board is divided into a 9x9 grid, and each cell is assigned a
 /// unique ID from 0 to 80.
 /// This function maps each cell's ID to a specific set of CSS classes that
 /// determine the cell's appearance.
+/// Immutable cells have non-empty values when generated by the initial
+/// Sudoku puzzle.
 ///
 /// ## Parameters
 ///
 /// - `id: u8`: The ID of the cell, ranging from 0 to 80.
+/// - `mutable: bool`: If a cell is mutable.
 ///
 /// ## Returns
 ///
-/// Returns a `&'static str` representing the CSS class or classes for the cell.
+/// Returns a `Cow<'static, str>` representing the CSS class or classes for the cell.
 ///
 /// Note: The returned classes are meant to be used in the context of a web page
 /// or a web-based UI renderer.
 #[must_use]
-pub const fn get_class(id: u8) -> &'static str {
-    match id {
+pub fn get_class(id: u8, mutable: bool) -> Cow<'static, str> {
+    let base_class = match id {
         0 | 3 | 6 | 27 | 30 | 33 | 54 | 57 | 60 => "tsb lsb rdb bdb",
         1 | 4 | 7 | 28 | 31 | 34 | 55 | 58 | 61 => "tsb  bdb",
         2 | 5 | 29 | 32 | 56 | 59 => "tsb bdb ldb",
@@ -66,6 +71,11 @@ pub const fn get_class(id: u8) -> &'static str {
         74 | 77 => "bsb ldb",
         80 => "bsb rsb ldb",
         _ => "",
+    };
+    if mutable {
+        format!("{base_class} input").into()
+    } else {
+        Cow::Borrowed(base_class)
     }
 }