add snazzy debug view

html/cursor-adventure.tsx

@@ -44,7 +44,11 @@ type GridArea = {
 const grid_area_str = ({ row_start, row_end, col_start, col_end }: GridArea) =>
     `${row_start} / ${col_start} / ${row_end} / ${col_end}`;
 
-const outline_sections = true;
+const CursorImg = ({ cursor }: { cursor: Cursor }) => (
+    <img src={cursor_link(cursor)} style={{ margin: 0 }} />
+);
+
+const debug = true;
 // the cursor fallback is _mandatory_
 const Section = ({
     cursor,
@@ -66,9 +70,13 @@ const Section = ({
                     cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
                 }pointer`,
                 gridArea: grid_area_str(grid_area),
-                ...(outline_sections ? { outline: "1px solid red" } : {}),
+                ...(debug
+                    ? { border: "1px solid red", overflow: "hidden" }
+                    : {}),
             }}
-        ></a>
+        >
+            {debug && cursor && <CursorImg cursor={cursor} />}
+        </a>
     ) : (
         <div
             style={{
@@ -84,10 +92,13 @@ const Section = ({
                           fontFamily: "Comic Sans MS",
                       }
                     : {}),
-                ...(outline_sections ? { outline: "1px solid red" } : {}),
+                ...(debug
+                    ? { border: "1px solid red", overflow: "hidden" }
+                    : {}),
             }}
         >
             {start ? "start" : ""}
+            {debug && cursor && <CursorImg cursor={cursor} />}
         </div>
     );
 
@@ -111,5 +122,29 @@ render_and_copy(
             cursor="down"
             grid_area={{ row_start: 2, row_end: 13, col_start: 1, col_end: 3 }}
         />
+        <Section
+            cursor="left"
+            grid_area={{ row_start: 1, row_end: 13, col_start: 3, col_end: 5 }}
+        />
+        <Section
+            cursor="right"
+            grid_area={{ row_start: 13, row_end: 15, col_start: 1, col_end: 5 }}
+        />
+        <Section
+            cursor="up_or_right"
+            grid_area={{ row_start: 13, row_end: 15, col_start: 5, col_end: 7 }}
+        />
+        <Section
+            cursor="vriska_egg"
+            grid_area={{ row_start: 1, row_end: 2, col_start: 5, col_end: 7 }}
+        />
+        <Section
+            cursor="right"
+            grid_area={{ row_start: 2, row_end: 7, col_start: 5, col_end: 7 }}
+        />
+        <Section
+            cursor="up"
+            grid_area={{ row_start: 7, row_end: 13, col_start: 5, col_end: 7 }}
+        />
     </Main>
 );