mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-24 01:11:46 +00:00
Added the ability to customize the tab layout and add your own components
This commit is contained in:
Acamaeda
parent
029f5546c0
commit
8bcc09219a
4 changed files with 124 additions and 65 deletions
47
index.html
47
index.html
|
|
@ -122,47 +122,32 @@
|
|||
<canvas id="treeCanvas" class="canvas"></canvas>
|
||||
</div>
|
||||
<div v-for="layer in LAYERS">
|
||||
<div v-if="player.tab==layer" class="col right">
|
||||
<div v-if="player.tab==layer && !layers[layer].tabFormat" class="col right">
|
||||
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
|
||||
<span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span>
|
||||
<br><br>
|
||||
<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>
|
||||
<prestige-button :layer="layer"></prestige-button>
|
||||
<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
|
||||
<br><br>
|
||||
<span v-if="player[layer].best != undefined">Your best {{layers[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
|
||||
<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{layers[layer].resource}}<br></span>
|
||||
<div v-if="layers[layer].milestones">
|
||||
<table>
|
||||
<tr v-for="id in Object.keys(layers[layer].milestones)">
|
||||
<div><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"><button class="smallUpg can" v-bind:style="{'background-color': layers[toggle[0]].color}" v-on:click="toggleAuto(toggle)">{{player[toggle[0]][toggle[1]]?"ON":"OFF"}}</button> </span></td></tr>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<milestones :layer="layer"></milestones>
|
||||
<br><br>
|
||||
<div v-if="layers[layer].upgrades != undefined" 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>
|
||||
<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>
|
||||
<upgrades :layer="layer"></upgrades>
|
||||
<challs :layer="layer"></challs>
|
||||
<br><br>
|
||||
</div>
|
||||
<div v-if="player.tab==layer && layers[layer].tabFormat" class="col right">
|
||||
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
|
||||
<span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span>
|
||||
<br><br>
|
||||
<div v-for="data in layers[layer].tabFormat">
|
||||
<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
|
||||
<div v-else-if="data.length==3" v-bind:is="data[0]" :layer= "layer" :data= "data[1]" :data2="data[2]"></div>
|
||||
<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
|
|
|||
26
js/layers.js
26
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: {
|
||||
|
|
|
|||
87
js/v.js
87
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> </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: {
|
||||
|
|
|
|||
|
|
@ -90,18 +90,22 @@ var layers = {
|
|||
challs: {
|
||||
rows: 1,
|
||||
cols: 1,
|
||||
active(x) {
|
||||
if (x<71&&x!=42&&x!=52) if (this.active(71)) return true
|
||||
if (x==11||x==41) if (this.active(51)) return true
|
||||
if (x==31||x==32) if (this.active(61)) return true
|
||||
return player.c.active==x;
|
||||
},
|
||||
11: {
|
||||
name: "Skip the Second",
|
||||
desc: "Boosters and Generator Power do nothing",
|
||||
name: "Fun",
|
||||
desc: "Makes the game 0% harder",
|
||||
unl() { return player.c.best.gt(0) },
|
||||
goal: new Decimal("1e2400"),
|
||||
reward: "The generator power effect is raised to the power of 1.25",
|
||||
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
|
||||
},
|
||||
},
|
||||
convertToDecimal() {
|
||||
|
|
@ -118,7 +122,10 @@ var layers = {
|
|||
return
|
||||
}, // Useful for if you gain secondary resources or have other interesting things happen to this layer when you reset it. You gain the currency after this function ends.
|
||||
incr_order: [], // Array of layer names to have their order increased when this one is first unlocked
|
||||
branches: [] // 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: [], // 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
|
||||
|
||||
// Optional, lets you format the tab yourself by listing components. You can create more 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: { // This layer contains a more minimal set of things, besides a branch and "boop"
|
||||
startData() { return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue