Many minor additions

Effect-getter functions, components for individual Big Feature things, points/sec display

docs/buyables.md

@@ -3,6 +3,8 @@
 Buyables are things that can be bought multiple times with scaling costs. If you set a respec function,
 the player can reset the purchases to get their currency back.
 
+You can use buyableEffect(layer, id) to get the current effects of a buyable.
+
 Buyables should be formatted like this:
 
 ```js

docs/challenges.md

@@ -1,5 +1,12 @@
 # Challenges
 
+Useful functions for dealing with Challenges and implementing their effects:
+
+- inChall(layer, id): determine if the player is in a given challenge (or another challenge on the same layer that counts as this one)
+- hasChall(layer, id): determine if the player has completed the challenge
+- challEffect(layer, id): Returns the current effects of the challenge, if any
+
+
 Challenges are stored in the following format:
 
 ```js
@@ -14,11 +21,8 @@ Challenges are stored in the following format:
     }
 ```
 
-You can use inChall(layer, id) and hasChall(layer, id) to determine if the player is currently in a challenge,
-or has completed the challenge, respectively. These are useful for implementing effects.
-
 Each challenge should have an id where the first digit is the row and the second digit is the column.
-Individual upgrades can have these features:
+Individual Challenges can have these features:
 
 - name: Name of the challenge, can be a string or a function
 

docs/custom-tab-layouts.md

@@ -38,6 +38,9 @@ These are the existing components, but you can create more in v.js:
 - buyables: Display all of the buyables for this layer, as appropriate. The argument optional, and is the size of the
             boxes in pixels.
 
+- upgrade, milestone, chall, buyable: An individual upgrade, challenge, etc. The argument is the id.
+        This can be used if you want to have upgrades split up across multiple subtabs, for example.
+
 - toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, [layer, id]
 
 - row: Display a list of components horizontally. The argument is an array of components in the tab layout format.

docs/milestones.md

@@ -11,7 +11,7 @@ Milestones should be formatted like this:
     }
 ```
 
-You can use inChall(layer, id) and hasChall(layer, id) to determine if the player is currently in a challenge,
+You can use hasMilestone(layer, id) to determine if the player has a given milestone
 
 Milestone features:
 

docs/upgrades.md

@@ -2,21 +2,26 @@
 
 Upgrades are stored in the following format:
 
+Useful functions for dealing with Upgrades and implementing their effects:
+
+- hasUpg(layer, id): determine if the player has the upgrade
+- ugpEffect(layer, id): Returns the current effects of the upgrade, if any
+
+Hint: Basic point gain is calculated in game.js's "getPointGain".
+
+
 ```js
     upgrades: {
         rows: # of rows
         cols: # of columns
         11: {
             desc:() => "Blah",
-            etc
+            more features
         }
         etc
     }
 ```
 
-You can use hasUpg(layer, id) to determine if the player has an upgrade. This is useful for implementing bonuses.
-Hint: Basic point gain is calculated in game.js's "getPointGain".
-
 Each upgrade should have an id where the first digit is the row and the second digit is the column.
 Individual upgrades can have these features:
 

index.html

@@ -49,11 +49,12 @@
 		</div>
 		<div v-if="player.tab=='changelog'" class="col right">
 			<button class="back" onclick="showTab('tree')">←</button><br>
-			<h3>v1.3: Finally some real progress!</h3>
+			<h3>v1.3: Tabbing out</h3>
 			<ul>
-				<li>Added subtabs! And also a ???Component</li>
-				<li>Added ???Big component</li>
-				<li>Added h-line, v-line and image-display components.</li>
+				<li>Added subtabs! And also a Micro-tab component to let you make smaller subtab-esque areas anywhere.</li>
+				<li>Added points/sec display (can be disabled).</li>
+				<li>Added h-line, v-line and image-display components, plus components for individual upgrades, challenges, and milestones.</li>
+				<li>Added upgEffect, buyableEffect, and challEffect functions.</li>
 				<li>Added "hide completed challenges" setting.</li>
 				<li>Moved old changelogs to a separate place.</li>
 				<li></li>
@@ -67,7 +68,7 @@
 			<br>
 			<h3>{{VERSION.withName}}</h3>
 			<br>
-			The Modding Tree and code refactor by Acamaeda
+			The Modding Tree by Acamaeda
 			<br>
 			The Prestige Tree made by Jacorb and Aarex
 			<br>
@@ -125,7 +126,9 @@
 			<span v-if="player.points.lt('1e1000')">You have </span>
 			<h2 id="points">{{format(player.points)}}</h2>
 			<span v-if="player.points.lt('1e1e6')"> {{modInfo.pointsName}}</span>
-			<br><br><br><br><br>
+			<br>
+			<span v-if="showPointGen()">({{format(getPointGen())}}/sec)</span>
+			<br><br><br><br>
 			<!-- *************************** Modify the tree in the table below! *************************** -->
 			<table>
 				<td><layer-node layer='c' abb='C'></layer-node></td>

js/game.js

@@ -6,15 +6,21 @@ var gameEnded = false;
 
 let VERSION = {
 	num: "1.3",
-	name: "Finally some real progress!"
+	name: "Tabbing Out"
 }
 
+// Calculate points/sec!
 function getPointGen() {
 	let gain = new Decimal(1)
-	if (hasUpg("c", 12)) gain = gain.times(layers.c.upgrades[12].effect())
+	if (hasUpg("c", 12)) gain = gain.times(upgEffect("c", 12))
 	return gain
 }
 
+// Determines if it should show points/sec
+function showPointGen(){
+	return (true)
+}
+
 // Function to determine if the player is in a challenge
 function inChallenge(layer, id){
 	let chall = player[layer].active
@@ -206,6 +212,18 @@ function hasChall(layer, id){
 	return (player[layer].challs.includes(toNumber(id)))
 }
 
+function upgEffect(layer, id){
+	return (tmp.upgrades[layer][id].effect)
+}
+
+function challEffect(layer, id){
+	return (tmp.challs[layer][id].effect)
+}
+
+function buyableEffect(layer, id){
+	return (tmp.buyables[layer][id].effect)
+}
+
 function canAffordPurchase(layer, thing, cost) {
 	if (thing.currencyInternalName){
 		let name = thing.currencyInternalName

js/layers.js

@@ -21,7 +21,7 @@ addLayer("c", {
         gainMult() { // Calculate the multiplier for main currency from bonuses
             mult = new Decimal(1)
             if (hasUpg(this.layer, 166)) mult = mult.times(2) // These upgrades don't exist
-			if (hasUpg(this.layer, 120)) mult = mult.times(this.upgrades[12].effect())
+			if (hasUpg(this.layer, 120)) mult = mult.times(upgEffect(this.layer, 120))
             return mult
         },
         gainExp() { // Calculate the exponent on main currency from bonuses

js/v.js

@@ -114,39 +114,43 @@ function loadVue() {
 		`
 	})
 
-
-
 	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="tmp.challs[layer][row*10+col].unl && !(player.hideChalls && hasChall(layer, [row*10+col]))" 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>{{tmp.challs[layer][row*10+col].name}}</h3><br><br>
-						<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp.layerColor[layer]}" 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>
-						{{tmp.challs[layer][row*10+col].desc}}<br>
-						Goal: {{format(tmp.challs[layer][row*10+col].goal)}} {{layers[layer].challs[row*10+col].currencyDisplayName ? layers[layer].challs[row*10+col].currencyDisplayName : "points"}}<br>
-						Reward: {{tmp.challs[layer][row*10+col].reward}}<br>
-						<span v-if="tmp.challs[layer][row*10+col].effect!==undefined">Currently: {{(tmp.challs[layer][row*10+col].effectDisplay) ? (tmp.challs[layer][row*10+col].effectDisplay) : format(tmp.challs[layer][row*10+col].effect)}}</span>
-					</div>
+					<chall :layer = "layer" :data = "row*10+col"></chall>
 				</div>
 			</div>
 		</div>
 		`
 	})
 
+	// data = id
+	Vue.component('chall', {
+		props: ['layer', 'data'],
+		template: `
+		<div v-if="layers[layer].challs">
+			<div v-if="tmp.challs[layer][data].unl && !(player.hideChalls && hasChall(layer, [data]))" v-bind:class="{hChall: true, done: player[layer].challs.includes(data), canComplete: tmp.challActive[layer][data]&&!player[layer].challs.includes(data)&&canCompleteChall(layer, data)}">
+				<br><h3>{{tmp.challs[layer][data].name}}</h3><br><br>
+				<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="startChall(layer, data)">{{player[layer].active==(data)?(canCompleteChall(layer, data)?"Finish":"Exit Early"):(player[layer].challs.includes(data)?"Completed":"Start")}}</button><br><br>
+				{{tmp.challs[layer][data].desc}}<br>
+				Goal: {{format(tmp.challs[layer][data].goal)}} {{layers[layer].challs[data].currencyDisplayName ? layers[layer].challs[data].currencyDisplayName : "points"}}<br>
+				Reward: {{tmp.challs[layer][data].reward}}<br>
+				<span v-if="tmp.challs[layer][data].effect!==undefined">Currently: {{(tmp.challs[layer][data].effectDisplay) ? (tmp.challs[layer][data].effectDisplay) : format(tmp.challs[layer][data].effect)}}</span>
+			</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="tmp.upgrades[layer][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': tmp.layerColor[layer]}">
-					<span v-if= "tmp.upgrades[layer][row*10+col].title"><h3>{{tmp.upgrades[layer][row*10+col].title}}</h3><br></span>
-						{{ tmp.upgrades[layer][row*10+col].desc }}
-						<span v-if="tmp.upgrades[layer][row*10+col].effect"><br>Currently: {{(tmp.upgrades[layer][row*10+col].effectDisplay) ? (tmp.upgrades[layer][row*10+col].effectDisplay) : format(tmp.upgrades[layer][row*10+col].effect)}}</span>
-						<br><br>Cost: {{ formatWhole(tmp.upgrades[layer][row*10+col].cost) }} {{(layers[layer].upgrades[row*10+col].currencyDisplayName ? layers[layer].upgrades[row*10+col].currencyDisplayName : layers[layer].resource)}}</button>
+					<upgrade :layer = "layer" :data = "row*10+col"></upgrade>
 				</div>
 			</div>
 			<br>
@@ -154,14 +158,28 @@ function loadVue() {
 		`
 	})
 
+	// data = id
+	Vue.component('upgrade', {
+		props: ['layer', 'data'],
+		template: `
+		<div v-if="layers[layer].challs">
+			<button v-if="tmp.upgrades[layer][data].unl" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(data), locked: (!(canAffordUpg(layer, data))&&!player[layer].upgrades.includes(data)), can: (canAffordUpg(layer, data)&&!player[layer].upgrades.includes(data))}" v-bind:style="{'background-color': tmp.layerColor[layer]}">
+				<span v-if= "tmp.upgrades[layer][data].title"><h3>{{tmp.upgrades[layer][data].title}}</h3><br></span>
+				{{ tmp.upgrades[layer][data].desc }}
+				<span v-if="tmp.upgrades[layer][data].effect"><br>Currently: {{(tmp.upgrades[layer][data].effectDisplay) ? (tmp.upgrades[layer][data].effectDisplay) : format(tmp.upgrades[layer][data].effect)}}</span>
+				<br><br>Cost: {{ formatWhole(tmp.upgrades[layer][data].cost) }} {{(layers[layer].upgrades[data].currencyDisplayName ? layers[layer].upgrades[data].currencyDisplayName : layers[layer].resource)}}
+			</button>
+		</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>{{tmp.milestones[layer][id].requirementDesc}}</h3><br>{{tmp.milestones[layer][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>
+					<milestone :layer = "layer" :data = "id"></milestone>
 				</tr>
 			</table>
 			<br>
@@ -169,6 +187,15 @@ function loadVue() {
 		`
 	})
 
+	// data = id
+	Vue.component('milestone', {
+		props: ['layer', 'data'],
+		template: `
+		<td v-if="layers[layer].milestones && milestoneShown(layer, data)" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}"><h3>{{tmp.milestones[layer][data].requirementDesc}}</h3><br>{{tmp.milestones[layer][data].effectDesc}}<br>
+		<span v-if="(layers[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v-for="toggle in layers[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle"></toggle>&nbsp;</span></td></tr>
+		`
+	})
+
 	Vue.component('toggle', {
 		props: ['layer', 'data'],
 		template: `
@@ -218,8 +245,8 @@ function loadVue() {
 		<div v-if="layers[layer].buyables">
 			<button 
 				v-if="tmp.buyables[layer][data].unl" 
-				v-bind:class="{ upg: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
-				v-bind:style="{'background-color': tmp.layerColor[layer], 'height': (size ? size : '200px'), 'width': (size ? size : '200px')}"
+				v-bind:class="{ buyable: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
+				v-bind:style="{'background-color': tmp.layerColor[layer], 'height': (size ? size : 'inherit'), 'width': (size ? size : '200px')}"
 				v-on:click="buyBuyable(layer, data)">
 				<span v-if= "layers[layer].buyables[data].title"><h2>{{tmp.buyables[layer][data].title}}</h2><br></span>
 				<span v-bind:style="{'white-space': 'pre-line'}">{{tmp.buyables[layer][data].display}}</span>

style.css

@@ -155,6 +155,15 @@ h1, h2, h3, b, input {
 	font-size: 10px;
 }
 
+.buyable {
+	height: 200px;
+	width: 200px;
+	border-radius: 25%;
+	border: 2px solid;
+	border-color: rgba(255, 255, 255, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.125);
+	font-size: 10px;
+}
+
 .upgBig {
 	height: 200px;
 	width: 200px;