add snazzy debug view

This commit is contained in:
mehbark 2023-08-20 08:09:59 -04:00
parent 3fd722d2b3
commit 9eaf6f8405

View file

@ -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>
);