diff --git a/changelog.md b/changelog.md index b017cd8..9ccf918 100644 --- a/changelog.md +++ b/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. diff --git a/docs/layer-features.md b/docs/layer-features.md index 1e19261..3a1912a 100644 --- a/docs/layer-features.md +++ b/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 diff --git a/js/canvas.js b/js/canvas.js index 295dd0d..323858f 100644 --- a/js/canvas.js +++ b/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]) diff --git a/js/game.js b/js/game.js index 17dc84e..7475df0 100644 --- a/js/game.js +++ b/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(); diff --git a/js/layers.js b/js/layers.js index a19ed76..35a8b96 100644 --- a/js/layers.js +++ b/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", +}, +) + diff --git a/js/temp.js b/js/temp.js index dac433e..9be2010 100644 --- a/js/temp.js +++ b/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 + '%)' + } + } } diff --git a/js/utils.js b/js/utils.js index 78d958b..7b7d20d 100644 --- a/js/utils.js +++ b/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() { diff --git a/js/v.js b/js/v.js index 4aa7e34..c2c04ea 100644 --- a/js/v.js +++ b/js/v.js @@ -291,13 +291,13 @@ function loadVue() { Vue.component('bar', { props: ['layer', 'data'], template: ` -
- -
+
+
-
- +
+
+
` }) @@ -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, diff --git a/style.css b/style.css index 289ef80..9154a29 100644 --- a/style.css +++ b/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 } \ No newline at end of file