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",
|
"vriska_egg",
|
||||||
"easter_eggbug",
|
"easter_eggbug",
|
||||||
// such a cool idea to have the map hidden as a cursor :D
|
// 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",
|
"concept",
|
||||||
] as const;
|
] as const;
|
||||||
type Cursor = (typeof cursors)[number];
|
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}`;
|
`${row_start} / ${col_start} / ${row_end} / ${col_end}`;
|
||||||
|
|
||||||
const CursorImg = ({ cursor }: { cursor: Cursor }) => (
|
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 = true;
|
||||||
|
const debug_style = debug
|
||||||
|
? {
|
||||||
|
border: "1px solid red",
|
||||||
|
overflow: "hidden",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignContent: "center",
|
||||||
|
}
|
||||||
|
: {};
|
||||||
// the cursor fallback is _mandatory_
|
// the cursor fallback is _mandatory_
|
||||||
const Section = ({
|
const Section = ({
|
||||||
cursor,
|
cursor,
|
||||||
grid_area,
|
grid_area,
|
||||||
link,
|
link,
|
||||||
start,
|
start,
|
||||||
|
end,
|
||||||
}: {
|
}: {
|
||||||
cursor?: Cursor;
|
cursor?: Cursor;
|
||||||
grid_area: GridArea;
|
grid_area: GridArea;
|
||||||
link?: string;
|
link?: string;
|
||||||
start?: true;
|
start?: true;
|
||||||
|
end?: true;
|
||||||
}) =>
|
}) =>
|
||||||
link ? (
|
link ? (
|
||||||
<a
|
<a
|
||||||
|
|
@ -70,11 +86,10 @@ const Section = ({
|
||||||
cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
|
cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
|
||||||
}pointer`,
|
}pointer`,
|
||||||
gridArea: grid_area_str(grid_area),
|
gridArea: grid_area_str(grid_area),
|
||||||
...(debug
|
...debug_style,
|
||||||
? { border: "1px solid red", overflow: "hidden" }
|
|
||||||
: {}),
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{end && debug ? "end" : ""}
|
||||||
{debug && cursor && <CursorImg cursor={cursor} />}
|
{debug && cursor && <CursorImg cursor={cursor} />}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
|
|
@ -92,9 +107,7 @@ const Section = ({
|
||||||
fontFamily: "Comic Sans MS",
|
fontFamily: "Comic Sans MS",
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
...(debug
|
...debug_style,
|
||||||
? { border: "1px solid red", overflow: "hidden" }
|
|
||||||
: {}),
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{start ? "start" : ""}
|
{start ? "start" : ""}
|
||||||
|
|
@ -146,5 +159,213 @@ render_and_copy(
|
||||||
cursor="up"
|
cursor="up"
|
||||||
grid_area={{ row_start: 7, row_end: 13, col_start: 5, col_end: 7 }}
|
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>
|
</Main>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
await sleep(3500);
|
await sleep(2500);
|
||||||
hide("rickroll");
|
hide("rickroll");
|
||||||
show("psyche");
|
show("psyche");
|
||||||
set_title("PSYCHE");
|
set_title("PSYCHE");
|
||||||
|
|
@ -108,6 +108,10 @@
|
||||||
/>
|
/>
|
||||||
<div id="shill" class="absolute-center initially-hidden">
|
<div id="shill" class="absolute-center initially-hidden">
|
||||||
<p>i just want you to read homestuck :]</p>
|
<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"
|
<a href="https://bambosh.dev/unofficial-homestuck-collection"
|
||||||
>offline (best)</a
|
>offline (best)</a
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue