randchar: looking really nice

html/random-character.tsx

@@ -1,5 +1,5 @@
 import { JSX } from "preact/jsx-runtime";
-import { render_and_copy } from "./common.tsx";
+import { Main, render_and_copy, serverside_randirect } from "./common.tsx";
 
 // let's do 100 first and last names OKAY
 //
@@ -217,19 +217,193 @@ const LAST_NAMES = [
     "bark",
 ].map(name => name[0].toUpperCase() + name.slice(1));
 
+// sweet we can just img src=
+const ASPECT_URLS = [
+    "https://static.wikia.nocookie.net/mspaintadventures/images/6/60/Space_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/f/f4/Time_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/1/11/Mind_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/a/ac/Heart_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/3/35/Hope_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/c/c3/Rage_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/a/a0/Breath_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/1/13/Blood_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/3/3e/Life_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/1/1c/Doom_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/6/68/Light_Aspect.svg",
+    "https://static.wikia.nocookie.net/mspaintadventures/images/1/13/Void_Aspect.svg",
+];
+
+// oh heck yeah we can totally layer clothes and stuff
+// not gonna though
+// link to http://www.farragofiction.com/DollSim/ why not
+
+const CLASSES = [
+    "Thief",
+    "Rogue",
+    "Bard",
+    "Prince",
+    "Heir",
+    "Page",
+    "Seer",
+    "Maid",
+    "Sylph",
+    "Knight",
+    "Witch",
+    "Mage",
+];
+
+// if this was ruby i could just multiply that array grumble grumble
+
+const LIKED_NOUNS = [
+    "cats",
+    "dogs",
+    "computers",
+    "keyboards",
+    "eggbug",
+    "homestuck",
+    "websites",
+    "paintbrushes",
+    "randomness",
+    "posts",
+    "chairs",
+    "wires",
+    "audio",
+    "sound",
+    "music",
+    "sound effects",
+    "personal hygiene",
+    "smells",
+    "cars",
+    "cdrs",
+    "pairs",
+    "atoms",
+    "lists",
+    "trees",
+    "tasks",
+    "smart devices",
+    "dumb devices",
+    "synthesizers",
+    "violins",
+    "pianos",
+    "remotes",
+    "earbuds",
+    "eggbuds",
+    "scented waxes",
+    "cables",
+    "cords",
+    "love",
+    "hate",
+    "coolness",
+    "radness",
+    "gnarliness",
+    "lameness",
+    "sick-nastiness",
+    "maximalism",
+    "minimalism",
+    "cohost",
+    "html",
+    "css",
+    "javascript",
+    "typescript",
+    "deno",
+    "dinos",
+    "life",
+    "yourself",
+    "whatever is reading this",
+    "fish",
+    "sharks",
+    "eevees",
+    "seagulls",
+].map(s => s.toUpperCase());
+
+const LIKED_ACTIVITIES = [
+    "playing the trombone",
+    "playing the piano",
+    "using the computer",
+    "posting on the websites",
+    "reading homestuck",
+    "playing homestuck",
+    "reading gamebro",
+    "reading gamegrl",
+    "helping others",
+    "hindering others",
+    "egging the bug",
+    "coing the host",
+    "making a javascript",
+    "scheming (in the evil sense)",
+    "scheming (in the algorithmic language sense)",
+    "reading books (how exciting)",
+    "reading blogs",
+    "being kind :D",
+    "being rude D:",
+    "liking things",
+    "loving things",
+    "transforming",
+    "refreshing this page to see different things",
+    "writing blogs",
+    "writing books",
+    "writing visual novels",
+    "reading visual novels",
+    "playing visual novels",
+    "gaming",
+    "gaming so hard",
+    "gaming so, so hard",
+    "gaming so, so, so hard",
+    "gaming a regular amount of hard",
+    "flarping",
+    "playing games for girls",
+    "sweeping mines",
+    "tetrising",
+    "nixing operating systems",
+    "emacsing",
+    "using alternatives to discord",
+    "internet relay chatting",
+    "hypertexting",
+    "decorating your room",
+    "designing clothes",
+    "wearing clothes",
+    "being cool",
+    "being rad",
+    "being gnarly",
+    "being lame",
+    "making fun random generators by assembling a small set of primitives that, yes, could be more atomic",
+    "making this text really squishy by liking doing something with a really long description like this",
+    "finishing up a list",
+    "writing activities that are actually homestuckish",
+    "staying in your room",
+    "staying anywhere but your room",
+    "programming poorly",
+    "shaving",
+    "dressing in a spiffy manner",
+    "watching crappy movies",
+    "watching really good movies",
+    "doing nothing in particular",
+    "cleaning your room",
+    "attempting to escape your absurd house",
+    "attempting to make your house more absurd",
+    "architecting",
+    "visiting others",
+    "visiting yourself",
+    "doing enough",
+].map(s => s.toUpperCase());
+
 // has some defaults
 export const Prngnoun = ({
     prns,
+    alt,
     style = {},
 }: {
     prns: string[];
+    alt: string;
     style?: JSX.CSSProperties;
 }) => (
     <img
         src={`https://pyrope.net/prngnouns?p=${prns.join("&p=")}`}
+        alt={alt}
         style={{
             display: "inline",
-            height: "0.9rem",
+            height: "0.5lh",
+            margin: "0",
             ...style,
         }}
     />
@@ -242,18 +416,45 @@ export const Prngnoun = ({
 // idk
 
 render_and_copy(
-    <p
+    // sort of a franken-introduction of name and other stuff
+    <Main
         style={{
-            lineHeight: "1rem",
-            fontFamily: "courier-std, courier, monospace",
+            fontFamily: "'courier-std', 'Courier New', courier, monospace",
             fontWeight: "bold",
+            color: "black",
+            backgroundColor: "#EFEFEF",
+            textAlign: "center",
+            margin: "0 auto",
         }}
     >
-        Your name is <Prngnoun prns={FIRST_NAMES} />{" "}
-        <Prngnoun prns={LAST_NAMES} />. You are{" "}
-        <Prngnoun
-            prns={Array.from({ length: 200 }).map((_, i) => i.toString())}
-        />{" "}
-        years old. Cool!
-    </p>
+        <p>
+            Your name is{" "}
+            <Prngnoun
+                alt="a four letter name. weird stuff, not very namey"
+                prns={FIRST_NAMES}
+            />{" "}
+            <Prngnoun
+                alt="a six or seven letter last name. weird stuff, not very namey"
+                prns={LAST_NAMES}
+            />
+            . You like <Prngnoun alt="a random noun" prns={LIKED_NOUNS} />,{" "}
+            {/* we add another thing so that it isn't the same url */}
+            <Prngnoun
+                alt="another random noun"
+                prns={["SOME OTHER THING", ...LIKED_NOUNS]}
+            />
+            , and <Prngnoun alt="a random activity" prns={LIKED_ACTIVITIES} />.
+        </p>
+        <p>
+            You are a <Prngnoun alt="a class from homestuck" prns={CLASSES} />{" "}
+            of{" "}
+            <img
+                style={{ height: "2rem", display: "inline", margin: "0" }}
+                src={serverside_randirect(...ASPECT_URLS)}
+                alt="the symbol of an aspect from homestuck"
+            />
+            , but you don't really care about that&mdash;it's hard to god-tier
+            when you are a randomly-filled out template!
+        </p>
+    </Main>
 );

serverside/prngnouns.ts

@@ -59,7 +59,7 @@ async function get_pronoun_image(prn: string): Promise<Uint8Array> {
 }
 
 // the whole cache thing def sketches me out, but people probably won't be *that* malicious
-const MAX_PRN_LENGTH = 32;
+const MAX_PRN_LENGTH = 128;
 const MAX_PRN_CACHE = 64;
 // shouldn't really be a problem
 const MAX_PRN_CHOICES = 256;