Merge branch 'pr/10' into dev

docs/layer-features.md

@@ -46,6 +46,8 @@ Key:
 - effectDescription: **optional**, A function that returns a description of this effect.
                      If the text stays constant, it can just be a string.
 
+- lore: **optional**, Displays some text (can use basic HTML) in a box at the top of the layer tab, unless the player has hidden the lore in the settings.
+
 - layerShown(): A function returning a bool which determines if this layer's node should be visible on the tree.
                 It can also return "ghost", which will hide the layer, but its node will still take up space in the tree.
 

index.html

@@ -162,6 +162,7 @@
 			<div v-if="player.tab==layer" v-bind:class="'col right fast tab'"  v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[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="!tmp[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

@@ -92,6 +92,7 @@ function startPlayerBase() {
 		keepGoing: false,
 		hasNaN: false,
 		hideChallenges: false,
+		showStory: true,
 		points: modInfo.initialStartPoints,
 		subtabs: {},
 	}
@@ -123,6 +124,7 @@ function getStartPlayer() {
 			for (item in layers[layer].microtabs)
 			playerdata.subtabs[layer][item] = Object.keys(layers[layer].microtabs[item])[0]
 		}
+		playerdata[layer].loreHidden = false
 	}
 	return playerdata
 }

js/v.js

@@ -69,6 +69,22 @@ function loadVue() {
 		`
 	})
 
+	Vue.component('lore', {
+		props: ['layer', 'data'],
+		template: `
+		<div class="story instant" v-bind:style="{'border-color': tmp[layer].color, 'border-radius': player[layer].loreHidden ? 0 : '8px'}">
+			<button class="story-title" v-bind:style="{'background-color': tmp[layer].color}"
+				v-on:click="player[layer].loreHidden = !player[layer].loreHidden">
+				<span class="story-toggle">{{player[layer].loreHidden ? "+" : "-"}}</span>
+				{{layers[layer].name}}
+			</button>
+			<div v-if="!player[layer].loreHidden" class="story-text">
+				<span v-html="data ? data : layers[layer].lore"></span>
+			</div>
+		</div>
+		`
+	})
+
 
 	// Data = width in px, by default fills the full area
 	Vue.component('h-line', {

style.css

@@ -596,4 +596,42 @@ button > * {
 
 .ghost {
 	visibility: hidden
-}
+}
+
+.story {
+    width: 600px;
+    max-width: 95%;
+    border-bottom: solid 4px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    text-align: left;
+}
+
+.story-title {
+    text-align: left;
+    font-size: 24px;
+    color: black;
+    cursor: pointer;
+    border: none;
+    padding: 2px;
+    border-radius: 8px 8px 0 0;
+}
+
+.story-toggle {
+    border: none;
+    background: black;
+    color: white;
+    font-size: 20px;
+    pointer-events: none;
+    width: 1em;
+    display: inline-block;
+}
+
+.story-text {
+	padding: 2px;
+    border: solid 4px;
+    border-color: inherit;
+    border-radius: inherit;
+    border-top-left-radius: 0;
+    margin-bottom: -2px;
+}