Added lore component

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>

js/utils.js

@@ -90,6 +90,7 @@ function startPlayerBase() {
 		keepGoing: false,
 		hasNaN: false,
 		hideChallenges: false,
+		showStory: true,
 		points: modInfo.initialStartPoints,
 		subtabs: {},
 	}

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', {

style.css

@@ -596,4 +596,11 @@ button > * {
 
 .ghost {
 	visibility: hidden
-}
+}
+
+.story {
+    max-width: 600px;
+    border: solid 5px;
+    padding: 8px;
+    margin-bottom: 8px;
+}