mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-21 16:13:55 +00:00
Added Micro-tabs and probably lots of other small things to that effect
This commit is contained in:
Acamaeda
parent
175fcfcc8c
commit
4f4ed19b87
9 changed files with 199 additions and 51 deletions
|
|
@ -89,8 +89,9 @@ Key:
|
|||
- type: Determines which prestige formula you use.
|
||||
"normal": The amount of currency you gain is independent of its current amount (like Prestige).
|
||||
formula before bonuses is based on `baseResource^exponent`
|
||||
"static: The cost is dependent on your total after reset.
|
||||
"static": The cost is dependent on your total after reset.
|
||||
formula before bonuses is based on `base^(x^exponent)`
|
||||
"custom": You can define everything, from the calculations to the text on the button, yourself. (See more at the bottom)
|
||||
|
||||
- exponent: Used as described above.
|
||||
|
||||
|
|
@ -139,3 +140,23 @@ Key:
|
|||
|
||||
- should_notify: **optional**, a function to return true if this layer should be highlighted in the tree.
|
||||
The layer will automatically be highlighted if you can buy an upgrade whether you have this or not.
|
||||
|
||||
|
||||
# Custom Prestige type only
|
||||
(No effect otherwise)
|
||||
|
||||
- prestigeButtonText(): **Only for custom prestige type**, Function that returns the entirety of the text that should
|
||||
be displayed on the prestige button.You can use HTML as well!
|
||||
|
||||
- getResetGain(): **Only for custom prestige type**, Returns how many points you should get if you reset now. You can call
|
||||
getResetGain(this.layer, useType = "static") or similar to calculate what your gain would be under another
|
||||
prestige type (provided you have all of the required features in the layer.)
|
||||
|
||||
- getNextAt(canMax=false): **Only for custom prestige type**, Returns how many of the base currency you need to get to
|
||||
the next point. canMax is an optional variable used with Static-ish layers to differentiate between if
|
||||
it's looking for the first point you can reset at, or the requirement for any gain at all.
|
||||
(Supporting both is good). You can also call getNextAt(this.layer, canMax=false, useType = "static")
|
||||
or similar to calculate what your next at would be under another prestige type (provided you have
|
||||
all of the required features in the layer.)
|
||||
|
||||
- canReset(): **Only for custom prestige type**, return true only if you have the resources required to do a prestige here.
|
||||
|
|
@ -29,6 +29,8 @@ Milestone features:
|
|||
the value being toggled is stored in, and the second is the internal name of the variable to toggle.
|
||||
(e.g. [["b", "auto"], ["g", "auto"])
|
||||
|
||||
**Tip:** Toggles are not de-set if the milestone becomes locked! In this case, you should also check if the player has the milestone.
|
||||
|
||||
- layer: **Assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
|
||||
|
||||
- id: **Assigned automagically**. It's the id for this milestone.
|
||||
|
|
|
|||
11
index.html
11
index.html
|
|
@ -52,6 +52,7 @@
|
|||
<h3>v1.3: Tabbing out</h3>
|
||||
<ul>
|
||||
<li>Added subtabs! And also a Micro-tab component to let you make smaller subtab-esque areas anywhere.</li>
|
||||
<li>Added a "custom" prestige formula type, and a number of features to support it.</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>
|
||||
|
|
@ -166,15 +167,9 @@
|
|||
</div>
|
||||
<div v-else>
|
||||
<div class="upgTable" v-bind:style="{'margin-top': '-30px', 'margin-bottom': '24px'}">
|
||||
<div class="upgRow">
|
||||
<div v-for="tab in Object.keys(layers[layer].tabFormat)">
|
||||
<button class="tabButton" v-on:click="player[layer].subtab = tab">{{tab}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="tab in Object.keys(layers[layer].tabFormat)">
|
||||
<column v-if="player[layer].subtab == tab" :layer="layer" :data="layers[layer].tabFormat[tab]"></column>
|
||||
<tab-buttons :layer="layer" :data="layers[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
|
||||
</div>
|
||||
<column v-bind:style="readData(layers[layer].tabFormat[player[layer].subtab.mainTabs].style)" :layer="layer" :data="layers[layer].tabFormat[player[layer].subtab.mainTabs].content"></column>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
46
js/game.js
46
js/game.js
|
|
@ -48,38 +48,51 @@ function convertToDecimal() {
|
|||
}
|
||||
}
|
||||
|
||||
function getResetGain(layer) {
|
||||
function getResetGain(layer, useType = null) {
|
||||
let type = useType
|
||||
if (!useType) type = layers[layer].type
|
||||
|
||||
if (tmp.gainExp[layer].eq(0)) return new Decimal(0)
|
||||
if (layers[layer].type=="static") {
|
||||
if (type=="static") {
|
||||
if ((!layers[layer].canBuyMax()) || tmp.layerAmt[layer].lt(tmp.layerReqs[layer])) return new Decimal(1)
|
||||
let gain = tmp.layerAmt[layer].div(tmp.layerReqs[layer]).div(tmp.gainMults[layer]).max(1).log(layers[layer].base).times(tmp.gainExp[layer]).pow(Decimal.pow(layers[layer].exponent, -1))
|
||||
return gain.floor().sub(player[layer].points).add(1).max(1);
|
||||
} else {
|
||||
} else if (type=="normal"){
|
||||
if (tmp.layerAmt[layer].lt(tmp.layerReqs[layer])) return new Decimal(0)
|
||||
let gain = tmp.layerAmt[layer].div(tmp.layerReqs[layer]).pow(layers[layer].exponent).times(tmp.gainMults[layer]).pow(tmp.gainExp[layer])
|
||||
if (gain.gte("e1e7")) gain = gain.sqrt().times("e5e6")
|
||||
return gain.floor().max(0);
|
||||
} else if (type=="custom"){
|
||||
return layers[layer].getResetGain()
|
||||
} else {
|
||||
return new Decimal(0)
|
||||
}
|
||||
}
|
||||
|
||||
function getNextAt(layer, disp=false) {
|
||||
function getNextAt(layer, canMax=false, useType = null) {
|
||||
let type = useType
|
||||
if (!useType) type = layers[layer].type
|
||||
|
||||
if (tmp.gainExp[layer].eq(0)) return new Decimal(1/0)
|
||||
if (layers[layer].type=="static")
|
||||
if (type=="static")
|
||||
{
|
||||
if (!layers[layer].canBuyMax()) disp = false
|
||||
let amt = player[layer].points.plus((disp&&tmp.layerAmt[layer].gte(tmp.nextAt[layer]))?tmp.resetGain[layer]:0)
|
||||
if (!layers[layer].canBuyMax()) canMax = false
|
||||
let amt = player[layer].points.plus((canMax&&tmp.layerAmt[layer].gte(tmp.nextAt[layer]))?tmp.resetGain[layer]:0)
|
||||
let extraCost = Decimal.pow(layers[layer].base, amt.pow(layers[layer].exponent).div(tmp.gainExp[layer])).times(tmp.gainMults[layer])
|
||||
let cost = extraCost.times(tmp.layerReqs[layer]).max(tmp.layerReqs[layer])
|
||||
if (layers[layer].resCeil) cost = cost.ceil()
|
||||
return cost;
|
||||
} else {
|
||||
} else if (type=="normal"){
|
||||
let next = tmp.resetGain[layer].add(1)
|
||||
if (next.gte("e1e7")) next = next.div("e5e6").pow(2)
|
||||
next = next.root(tmp.gainExp[layer]).div(tmp.gainMults[layer]).root(layers[layer].exponent).times(tmp.layerReqs[layer]).max(tmp.layerReqs[layer])
|
||||
if (layers[layer].resCeil) next = next.ceil()
|
||||
return next;
|
||||
}
|
||||
}
|
||||
} else if (type=="custom"){
|
||||
return layers[layer].getNextAt(canMax)
|
||||
} else {
|
||||
return new Decimal(0)
|
||||
}}
|
||||
|
||||
// Return true if the layer should be highlighted. By default checks for upgrades only.
|
||||
function shouldNotify(layer){
|
||||
|
|
@ -114,6 +127,16 @@ function fullLayerReset(layer) {
|
|||
player[layer].upgrades = []
|
||||
player[layer].milestones = []
|
||||
player[layer].challs = []
|
||||
if (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)) {
|
||||
if (player[layer].subtab == undefined) player[layer].subtab = {}
|
||||
if (player[layer].subtab.mainTabs == undefined) player[layer].subtab.mainTabs = Object.keys(layers[layer].tabFormat)[0]
|
||||
}
|
||||
|
||||
if (layers[layer].microtabs) {
|
||||
if (player[layer].subtab == undefined) player[layer].subtab = {}
|
||||
for (item in layers[layer].microtabs)
|
||||
if (player[layer].subtab[item] == undefined) player[layer].subtab[item] = Object.keys(layers[layer].microtabs[item])[0]
|
||||
}
|
||||
resetBuyables(layer)
|
||||
}
|
||||
|
||||
|
|
@ -154,6 +177,9 @@ function doReset(layer, force=false) {
|
|||
if (tmp.layerAmt[layer].lt(tmp.nextAt[layer])) return;
|
||||
gain =(layers[layer].canBuyMax() ? gain : 1)
|
||||
}
|
||||
if (layers[layer].type=="custom") {
|
||||
if (!tmp.canReset[layer]) return;
|
||||
}
|
||||
|
||||
if (layers[layer].onPrestige)
|
||||
layers[layer].onPrestige(gain)
|
||||
|
|
|
|||
59
js/layers.js
59
js/layers.js
|
|
@ -35,6 +35,7 @@ addLayer("c", {
|
|||
}},
|
||||
effectDescription() { // Optional text to describe the effects
|
||||
eff = this.effect();
|
||||
eff.waffleBoost = eff.waffleBoost.times(buyableEffect(this.layer, 11).first)
|
||||
return "which are boosting waffles by "+format(eff.waffleBoost)+" and increasing the Ice Cream cap by "+format(eff.icecreamCap)
|
||||
},
|
||||
milestones: {
|
||||
|
|
@ -171,9 +172,28 @@ addLayer("c", {
|
|||
],
|
||||
incr_order: [], // Array of layer names to have their order increased when this one is first unlocked
|
||||
|
||||
microtabs: {
|
||||
stuff: {
|
||||
first: {
|
||||
content: ["upgrades", ["display-text", function() {return "confirmed"}]]
|
||||
},
|
||||
second: {
|
||||
content: [["upgrade", 11],
|
||||
["row", [["upgrade", 11], "blank", "blank", ["upgrade", 11],]],
|
||||
|
||||
["display-text", function() {return "double confirmed"}]]
|
||||
},
|
||||
},
|
||||
otherStuff: {
|
||||
// There could be another set of microtabs here
|
||||
}
|
||||
},
|
||||
|
||||
// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
|
||||
tabFormat: {
|
||||
main:
|
||||
main: {
|
||||
buttonStyle: {'color': 'orange'},
|
||||
content:
|
||||
["main-display",
|
||||
["prestige-button", function() {return "Melt your points into "}],
|
||||
["blank", "5px"], // Height
|
||||
|
|
@ -182,7 +202,11 @@ addLayer("c", {
|
|||
function() {return 'I have ' + format(player.points) + ' pointy points!'},
|
||||
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
|
||||
"h-line", "milestones", "blank", "upgrades", "challs"],
|
||||
thingies: [
|
||||
},
|
||||
thingies: {
|
||||
style: {'background-color': '#222222'},
|
||||
buttonStyle: {'border-color': 'orange'},
|
||||
content:[
|
||||
["buyables", "150px"], "blank",
|
||||
["row", [
|
||||
["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
|
||||
|
|
@ -193,8 +217,15 @@ addLayer("c", {
|
|||
]],
|
||||
], {'width': '600px', 'height': '350px', 'background-color': 'green', 'border-style': 'solid'}],
|
||||
"blank",
|
||||
["display-image", "discord.png"],
|
||||
],
|
||||
["display-image", "discord.png"],],
|
||||
},
|
||||
illuminati: {
|
||||
content:[
|
||||
["raw-html", function() {return "<h1> C O N F I R M E D </h1>"}],
|
||||
["microtabs", "stuff", {'width': '600px', 'height': '350px', 'background-color': 'brown', 'border-style': 'solid'}]
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
style() {return {
|
||||
// 'background-color': '#3325CC'
|
||||
|
|
@ -205,6 +236,7 @@ addLayer("c", {
|
|||
}
|
||||
})
|
||||
|
||||
// This layer is mostly minimal but it uses a custom prestige type
|
||||
addLayer("f", {
|
||||
startData() { return {
|
||||
unl: false,
|
||||
|
|
@ -216,7 +248,7 @@ addLayer("f", {
|
|||
resource: "farm points",
|
||||
baseResource: "candies",
|
||||
baseAmount() {return player.points},
|
||||
type: "static",
|
||||
type: "custom", // A "Custom" type which is effectively static
|
||||
exponent: 0.5,
|
||||
base: 3,
|
||||
resCeil: true,
|
||||
|
|
@ -229,7 +261,22 @@ addLayer("f", {
|
|||
},
|
||||
row: 1,
|
||||
layerShown() {return true},
|
||||
branches: [["c", 1]] // 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: [["c", 1]], // 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
|
||||
|
||||
// The following are only currently used for "custom" Prestige type:
|
||||
prestigeButtonText() { //Is secretly HTML
|
||||
if (!this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your candies and lollipops! (At least " + formatWhole(tmp.nextAt[layer]) + " candies)"
|
||||
if (this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" + formatWhole(tmp.resetGain[this.layer]) + "</b> Farm Points in exchange for all of your candies and lollipops! (You'll get another one at " + format(tmp.nextAt[layer]) + " candies)"
|
||||
},
|
||||
getResetGain() {
|
||||
return getResetGain(this.layer, useType = "static")
|
||||
},
|
||||
getNextAt(canMax=false) { //
|
||||
return getNextAt(this.layer, canMax, useType = "static")
|
||||
},
|
||||
canReset() {
|
||||
return tmp.layerAmt[this.layer].gte(tmp.nextAt[this.layer])
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@ function updateTemp() {
|
|||
if (!tmp.style) tmp.style = {}
|
||||
if (!tmp.notify) tmp.notify = {}
|
||||
if (!tmp.nextAtDisp) tmp.nextAtDisp = {}
|
||||
if (!tmp.prestigeButtonText) tmp.prestigeButtonText = {}
|
||||
if (!tmp.canReset) tmp.canReset = {}
|
||||
|
||||
for (layer in layers) {
|
||||
if (layers[layer].color) tmp.layerColor[layer] = layers[layer].color()
|
||||
|
|
@ -59,6 +61,8 @@ function updateTemp() {
|
|||
tmp.notify[layer] = shouldNotify(layer)
|
||||
tmp.nextAtDisp[layer] = getNextAt(layer, true)
|
||||
if (layers[layer].effectDescription) tmp.effectDescription[layer] = layers[layer].effectDescription()
|
||||
if (layers[layer].canReset) tmp.canReset[layer] = layers[layer].canReset()
|
||||
if (layers[layer].prestigeButtonText) tmp.prestigeButtonText[layer] = layers[layer].prestigeButtonText()
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
25
js/utils.js
25
js/utils.js
|
|
@ -92,9 +92,15 @@ function getStartPlayer() {
|
|||
playerdata[layer].upgrades = []
|
||||
playerdata[layer].milestones = []
|
||||
playerdata[layer].challs = []
|
||||
if (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat))
|
||||
playerdata[layer].subtab = Object.keys(layers[layer].tabFormat)[0]
|
||||
|
||||
if (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)) {
|
||||
playerdata[layer].subtab = {}
|
||||
playerdata[layer].subtab.mainTabs = Object.keys(layers[layer].tabFormat)[0]
|
||||
}
|
||||
if (layers[layer].microtabs) {
|
||||
if (playerdata[layer].subtab == undefined) playerdata[layer].subtab = {}
|
||||
for (item in layers[layer].microtabs)
|
||||
playerdata[layer].subtab[item] = Object.keys(layers[layer].microtabs[item])[0]
|
||||
}
|
||||
}
|
||||
return playerdata
|
||||
}
|
||||
|
|
@ -133,8 +139,17 @@ function fixSave() {
|
|||
}
|
||||
}
|
||||
|
||||
if (player[layer].subtab == undefined && layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat))
|
||||
player[layer].subtab = Object.keys(layers[layer].tabFormat)[0]
|
||||
if (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)) {
|
||||
if (player[layer].subtab == undefined) player[layer].subtab = {}
|
||||
if (player[layer].subtab.mainTabs == undefined) player[layer].subtab.mainTabs = Object.keys(layers[layer].tabFormat)[0]
|
||||
}
|
||||
|
||||
if (layers[layer].microtabs) {
|
||||
if (player[layer].subtab == undefined) player[layer].subtab = {}
|
||||
for (item in layers[layer].microtabs)
|
||||
if (player[layer].subtab[item] == undefined) player[layer].subtab[item] = Object.keys(layers[layer].microtabs[item])[0]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
33
js/v.js
33
js/v.js
|
|
@ -210,6 +210,7 @@ function loadVue() {
|
|||
<span>
|
||||
<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': tmp.layerColor[layer]}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">{{data ? data() : "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': tmp.layerColor[layer]}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">{{(tmp.layerAmt[layer].gte(tmp.nextAt[layer])&&layers[layer].canBuyMax && layers[layer].canBuyMax())?"Next":"Req"}}: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAtDisp[layer]) : format(tmp.nextAtDisp[layer]))}} {{ layers[layer].baseResource }}</button>
|
||||
<button v-if="layers[layer].type=='custom'" v-bind:class="{ [layer]: true, reset: true, locked: !tmp.canReset[layer], can: tmp.canReset[layer] }" v-bind:style="{'background-color': tmp.layerColor[layer], 'white-space': 'pre-line' }" v-on:click="doReset(layer)" v-html="tmp.prestigeButtonText[layer]"></button>
|
||||
</span>
|
||||
`
|
||||
|
||||
|
|
@ -256,6 +257,38 @@ function loadVue() {
|
|||
`
|
||||
})
|
||||
|
||||
// data = button size, in px
|
||||
Vue.component('microtabs', {
|
||||
props: ['layer', 'data'],
|
||||
computed: {
|
||||
currentTab() {return player[layer].subtab[data]}
|
||||
},
|
||||
template: `
|
||||
<div v-if="layers[layer].microtabs">
|
||||
<div class="upgTable">
|
||||
<tab-buttons :layer="layer" :data="layers[layer].microtabs[data]" :name="data"></tab-buttons>
|
||||
</div>
|
||||
<column v-bind:style="readData(layers[layer].microtabs[data][player[layer].subtab[data]].style)" :layer="layer" :data="layers[layer].microtabs[data][player[layer].subtab[data]].content"></column>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
|
||||
// NOT FOR USE IN STANDARD TAB FORMATTING
|
||||
Vue.component('tab-buttons', {
|
||||
props: ['layer', 'data', 'name'],
|
||||
template: `
|
||||
<div class="upgRow">
|
||||
<div v-for="tab in Object.keys(data)">
|
||||
<button class="tabButton" v-bind:style="[{'border-color': tmp.layerColor[layer]}, readData(data[tab].buttonStyle)]" v-on:click="player[layer].subtab[name] = tab">{{tab}}</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
|
|
|
|||
|
|
@ -130,7 +130,12 @@ h1, h2, h3, b, input {
|
|||
color: var(--color);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 10px 40px 10px 40px
|
||||
padding: 5px 20px 5px 20px;
|
||||
margin: 5px 5px 5px 5px;
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
.tabButton:hover {
|
||||
|
|
|
|||
Loading…
Reference in a new issue