add snazzy debug view
This commit is contained in:
parent
3fd722d2b3
commit
9eaf6f8405
1 changed files with 39 additions and 4 deletions
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue