cursor adventure: done enough, ready for draft link :D
This commit is contained in:
parent
9eaf6f8405
commit
245e95db0d
2 changed files with 233 additions and 8 deletions
|
|
@ -30,6 +30,9 @@ const cursors = [
|
|||
"vriska_egg",
|
||||
"easter_eggbug",
|
||||
// such a cool idea to have the map hidden as a cursor :D
|
||||
// i'll link to a draft post with a debug build
|
||||
// too big i think :(
|
||||
// maybe for the best (actual pointer makes it clear that it's a link)
|
||||
"concept",
|
||||
] as const;
|
||||
type Cursor = (typeof cursors)[number];
|
||||
|
|
@ -45,21 +48,34 @@ const grid_area_str = ({ row_start, row_end, col_start, col_end }: GridArea) =>
|
|||
`${row_start} / ${col_start} / ${row_end} / ${col_end}`;
|
||||
|
||||
const CursorImg = ({ cursor }: { cursor: Cursor }) => (
|
||||
<img src={cursor_link(cursor)} style={{ margin: 0 }} />
|
||||
<img
|
||||
src={cursor_link(cursor)}
|
||||
style={{ margin: 0, pointerEvents: "none" }}
|
||||
/>
|
||||
);
|
||||
|
||||
const debug = true;
|
||||
const debug_style = debug
|
||||
? {
|
||||
border: "1px solid red",
|
||||
overflow: "hidden",
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
}
|
||||
: {};
|
||||
// the cursor fallback is _mandatory_
|
||||
const Section = ({
|
||||
cursor,
|
||||
grid_area,
|
||||
link,
|
||||
start,
|
||||
end,
|
||||
}: {
|
||||
cursor?: Cursor;
|
||||
grid_area: GridArea;
|
||||
link?: string;
|
||||
start?: true;
|
||||
end?: true;
|
||||
}) =>
|
||||
link ? (
|
||||
<a
|
||||
|
|
@ -70,11 +86,10 @@ const Section = ({
|
|||
cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
|
||||
}pointer`,
|
||||
gridArea: grid_area_str(grid_area),
|
||||
...(debug
|
||||
? { border: "1px solid red", overflow: "hidden" }
|
||||
: {}),
|
||||
...debug_style,
|
||||
}}
|
||||
>
|
||||
{end && debug ? "end" : ""}
|
||||
{debug && cursor && <CursorImg cursor={cursor} />}
|
||||
</a>
|
||||
) : (
|
||||
|
|
@ -92,9 +107,7 @@ const Section = ({
|
|||
fontFamily: "Comic Sans MS",
|
||||
}
|
||||
: {}),
|
||||
...(debug
|
||||
? { border: "1px solid red", overflow: "hidden" }
|
||||
: {}),
|
||||
...debug_style,
|
||||
}}
|
||||
>
|
||||
{start ? "start" : ""}
|
||||
|
|
@ -146,5 +159,213 @@ render_and_copy(
|
|||
cursor="up"
|
||||
grid_area={{ row_start: 7, row_end: 13, col_start: 5, col_end: 7 }}
|
||||
/>
|
||||
<Section
|
||||
cursor="right"
|
||||
grid_area={{
|
||||
row_start: 13,
|
||||
row_end: 15,
|
||||
col_start: 7,
|
||||
col_end: -9,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="up"
|
||||
grid_area={{
|
||||
row_start: 13,
|
||||
row_end: 15,
|
||||
col_start: -9,
|
||||
col_end: -4,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="easter_eggbug"
|
||||
grid_area={{
|
||||
row_start: 13,
|
||||
row_end: 15,
|
||||
col_start: -4,
|
||||
col_end: -1,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="left"
|
||||
grid_area={{
|
||||
row_start: 8,
|
||||
row_end: 13,
|
||||
col_start: -4,
|
||||
col_end: -1,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="down"
|
||||
grid_area={{
|
||||
row_start: 4,
|
||||
row_end: 8,
|
||||
col_start: -4,
|
||||
col_end: -1,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="down"
|
||||
grid_area={{
|
||||
row_start: 3,
|
||||
row_end: 4,
|
||||
col_start: 22,
|
||||
col_end: 25,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="down"
|
||||
grid_area={{
|
||||
row_start: 1,
|
||||
row_end: 3,
|
||||
col_start: 24,
|
||||
col_end: 25,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="left"
|
||||
grid_area={{
|
||||
row_start: 1,
|
||||
row_end: 2,
|
||||
col_start: 23,
|
||||
col_end: 24,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="left"
|
||||
grid_area={{
|
||||
row_start: 1,
|
||||
row_end: 3,
|
||||
col_start: 22,
|
||||
col_end: 23,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="concept"
|
||||
link="TODO: DRAFT LINK"
|
||||
grid_area={{ row_start: 2, row_end: 3, col_start: 23, col_end: 24 }}
|
||||
/>
|
||||
<Section
|
||||
cursor="left"
|
||||
grid_area={{
|
||||
row_start: 1,
|
||||
row_end: 3,
|
||||
col_start: 16,
|
||||
col_end: 22,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="down"
|
||||
grid_area={{
|
||||
row_start: 1,
|
||||
row_end: 3,
|
||||
col_start: 7,
|
||||
col_end: 16,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="right"
|
||||
grid_area={{
|
||||
row_start: 3,
|
||||
row_end: 7,
|
||||
col_start: 7,
|
||||
col_end: 16,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="up"
|
||||
grid_area={{
|
||||
row_start: 7,
|
||||
row_end: 13,
|
||||
col_start: 16,
|
||||
col_end: 22,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="left"
|
||||
grid_area={{
|
||||
row_start: 7,
|
||||
row_end: 13,
|
||||
col_start: 7,
|
||||
col_end: 10,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="down"
|
||||
grid_area={{
|
||||
row_start: 11,
|
||||
row_end: 13,
|
||||
col_start: 10,
|
||||
col_end: 16,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="right"
|
||||
grid_area={{
|
||||
row_start: 7,
|
||||
row_end: 11,
|
||||
col_start: 12,
|
||||
col_end: 16,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="up"
|
||||
grid_area={{
|
||||
row_start: 7,
|
||||
row_end: 9,
|
||||
col_start: 10,
|
||||
col_end: 12,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="self_link"
|
||||
link="TODO: self link"
|
||||
grid_area={{
|
||||
row_start: 9,
|
||||
row_end: 11,
|
||||
col_start: 10,
|
||||
col_end: 12,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="right"
|
||||
grid_area={{
|
||||
row_start: 3,
|
||||
row_end: 7,
|
||||
col_start: 16,
|
||||
col_end: 18,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="up"
|
||||
grid_area={{
|
||||
row_start: 6,
|
||||
row_end: 7,
|
||||
col_start: 18,
|
||||
col_end: 22,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="left"
|
||||
grid_area={{
|
||||
row_start: 3,
|
||||
row_end: 6,
|
||||
col_start: 20,
|
||||
col_end: 22,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
cursor="down"
|
||||
grid_area={{
|
||||
row_start: 3,
|
||||
row_end: 4,
|
||||
col_start: 18,
|
||||
col_end: 20,
|
||||
}}
|
||||
/>
|
||||
<Section
|
||||
link="https://static.pyrope.net/cursor-fun-end"
|
||||
grid_area={{ row_start: 4, row_end: 6, col_start: 18, col_end: 20 }}
|
||||
/>
|
||||
</Main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
|
||||
async function main() {
|
||||
await sleep(3500);
|
||||
await sleep(2500);
|
||||
hide("rickroll");
|
||||
show("psyche");
|
||||
set_title("PSYCHE");
|
||||
|
|
@ -108,6 +108,10 @@
|
|||
/>
|
||||
<div id="shill" class="absolute-center initially-hidden">
|
||||
<p>i just want you to read homestuck :]</p>
|
||||
<p>
|
||||
that's all there's definitely no trick nor time pressure to
|
||||
clicking these links
|
||||
</p>
|
||||
<a href="https://bambosh.dev/unofficial-homestuck-collection"
|
||||
>offline (best)</a
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue