From c05ab52a15e0246cdc91b3506a817fc62826685c Mon Sep 17 00:00:00 2001
From: Matt Keenan <negabinary@gmail.com>
Date: Wed, 21 Aug 2024 18:03:43 -0400
Subject: [PATCH] Fix stepper tile css

---
 src/haz3lweb/app/editors/decoration/Deco.re   | 11 ++++++++--
 .../app/editors/decoration/PieceDec.re        | 21 +++++++++++++------
 src/haz3lweb/www/style/dynamics.css           | 20 ++++++++++++------
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/haz3lweb/app/editors/decoration/Deco.re b/src/haz3lweb/app/editors/decoration/Deco.re
index 6912cb0591..dd7561136a 100644
--- a/src/haz3lweb/app/editors/decoration/Deco.re
+++ b/src/haz3lweb/app/editors/decoration/Deco.re
@@ -287,6 +287,7 @@ module Deco =
       | Some(range) =>
         let tiles = all_tiles(p);
         PieceDec.indicated(
+          ~line_clss=[],
           ~font_metrics,
           ~rows,
           ~caret=(Piece.id(p), index),
@@ -452,8 +453,14 @@ module Deco =
           let rows = measured.rows;
           let decos =
             shard_decos
-            @ PieceDec.uni_lines(~font_metrics, ~rows, range, tiles)
-            @ PieceDec.bi_lines(~font_metrics, ~rows, tiles);
+            @ PieceDec.uni_lines(
+                ~font_metrics,
+                ~rows,
+                range,
+                tiles,
+                ~line_clss=[],
+              )
+            @ PieceDec.bi_lines(~font_metrics, ~rows, tiles, ~line_clss=[]);
           div_c("errors-piece", decos);
         | None => div_c("errors-piece", shard_decos)
         };
diff --git a/src/haz3lweb/app/editors/decoration/PieceDec.re b/src/haz3lweb/app/editors/decoration/PieceDec.re
index 2e228aae18..45dfda2565 100644
--- a/src/haz3lweb/app/editors/decoration/PieceDec.re
+++ b/src/haz3lweb/app/editors/decoration/PieceDec.re
@@ -180,6 +180,7 @@ let bi_lines =
     (
       ~font_metrics: FontMetrics.t,
       ~rows: Measured.Rows.t,
+      ~line_clss: list(string),
       tiles: list((Id.t, Mold.t, Measured.Shards.t)),
     )
     : list(t) => {
@@ -237,7 +238,7 @@ let bi_lines =
     | [] => failwith("empty tile")
     | [(_, mold, _), ..._] => mold.out
     };
-  let clss = ["child-line", Sort.to_string(s)];
+  let clss = ["child-line", Sort.to_string(s)] @ line_clss;
   intra_lines
   @ inter_lines
   |> List.map(((origin, path)) =>
@@ -249,6 +250,7 @@ let uni_lines =
     (
       ~font_metrics: FontMetrics.t,
       ~rows: Measured.Rows.t,
+      ~line_clss: list(string),
       (l: Measured.Point.t, r: Measured.Point.t),
       tiles: list((Id.t, Mold.t, Measured.Shards.t)),
     ) => {
@@ -373,7 +375,7 @@ let uni_lines =
     | [] => failwith("empty tile")
     | [(_, mold, _), ..._] => mold.out
     };
-  let clss = ["child-line", Sort.to_string(s)];
+  let clss = ["child-line", Sort.to_string(s)] @ line_clss;
   l_line
   @ r_line
   |> List.map(((origin, path)) =>
@@ -388,16 +390,23 @@ let indicated =
       ~rows: Measured.Rows.t,
       ~caret,
       ~tiles,
+      ~line_clss: list(string),
       range,
     )
     : list(Node.t) => {
   List.concat_map(simple_shards(~font_metrics, ~caret), tiles)
-  @ uni_lines(~font_metrics, ~rows, range, tiles)
-  @ bi_lines(~font_metrics, ~rows, tiles);
+  @ uni_lines(~line_clss, ~font_metrics, ~rows, range, tiles)
+  @ bi_lines(~line_clss, ~font_metrics, ~rows, tiles);
 };
 
 let next_step_indicated = (~inject) =>
-  indicated(~simple_shards=next_step_shards_indicated(~inject));
+  indicated(
+    ~simple_shards=next_step_shards_indicated(~inject),
+    ~line_clss=["next-step-line"],
+  );
 let taken_step_indicated =
-  indicated(~simple_shards=taken_step_shards_indicated);
+  indicated(
+    ~simple_shards=taken_step_shards_indicated,
+    ~line_clss=["taken-step-line"],
+  );
 let indicated = indicated(~simple_shards=simple_shards_indicated);
diff --git a/src/haz3lweb/www/style/dynamics.css b/src/haz3lweb/www/style/dynamics.css
index 878bad0f2c..e8724cc1cd 100644
--- a/src/haz3lweb/www/style/dynamics.css
+++ b/src/haz3lweb/www/style/dynamics.css
@@ -213,17 +213,25 @@
   content: "←";
 }
 
-.steppable,
-.steppable *:not(.DHCode .EmptyHole *, .DHCode .EmptyHole) {
+.tile-next-step path,
+.tile-next-step path *:not(.DHCode .EmptyHole *, .DHCode .EmptyHole) {
   outline: 1px var(--step-hole-color);
-  background-color: var(--shard-selected);
+  fill: var(--G1);
   cursor: pointer;
 }
 
-.stepped,
-.stepped *:not(.DHCode .EmptyHole *, .DHCode .EmptyHole) {
+.tile-taken-step path,
+.tile-taken-step path *:not(.DHCode .EmptyHole *, .DHCode .EmptyHole) {
   border: 1px var(--step-hole-color);
-  background-color: var(--Y1);
+  fill: var(--BR1);
+}
+
+.next-step-line {
+  stroke: var(--G1);
+}
+
+.taken-step-line {
+  stroke: var(--BR1);
 }
 
 .substituted {