Setup base for chapter 2 mechanics

index.html

@@ -10,6 +10,7 @@
 	<script type="text/javascript" src="js/technical/layerSupport.js"></script>
 	<script type="text/javascript" src="js/colors.js"></script>
 	<script type="text/javascript" src="js/Layers/flowers.js"></script>
+	<script type="text/javascript" src="js/Layers/study.js"></script>
 	<script type="text/javascript" src="js/tree.js"></script>
 	<script type="text/javascript" src="js/mod.js"></script>
 	<script type="text/javascript" src="js/technical/temp.js"></script>

js/Layers/flowers.js

@@ -4,19 +4,23 @@ addLayer("flowers", {
 	image: "images/white-orchid-1974498_1920.jpg",
 	color: flowersColor,
 	jobName: "Collecting flowers",
+	showJobDelay: 0,
 	layerShown: true,
 	startData() {
 		return {
 			unlocked: true,
 			points: new Decimal(1),
-			total: new Decimal(1),
-			xp: new Decimal(0),
+			xp: new Decimal(1),
 			lastLevel: new Decimal(1),
-			realTime: 0
+			realTime: 0,
+			timeLoopActive: false
 		};
 	},
 	getResetGain() {
-		if (player.tab !== this.layer) {
+		if (!tmp[this.layer].layerShown || (player.tab !== this.layer && !player[this.layer].timeLoopActive)) {
+			return new Decimal(0);
+		}
+		if (player.chapter === 1 && hasMilestone("flowers", "4")) {
 			return new Decimal(0);
 		}
 		let gain = new Decimal(1);
@@ -58,6 +62,9 @@ addLayer("flowers", {
 			if (player.flowers.xp.lte(1e9)) {
 				return "There are very few flowers left";
 			}
+			if (player.flowers.xp.gte(1e9) && player.chapter === 1) {
+				return "The field is barren";
+			}
 			return "";
 		}],
 		"blank",
@@ -79,24 +86,22 @@ addLayer("flowers", {
 			}
 			return "";
 		}],
+		() => player.chapter === 1 && hasMilestone("flowers", "4") ? ["upgrade", "nextChapter"] : null,
 		"blank",
 		"buyables",
 		"blank",
-		"upgrades"
+		"upgrades",
+		"blank",
+		["milestones-filtered", [4, 5]]
 	],
 	update(diff) {
-		if (player.tab === this.layer) {
+		if (player.tab === this.layer || player[this.layer].timeLoopActive) {
 			player[this.layer].realTime += diff;
 		}
 		let jobLevel = new Decimal(getJobLevel(this.layer));
 		if (jobLevel.neq(player[this.layer].lastLevel)) {
-			doPopup("none", `Level ${jobLevel}`, "Level Up!", 3, layers[this.layer].color);
+			doPopup("none", `Level ${formatWhole(jobLevel)}`, "Level Up!", 3, layers[this.layer].color);
 			player[this.layer].lastLevel = jobLevel;
-			if (jobLevel.eq(10) && player.chapter === 1) {
-				player.chapter = 2;
-				player.autosave = false;
-				save();
-			}
 		}
 	},
 	onAddPoints(gain) {
@@ -125,8 +130,18 @@ addLayer("flowers", {
 			done: () => player.flowers.xp.gte(1e7)
 		},
 		4: {
+			title: "The story was so fantastic and incredible,",
 			requirementDescription: "Level 10",
-			done: () => player.flowers.xp.gte(1e9)
+			"effectDescription": "Unlock study flowers job",
+			done: () => player.flowers.xp.gte(1e9),
+			unlocked: () => player.chapter > 1
+		},
+		5: {
+			title: "the telling so credible and sober",
+			requirementDescription: "Level 25",
+			"effectDescription": "Unlock ???",
+			done: () => player.flowers.xp.gte(1e24),
+			unlocked: () => player.chapter > 1
 		}
 	},
 	buyables: {
@@ -138,7 +153,12 @@ addLayer("flowers", {
 				return `Each casting of this spell increases its cost, and makes collecting flowers 50% faster.<br/><br/>Currently: x${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
 			},
 			cost(x) {
-				return new Decimal(1000).times(new Decimal(3).pow(x || getBuyableAmount(this.layer, this.id)));
+				const amount = x || getBuyableAmount(this.layer, this.id);
+				if (amount.gte(10)) {
+					// goes up 10x instead of 3x after 10 levels
+					return new Decimal(1000).times(new Decimal(3).pow(10)).add(Decimal.pow(10, amount.sub(10)));
+				}
+				return new Decimal(1000).times(new Decimal(3).pow(amount));
 			},
 			effect() {
 				return new Decimal(1.5).pow(getBuyableAmount(this.layer, this.id));
@@ -175,13 +195,13 @@ addLayer("flowers", {
 		13: {
 			title: "And there was Weena dancing at my side!<br/>",
 			display() {
-				return `Each casting of this spell increases its cost, and raises flower collection rate to an additive +.05 power.<br/><br/>Currently: ^${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
+				return `Each casting of this spell increases its cost, and raises flower collection rate to an additive +.05 power (softcapped immediately).<br/><br/>Currently: ^${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
 			},
 			cost(x) {
 				return new Decimal(250000).times(new Decimal(10).pow(x || getBuyableAmount(this.layer, this.id)));
 			},
 			effect() {
-				return new Decimal(.05).times(getBuyableAmount(this.layer, this.id)).add(1);
+				return new Decimal(.05).times(getBuyableAmount(this.layer, this.id).pow(.6)).add(1);
 			},
 			canAfford() {
 				return player[this.layer].points.gte(this.cost());
@@ -196,6 +216,16 @@ addLayer("flowers", {
 	upgrades: {
 		rows: 1,
 		cols: 4,
+		nextChapter: {
+			title: "And those that carry us forward, are dreams.<br/>",
+			description: "Close the time loop.",
+			unlocked: true,
+			onPurchase() {
+				showTab("none");
+				player.chapter = 2;
+				player.timeSlots = new Decimal(1);
+			}
+		},
 		11: {
 			title: "A chain of beautiful flowers<br>",
 			description: "Increase collection speed based on how many flowers you have<br>",
@@ -240,6 +270,8 @@ addLayer("flowers", {
 });
 
 // Names to use
+// - https://www.shmoop.com/study-guides/literature/time-machine-hg-wells/quotes
+//
 // - delicate flowers
 // - waste garden
 // - subjugation of nature
@@ -252,6 +284,3 @@ addLayer("flowers", {
 //
 // - Time is only a kind of Space
 // - Futility of all ambition
-//
-// - The story was so fantastic and incredible
-// - The telling so credible and sober

js/Layers/study.js

@@ -0,0 +1,239 @@
+addLayer("study", {
+	name: "study",
+	resource: "properties studied",
+	image: "images/orchid_sketch.jpg",
+	color: studyColor,
+	jobName: "Study flowers",
+	showJobDelay: 0.25,
+	layerShown: () => player.chapter > 1 && hasMilestone("flowers", 4),
+	startData() {
+		return {
+			unlocked: true,
+			points: new Decimal(0),
+			total: new Decimal(0),
+			xp: new Decimal(0),
+			lastLevel: new Decimal(0),
+			realTime: 0,
+			timeLoopActive: false
+		};
+	},
+	getResetGain() {
+		if (!tmp[this.layer].layerShown || (player.tab !== this.layer && !player[this.layer].timeLoopActive)) {
+			return new Decimal(0);
+		}
+		let gain = new Decimal(1);
+		return gain;
+	},
+	passiveGeneration: new Decimal(1),
+	tabFormat: [
+		"main-display",
+		["display-text", () => `You are collecting <span style="color: ${flowersColor}; text-shadow: ${flowersColor} 0 0 10px">${format(tmp.flowers.getResetGain)}</span> flowers per second`],
+		"blank",
+		["display-text", () => {
+			if (player.flowers.xp.lte(1e3)) {
+				return "There's a very large field of flowers";
+			}
+			if (player.flowers.xp.lte(1e5)) {
+				return "A small patch is missing from the field of flowers";
+			}
+			if (player.flowers.xp.lte(1e7)) {
+				return "A medium patch is missing from the field of flowers";
+			}
+			if (player.flowers.xp.lte(4e8)) {
+				return "A large patch is missing from the field of flowers";
+			}
+			if (player.flowers.xp.lte(9e8)) {
+				return "The field of flowers looks about half way picked";
+			}
+			if (player.flowers.xp.lte(1e9)) {
+				return "There are very few flowers left";
+			}
+			if (player.flowers.xp.gte(1e9) && player.chapter === 1) {
+				return "The field is barren";
+			}
+			return "";
+		}],
+		"blank",
+		["display-text", () => {
+			if (!hasMilestone("flowers", 0)) {
+				return "Discover new ways to harness the flower's power at level 2";
+			}
+			if (!hasMilestone("flowers", 1)) {
+				return "Discover new ways to harness the flower's power at level 4";
+			}
+			if (!hasMilestone("flowers", 2)) {
+				return "Discover new ways to harness the flower's power at level 6";
+			}
+			if (!hasMilestone("flowers", 3)) {
+				return "Discover new ways to harness the flower's power at level 8";
+			}
+			if (!hasMilestone("flowers", 4)) {
+				return "Discover new ways to harness the flower's power at level 10";
+			}
+			return "";
+		}],
+		() => player.chapter === 1 && hasMilestone("flowers", "4") ? ["upgrade", "nextChapter"] : null,
+		"blank",
+		"buyables",
+		"blank",
+		"upgrades"
+	],
+	update(diff) {
+		if (player.tab === this.layer || player[this.layer].timeLoopActive) {
+			player[this.layer].realTime += diff;
+		}
+		let jobLevel = new Decimal(getJobLevel(this.layer));
+		if (jobLevel.neq(player[this.layer].lastLevel)) {
+			doPopup("none", `Level ${jobLevel}`, "Level Up!", 3, layers[this.layer].color);
+			player[this.layer].lastLevel = jobLevel;
+		}
+	},
+	onAddPoints(gain) {
+		let xpGain = gain;
+		if (hasUpgrade(this.layer, 13)) {
+			xpGain = xpGain.times(upgradeEffect(this.layer, 13));
+		}
+		xpGain = xpGain.times(buyableEffect("flowers", 12));
+		player[this.layer].xp = player[this.layer].xp.add(xpGain);
+	},
+	milestones: {
+		0: {
+			requirementDescription: "Level 2",
+			done: () => player.flowers.xp.gte(10)
+		},
+		1: {
+			requirementDescription: "Level 4",
+			done: () => player.flowers.xp.gte(1e3)
+		},
+		2: {
+			requirementDescription: "Level 6",
+			done: () => player.flowers.xp.gte(1e5)
+		},
+		3: {
+			requirementDescription: "Level 8",
+			done: () => player.flowers.xp.gte(1e7)
+		},
+		4: {
+			requirementDescription: "Level 10",
+			done: () => player.flowers.xp.gte(1e9)
+		}
+	},
+	buyables: {
+		rows: 1,
+		cols: 3,
+		11: {
+			title: "I tried to look at the thing in a scientific spirit<br/>",
+			display() {
+				return `Each casting of this spell increases its cost, and makes collecting flowers 50% faster.<br/><br/>Currently: x${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
+			},
+			cost(x) {
+				return new Decimal(1000).times(new Decimal(3).pow(x || getBuyableAmount(this.layer, this.id)));
+			},
+			effect() {
+				return new Decimal(1.5).pow(getBuyableAmount(this.layer, this.id));
+			},
+			canAfford() {
+				return player[this.layer].points.gte(this.cost());
+			},
+			buy() {
+				player[this.layer].points = player[this.layer].points.sub(this.cost());
+				setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1));
+			},
+			unlocked: () => hasMilestone("flowers", 1)
+		},
+		12: {
+			title: "Why should I trouble myself?<br/>",
+			display() {
+				return `Each casting of this spell increases its cost, and doubles experience gain.<br/><br/>Currently: x${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
+			},
+			cost(x) {
+				return new Decimal(10000).times(new Decimal(4).pow(x || getBuyableAmount(this.layer, this.id)));
+			},
+			effect() {
+				return new Decimal(2).pow(getBuyableAmount(this.layer, this.id));
+			},
+			canAfford() {
+				return player[this.layer].points.gte(this.cost());
+			},
+			buy() {
+				player[this.layer].points = player[this.layer].points.sub(this.cost());
+				setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1));
+			},
+			unlocked: () => hasMilestone("flowers", 2)
+		},
+		13: {
+			title: "And there was Weena dancing at my side!<br/>",
+			display() {
+				return `Each casting of this spell increases its cost, and raises flower collection rate to an additive +.05 power.<br/><br/>Currently: ^${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
+			},
+			cost(x) {
+				return new Decimal(250000).times(new Decimal(10).pow(x || getBuyableAmount(this.layer, this.id)));
+			},
+			effect() {
+				return new Decimal(.05).times(getBuyableAmount(this.layer, this.id)).add(1);
+			},
+			canAfford() {
+				return player[this.layer].points.gte(this.cost());
+			},
+			buy() {
+				player[this.layer].points = player[this.layer].points.sub(this.cost());
+				setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1));
+			},
+			unlocked: () => hasMilestone("flowers", 3)
+		}
+	},
+	upgrades: {
+		rows: 1,
+		cols: 4,
+		nextChapter: {
+			title: "And those that carry us forward, are dreams.<br/>",
+			description: "Close the time loop.",
+			unlocked: true,
+			onPurchase() {
+				showTab("none");
+				player.chapter = 2;
+				player.timeSlots = new Decimal(1);
+			}
+		},
+		11: {
+			title: "A chain of beautiful flowers<br>",
+			description: "Increase collection speed based on how many flowers you have<br>",
+			cost: new Decimal(10),
+			effect: () => player.flowers.points.clampMin(1).pow(0.1).add(1),
+			unlocked: () => hasMilestone("flowers", 0),
+			effectDisplay() {
+				return `x${format(this.effect())}`;
+			}
+		},
+		12: {
+			title: "A big garland of flowers<br>",
+			description: "Increase collection speed based on your collecting flowers level",
+			cost: new Decimal(100),
+			effect: () => new Decimal(getJobLevel("flowers")).pow(2).div(10).add(1),
+			unlocked: () => hasMilestone("flowers", 0),
+			effectDisplay() {
+				return `x${format(this.effect())}`;
+			}
+		},
+		13: {
+			title: "Weena's Gift<br>",
+			description: "Increase experience gain based on real time spent collecting flowers",
+			cost: new Decimal(250),
+			effect: () => new Decimal(player.flowers.realTime).div(100).add(1),
+			unlocked: () => hasMilestone("flowers", 0),
+			effectDisplay() {
+				return `x${format(this.effect())}`;
+			}
+		},
+		14: {
+			title: "White Sphinx<br>",
+			description: "Increase flower collection based on the number of upgrades bought",
+			cost: new Decimal(500),
+			effect: () => Decimal.pow(1.5, player.flowers.upgrades.length),
+			unlocked: () => hasMilestone("flowers", 0),
+			effectDisplay() {
+				return `x${format(this.effect())}`;
+			}
+		}
+	}
+});

js/colors.js

@@ -1,5 +1,6 @@
 // Colors
-const flowersColor = "#F1EBD9";
 const logoBackgroundColor = "#1a75bb";
 const logoHighlightColor = "#000080";
 const backgroundColor = "#2a323d";
+const flowersColor = "#F1EBD9";
+const studyColor = "#654321";

js/components.js

@@ -168,7 +168,7 @@ function loadVue() {
 				<span v-if= "tmp[layer].upgrades[data].title"><h3 v-html="tmp[layer].upgrades[data].title"></h3><br></span>
 				<span v-html="tmp[layer].upgrades[data].description"></span>
 				<span v-if="tmp[layer].upgrades[data].effectDisplay"><br>Currently: <span v-html="tmp[layer].upgrades[data].effectDisplay"></span></span>
-				<br><br>Cost: {{ formatWhole(tmp[layer].upgrades[data].cost) }} {{(tmp[layer].upgrades[data].currencyDisplayName ? tmp[layer].upgrades[data].currencyDisplayName : tmp[layer].resource)}}
+				<span v-if="tmp[layer].upgrades[data].cost"><br><br>Cost: {{ formatWhole(tmp[layer].upgrades[data].cost) }} {{(tmp[layer].upgrades[data].currencyDisplayName ? tmp[layer].upgrades[data].currencyDisplayName : tmp[layer].resource)}}</span>
 			</span>
 			</button>
 		`
@@ -188,12 +188,27 @@ function loadVue() {
 		`
 	});
 
+	Vue.component("milestones-filtered", {
+		props: ["layer", "data"],
+		template: `
+		<div v-if="tmp[layer].milestones">
+			<table>
+				<tr v-for="id in data"><div v-if="tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked && milestoneShown(layer, id)"
+					<milestone :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles.milestone"></milestone>
+				</tr></div>
+			</table>
+			<br>
+		</div>
+		`
+	});
+
 	// data = id
 	Vue.component("milestone", {
 		props: ["layer", "data"],
 		template: `
 		<td v-if="tmp[layer].milestones && tmp[layer].milestones[data]!== undefined && milestoneShown(layer, data)" v-bind:style="[(!tmp[layer].milestones[data].unlocked) ? {'visibility': 'hidden'} : {}, tmp[layer].milestones[data].style]" v-bind:class="{milestone: !hasMilestone(layer, data), milestoneDone: hasMilestone(layer, data)}">
-			<h3 v-html="tmp[layer].milestones[data].requirementDescription"></h3><br>
+			<h3 v-html="tmp[layer].milestones[data].title"></h3><br>
+			<b v-html="tmp[layer].milestones[data].requirementDescription"></b><br>
 			<span v-html="tmp[layer].milestones[data].effectDescription"></span><br>
 		<span v-if="(tmp[layer].milestones[data].toggles)&&(hasMilestone(layer, data))" v-for="toggle in tmp[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle" v-bind:style="tmp[layer].componentStyles.toggle"></toggle>&nbsp;</span></td></tr>
 		`
@@ -345,7 +360,7 @@ function loadVue() {
 	Vue.component("bar", {
 		props: ["layer", "data"],
 		template: `
-		<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].dims, {'display': 'table', 'borderRadius': '10px', 'boxShadow': '0 0 10px 2px var(--shadowColor)'}]">
+		<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].dims, {'display': 'table', 'borderRadius': '10px', 'boxShadow': '0 0 10px 2px var(--shadowColor), inset 0 0 10px 4px var(--innerShadowColor)'}]">
 			<div class = "overlayTextContainer barBorder" v-bind:style="[tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
 				<span class = "overlayText" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v-html="tmp[layer].bars[data].display"></span>
 			</div>

js/mod.js

@@ -12,14 +12,13 @@ let modInfo = {
 
 // Set your version in num and name
 let VERSION = {
-	num: "0.0",
-	name: "Literally nothing",
+	num: "0.1",
+	name: "Chapter 2",
 };
 
 let changelog = `<h1>Changelog:</h1><br>
 	<h3>v0.0</h3><br>
-		- Added things.<br>
-		- Added stuff.`;
+		- Chapter 1 Demo`;
 
 let winText = "Congratulations! You have reached the end and beaten this game, but for now...";
 
@@ -50,7 +49,9 @@ function getPointGen() {
 function addedPlayerData() {
 	return {
 		hqTree: true,
-		chapter: 1
+		chapter: 1,
+		timeSlots: new Decimal(0),
+		usedTimeSlots: new Decimal(0)
 	};
 }
 
@@ -75,4 +76,8 @@ function maxTickLength() {
 // Use this if you need to undo inflation from an older version. If the version is older than the version that fixed the issue,
 // you can cap their current resources with this.
 function fixOldSave(oldVersion){
+	if (oldVersion === "0.0") {
+		player.chapter = 1;
+	}
+	console.log(oldVersion, player.chapter);
 }

js/tree.js

@@ -7,17 +7,24 @@ var layoutInfo = {
 Vue.component("job", {
 	props: ["layer", "data"],
 	template: `
-	<span class="upgRow">
+	<span class="upgRow" v-bind:style="{ opacity: 0, animation: 'showJob .5s ' + layers[data].showJobDelay + 's forwards', marginBottom: '20px' }" v-if="tmp[data].layerShown">
 		<tree-node :layer='data' :abb='tmp[data].symbol' style="background-size: cover; background-position: center;" v-bind:class="data === 'flowers' && player[data].xp.lte(1) && player[data].resetTime > 20 ? 'tutorial' : ''"></tree-node>
-		<div class="job-details" v-bind:style="[player.tab === data ? { '--shadowColor': layers[data].color } : {}, {'textAlign': 'left'}]">
+		<div class="job-details" v-bind:style="[player.tab === data ? { '--shadowColor': layers[data].color } : {}, player[data].timeLoopActive ? { '--innerShadowColor': layers[data].color } : {}, {'textAlign': 'left'}]">
 			<h2>{{layers[data].jobName}}</h2>
 			<span>Lv. {{formatWhole(getJobLevel(data))}}</span>
 			<bar :layer='layer' :data='data' style="margin-top: 5px;"></bar>
+			<span v-if="player.chapter > 1">
+				Time Loop
+				<button class="smallUpg can" v-bind:style="{'background-color': tmp[data].color,margin: '10px'}" v-on:click="toggleTimeLoop(data)">{{player[data].timeLoopActive?"ON":"OFF"}}</button>
+			</span>
 		</div>
 	</span>`
 });
 
 function getJobLevel(job) {
+	if (player[job].xp.eq(0)) {
+		return new Decimal(0);
+	}
 	return player[job].xp.clampMin(1).log10().floor().add(1);
 }
 
@@ -28,6 +35,9 @@ function getJobProgressBar(job) {
 		height: 20,
 		progress: () => {
 			let level = getJobLevel(job);
+			if (level.eq(0)) {
+				return 0;
+			}
 			let previousLevelRequirement = level.sub(1).pow10();
 			let progress = player[job].xp.clampMin(1).sub(previousLevelRequirement).div(level.pow10().sub(previousLevelRequirement));
 			return progress;
@@ -38,26 +48,43 @@ function getJobProgressBar(job) {
 	};
 }
 
+function toggleTimeLoop(layer) {
+	if (player[layer].timeLoopActive) {
+		player[layer].timeLoopActive = false;
+		player.usedTimeSlots = player.usedTimeSlots.sub(1).clampMin(0);
+	} else if (player.timeSlots.sub(player.usedTimeSlots).gte(1)) {
+		player[layer].timeLoopActive = true;
+		player.usedTimeSlots = player.usedTimeSlots.add(1);
+	}
+}
+
 addLayer("tree-tab", {
 	bars: {
-		flowers: getJobProgressBar("flowers")
+		flowers: getJobProgressBar("flowers"),
+		study: getJobProgressBar("study")
 	},
-	tabFormat: () => player.chapter === 1 ?
+	tabFormat: () => player.chapter < 3 ?
 		[
 			// TODO babble buds stage?
 			["infobox", "genesis", { "--lore-color": "white" }],
+			player.chapter === 2 ? ["infobox", "discovery", { "--lore-color": "orange" }] : null,
 			"blank",
 			"blank",
-			["job", "flowers"]
+			player.chapter === 2 ? ["display-text", `You have <span style="color: white; text-shadow: white 0 0 10px">${formatWhole(player.timeSlots.sub(player.usedTimeSlots))}</span> free time slots`] : null,
+			player.chapter === 2 ? "blank" : null,
+			["job", "flowers"],
+			["job", "study"]
 		] :
 		{
 			"Main": {
 				content: [
 					// TODO babble buds stage?
 					["infobox", "genesis", { "--lore-color": "white" }],
+					["infobox", "discovery", { "--lore-color": "orange" }],
 					"blank",
 					"blank",
-					["job", "flowers"]
+					["job", "flowers"],
+					["job", "study"]
 				]
 			}
 		},
@@ -65,6 +92,10 @@ addLayer("tree-tab", {
 		genesis: {
 			title: "Chapter 1: Genesis",
 			body: `[WIP, needs feedback from Hudson]<br/>Finally, I've found the <span style="color: ${flowersColor}">flowers</span>! The legends were true, I was able to confirm they're the real deal by reverting some scratches I received on the trek here.<br/><br/>I just can't believe I actually found them! I'm going to get started collecting them right away. This field is plenty large enough, so I can start harnessing the <span style="color: ${flowersColor}">flowers</span> to speed up the harvesting process.`
+		},
+		discovery: {
+			title: "Chapter 2: Discovery",
+			body: `[WIP, needs feedback from Hudson]<br/>The field is completely barren... Fortunately, I've collected enough <span style="color: ${flowersColor}">flowers</span> that I can finally create a time loop. Not only will this allow me to revert the field whenever it empties, it'll now open me up to close myself in the loop, effectively allowing it to run while the real me continues with my next task: <span style="color: ${studyColor}">Studying</span> the <span style="color: ${flowersColor}">flowers</span>, and eventually experimenting with how to further take advantage of the time altering properties of these <span style="color: ${flowersColor}">flowers</span>.<br/><br/>It'll be prudent of me not to forget about collecting <span style="color: ${flowersColor}">flowers</span>, as I'll still need them as I move forward.`
 		}
 	}
 });

style.css

@@ -19,6 +19,8 @@ body {
 	--background: #0f0f0f;
 	--color: #dfdfdf;
 	--points: #ffffff;
+	--shadowColor: transparent;
+	--innerShadowColor: transparent;
 }
 
 html, body {
@@ -569,7 +571,6 @@ button > * {
     max-width: 95%;
     border-bottom: solid 4px;
     border-radius: 8px;
-    margin-bottom: 8px;
     text-align: left;
     color: var(--lore-color);
 }
@@ -717,6 +718,18 @@ button > * {
 	}
 }
 
+@keyframes showJob {
+	0% {
+		opacity: 0;
+		transform: translateY(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
 @media only screen and (max-width: 720px) {
 	.col.right {
 		min-width: 100%;