now for the hard part

html/cursor-adventure.tsx

@@ -1,6 +1,4 @@
-import { JSX } from "preact/jsx-runtime";
 import { Main, render_and_copy } from "./common.tsx";
-import { ComponentChild, ComponentChildren, toChildArray } from "preact";
 
 // i could also have the circle spin and the cursor stay in place :O
 // but that would lose the interactive aspect D:
@@ -19,4 +17,95 @@ import { ComponentChild, ComponentChildren, toChildArray } from "preact";
 // 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
-render_and_copy(<Main style={{ width: "100%", aspectRatio: "1" }}></Main>);
+// 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",
+    "self_link",
+    "vriska_egg",
+    "easter_eggbug",
+    "mystery",
+] 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 outline_sections = true;
+// the cursor fallback is _mandatory_
+const Section = ({
+    cursor,
+    grid_area,
+    link,
+    start,
+}: {
+    cursor?: Cursor;
+    grid_area: GridArea;
+    link?: string;
+    start?: true;
+}) =>
+    link ? (
+        <a
+            href={link}
+            style={{
+                display: "grid",
+                cursor: `${
+                    cursor ? `url(${cursor_link(cursor)}), ` : ""
+                }pointer`,
+                gridArea: grid_area_str(grid_area),
+                ...(outline_sections ? { outline: "1px solid red" } : {}),
+            }}
+        ></a>
+    ) : (
+        <div
+            style={{
+                display: "grid",
+                cursor: `${cursor ? `url(${cursor_link(cursor)}), ` : ""}auto`,
+                gridArea: grid_area_str(grid_area),
+                ...(start
+                    ? {
+                          backgroundColor: "green",
+                          textAlign: "center",
+                          fontFamily: "Comic Sans MS",
+                      }
+                    : {}),
+                ...(outline_sections ? { outline: "1px solid red" } : {}),
+            }}
+        >
+            {start ? "start" : ""}
+        </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 }}
+        />
+    </Main>
+);

static/cursor-fun-end/index.html

@@ -14,6 +14,7 @@
                 height: 100vh;
                 background-color: #a4a3ae;
                 transition: 1s background-color;
+                color: white;
             }
 
             .absolute-center {
@@ -71,7 +72,7 @@
                 hide("psyche");
                 show("shill");
                 set_title("i like it a lot :]");
-                set_bg("#5ae93d");
+                set_bg("#008282");
 
                 await sleep(10000);
                 hide("shill");