Added separate rolling text for Cameron hero mode

src/routes/Hero.svelte

@@ -11,12 +11,16 @@ import PythonSticker from "$lib/media/hero/stickers/hopperelec/python.svg";
 import SvelteSticker from "$lib/media/hero/stickers/hopperelec/svelte.svg";
 import { fade, slide } from "svelte/transition";
 
-const rollingText: [
+let hopperelecMode = true;
+
+type RollingText = [
 	string, // verb
 	string?, // noun
 	string?, // connective
 	{ text: string; color: string }?, // styled noun
-][] = [
+];
+
+const HopperelecRollingText: RollingText[] = [
 	["make", "websites", "with", { text: "HTML", color: "#f16524" }],
 	["make", "websites", "with", { text: "Svelte", color: "#ff3C00" }],
 	["make", "websites", "with", { text: "CSS", color: "#306af1" }],
@@ -38,15 +42,59 @@ const rollingText: [
 		{ text: "Minecraft servers", color: "lime" },
 	],
 ];
+
+const timeSinceBorn = new Date(
+	new Date().getTime() - new Date("06/08/06").getTime(),
+);
+const CameronRollingText: RollingText[] = [
+	["am", "autistic"],
+	["am a", "cool guy"],
+	["am from", "the UK"],
+	[
+		// Doesn't use correct timezone
+		"am",
+		`${timeSinceBorn.getFullYear() - 1970} years old`,
+		undefined,
+		timeSinceBorn.getDate() === 1 && timeSinceBorn.getMonth() === 0
+			? { text: "today! 🎉", color: "yellow" } // Emoji is too big, but I'm calling this a feature
+			: undefined,
+	],
+	["go by", "he/him"],
+	["have spent", "over 1000 hours coding"],
+	["watch", "a lot", "of", { text: "YouTube", color: "red" }],
+	["listen to", "Good Kid"],
+	["listen to", "Men I Trust"],
+	["listen to", "Crywank"],
+	["listen to", "HOME"],
+	["listen to", "TheFatRat"],
+	["listen to", "Alan Walker"],
+	["listen to", "Exyl"],
+];
+
 function changeRollingText() {
-	let choice = Math.floor(Math.random() * (rollingText.length - 1));
-	i = choice >= i ? choice + 1 : choice; // Don't pick same one
+	const options = hopperelecMode ? HopperelecRollingText : CameronRollingText;
+	let numOptions = options.length;
+	if (currentRollingTextI) numOptions--;
+	let choice = Math.floor(Math.random() * numOptions);
+	currentRollingTextI = currentRollingTextI
+		? choice >= currentRollingTextI
+			? choice + 1 // Don't pick same one
+			: choice
+		: choice;
+	currentRollingText = options[currentRollingTextI];
 }
-let i: number;
+let currentRollingTextI: number | undefined;
+let currentRollingText: RollingText;
 changeRollingText();
-setInterval(changeRollingText, 6000);
+let rollingTextInterval = setInterval(changeRollingText, 6000);
 
-let hopperelecMode = true;
+function switchMode() {
+	hopperelecMode = !hopperelecMode;
+	clearTimeout(rollingTextInterval);
+	rollingTextInterval = setInterval(changeRollingText, 6000);
+	currentRollingTextI = undefined;
+	changeRollingText();
+}
 </script>
 
 <section id="hero">
@@ -72,7 +120,7 @@ let hopperelecMode = true;
           <img src={HeHimSticker} alt="'he him' in a speech bubble" style:top="65%" style:right="20%"/>
         {/if}
       </div>
-      <button type="button" on:click={() => {hopperelecMode = !hopperelecMode}} title={"Switch to "+(hopperelecMode ? 'Cameron' : 'hopperelec')+" mode"}>
+      <button type="button" on:click={switchMode} title={"Switch to "+(hopperelecMode ? 'Cameron' : 'hopperelec')+" mode"}>
         {#if hopperelecMode}
           <HopperIcon fillColor="#646464" outlineColor="#fff" outlineWidth={6} typeOf3D="stroke" padding={{top: 3, right: 3, bottom: 3, left: 3}} scale={null}/>
         {:else}
@@ -91,17 +139,17 @@ let hopperelecMode = true;
         </span>
         <span>. I</span>
       </p>
-      {#key i}
+      {#key currentRollingTextI}
         <p id="rolling-text" transition:slide={{duration: 2000}}>
-          <span class="verb">{rollingText[i][0]}</span>
-          {#if rollingText[i][1]}
-            <span class="noun">{rollingText[i][1]}</span>
+          <span class="verb">{currentRollingText[0]}</span>
+          {#if currentRollingText[1]}
+            <span class="noun">{currentRollingText[1]}</span>
           {/if}
-          {#if rollingText[i][2]}
-            <span class="connective">{rollingText[i][2]}</span>
+          {#if currentRollingText[2]}
+            <span class="connective">{currentRollingText[2]}</span>
           {/if}
-          {#if rollingText[i][3]}
-            <span style:color={rollingText[i][3]?.color}>{rollingText[i][3]?.text}</span>
+          {#if currentRollingText[3]}
+            <span style:color={currentRollingText[3]?.color}>{currentRollingText[3]?.text}</span>
           {/if}
         </p>
       {/key}