1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-24 09:21:46 +00:00
The-Modding-Tree/index.html
2020-08-19 18:20:42 -04:00

124 lines
No EOL
11 KiB
HTML

<!DOCTYPE html>
<head>
<title>The Prestige Tree</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="js/break_eternity.min.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/v.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
</head>
<body onload="load()">
<div id="app">
<div id="info" v-if="player.tab=='tree'" onclick="showTab('info')"><br>i</div>
<div class="vl"></div>
<div v-if="player.tab=='info'" class="col right">
<button class="back" onclick="showTab('tree')"></button><br><br><br><br><br>
<h3>Hotkeys</h3><br><br>
P: Prestige reset<br>
<span v-if="player.b.unl">B: Booster reset</span><br>
<span v-if="player.g.unl">G: Generator reset</span><br>
<span v-if="player.t.unl">T: Time reset</span><br>
<span v-if="player.e.unl">E: Enhance reset</span><br>
<span v-if="player.s.unl">S: Space reset</span><br>
</div>
<div v-if="player.tab=='options'" class="col right">
<button class="back" onclick="showTab('tree')"></button><br><br><br><br><br>
<table>
<tr>
<td><button class="opt" onclick="save()">Save</button></td>
<td><button class="opt" onclick="hardReset()">HARD RESET</button></td>
</tr>
<tr>
<td><button class="opt" onclick="exportSave()">Export</button></td>
<td><button class="opt" onclick="importSave()">Import</button></td>
</tr>
<tr>
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ player.autosave?"ON":"OFF" }}</button></td>
</tr>
</table>
</div>
<div class="col left">
<img id="optionWheel" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
<br>You have <h2>{{format(player.points)}}</h2> Points
<br><br><br><br><br>
<table>
<tr>
<td id="p"><button onclick="showTab('p')" v-bind:tooltip="(player.points.gte(getLayerReq('p'))||player.p.unl) ? (formatWhole(player.p.points)+' prestige points') : ('Reach '+format(getLayerReq('p'))+' points to unlock')" v-bind:class="{ treeNode: true, p: true, locked: (player.points.lt(getLayerReq('p'))&&!player.p.unl), can: (player.points.gte(getLayerReq('p'))||player.p.unl) }">P</button></td>
</tr>
</table><table>
<tr>
<td><button class="treeNode hidden"></button></td>
</tr>
</table><table>
<tr>
<td v-if="player.b.unl||player.g.unl" class="left"><br><br><img class="remove" src="remove.png" onclick="resetRow(1)"></img></td>
<td id="b" v-if="layerUnl('b')"><button onclick="showTab('b')" v-bind:tooltip="((player.points.gte(getLayerReq('b'))||player.b.unl)&&layerUnl('b')) ? (formatWhole(player.b.points)+' boosters') : ('Reach '+format(getLayerReq('b'))+' points to unlock')" v-bind:class="{ treeNode: true, b: true, locked: (player.points.lt(getLayerReq('b'))&&!player.b.unl), can: (player.points.gte(getLayerReq('b'))||player.b.unl) }">B</button></td>
<td id="g" v-if="layerUnl('g')"><button onclick="showTab('g')" v-bind:tooltip="((player.points.gte(getLayerReq('g'))||player.g.unl)&&layerUnl('g')) ? (formatWhole(player.g.points)+' generators') : ('Reach '+format(getLayerReq('g'))+' points to unlock')" v-bind:class="{ treeNode: true, g: true, locked: (player.points.lt(getLayerReq('g'))&&!player.g.unl), can: (player.points.gte(getLayerReq('g'))||player.g.unl) }">G</button></td>
</tr>
</table><table>
<tr>
<td><button class="treeNode hidden"></button></td>
</tr>
</table><table>
<tr>
<td v-if="player.e.unl||player.t.unl||player.s.unl" class="left"><br><br><img class="remove" src="remove.png" onclick="resetRow(2)"></img></td>
<td id="t" v-if="layerUnl('t')"><button onclick="showTab('t')" v-bind:tooltip="((player.points.gte(getLayerReq('t'))||player.t.unl)&&layerUnl('t')) ? (formatWhole(player.t.points)+' time capsules') : ('Reach '+format(getLayerReq('t'))+' points to unlock')" v-bind:class="{ treeNode: true, t: true, locked: (player.points.lt(getLayerReq('t'))&&!player.t.unl), can: (player.points.gte(getLayerReq('t'))||player.t.unl) }">T</button></td>
<td id="e" v-if="layerUnl('e')"><button onclick="showTab('e')" v-bind:tooltip="((player.points.gte(getLayerReq('e'))||player.e.unl)&&layerUnl('e')) ? (formatWhole(player.e.points)+' enhance points') : ('Reach '+format(getLayerReq('e'))+' points to unlock')" v-bind:class="{ treeNode: true, e: true, locked: (player.points.lt(getLayerReq('e'))&&!player.e.unl), can: (player.points.gte(getLayerReq('e'))||player.e.unl) }">E</button></td>
<td id="s" v-if="layerUnl('s')"><button onclick="showTab('s')" v-bind:tooltip="((player.points.gte(getLayerReq('s'))||player.s.unl)&&layerUnl('s')) ? (formatWhole(player.s.points)+' space energy') : ('Reach '+format(getLayerReq('s'))+' points to unlock')" v-bind:class="{ treeNode: true, s: true, locked: (player.points.lt(getLayerReq('s'))&&!player.s.unl), can: (player.points.gte(getLayerReq('s'))||player.s.unl) }">S</button></td>
</tr>
</table>
<canvas id="treeCanvas" class="canvas"></canvas>
</div>
<div v-for="layer in LAYERS">
<div v-if="player.tab==layer" class="col right">
<button class="back" onclick="showTab('tree')"></button><br><br><br>
You have <h2 v-bind:class="{ [layer+'_txt']: true }">{{formatWhole(player[layer].points)}}</h2> {{LAYER_RES[layer]}}<span v-if="Object.keys(LAYER_EFFS).includes(layer)">, {{getLayerEffDesc(layer)}}</span>
<br><br>
<div v-if="layer=='b'">
<table><tr><td v-bind:class="{ milestone: player.b.best.lt(8), milestoneDone: player.b.best.gte(8) }">8 Boosters<br>Keep Prestige Upgrades on reset</td></tr><tr><td v-bind:class="{ milestone: player.b.best.lt(15), milestoneDone: player.b.best.gte(15) }">15 Boosters<br>You can buy max Boosters</td></tr></table>
</div>
<div v-if="layer=='g'">
You have {{format(player.g.power)}} Generator Power, which multiplies Point gain by {{format(getGenPowerEff())}}<br><br>
<table><tr><td v-bind:class="{ milestone: player.g.best.lt(8), milestoneDone: player.g.best.gte(8) }">8 Generators<br>Keep Prestige Upgrades on reset</td></tr><tr><td v-bind:class="{ milestone: player.g.best.lt(10), milestoneDone: player.g.best.gte(10) }">10 Generators<br>Gain 100% of Prestige Point gain every second</td></tr><tr><td v-bind:class="{ milestone: player.g.best.lt(15), milestoneDone: player.g.best.gte(15) }">15 Generators<br>You can buy max Generators</td></tr></table>
</div>
<div v-if="layer=='e'">
<table><tr><td v-bind:class="{ milestone: player.e.best.lt(2), milestoneDone: player.e.best.gte(2) }">2 enhance points<br>Keep Booster/Generator milestones on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.e.best.lt(10), milestoneDone: player.e.best.gte(10) }">10 enhance points<br>Keep Prestige Upgrades on reset</td></tr></table><br><br>
<button v-bind:class="{ upgBig: true, can: player.e.points.gte(getEnhancerCost()), locked: player.e.points.lt(getEnhancerCost()), e: true }" onclick="buyEnhancer()">Buy an Enhancer<br>Cost: {{formatWhole(getEnhancerCost())}} Enhance Points<br>Amount: {{formatWhole(player.e.enhancers)}}<br>Multiplies Prestige Point gain by {{format(getEnhancerEff())}}<br>Adds to base of Booster/Generator effects by {{format(getEnhancerEff2())}}</button>
</div>
<div v-if="layer=='t'">
You have {{format(player.t.energy)}} Time Energy, which multiplies Point gain & Prestige Point gain by {{format(getTimeEnergyEff())}}<br><br>
<table><tr><td v-bind:class="{ milestone: player.t.best.lt(2), milestoneDone: player.t.best.gte(2) }">2 time capsules<br>Keep Booster/Generator milestones on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.t.best.lt(3), milestoneDone: player.t.best.gte(3) }">3 time capsules<br>Keep Prestige Upgrades on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.t.best.lt(4), milestoneDone: player.t.best.gte(4) }">4 time capsules<br>Keep Booster Upgrades on all row 3 resets</td></tr>
</table><br><br>
<button v-bind:class="{ upgBig: true, can: (player.b.points.gte(getExtCapsuleCost())&&player.t.unl), locked: (player.b.points.lt(getExtCapsuleCost())||!player.t.unl), t: true }" onclick="buyExtCapsule()">Buy an extra Time Capsule<br>Cost: {{formatWhole(getExtCapsuleCost())}} Boosters<br>Amount: {{formatWhole(player.t.extCapsules)}}</button>
</div>
<div v-if="layer=='s'">
You have {{formatWhole(getSpace())}} Space.<br><br>
<table><tr><td v-bind:class="{ milestone: player.s.best.lt(2), milestoneDone: player.s.best.gte(2) }">2 space energy<br>Keep Booster/Generator milestones on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.s.best.lt(3), milestoneDone: player.s.best.gte(3) }">3 space energy<br>Keep Prestige Upgrades on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.s.best.lt(4), milestoneDone: player.s.best.gte(4) }">4 space energy<br>Keep Generator Upgrades on all row 3 resets</td></tr>
</table><br><br>
<button onclick="respecSpaceBuildings()" v-bind:class="{ longUpg: true, can: player.s.unl, locked: !player.s.unl }">Respec Space Buildings</button><br>
<table><tr>
<td v-for="id in 4">
<button v-if="getSpaceBuildingsUnl()>=id" v-bind:class="{ upg: true, can: (player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1)), locked: (!(player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1))), s: true }" v-on:click="buyBuilding(id)">Building {{id}}<br>Level: {{formatWhole(player.s.buildings[id])}}<br>Cost: {{format(getSpaceBuildingCost(id))}} Generator Power<br>Effect: {{getSpaceBuildingEffDesc(id)}}</button>
</td>
</tr></table>
</div>
<br><br><br>
<button v-if="LAYER_TYPE[layer]=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: player.points.lt(getLayerReq(layer)), can: player.points.gte(getLayerReq(layer)) }" v-on:click="doReset(layer)">+{{formatWhole(getResetGain(layer))}} {{LAYER_RES[layer]}}<br>Next at {{ format(getNextAt(layer)) }} points</button>
<button v-if="LAYER_TYPE[layer]=='static'" v-bind:class="{ [layer]: true, reset: true, locked: player.points.lt(getNextAt(layer)), can: player.points.gte(getNextAt(layer)) }" v-on:click="doReset(layer)">+{{formatWhole(getResetGain(layer))}} {{LAYER_RES[layer]}}<br>Req: {{format(getNextAt(layer))}} points</button>
<br><br><br>
<table>
<tr v-for="row in LAYER_UPGS[layer].rows">
<td v-for="col in LAYER_UPGS[layer].cols"><button v-if="LAYER_UPGS[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: (player[layer].points.lt(LAYER_UPGS[layer][row*10+col].cost)&&!player[layer].upgrades.includes(row*10+col)), can: (player[layer].points.gte(LAYER_UPGS[layer][row*10+col].cost)&&!player[layer].upgrades.includes(row*10+col)) }">{{ LAYER_UPGS[layer][row*10+col].desc }}<br>Cost: {{ formatWhole(LAYER_UPGS[layer][row*10+col].cost) }} {{LAYER_RES[layer]}}<span v-if="LAYER_UPGS[layer][row*10+col].currently"><br>Currently: {{LAYER_UPGS[layer][row*10+col].effDisp(LAYER_UPGS[layer][row*10+col].currently())}}</span></button></td>
</tr>
</table>
<br><br><br><br>
</div>
</div>
</div>
</body>