From 2ad2a6768b1248f6385d2f2aa4088c01f50d8ab4 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 24 Oct 2020 11:40:56 -0500
Subject: [PATCH] Added lore component

---
 index.html  |  2 ++
 js/utils.js |  1 +
 js/v.js     | 10 ++++++++++
 style.css   |  9 ++++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index c524d18..160cd73 100644
--- a/index.html
+++ b/index.html
@@ -91,6 +91,7 @@
 				</tr>
 					<tr>
 						<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ player.hideChallenges?"HIDDEN":"SHOWN" }}</button></td>
+						<td><button class="opt" onclick="toggleOpt('showStory')">Story: {{ player.showStory?"SHOWN":"HIDDEN" }}</button></td>
 					<!--	<td><button class="opt" onclick="toggleOpt('oldStyle')">Style: {{ player.oldStyle?"v1.0":"NEW" }}</button></td>-->
 				</tr> 
 			</table>
@@ -162,6 +163,7 @@
 			<div v-if="player.tab==layer" v-bind:class="'col right fast tab'"  v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (layers[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]">
 				<button class="back" onclick="showTab('tree')">←</button><br><br><br>
 				<div v-if="!layers[layer].tabFormat">
+					<lore v-if="tmp[layer].lore" :layer="layer"></lore>
 					<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
 					<div v-if="tmp[layer].type !== 'none'">
 						<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button>
diff --git a/js/utils.js b/js/utils.js
index 70a59f4..ad7e64b 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -90,6 +90,7 @@ function startPlayerBase() {
 		keepGoing: false,
 		hasNaN: false,
 		hideChallenges: false,
+		showStory: true,
 		points: modInfo.initialStartPoints,
 		subtabs: {},
 	}
diff --git a/js/v.js b/js/v.js
index 7ac6e50..75c5b23 100644
--- a/js/v.js
+++ b/js/v.js
@@ -69,6 +69,16 @@ function loadVue() {
 		`
 	})
 
+	Vue.component('lore', {
+		props: ['layer', 'data'],
+		template: `
+		<div v-if="player.showStory"
+			v-bind:class="{ story: true }"
+			v-html="layers[layer].lore">
+		</div>
+		`
+	})
+
 
 	// Data = width in px, by default fills the full area
 	Vue.component('h-line', {
diff --git a/style.css b/style.css
index f497a2a..44a2b36 100644
--- a/style.css
+++ b/style.css
@@ -596,4 +596,11 @@ button > * {
 
 .ghost {
 	visibility: hidden
-}
\ No newline at end of file
+}
+
+.story {
+    max-width: 600px;
+    border: solid 5px;
+    padding: 8px;
+    margin-bottom: 8px;
+}