color schemes, here's how you know

Subset-UCSD · Feb 14, 2025 · 92acf01 · 92acf01
1 parent 1b7a33a
commit 92acf01
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 10 deletions.
diff --git a/escape/GAMER.ts b/escape/GAMER.ts
@@ -214,6 +214,7 @@ function fieldMan(): StageInfo {
 			"continue north": powell,
 			"return south": northPath,
 		},
+		theme: 'northernProperty'
 	};
 	if (inventory.has(fishItem) && manHungry) {
 		I.description += 'he sees the fish sticking out of your back pocket and shakily holds a finger up to it. he offers to turn it into sushi. ';
@@ -235,9 +236,10 @@ function fieldMan(): StageInfo {
 function powell():StageInfo {
 	let I: StageInfo = {
 		location: inventory.has(mapItem) ? "Private Property - DO NOT TRESPASS!" : "field",
-		description: "<img src='./powel.jpg' alt='man' id='powpow'>\n\na mysterious figure appears from the fog. you try to take a step back, but find yourself only stepping forward. you freeze, too afraid to move in his presence. ",
+		description: "<img src='./assets/powel.jpg' alt='man' id='powpow'>\n\na mysterious figure appears from the fog. you try to take a step back, but find yourself only stepping forward. you freeze, too afraid to move in his presence. ",
 		choices: {
 		},
+		theme: 'northernProperty'
 	};
 	return I
 }
@@ -254,6 +256,7 @@ function rubberRoom1(): StageInfo {
 			location: inventory.has(mapItem) ? "Ravensmith Court" : 'courtyard',
 			description: 'you slip and fall into the fountain. grasping for breath, you frantically try to paddle out, but feel yourself sinking further into the murky water.',
 			choices: { 'fall': rubberRoom2 }
+		, theme: 'fountainRats'
 		};
 	}
 }
@@ -270,6 +273,7 @@ function rubberRoom2(): StageInfo {
 		description:
 			'your vision begins to fade as your lungs give way, water gushing into your body.',
 		choices: { 'fall': rubberRoom3 }
+		, theme: 'fountainRats'
 	};
 }
 
@@ -278,6 +282,7 @@ function rubberRoom3(): StageInfo {
 		location: '???'
 		, description: 'you wake up.'
 		, choices: { 'where am i?': rubberRoom }
+		, theme: 'fountainRats'
 	}
 }
 const MAX_LOOPS_RUBBER = 9
@@ -291,20 +296,23 @@ function rubberRoom(): StageInfo {
 				rubberloops += 1
 				return 'i was crazy once. they locked me in a room.'
 			}
-		}
+		},
+		theme: 'fountainRats'
 	};
 }
 function rubberRoomExit1(): StageInfo {
 	return {
 		location: 'rubber room',
 		description: 'i was crazy once. they locked me in a room.',
-		choices: { 'a rubber room?': rubberRoomExit2 }
+		choices: { 'a rubber room?': rubberRoomExit2 },
+		theme: 'fountainRats'
 	};
 }
 function rubberRoomExit2(): StageInfo {
 	return {
 		location: 'rubber room',
 		description: '..a rubber room with rats, yes. and rats...',
-		choices: { 'make me crazy': BEGINNING }
+		choices: { 'make me crazy': BEGINNING },
+		theme: 'fountainRats'
 	};
 }
diff --git a/escape/assets/style.css b/escape/assets/style.css
@@ -2,17 +2,34 @@
 :root {
 	color-scheme: dark;
 	accent-color: var(--accent);
+	--light-accent: #E17564;
 	--accent: #BE3144;
 	--dark-accent: #872341;
-	--light-accent: #E17564;
 	--blark: #09122C;
 	--space-grey: #2e2e2e;
 	--space-gray: #242424;
 }
 
+.northernProperty {
+	/* https://colorhunt.co/palette/1235243e7b2785a947efe3c2 */
+	--light-accent: #EFE3C2;
+	--accent: #85A947;
+	--dark-accent: #3E7B27;
+	--blark: #123524;
+}
+
+.fountainRats {
+	/* https://colorhunt.co/palette/f7f7f7ffb22c854836000000 */
+	--light-accent: #F7F7F7;
+	--accent: #FFB22C;
+	--dark-accent: #854836;
+	--blark: #000000;
+}
+
 body {
 	color: var(--light-accent);
 	background-color: var(--blark);
+	transition: color .5s, background-color .5s;
 	margin: 0;
 	padding: 0;
 	font-family: Georgia, Garamond, 'Times New Roman', Times, serif;
@@ -23,6 +40,7 @@ body {
 	margin: 1in auto;
 	padding: 2em;
 	background-color: var(--dark-accent);
+	transition:  background-color .5s;
 	border-radius: 0.5em;
 	resize: both;
 }
@@ -36,6 +54,7 @@ a {
 
 nav a {
 	color: var(--light-accent);
+	transition:  color .5s;
 
 }
 
@@ -74,6 +93,7 @@ nav {
 	margin-top: -60px;
 	margin-bottom: 40px;
 	color: var(--dark-accent);
+	transition:  color .5s;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -104,14 +124,15 @@ nav {
 	width: 100%;
 	padding: 10px;
 	box-sizing: border-box;
-	transition: background-color .2s;
+	transition: background-color .2s, color .2s;
 	animation: var(--type-anim);
 	pointer-events: none;
 	opacity: 0;
 }
 
 #choices button:hover {
 	background-color: var(--light-accent);
+	color: var(--blark)
 }
 
 p {
@@ -154,6 +175,7 @@ html:has(#powpow) {
 	top: 100%;
 	background-color: var(--light-accent);
 	color: var(--blark);
+	transition: color .5s, background-color .5s;
 	padding: 5px;
 	/* min-width: 100px; */
 	/* max-width: 400px; */

diff --git a/escape/renderer.ts b/escape/renderer.ts
@@ -39,8 +39,9 @@ function renderInventory() {
 const render = async () => {
 	for (let i = 0; i < 87; i++) current() // call the stage 87 times to make sure it's pure
 	const textSpeed = parseInt(localStorage.getItem(TEXT_SPEED) || "15");
-	const { location, description, choices } = current();
+	const { location, description, choices, theme = '' } = current();
 	document.title = location;
+	document.documentElement.className = theme
 	document.getElementById("location")!.innerHTML = location;
 	let [i, desc] = typeText(description, textSpeed);
 	let choice = showChoices(choices, i, textSpeed);

diff --git a/escape/util/types.ts b/escape/util/types.ts
@@ -10,6 +10,8 @@ export type StageInfo = {
 	 * tab title. Can use HTML.
 	 */
 	location: string
+	/** Class applied to `:root` to change the color scheme */
+	theme?: string
 	/**
 	 * Text shown before the choices. Can use HTML.
 	 */

diff --git a/index.html b/index.html
@@ -8,6 +8,8 @@
     <meta name="theme-color" content="#AAB99A">
     <meta name="twitter:card" content="summary_large_image">
 
+    <meta property="og:author" content="ucsd.edu"/>
+
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type="text/css">
@@ -169,13 +171,15 @@
 </head>
 
 <body>
-    <div style='width: 100%;
+    <div style='width: 100%;box-sizing: border-box;
     display: inline-block;
     padding-top: .625em;
     padding-bottom: .625em;
     background: #f7f8f9;
+    position: relative;z-index: 10;
     border-bottom: 1px solid #b4b5b6;font-family:"Avenir Next", arial, sans-serif;padding-left: 350px'>
-    <div style="font-size: .75rem;
+    <details>
+        <summary  style="font-size: .75rem;
     display: grid;
     grid-template-columns: 22px 1fr;
     grid-column-gap: 10px; color: rgb(16, 24, 32);" aria-label="Official website of the United States government">
@@ -187,9 +191,34 @@
         background-repeat: no-repeat;"></span>
         <div style="display: inline-block;">
             An official website of the
-            <span style="white-space: nowrap;">United States government</span>
+            <span style="white-space: nowrap;">United States government</span>.
+            <span style="
+            cursor: pointer;
+            text-decoration: underline;
+            color: #1a4480;
+            ">Here's how you know.</span>
+        </div>
+    </summary>
+    <div style="display: flex;flex-wrap: wrap; margin-top: 10px; gap: 10px; max-width: 800px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" style="flex: none" viewBox="0 0 64 64"><title>icon-dot-gov</title><path fill="#2378C3" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm10.59 38.858a.857.857 0 0 1 .882.822v1.642H18.886v-1.642a.857.857 0 0 1 .882-.822H42.59zM25.443 27.774v9.829h1.642v-9.83h3.273v9.83H32v-9.83h3.272v9.83h1.643v-9.83h3.272v9.83h.76a.857.857 0 0 1 .882.821v.821h-21.3v-.809a.857.857 0 0 1 .88-.82h.762v-9.842h3.272zm5.736-8.188l12.293 4.915v1.642h-1.63a.857.857 0 0 1-.882.822H21.41a.857.857 0 0 1-.882-.822h-1.642v-1.642l12.293-4.915z"/></svg>
+        <div style="flex: 1 0 0;">
+            <strong>Official websites use .gov, .io, and .mil
+                </strong>
+                <p style="margin: 0;margin-top: 5px;">These websites belong to an official government organization in the United States.
+
+                </p>
         </div>
+        <div style="width: 20px"></div>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" style="flex: none" viewBox="0 0 64 64"><title>icon-https</title><path fill="#719F2A" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm0 18.886a7.245 7.245 0 0 1 7.245 7.245v3.103h.52c.86 0 1.557.698 1.557 1.558v9.322c0 .86-.697 1.558-1.557 1.558h-15.53c-.86 0-1.557-.697-1.557-1.558V32c0-.86.697-1.558 1.557-1.558h.52V27.34A7.245 7.245 0 0 1 32 20.094zm0 3.103a4.142 4.142 0 0 0-4.142 4.142v3.103h8.284V27.34A4.142 4.142 0 0 0 32 23.197z"/></svg>
+        <div style="flex: 1 0 0;">
+            <strong>Secure .gov websites use HTTPS
+
+                </strong>
+                <p style="margin: 0;margin-top: 5px;">A <strong>lock</strong> (<span style="filter: brightness(0%);">🔒</span>) or <strong>https://</strong> means you’ve safely connected to the website. Share sensitive information only on official, secure websites.</p>
+        </div>
+
     </div>
+    </details>
     </div>
 <div id="div">
     <nav>