Lore has evolved into infoboxes!

demo.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">
+					<infobox v-if="tmp[layer].infoboxes" v-bind:style="tmp[layer].componentStyles['infobox']" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]"></infobox>
 					<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>
@@ -191,8 +192,4 @@
 			</div>
 		</div>
 	</div>
-<<<<<<< HEAD
 </body>
-=======
-</body>
->>>>>>> dev3

index.html

@@ -162,7 +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>
+					<info-box v-if="tmp[layer].infoboxes" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]"></info-box>
 					<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/Demo/demoLayers.js

@@ -41,6 +41,11 @@ addLayer("c", {
             eff.waffleBoost = eff.waffleBoost.times(buyableEffect(this.layer, 11).first)
             return "which are boosting waffles by "+format(eff.waffleBoost)+" and increasing the Ice Cream cap by "+format(eff.icecreamCap)
         },
+        infoboxes:{
+            coolInfo: {
+                text: "momo"
+            }
+        },
         milestones: {
             0: {requirementDescription: "3 Lollipops",
                 done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
@@ -305,6 +310,7 @@ addLayer("c", {
             },
             jail: {
                 content: [
+                    ["infobox", "coolInfo"],
                     ["bar", "longBoi"], "blank",
                     ["row", [
                         ["column", [

js/layerSupport.js

@@ -109,7 +109,15 @@ function updateLayers(){
                 layers[layer].bars[thing].layer = layer
                 if (layers[layer].bars[thing].unlocked === undefined)
                     layers[layer].bars[thing].unlocked = true
+            }  
+        }
 
+        if (layers[layer].infoboxes){
+            for (thing in layers[layer].infoboxes){
+                layers[layer].infoboxes[thing].id = thing
+                layers[layer].infoboxes[thing].layer = layer
+                if (layers[layer].infoboxes[thing].unlocked === undefined)
+                    layers[layer].infoboxes[thing].unlocked = true
             }  
         }
 

js/utils.js

@@ -106,6 +106,8 @@ function getStartPlayer() {
 		for (thing in extradata)
 			playerdata[thing] = extradata[thing]
 	}
+
+	playerdata.infoboxes = {}
 	for (layer in layers){
 		playerdata[layer] = layers[layer].startData()
 		playerdata[layer].buyables = getStartBuyables(layer)
@@ -124,7 +126,11 @@ function getStartPlayer() {
 			for (item in layers[layer].microtabs)
 			playerdata.subtabs[layer][item] = Object.keys(layers[layer].microtabs[item])[0]
 		}
-		playerdata[layer].loreHidden = false
+		if (layers[layer].infoboxes) {
+			if (playerdata.infoboxes[layer] == undefined) playerdata.infoboxes[layer] = {}
+			for (item in layers[layer].infoboxes)
+				playerdata.infoboxes[layer][item] = false
+		}
 	}
 	return playerdata
 }

js/v.js

@@ -69,17 +69,17 @@ function loadVue() {
 		`
 	})
 
-	Vue.component('lore', {
+	Vue.component('infobox', {
 		props: ['layer', 'data'],
 		template: `
-		<div class="story instant" v-bind:style="{'border-color': tmp[layer].color, 'border-radius': player[layer].loreHidden ? 0 : '8px'}">
+		<div class="story instant" v-if="tmp[layer].infoboxes && tmp[layer].infoboxes[data]!== undefined && tmp[layer].infoboxes[data].unlocked" v-bind:style="{'border-color': tmp[layer].color, 'border-radius': player.infoboxes[layer][data] ? 0 : '8px'}">
 			<button class="story-title" v-bind:style="{'background-color': tmp[layer].color}"
-				v-on:click="player[layer].loreHidden = !player[layer].loreHidden">
+				v-on:click="player.infoboxes[layer][data] = !player.infoboxes[layer][data]">
-				<span class="story-toggle">{{player[layer].loreHidden ? "+" : "-"}}</span>
+				<span class="story-toggle">{{player.infoboxes[layer][data] ? "+" : "-"}}</span>
-				{{layers[layer].name}}
+				<span v-html="tmp[layer].infoboxes[data].title ? tmp[layer].infoboxes[data].title : (tmp[layer].name)"></span>
 			</button>
-			<div v-if="!player[layer].loreHidden" class="story-text">
+			<div v-if="!player.infoboxes[layer][data]" class="story-text">
-				<span v-html="data ? data : layers[layer].lore"></span>
+				<span v-html="tmp[layer].infoboxes[data].text ? tmp[layer].infoboxes[data].text : 'Blah'"></span>
 			</div>
 		</div>
 		`