mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-24 09:21:46 +00:00
Build 2
This commit is contained in:
Aarex Tiaokhiao
parent
20222e3f19
commit
b1e7fa5845
4 changed files with 58 additions and 31 deletions
15
index.html
15
index.html
|
|
@ -285,16 +285,17 @@
|
|||
<table>
|
||||
<tr>
|
||||
<td><button class="opt" onclick="save()">Save</button></td>
|
||||
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ player.autosave?"ON":"OFF" }}</button></td>
|
||||
<td><button class="opt" onclick="hardReset()">HARD RESET</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="opt" onclick="exportSave()">Export to clipboard</button></td>
|
||||
<td><button class="opt" onclick="importSave()">Import</button></td>
|
||||
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ player.autosave?"ON":"OFF" }}</button></td>
|
||||
<td><button class="opt" onclick="adjustMSDisp()">Show Milestones: {{ player.msDisplay.toUpperCase() }}</button></td>
|
||||
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td>
|
||||
<td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ player.hqTree?"ON":"OFF" }}</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -341,7 +342,7 @@
|
|||
</table><table>
|
||||
<td><button class="treeNode hidden"></button></td>
|
||||
</table><table>
|
||||
<td class="left"><br><br><img class="remove" src="remove.png" onclick="resetRow(5)"></img></td>
|
||||
<td v-if="layerUnl('sp')" class="left"><br><br><img class="remove" src="remove.png" onclick="resetRow(5)"></img></td>
|
||||
<td id="l" v-if="layerUnl('l')"><button class="treeNode l can">L</button></td>
|
||||
<td><button class="treeNode hidden"></button></td>
|
||||
<td id="sp" v-if="layerUnl('sp')"><button class="treeNode sp can">SP</button></td>
|
||||
|
|
@ -476,12 +477,14 @@
|
|||
</table>
|
||||
</div>
|
||||
<br><br><br>
|
||||
<button v-if="LAYER_TYPE[layer]=='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-on:click="doReset(layer)">+{{formatWhole(tmp.resetGain[layer])}} {{LAYER_RES[layer]}}<br>Next at {{ (LAYER_RES_CEIL.includes(layer) ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ LAYER_AMT_NAMES[layer] }}</button>
|
||||
<button v-if="LAYER_TYPE[layer]=='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-on:click="doReset(layer)">+{{formatWhole(tmp.resetGain[layer])}} {{LAYER_RES[layer]}}<br>Req: {{(LAYER_RES_CEIL.includes(layer) ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer]))}} {{ LAYER_AMT_NAMES[layer] }}</button>
|
||||
<button v-if="LAYER_TYPE[layer]=='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-on:click="doReset(layer)">Reset for +{{formatWhole(tmp.resetGain[layer])}} {{LAYER_RES[layer]}}<br>Next at {{ (LAYER_RES_CEIL.includes(layer) ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ LAYER_AMT_NAMES[layer] }}</button>
|
||||
<button v-if="LAYER_TYPE[layer]=='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-on:click="doReset(layer)">Reset for +{{formatWhole(tmp.resetGain[layer])}} {{LAYER_RES[layer]}}<br>Req: {{(LAYER_RES_CEIL.includes(layer) ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer]))}} {{ LAYER_AMT_NAMES[layer] }}</button>
|
||||
<br><br><br>
|
||||
<div class="upgTable">
|
||||
<div v-for="row in LAYER_UPGS[layer].rows" class="upgRow">
|
||||
<div 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></div>
|
||||
<div v-for="col in LAYER_UPGS[layer].cols" class="upgAlign">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
|
|
|
|||
14
js/canvas.js
14
js/canvas.js
|
|
@ -22,6 +22,12 @@ function resizeCanvas() {
|
|||
drawTree();
|
||||
}
|
||||
|
||||
var colors = {
|
||||
1: "#ffffff",
|
||||
2: "#bfbfbf",
|
||||
3: "#7f7f7f"
|
||||
}
|
||||
|
||||
function drawTree() {
|
||||
if (!retrieveCanvasData()) return;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
|
@ -51,6 +57,7 @@ function drawTree() {
|
|||
drawTreeBranch("q", "m")
|
||||
}
|
||||
if (layerUnl('ba')) {
|
||||
drawTreeBranch("h", "ba", 2)
|
||||
drawTreeBranch("q", "ba")
|
||||
drawTreeBranch("ss", "ba")
|
||||
}
|
||||
|
|
@ -63,7 +70,8 @@ function drawTree() {
|
|||
drawTreeBranch("m", "l")
|
||||
}
|
||||
if (layerUnl('ps')) {
|
||||
drawTreeBranch("h", "ps")
|
||||
drawTreeBranch("h", "ps", 3)
|
||||
drawTreeBranch("q", "ps", 3)
|
||||
}
|
||||
if (layerUnl('hs')) {
|
||||
drawTreeBranch("ss", "hs")
|
||||
|
|
@ -75,7 +83,7 @@ function drawTree() {
|
|||
needCanvasUpdate = false;
|
||||
}
|
||||
|
||||
function drawTreeBranch(num1, num2) { // taken from Antimatter Dimensions & adjusted slightly
|
||||
function drawTreeBranch(num1, num2, color_id = 1) { // taken from Antimatter Dimensions & adjusted slightly
|
||||
let start = document.getElementById(num1).getBoundingClientRect();
|
||||
let end = document.getElementById(num2).getBoundingClientRect();
|
||||
let x1 = start.left + (start.width / 2) + (document.getElementById("treeTab").scrollLeft || document.body.scrollLeft);
|
||||
|
|
@ -84,7 +92,7 @@ function drawTreeBranch(num1, num2) { // taken from Antimatter Dimensions & adju
|
|||
let y2 = end.top + (end.height / 2) + (document.getElementById("treeTab").scrollTop || document.body.scrollTop);
|
||||
ctx.lineWidth = 15;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "white"
|
||||
ctx.strokeStyle = colors[color_id]
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.stroke();
|
||||
|
|
|
|||
18
js/game.js
18
js/game.js
|
|
@ -1343,6 +1343,7 @@ function load() {
|
|||
checkForVars();
|
||||
convertToDecimal();
|
||||
versionCheck();
|
||||
changeTreeQuality();
|
||||
updateTemp();
|
||||
updateTemp();
|
||||
loadVue();
|
||||
|
|
@ -1488,6 +1489,13 @@ function convertToDecimal() {
|
|||
|
||||
function toggleOpt(name) {
|
||||
player[name] = !player[name]
|
||||
if (name == "hqTree") changeTreeQuality()
|
||||
}
|
||||
|
||||
function changeTreeQuality() {
|
||||
var on = player.hqTree
|
||||
document.body.style.setProperty('--hqProperty1', on ? "0px 0px 20px black" : "")
|
||||
document.body.style.setProperty('--hqProperty2', on ? "2px 2px 4px rgba(0, 0, 0, 0.25)" : "none")
|
||||
}
|
||||
|
||||
function exponentialFormat(num, precision) {
|
||||
|
|
@ -1734,19 +1742,19 @@ function layerUnl(layer) {
|
|||
return player.q.unl&&player.ss.unl
|
||||
break;
|
||||
case "sp":
|
||||
return false //player.m.unl&&player.ba.unl
|
||||
return false //player.m.unl && player.ba.unl
|
||||
break;
|
||||
case "l":
|
||||
return false //player.m.unl&&player.ba.unl
|
||||
return false //player.sp.unl
|
||||
break;
|
||||
case "ps":
|
||||
return false //player.m.unl&&player.ba.unl
|
||||
return false //player.l.unl
|
||||
break;
|
||||
case "hs":
|
||||
return false //player.m.unl&&player.ba.unl
|
||||
return false //player.sp.unl
|
||||
break;
|
||||
case "i":
|
||||
return false //player.m.unl&&player.ba.unl
|
||||
return false //player.ps.unl && player.hs.unl
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
style.css
42
style.css
|
|
@ -41,6 +41,11 @@ html, body {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.upgAlign {
|
||||
height: 120px;
|
||||
vertical-align: 0
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -49,8 +54,10 @@ h1, h2 {
|
|||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
border-color: black;
|
||||
border-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.25);
|
||||
box-shadow: var(--hqProperty1);
|
||||
font-size: 40px;
|
||||
text-shadow: var(--hqProperty2);
|
||||
}
|
||||
|
||||
.locked {
|
||||
|
|
@ -63,8 +70,9 @@ h1, h2 {
|
|||
}
|
||||
|
||||
.can:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
text-shadow: 0px 0px 7px white;
|
||||
transform: scale(1.15, 1.15);
|
||||
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
|
||||
z-index: 3
|
||||
}
|
||||
|
||||
.bought {
|
||||
|
|
@ -89,17 +97,17 @@ h1, h2 {
|
|||
}
|
||||
|
||||
.reset {
|
||||
height: 100px;
|
||||
height: 125px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
border-color: black;
|
||||
border-radius: 40%;
|
||||
border-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.upg {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
border-radius: 25%;
|
||||
border-color: black;
|
||||
border-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.25);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -107,14 +115,14 @@ h1, h2 {
|
|||
height: 200px;
|
||||
width: 200px;
|
||||
border-radius: 25%;
|
||||
border-color: black;
|
||||
border-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.longUpg {
|
||||
height: 50px;
|
||||
width: 120px;
|
||||
border-radius: 50%;
|
||||
border-color: black;
|
||||
border-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.25);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -122,7 +130,7 @@ h1, h2 {
|
|||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 25%;
|
||||
border-color: black;
|
||||
border-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.p {
|
||||
|
|
@ -186,13 +194,13 @@ h1, h2 {
|
|||
}
|
||||
|
||||
.sb {
|
||||
background-color: #415a9e;
|
||||
background-color: #494b99;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sb_txt {
|
||||
color: #415a9e;
|
||||
text-shadow: 0px 0px 10px #415a9e;
|
||||
color: #494b99;
|
||||
text-shadow: 0px 0px 10px #494b99;
|
||||
}
|
||||
|
||||
.h {
|
||||
|
|
@ -256,13 +264,13 @@ h1, h2 {
|
|||
}
|
||||
|
||||
.sg {
|
||||
background-color: #409c6e;
|
||||
background-color: #3d997a;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sg_txt {
|
||||
color: #409c6e;
|
||||
text-shadow: 0px 0px 10px #409c6e;
|
||||
color: #3d997a;
|
||||
text-shadow: 0px 0px 10px #3d997a;
|
||||
}
|
||||
|
||||
.sp {
|
||||
|
|
@ -353,7 +361,7 @@ a {
|
|||
border-radius: 25%;
|
||||
border-color: black;
|
||||
background-color: #a1a1a1;
|
||||
color: black;
|
||||
border-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.25);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue