2.0.5

changelog.md

@@ -1,5 +1,11 @@
 # The Modding Tree changelog:
 
+### v2.0.5 - 10/16/20
+- Made more features (including prestige parameters) able to be dynamic.
+- Layer nodes can be hidden but still take up space with "ghost" visibility
+- Added clickableEffect for real.
+- Fixed some visual issues with bars.
+- A few other minor tweaks and improvements.
 
 ### v2.0.4 - 10/16/20
 - Fixed HTML on buttons interfering with clicking on them.

docs/layer-features.md

@@ -47,6 +47,7 @@ Key:
                      If the text stays constant, it can just be a string.
 
 - layerShown(): A function returning a bool which determines if this layer's node should be visible on the tree.
+                It can also return "ghost", which will hide the layer, but its node will still take up space in the tree.
 
 - hotkeys: **optional**, An array containing information on any hotkeys associated with this layer:
     ```js

js/canvas.js

@@ -40,7 +40,7 @@ function drawTree() {
 	if (!retrieveCanvasData()) return;
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
 	for (layer in layers){
-		if (layers[layer].layerShown() && tmp[layer].branches){
+		if (tmp[layer].layerShown && tmp[layer].branches){
 			for (branch in tmp[layer].branches)
 				{
 					drawTreeBranch(layer, tmp[layer].branches[branch])

js/game.js

@@ -44,17 +44,17 @@ function maxTickLength() {
 
 function getResetGain(layer, useType = null) {
 	let type = useType
-	if (!useType) type = layers[layer].type
+	if (!useType) type = tmp[layer].type
 	if(tmp[layer].type == "none")
 		return new Decimal (0)
 	if (tmp[layer].gainExp.eq(0)) return new Decimal(0)
 	if (type=="static") {
-		if ((!layers[layer].canBuyMax()) || tmp[layer].baseAmount.lt(tmp[layer].requires)) return new Decimal(1)
-		let gain = tmp[layer].baseAmount.div(tmp[layer].requires).div(tmp[layer].gainMult).max(1).log(layers[layer].base).times(tmp[layer].gainExp).pow(Decimal.pow(layers[layer].exponent, -1))
+		if ((!tmp[layer].canBuyMax) || tmp[layer].baseAmount.lt(tmp[layer].requires)) return new Decimal(1)
+		let gain = tmp[layer].baseAmount.div(tmp[layer].requires).div(tmp[layer].gainMult).max(1).log(tmp[layer].base).times(tmp[layer].gainExp).pow(Decimal.pow(tmp[layer].exponent, -1))
 		return gain.floor().sub(player[layer].points).add(1).max(1);
 	} else if (type=="normal"){
 		if (tmp[layer].baseAmount.lt(tmp[layer].requires)) return new Decimal(0)
-		let gain = tmp[layer].baseAmount.div(tmp[layer].requires).pow(layers[layer].exponent).times(tmp[layer].gainMult).pow(tmp[layer].gainExp)
+		let gain = tmp[layer].baseAmount.div(tmp[layer].requires).pow(tmp[layer].exponent).times(tmp[layer].gainMult).pow(tmp[layer].gainExp)
 		if (gain.gte("e1e7")) gain = gain.sqrt().times("e5e6")
 		return gain.floor().max(0);
 	} else if (type=="custom"){
@@ -66,7 +66,7 @@ function getResetGain(layer, useType = null) {
 
 function getNextAt(layer, canMax=false, useType = null) {
 	let type = useType
-	if (!useType) type = layers[layer].type
+	if (!useType) type = tmp[layer].type
 	if(tmp[layer].type == "none")
 		return new Decimal (Infinity)
 
@@ -75,17 +75,17 @@ function getNextAt(layer, canMax=false, useType = null) {
 
 	if (type=="static") 
 	{
-		if (!layers[layer].canBuyMax()) canMax = false
+		if (!tmp[layer].canBuyMax) canMax = false
 		let amt = player[layer].points.plus((canMax&&tmp[layer].baseAmount.gte(tmp[layer].nextAt))?tmp[layer].resetGain:0)
-		let extraCost = Decimal.pow(layers[layer].base, amt.pow(tmp[layer].exponent).div(tmp[layer].gainExp)).times(tmp[layer].gainMult)
+		let extraCost = Decimal.pow(tmp[layer].base, amt.pow(tmp[layer].exponent).div(tmp[layer].gainExp)).times(tmp[layer].gainMult)
 		let cost = extraCost.times(tmp[layer].requires).max(tmp[layer].requires)
-		if (layers[layer].roundUpCost) cost = cost.ceil()
+		if (tmp[layer].roundUpCost) cost = cost.ceil()
 		return cost;
 	} else if (type=="normal"){
 		let next = tmp[layer].resetGain.add(1)
 		if (next.gte("e1e7")) next = next.div("e5e6").pow(2)
 		next = next.root(tmp[layer].gainExp).div(tmp[layer].gainMult).root(tmp[layer].exponent).times(tmp[layer].requires).max(tmp[layer].requires)
-		if (layers[layer].roundUpCost) next = next.ceil()
+		if (tmp[layer].roundUpCost) next = next.ceil()
 		return next;
 	} else if (type=="custom"){
 		return layers[layer].getNextAt(canMax)
@@ -95,7 +95,7 @@ function getNextAt(layer, canMax=false, useType = null) {
 
 // Return true if the layer should be highlighted. By default checks for upgrades only.
 function shouldNotify(layer){
-	for (id in layers[layer].upgrades){
+	for (id in tmp[layer].upgrades){
 		if (!isNaN(id)){
 			if (canAffordUpgrade(layer, id) && !hasUpgrade(layer, id) && tmp[layer].upgrades[id].unlocked){
 				return true
@@ -129,7 +129,7 @@ function rowReset(row, layer) {
 			layers[lr].doReset(layer)
 		}
 		else
-			if(layers[layer].row > layers[lr].row && row !== "side") layerDataReset(lr)
+			if(tmp[layer].row > tmp[lr].row && row !== "side") layerDataReset(lr)
 	}
 }
 
@@ -173,15 +173,15 @@ function generatePoints(layer, diff) {
 var prevOnReset
 
 function doReset(layer, force=false) {
-	let row = layers[layer].row
+	let row = tmp[layer].row
 	if (!force) {
 		if (tmp[layer].baseAmount.lt(tmp[layer].requires)) return;
 		let gain = tmp[layer].resetGain
-		if (layers[layer].type=="static") {
+		if (tmp[layer].type=="static") {
 			if (tmp[layer].baseAmount.lt(tmp[layer].nextAt)) return;
-			gain =(layers[layer].canBuyMax() ? gain : 1)
+			gain =(tmp[layer].canBuyMax ? gain : 1)
 		} 
-		if (layers[layer].type=="custom") {
+		if (tmp[layer].type=="custom") {
 			if (!tmp[layer].canReset) return;
 		} 
 
@@ -196,8 +196,8 @@ function doReset(layer, force=false) {
 			player[layer].unlocked = true;
 			needCanvasUpdate = true;
 
-			if (layers[layer].increaseUnlockOrder){
-				lrs = layers[layer].increaseUnlockOrder
+			if (tmp[layer].increaseUnlockOrder){
+				lrs = tmp[layer].increaseUnlockOrder
 				for (lr in lrs)
 					if (!player[lrs[lr]].unlocked) player[lrs[lr]].unlockOrder++
 			}
@@ -232,8 +232,8 @@ function resetRow(row) {
 	rowReset(row+1, post_layers[0])
 	doReset(pre_layers[0], true)
 	for (let layer in layers) {
-		player[layers[layer]].unlocked = false
-		if (player[layers[layer]].unlockOrder) player[layers[layer]].unlockOrder = 0
+		player[layer].unlocked = false
+		if (player[layer].unlockOrder) player[layer].unlockOrder = 0
 	}
 	player.points = new Decimal(10)
 	updateTemp();

js/layers.js

@@ -237,7 +237,7 @@ addLayer("c", {
                 baseStyle: {'background-color' : "#000000"},
                 textStyle: {'text-shadow': '0px 0px 2px #000000'},
 
-                borderStyle() {return {}},
+                borderStyle() {return {'border-width': "7px"}},
                 direction: UP,
                 width: 50,
                 height: 200,
@@ -500,3 +500,18 @@ addLayer("a", {
     }, 
 )
 
+
+// This layer is mostly minimal but it uses a custom prestige type and a clickable
+addLayer("spook", {
+    startData() { return {
+        unlocked: true,
+        points: new Decimal(0),
+    }},
+    color: "yellow",
+    resource: "achievement power", 
+    type: "none",
+    row: 1,
+    layerShown: "ghost",
+}, 
+)
+

js/temp.js

@@ -107,14 +107,27 @@ function constructBarStyles(layer){
 			let bar = tmp[layer].bars[id]
 			if (bar.progress instanceof Decimal)
 				bar.progress = bar.progress.toNumber()
-			bar.progress = Math.min(Math.max(bar.progress, 0), 1)
+			bar.progress = (1 -Math.min(Math.max(bar.progress, 0), 1)) * 100
 
 			bar.dims = {'width': bar.width + "px", 'height': bar.height + "px"}
 			let dir = bar.direction
-			bar.fillDims = {'width': bar.width + "px", 'height': bar.height + "px"}
+			bar.fillDims = {'width': (bar.width + 0.5) + "px", 'height': (bar.height + 0.5)  + "px"}
 			if (dir !== undefined)
 			{
-				bar.fillDims['clip-path'] = 'inset(0% 0% 50% 0%)'
+				bar.fillDims['clip-path'] = 'inset(0% 50% 0% 0%)'
+				if(dir == UP){
+					bar.fillDims['clip-path'] = 'inset(' + bar.progress + '% 0% 0% 0%)'
+				}
+				else if(dir == DOWN){
+					bar.fillDims['clip-path'] = 'inset(0% 0% ' + bar.progress + '% 0%)'
+				}
+				else if(dir == RIGHT){
+					bar.fillDims['clip-path'] = 'inset(0% ' + bar.progress + '% 0% 0%)'
+				}
+				else if(dir == LEFT){
+					bar.fillDims['clip-path'] = 'inset(0% 0% 0% ' + bar.progress + '%)'
+				}
+
 			}
 		}
 

js/utils.js

@@ -350,7 +350,7 @@ function milestoneShown(layer, id) {
 function respecBuyables(layer) {
 	if (!layers[layer].buyables) return
 	if (!layers[layer].buyables.respec) return
-	if (!confirm("Are you sure you want to respec? This will force you to do a \"" + (layers[layer].name ? layers[layer].name : layer) + "\" reset as well!")) return
+	if (!confirm("Are you sure you want to respec? This will force you to do a \"" + (tmp[layer].name ? tmp[layer].name : layer) + "\" reset as well!")) return
 	layers[layer].buyables.respec()
 	updateBuyableTemp(layer)
 }
@@ -409,6 +409,10 @@ function buyableEffect(layer, id){
 	return (tmp[layer].buyables[id].effect)
 }
 
+function clickableEffect(layer, id){
+	return (tmp[layer].clickables[id].effect)
+}
+
 function achievementEffect(layer, id){
 	return (tmp[layer].achievements[id].effect)
 }
@@ -435,7 +439,7 @@ function canAffordPurchase(layer, thing, cost) {
 
 function buyUpg(layer, id) {
 	if (!player[layer].unlocked) return
-	if (!layers[layer].upgrades[id].unlocked) return
+	if (!tmp[layer].upgrades[id].unlocked) return
 	if (player[layer].upgrades.includes(id)) return
 	let upg = tmp[layer].upgrades[id]
 	let cost = tmp[layer].upgrades[id].cost
@@ -499,7 +503,7 @@ function inChallenge(layer, id){
 	if (challenge==toNumber(id)) return true
 
 	if (layers[layer].challenges[challenge].countsAs)
-		return layers[layer].challenges[id].countsAs.includes(id)
+		return tmp[layer].challenges[id].countsAs.includes(id)
 }
 
 // ************ Misc ************
@@ -535,7 +539,7 @@ function nodeShown(layer) {
 }
 
 function layerunlocked(layer) {
-	return LAYERS.includes(layer) && (player[layer].unlocked || (tmp[layer].baseAmount.gte(tmp[layer].requires) && layers[layer].layerShown()))
+	return LAYERS.includes(layer) && (player[layer].unlocked || (tmp[layer].baseAmount.gte(tmp[layer].requires) && tmp[layer].layerShown))
 }
 
 function keepGoing() {

js/v.js

@@ -291,13 +291,13 @@ function loadVue() {
 	Vue.component('bar', {
 		props: ['layer', 'data'],
 		template: `
-		<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div class ="barBorder barBase"  v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
-			
-			<div class = "overlayTextContainer" v-bind:style="[tmp[layer].bars[data].dims]">
+		<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].dims, {'display': 'table'}]">
+			<div class = "overlayTextContainer barBorder" v-bind:style="[tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
 				<span class = "overlayText" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v-html="tmp[layer].bars[data].display"></span>
 			</div>
-			<div class ="fill barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].fillDims]"></div>
-		
+			<div class ="barBG barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle,  tmp[layer].bars[data].dims]">
+				<div class ="fill" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].fillDims]"></div>
+			</div>
 		</div></div>
 		`
 	})
@@ -362,10 +362,11 @@ function loadVue() {
 				treeNode: size != 'small',
 				smallNode: size == 'small',
 				[layer]: true,
+				ghost: tmp[layer].layerShown == 'ghost',
 				hidden: !tmp[layer].layerShown,
 				locked: !player[layer].unlocked && !tmp[layer].baseAmount.gte(tmp[layer].requires),
 				notify: tmp[layer].notify,
-				can: layerunlocked(layer),
+				can: player[layer].unlocked,
 			}"
 			v-bind:style="[layerunlocked(layer) ? {
 				'background-color': tmp[layer].color,

style.css

@@ -139,13 +139,16 @@ h1, h2, h3, b, input {
 .barBase {
 	overflow: hidden;
 	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-
+	display:table
 }
 
 .barBorder {
 	border: 2px solid;
 	border-radius: 10%;
 	border-color: var(--color);
+	overflow: hidden;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+	margin:0
 }
 
 .overlayTextContainer {
@@ -160,9 +163,10 @@ h1, h2, h3, b, input {
 
 .fill {
 	background-color: var(--color);
-	border-radius: 10%;
+	z-index:2;
     position: absolute;
 	overflow: hidden;
+	margin-left: -0.5px;
 }
 
 .overlayText {
@@ -574,4 +578,8 @@ ul {
 
 button > * {
 	pointer-events:none;
+}
+
+.ghost {
+	visibility: hidden
 }