cohost/html/cursor-adventure.tsx

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"
            />
        )}
    </>
);