From d2476ebde6c030bdc21e3184851b848523a85b87 Mon Sep 17 00:00:00 2001
From: Acamaeda <acamaeda@gmail.com>
Date: Tue, 29 Sep 2020 18:31:38 -0400
Subject: [PATCH] Added arbitrary HTML and CSS components, and made the main
 resource display a component

---
 index.html   |  5 +----
 js/layers.js |  2 +-
 js/v.js      | 40 +++++++++++++++++++++++++---------------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index f570fc3..933ce7b 100644
--- a/index.html
+++ b/index.html
@@ -124,8 +124,7 @@
 		<div v-for="layer in LAYERS">
 			<div v-if="player.tab==layer && !layers[layer].tabFormat" class="col right">
 				<button class="back" onclick="showTab('tree')">←</button><br><br><br>
-				<span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span>
-				<br><br>
+				<main-display :layer="layer"></main-display>
 				<prestige-button :layer="layer"></prestige-button>
 				<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
 				<br><br>
@@ -139,8 +138,6 @@
 			</div>
 			<div v-if="player.tab==layer && layers[layer].tabFormat" class="col right">
 				<button class="back" onclick="showTab('tree')">←</button><br><br><br>
-				<span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span>
-				<br><br>
 				<div v-for="data in layers[layer].tabFormat">
 					<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
 					<div v-else-if="data.length==3" v-bind:is="data[0]" :layer= "layer" :data= "data[1]" :data2="data[2]"></div>
diff --git a/js/layers.js b/js/layers.js
index ee79290..35e5786 100644
--- a/js/layers.js
+++ b/js/layers.js
@@ -99,7 +99,7 @@ var layers = {
         incr_order: [], // Array of layer names to have their order increased when this one is first unlocked
         
         // Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
-        tabFormat: [["colored-text", function() {return 'I have ' + format(player.points) + ' pointy points!'}, "red"], "blank", ["toggle", ["c", "beep"]], "milestones", "blank", "blank", "upgrades"]
+        tabFormat: ["main-display", ["prestige-button", function(){return "Melt your points into "}], ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}], ["display-text", function() {return 'I have ' + format(player.points) + ' pointy points!'}, {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}], "blank", ["toggle", ["c", "beep"]], "milestones", "blank", "blank", "upgrades"]
     }, 
 
     f: {
diff --git a/js/v.js b/js/v.js
index 394fd66..926f452 100644
--- a/js/v.js
+++ b/js/v.js
@@ -81,31 +81,41 @@ function loadVue() {
 		`
 	})
 
-
+	// data = function to return the text describing the reset before the amount gained (optional)
 	Vue.component('prestige-button', {
-		props: ['layer'],
-		template: `
-		<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">Reset for </span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
-		<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">Reset for </span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">Req: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer]))}} {{ layers[layer].baseResource }}</button>
-		`
-	})
-
-	// data = content
-	Vue.component('display-text', {
 		props: ['layer', 'data'],
 		template: `
-		<span>{{data()}}</span>
+		<span>
+			<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
+			<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">Req: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer]))}} {{ layers[layer].baseResource }}</button>
+		</span>
 		`
 	})
 
-	// text, colorful and with the shadowy effect. You can probably do other custom text effects if you want.
-	Vue.component('colored-text', {
-		props: ['layer', 'data', 'data2'],
+	// Displays the main resource for the layer
+	Vue.component('main-display', {
+		props: ['layer'],
 		template: `
-		<span v-bind:style="{'color': data2, 'text-shadow': '0px 0px 10px' + data2}">{{data()}}</span>
+		<div><span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span><br><br></span>
 		`
 	})
 
+	// data = a function returning the content, data2 = a CSS object with the formatting (optional)
+	Vue.component('display-text', {
+		props: ['layer', 'data' , 'data2'],
+		template: `
+		<span v-bind:style="(data2 ? data2 : {})">{{data()}}</span>
+		`
+	})
+
+	// data = a function returning html content, with some limited functionality
+		Vue.component('raw-html', {
+			props: ['layer', 'data'],
+			template: `
+			<span v-html="data()"></span>
+			`
+		})
+
 	// Blank lines
 	Vue.component('blank', {
 		props: ['layer', 'data'],