440 lines
12 KiB
XML
440 lines
12 KiB
XML
import { Main, randirect, render_and_copy } from "./common.tsx";
|
|
|
|
// i could also have the circle spin and the cursor stay in place :O
|
|
// but that would lose the interactive aspect D:
|
|
// one-time ease-in could be a nice effect
|
|
// maze thing with cursors
|
|
// something like loz statue pointing
|
|
|
|
// gonna need to plan this out for it to be fun
|
|
// (no real order)
|
|
// 1. grid layout (will pay dividends)
|
|
// 2. obvious start location
|
|
// 3. say sorry to mobile users in title (switching to a different device is so good for engagement this will be great for quarterly metrics)
|
|
// 4. choices!
|
|
// 5. maybe generate a decent-sized set of arrows (like box-drawing characters)
|
|
// 6. easter eggs with stuff you couldn't get to on the main path
|
|
// 7. LINK AS THE FINAL DESTINATION
|
|
// 8. RESIST (FAIL?) THE TEMPTATION TO MAKE THAT LINK A RICK ROLL
|
|
// 9. this exists? https://www.cursor.cc/?action=icon&file_id=54078
|
|
// 10. page on pyrope.net with fake rick roll then psyche then read homestuck then x2 psyche then fake rick roll then x3 psyche
|
|
const cursor_link = (href: string) =>
|
|
`https://static.pyrope.net/cursor-fun/${href}.png`;
|
|
const cursors = [
|
|
"up",
|
|
"down",
|
|
"left",
|
|
"right",
|
|
"up_or_right",
|
|
"self_link",
|
|
"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];
|
|
|
|
type GridArea = {
|
|
row_start: number;
|
|
row_end: number;
|
|
col_start: number;
|
|
col_end: number;
|
|
};
|
|
|
|
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, pointerEvents: "none" }}
|
|
/>
|
|
);
|
|
|
|
const debug = false;
|
|
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
|
|
href={link}
|
|
style={{
|
|
display: "grid",
|
|
cursor: `${
|
|
cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
|
|
}pointer`,
|
|
gridArea: grid_area_str(grid_area),
|
|
...debug_style,
|
|
}}
|
|
>
|
|
{end && debug ? "end" : ""}
|
|
{debug && cursor && <CursorImg cursor={cursor} />}
|
|
</a>
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
cursor: `${
|
|
cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
|
|
}auto`,
|
|
gridArea: grid_area_str(grid_area),
|
|
...(start
|
|
? {
|
|
backgroundColor: "green",
|
|
textAlign: "center",
|
|
fontFamily: "Comic Sans MS",
|
|
}
|
|
: {}),
|
|
...debug_style,
|
|
}}
|
|
>
|
|
{start ? "start" : ""}
|
|
{debug && cursor && <CursorImg cursor={cursor} />}
|
|
</div>
|
|
);
|
|
|
|
render_and_copy(
|
|
<>
|
|
<Main
|
|
style={{
|
|
width: "100%",
|
|
aspectRatio: "1",
|
|
display: "grid",
|
|
gridTemplateRows: "repeat(14, 1fr)",
|
|
gridTemplateColumns: "repeat(24, 1fr)",
|
|
outline: "1px solid #005682",
|
|
}}
|
|
>
|
|
<Section
|
|
cursor="down"
|
|
start
|
|
grid_area={{
|
|
row_start: 1,
|
|
row_end: 2,
|
|
col_start: 1,
|
|
col_end: 3,
|
|
}}
|
|
/>
|
|
<Section
|
|
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,
|
|
}}
|
|
/>
|
|
<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="https://cohost.org/mehbark/post/2555889-omg-you-found-the-se/7f3b03c592834a158a031cf7eb47f6c1"
|
|
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={randirect(
|
|
"cohost.org/mehbark/post/2555916-cursor-adventure-so",
|
|
"pyrope.net/mcai",
|
|
"irc.pyrope.net",
|
|
"413.gay",
|
|
"pyrope.net/tnb",
|
|
"pyrope.net/concat",
|
|
"pyrope.net/davehash",
|
|
"twitter.com/mehbark",
|
|
"pl.pyrope.net/terezi"
|
|
)}
|
|
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>
|
|
{debug && (
|
|
<img
|
|
src="https://static.pyrope.net/cursor-fun/concept.png"
|
|
alt="a messy kolourpaint concept drawing that is roughly like the above"
|
|
/>
|
|
)}
|
|
</>
|
|
);
|