Added the ability to customize the tab layout and add your own components

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: {

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: {