From 8bcc09219a79ff9b4d99b0c3aa8cfcf6a99473af Mon Sep 17 00:00:00 2001
From: Acamaeda <acamaeda@gmail.com>
Date: Sun, 27 Sep 2020 21:00:10 -0400
Subject: [PATCH] Added the ability to customize the tab layout and add your
 own components

---
 index.html      | 47 +++++++++-----------------
 js/layers.js    | 26 ++-------------
 js/v.js         | 87 +++++++++++++++++++++++++++++++++++++++++++++++++
 sampleLayers.js | 29 ++++++++++-------
 4 files changed, 124 insertions(+), 65 deletions(-)

diff --git a/index.html b/index.html
index 77a99c0..f570fc3 100644
--- a/index.html
+++ b/index.html
@@ -122,47 +122,32 @@
 			<canvas id="treeCanvas" class="canvas"></canvas>
 		</div>
 		<div v-for="layer in LAYERS">
-			<div v-if="player.tab==layer" class="col right">
+			<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>
-				<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>
+				<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>
 				<span v-if="player[layer].best != undefined">Your best {{layers[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
 				<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{layers[layer].resource}}<br></span>
-				<div v-if="layers[layer].milestones">
-					<table>
-						<tr v-for="id in Object.keys(layers[layer].milestones)">
-							<div><td v-if="milestoneShown(layer, id)" v-bind:class="{milestone: !player[layer].milestones.includes(id), milestoneDone: player[layer].milestones.includes(id)}"><h3>{{layers[layer].milestones[id].requirementDesc}}</h3><br>{{layers[layer].milestones[id].effectDesc}}<br><span v-if="(layers[layer].milestones[id].toggles)&&(player[layer].milestones.includes(id))" v-for="toggle in layers[layer].milestones[id].toggles"><button class="smallUpg can" v-bind:style="{'background-color': layers[toggle[0]].color}" v-on:click="toggleAuto(toggle)">{{player[toggle[0]][toggle[1]]?"ON":"OFF"}}</button>&nbsp;</span></td></tr>
-						</tr>
-					</table>
-				</div>
+				<milestones :layer="layer"></milestones>
 				<br><br>
-				<div v-if="layers[layer].upgrades != undefined" class="upgTable">
-					<div v-for="row in layers[layer].upgrades.rows" class="upgRow">
-						<div v-for="col in layers[layer].upgrades.cols" class="upgAlign">
-							<button v-if="layers[layer].upgrades[row*10+col].unl()" v-on:click="buyUpg(layer, row*10+col)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(row*10+col), locked: (!(canAffordUpg(layer, row*10+col))&&!player[layer].upgrades.includes(row*10+col)), can: (canAffordUpg(layer, row*10+col)&&!player[layer].upgrades.includes(row*10+col))}" v-bind:style="{'background-color': layers[layer].color}">{{ layers[layer].upgrades[row*10+col].desc }}<span v-if="layers[layer].upgrades[row*10+col].effect"><br>Currently: {{(layers[layer].upgrades[row*10+col].effDisp) ? (layers[layer].upgrades[row*10+col].effDisp(layers[layer].upgrades[row*10+col].effect())) : format(layers[layer].upgrades[row*10+col].effect())}}</span><br><br>Cost: {{ formatWhole(layers[layer].upgrades[row*10+col].cost) }} {{(layers[layer].upgrades[row*10+col].currencyDisplayName ? layers[layer].upgrades[row*10+col].currencyDisplayName : layers[layer].resource)}}</button>
-						</div>
-					</div>
-				</div>
-				<div v-if="layers[layer].challs" class="upgTable">
-					<div v-for="row in layers[layer].challs.rows" class="upgRow">
-						<div v-for="col in layers[layer].challs.cols">
-							<div v-if="layers[layer].challs[row*10+col].unl()" v-bind:class="{hChall: true, done: player[layer].challs.includes(row*10+col), canComplete: tmp.challActive[layer][row*10+col]&&!player[layer].challs.includes(row*10+col)&&canCompleteChall(layer, row*10+col)}">
-								<br><h3>{{layers[layer].challs[row*10+col].name}}</h3><br><br>
-								<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="startChall(layer, row*10+col)">{{player[layer].active==(row*10+col)?(canCompleteChall(layer, row*10+col)?"Finish":"Exit Early"):(player[layer].challs.includes(row*10+col)?"Completed":"Start")}}</button><br><br>
-								{{layers[layer].challs[row*10+col].desc}}<br>
-								Goal: {{format(layers[layer].challs[row*10+col].goal)}} {{layers[layer].challs[row*10+col].currencyDisplayName ? layers[layer].challs[row*10+col].currencyDisplayName : "points"}}<br>
-								Reward: {{layers[layer].challs[row*10+col].reward}}<br>
-								<span v-if="layers[layer].challs[row*10+col].effDisp!==undefined">Currently: {{(layers[layer].challs[row*10+col].effDisp) ? (layers[layer].challs[row*10+col].effDisp(layers[layer].challs[row*10+col].effect())) : format(layers[layer].challs[row*10+col].effect())}}</span>
-							</div>
-						</div>
-					</div>
-				</div>
+				<upgrades :layer="layer"></upgrades>
+				<challs :layer="layer"></challs>
 				<br><br>
 			</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>
+					<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
+
+				</div>
+			</div>
 		</div>
 	</div>
 	<script>
diff --git a/js/layers.js b/js/layers.js
index d7c660e..ee79290 100644
--- a/js/layers.js
+++ b/js/layers.js
@@ -7,7 +7,6 @@ var layers = {
             total: new Decimal(0),
             upgrades: [],
             milestones: [],
-            challs: [],
             beep: false,
         }},
         color: "#4BEC13",
@@ -82,28 +81,6 @@ var layers = {
                 }
             },
         },
-
-        challs: {
-            rows: 1,
-    		cols: 1,
-		    11: {
-			    name: "Fun",
-			    desc: "Makes the game 0% harder",
-			    unl() { return player.c.best.gt(0) },
-                goal: new Decimal("20"),
-                currencyDisplayName: "lollipops", // Use if using a nonstandard currency
-                currencyInternalName: "points", // Use if using a nonstandard currency
-                currencyLayer: "c", // Leave empty if not in a layer
-                effect() {
-                    let ret = player.c.points.add(1).tetrate(0.02)
-                    return ret;
-                },
-                effDisp(x) { return format(x)+"x" },
-                countsAs: [12, 21], // Use this for if a challenge includes the effects of other challenges. Being in this challenge "counts as" being in these.
-                reward: "Says hi",
-                onComplete() {console.log("hiii")} // Called when you complete the challenge
-            },
-        }, 
         doReset(layer){
             if(layers[layer].row > layers["c"].row) fullLayerReset('c') // This is actually the default behavior
         },
@@ -120,6 +97,9 @@ var layers = {
         }, // Do any necessary temp updating
         resetsNothing() {return false},
         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"]
     }, 
 
     f: {
diff --git a/js/v.js b/js/v.js
index f09b981..394fd66 100644
--- a/js/v.js
+++ b/js/v.js
@@ -27,6 +27,93 @@ function loadVue() {
 		</button>
 		`
 	})
+
+	Vue.component('challs', {
+		props: ['layer'],
+		template: `
+		<div v-if="layers[layer].challs" class="upgTable">
+			<div v-for="row in layers[layer].challs.rows" class="upgRow">
+				<div v-for="col in layers[layer].challs.cols">
+					<div v-if="layers[layer].challs[row*10+col].unl()" v-bind:class="{hChall: true, done: player[layer].challs.includes(row*10+col), canComplete: tmp.challActive[layer][row*10+col]&&!player[layer].challs.includes(row*10+col)&&canCompleteChall(layer, row*10+col)}">
+						<br><h3>{{layers[layer].challs[row*10+col].name}}</h3><br><br>
+						<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="startChall(layer, row*10+col)">{{player[layer].active==(row*10+col)?(canCompleteChall(layer, row*10+col)?"Finish":"Exit Early"):(player[layer].challs.includes(row*10+col)?"Completed":"Start")}}</button><br><br>
+						{{layers[layer].challs[row*10+col].desc}}<br>
+						Goal: {{format(layers[layer].challs[row*10+col].goal)}} {{layers[layer].challs[row*10+col].currencyDisplayName ? layers[layer].challs[row*10+col].currencyDisplayName : "points"}}<br>
+						Reward: {{layers[layer].challs[row*10+col].reward}}<br>
+						<span v-if="layers[layer].challs[row*10+col].effDisp!==undefined">Currently: {{(layers[layer].challs[row*10+col].effDisp) ? (layers[layer].challs[row*10+col].effDisp(layers[layer].challs[row*10+col].effect())) : format(layers[layer].challs[row*10+col].effect())}}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		`
+	})
+
+	Vue.component('upgrades', {
+		props: ['layer'],
+		template: `
+		<div v-if="layers[layer].upgrades" class="upgTable">
+			<div v-for="row in layers[layer].upgrades.rows" class="upgRow">
+				<div v-for="col in layers[layer].upgrades.cols" class="upgAlign">
+					<button v-if="layers[layer].upgrades[row*10+col].unl()" v-on:click="buyUpg(layer, row*10+col)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(row*10+col), locked: (!(canAffordUpg(layer, row*10+col))&&!player[layer].upgrades.includes(row*10+col)), can: (canAffordUpg(layer, row*10+col)&&!player[layer].upgrades.includes(row*10+col))}" v-bind:style="{'background-color': layers[layer].color}">{{ layers[layer].upgrades[row*10+col].desc }}<span v-if="layers[layer].upgrades[row*10+col].effect"><br>Currently: {{(layers[layer].upgrades[row*10+col].effDisp) ? (layers[layer].upgrades[row*10+col].effDisp(layers[layer].upgrades[row*10+col].effect())) : format(layers[layer].upgrades[row*10+col].effect())}}</span><br><br>Cost: {{ formatWhole(layers[layer].upgrades[row*10+col].cost) }} {{(layers[layer].upgrades[row*10+col].currencyDisplayName ? layers[layer].upgrades[row*10+col].currencyDisplayName : layers[layer].resource)}}</button>
+				</div>
+			</div>
+		</div>
+		`
+	})
+
+	Vue.component('milestones', {
+		props: ['layer'],
+		template: `
+		<div v-if="layers[layer].milestones">
+			<table>
+				<tr v-for="id in Object.keys(layers[layer].milestones)">
+					<td v-if="milestoneShown(layer, id)" v-bind:class="{milestone: !player[layer].milestones.includes(id), milestoneDone: player[layer].milestones.includes(id)}"><h3>{{layers[layer].milestones[id].requirementDesc}}</h3><br>{{layers[layer].milestones[id].effectDesc}}<br><span v-if="(layers[layer].milestones[id].toggles)&&(player[layer].milestones.includes(id))" v-for="toggle in layers[layer].milestones[id].toggles"><toggle :layer= "layer" :data= "toggle"></toggle>&nbsp;</span></td></tr>
+				</tr>
+			</table>
+		</div>
+		`
+	})
+
+	Vue.component('toggle', {
+		props: ['layer', 'data'],
+		template: `
+		<button class="smallUpg can" v-bind:style="{'background-color': layers[data[0]].color}" v-on:click="toggleAuto(data)">{{player[data[0]][data[1]]?"ON":"OFF"}}</button>
+		`
+	})
+
+
+	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>
+		`
+	})
+
+	// 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'],
+		template: `
+		<span v-bind:style="{'color': data2, 'text-shadow': '0px 0px 10px' + data2}">{{data()}}</span>
+		`
+	})
+
+	// Blank lines
+	Vue.component('blank', {
+		props: ['layer', 'data'],
+		template: `
+		<br>
+		`
+	})
+
 	app = new Vue({
 		el: "#app",
 		data: {
diff --git a/sampleLayers.js b/sampleLayers.js
index 2fd8909..4ae567e 100644
--- a/sampleLayers.js
+++ b/sampleLayers.js
@@ -90,18 +90,22 @@ var layers = {
         challs: {
             rows: 1,
     		cols: 1,
-	    	active(x) {
-		    	if (x<71&&x!=42&&x!=52) if (this.active(71)) return true
-			    if (x==11||x==41) if (this.active(51)) return true
-    			if (x==31||x==32) if (this.active(61)) return true
-	    		return player.c.active==x;
-		    },
 		    11: {
-			    name: "Skip the Second",
-			    desc: "Boosters and Generator Power do nothing",
+			    name: "Fun",
+			    desc: "Makes the game 0% harder",
 			    unl() { return player.c.best.gt(0) },
-			    goal: new Decimal("1e2400"),
-			    reward: "The generator power effect is raised to the power of 1.25",
+                goal: new Decimal("20"),
+                currencyDisplayName: "lollipops", // Use if using a nonstandard currency
+                currencyInternalName: "points", // Use if using a nonstandard currency
+                currencyLayer: "c", // Leave empty if not in a layer
+                effect() {
+                    let ret = player.c.points.add(1).tetrate(0.02)
+                    return ret;
+                },
+                effDisp(x) { return format(x)+"x" },
+                countsAs: [12, 21], // Use this for if a challenge includes the effects of other challenges. Being in this challenge "counts as" being in these.
+                reward: "Says hi",
+                onComplete() {console.log("hiii")} // Called when you complete the challenge
             },
         }, 
         convertToDecimal() {
@@ -118,7 +122,10 @@ var layers = {
             return
         }, // Useful for if you gain secondary resources or have other interesting things happen to this layer when you reset it. You gain the currency after this function ends.
         incr_order: [], // Array of layer names to have their order increased when this one is first unlocked
-        branches: [] // Each pair corresponds to a line added to the tree when this node is unlocked. The letter is the other end of the line, and the number affects the color, 1 is default
+        branches: [], // Each pair corresponds to a line added to the tree when this node is unlocked. The letter is the other end of the line, and the number affects the color, 1 is default
+        
+        // Optional, lets you format the tab yourself by listing components. You can create more in v.js.
+        tabFormat: [["colored-text", function() {return 'I have ' + format(player.points) + ' pointy points!'}, "red"], "blank", ["toggle", ["c", "beep"]], "milestones", "blank", "blank", "upgrades"]
     }, 
     f: { // This layer contains a more minimal set of things, besides a branch and "boop"
         startData() { return {