cohost/html/cursor-adventure.tsx

440 lines
12 KiB
TypeScript
Raw Normal View History

2023-08-20 13:33:54 -04:00
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
2023-08-20 07:45:29 -04:00
// 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",
2023-08-20 07:59:08 -04:00
"up_or_right",
2023-08-20 07:45:29 -04:00
"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",
2023-08-20 07:45:29 -04:00
] 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}`;
2023-08-20 08:09:59 -04:00
const CursorImg = ({ cursor }: { cursor: Cursor }) => (
<img
src={cursor_link(cursor)}
style={{ margin: 0, pointerEvents: "none" }}
/>
2023-08-20 08:09:59 -04:00
);
2023-08-20 08:46:03 -04:00
const debug = false;
const debug_style = debug
? {
border: "1px solid red",
overflow: "hidden",
justifyContent: "center",
alignContent: "center",
}
: {};
2023-08-20 07:45:29 -04:00
// the cursor fallback is _mandatory_
const Section = ({
cursor,
grid_area,
link,
start,
end,
2023-08-20 07:45:29 -04:00
}: {
cursor?: Cursor;
grid_area: GridArea;
link?: string;
start?: true;
end?: true;
2023-08-20 07:45:29 -04:00
}) =>
link ? (
<a
href={link}
style={{
display: "grid",
cursor: `${
2023-08-20 08:00:21 -04:00
cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
2023-08-20 07:45:29 -04:00
}pointer`,
gridArea: grid_area_str(grid_area),
...debug_style,
2023-08-20 07:45:29 -04:00
}}
2023-08-20 08:09:59 -04:00
>
{end && debug ? "end" : ""}
2023-08-20 08:09:59 -04:00
{debug && cursor && <CursorImg cursor={cursor} />}
</a>
2023-08-20 07:45:29 -04:00
) : (
<div
style={{
display: "grid",
2023-08-20 08:00:21 -04:00
cursor: `${
cursor ? `url(${cursor_link(cursor)}) 32 32, ` : ""
}auto`,
2023-08-20 07:45:29 -04:00
gridArea: grid_area_str(grid_area),
...(start
? {
backgroundColor: "green",
textAlign: "center",
fontFamily: "Comic Sans MS",
}
: {}),
...debug_style,
2023-08-20 07:45:29 -04:00
}}
>
{start ? "start" : ""}
2023-08-20 08:09:59 -04:00
{debug && cursor && <CursorImg cursor={cursor} />}
2023-08-20 07:45:29 -04:00
</div>
);
render_and_copy(
2023-08-20 08:46:03 -04:00
<>
<Main
style={{
width: "100%",
aspectRatio: "1",
display: "grid",
gridTemplateRows: "repeat(14, 1fr)",
gridTemplateColumns: "repeat(24, 1fr)",
outline: "1px solid #005682",
}}
2023-08-20 08:46:03 -04:00
>
<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"
2023-08-20 13:33:54 -04:00
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"
)}
2023-08-20 08:46:03 -04:00
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"
/>
)}
</>
2023-08-20 07:45:29 -04:00
);