diff --git a/escape/GAMER.ts b/escape/GAMER.ts
index d98f1f8..464c7ef 100644
--- 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: "
\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: "
\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'
};
}
\ No newline at end of file
diff --git a/escape/assets/style.css b/escape/assets/style.css
index b3b18eb..874f8da 100644
--- 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,7 +124,7 @@ 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;
@@ -112,6 +132,7 @@ nav {
#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
index 217e886..46e089d 100644
--- 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
index 982ee5c..084383c 100644
--- 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
index 2706840..d5089a6 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,8 @@
+
+