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