Add color code to step and arrows so it can be followed easier.

Author: willwang-io

src/main.rs

@@ -49,6 +49,7 @@ fn App() -> Element {
     rsx! {
         document::Link { rel: "stylesheet", href: STYLE }
         div {
+            h2 { "Solo-Chess Solver" }
             div {
                 class: "board-stack",
                 Chessboard {
@@ -60,6 +61,15 @@ fn App() -> Element {
             }
             PieceSelectionBoard { selected: selected_piece }
             Solution { steps }
+            div {
+                h2 { "Rules" }
+                p { "From chess.com: "}
+                ul {
+                    li { "Capture a piece with every move until just one remains" }
+                    li { "No piece may capture more than 2 times per puzzle (shown in black if cannot move)" }
+                    li { "If there is a King on the board, it must be the final piece" }
+                }
+            }
         }
     }
 }

src/ui.rs

@@ -2,3 +2,4 @@ pub mod chessboard;
 pub mod piece_selection;
 pub mod solution;
 pub mod step_arrows;
+pub mod step_colors;

src/ui/solution.rs

@@ -1,12 +1,22 @@
 use dioxus::prelude::*;
 
 use crate::step::Step;
+use crate::ui::step_colors::STEP_COLORS;
 
 #[component]
 pub fn Solution(steps: Vec<Step>) -> Element {
-    let sans = to_sans(&steps).join(" ");
+    let sans = to_sans(&steps);
     rsx! {
-        p { {sans} }
+        p {
+            strong { "Steps: " }
+            for (idx, step) in sans.iter().enumerate() {
+                span {
+                    key: "{idx}",
+                    style: "color: {STEP_COLORS[idx % STEP_COLORS.len()]};",
+                    "{step} "
+                }
+            }
+        }
     }
 }
 

src/ui/step_arrows.rs

@@ -1,6 +1,7 @@
 use dioxus::prelude::*;
 
 use crate::step::Step;
+use crate::ui::step_colors::STEP_COLORS;
 
 #[component]
 pub fn StepArrows(steps: Vec<Step>) -> Element {
@@ -10,18 +11,20 @@ pub fn StepArrows(steps: Vec<Step>) -> Element {
             view_box: "0 0 8 8",
             preserve_aspect_ratio: "none",
             defs {
-                marker {
-                    id: "arrowhead",
-                    marker_units: "strokeWidth",
-                    marker_width: "4",
-                    marker_height: "4",
-                    ref_x: "9",
-                    ref_y: "5",
-                    orient: "auto",
-                    view_box: "0 0 10 10",
-                    path {
-                        d: "M 0 0 L 10 5 L 0 10 z",
-                        style: "fill: var(--step-arrow); fill-opacity: var(--step-arrow-opacity);",
+                for (idx, color) in STEP_COLORS.iter().enumerate() {
+                    marker {
+                        id: "arrowhead-{idx}",
+                        marker_units: "strokeWidth",
+                        marker_width: "4",
+                        marker_height: "4",
+                        ref_x: "9",
+                        ref_y: "5",
+                        orient: "auto",
+                        view_box: "0 0 10 10",
+                        path {
+                            d: "M 0 0 L 10 5 L 0 10 z",
+                            style: "fill: {color}; fill-opacity: var(--step-arrow-opacity);",
+                        }
                     }
                 }
             }
@@ -32,14 +35,23 @@ pub fn StepArrows(steps: Vec<Step>) -> Element {
                     line {
                         key: "{idx}",
                         class: "step-arrow",
+                        style: "stroke: {step_color(idx)};",
                         x1: "{(fc as f32) + 0.5}",
                         y1: "{(fr as f32) + 0.5}",
                         x2: "{(tc as f32) + 0.5}",
                         y2: "{(tr as f32) + 0.5}",
-                        marker_end: "url(#arrowhead)",
+                        marker_end: "url(#arrowhead-{color_index(idx)})",
                     }
                 }
             }
         }
     }
 }
+
+fn color_index(idx: usize) -> usize {
+    idx % STEP_COLORS.len()
+}
+
+fn step_color(idx: usize) -> &'static str {
+    STEP_COLORS[color_index(idx)]
+}

src/ui/step_colors.rs

@@ -0,0 +1,12 @@
+pub const STEP_COLORS: [&str; 10] = [
+    "#e6194b",
+    "#f58231",
+    "#ffe119",
+    "#3cb44b",
+    "#42d4f4",
+    "#4363d8",
+    "#911eb4",
+    "#f032e6",
+    "#bfef45",
+    "#fabebe",
+];