show board preview after final move

Cargo.toml

@@ -10,7 +10,8 @@ leptos_router = { version = "0.7.0-rc2" }
 web-sys = { version = "0.3", features = ["Storage"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
+urlencoding = "2.1.3"
 
 [workspace]
 members = ["."]
-resolver = "2"
+resolver = "2"

src/components/board.rs

@@ -2,6 +2,8 @@ use leptos::*;
 use leptos::prelude::*;
 use serde::{Serialize, Deserialize};
 
+use crate::components::utils::generate_thumbnail;
+
 #[derive(Clone, Serialize, Deserialize)]
 pub enum CellContent {
     Empty,
@@ -11,8 +13,8 @@ pub enum CellContent {
 
 #[derive(Clone, Serialize, Deserialize)]
 pub struct Board {
-    grid: Vec<Vec<CellContent>>,
-    size: usize,
+    pub grid: Vec<Vec<CellContent>>,
+    pub size: usize,
 }
 
 impl Board {
@@ -162,6 +164,16 @@ pub fn BoardCreator(
                     "Cancel"
                 </button>
             </div>
+            {move || finished.get().then(|| view! {
+                <div class="mt-4">
+                    <h3 class="text-lg font-bold mb-2">"Board Preview"</h3>
+                    <img 
+                        src=move || generate_thumbnail(&board.get())
+                        alt="Board thumbnail" 
+                        class="w-24 h-24 rounded border border-slate-700"
+                    />
+                </div>
+            })}
         </div>
     }
 }

src/components/mod.rs

@@ -1 +1,3 @@
-pub mod board;
+pub mod board;
+pub mod saved_boards;
+pub mod utils;

src/components/saved_boards.rs

@@ -0,0 +1,11 @@
+use leptos::*;
+use leptos::prelude::*;
+
+#[component]
+pub fn SavedBoards() -> impl IntoView {
+    view! {
+        <div class="grid grid-cols-4 gap-4 mt-4">
+            // Thumbnails will go here
+        </div>
+    }
+}

src/components/utils.rs

@@ -0,0 +1,37 @@
+use super::board::{Board, CellContent};
+
+pub fn generate_thumbnail(board: &Board) -> String {
+    let svg = format!(
+        r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <rect width="100" height="100" fill="rgb(30, 41, 59)"/>
+            <g transform="translate(5,5)">{}</g>
+        </svg>"#,
+        board.grid.iter().enumerate().map(|(i, row)| {
+            row.iter().enumerate().map(|(j, cell)| {
+                let x = j as f32 * 45.0;
+                let y = i as f32 * 45.0;
+                match cell {
+                    CellContent::Empty => format!(
+                        r#"<rect x="{}" y="{}" width="40" height="40" fill="rgb(51, 65, 85)"/>"#,
+                        x, y
+                     ),
+                     CellContent::Player => format!(
+                        r#"<rect x="{}" y="{}" width="40" height="40" fill="rgb(51, 65, 85)"/>
+                           <circle cx="{:.0}" cy="{:.0}" r="15" fill="rgb(37, 99, 235)"/>"#,
+                        x, y, x + 20.0, y + 20.0
+                     ),
+                     CellContent::Trap => format!(
+                        r#"<rect x="{}" y="{}" width="40" height="40" fill="rgb(51, 65, 85)"/>
+                           <path d="M{} {} l30 30 m0 -30 l-30 30" stroke="rgb(220, 38, 38)" stroke-width="4"/>"#,
+                        x, y, x + 5.0, y + 5.0
+                     ),
+                }
+            }).collect::<String>()
+        }).collect::<String>()
+    );
+
+    format!(
+        r#"data:image/svg+xml,{}"#,
+        urlencoding::encode(&svg)
+    )
+}