incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-24 09:21:46 +00:00
Code Issues Releases Activity Actions

Build 2

Browse source
This commit is contained in:
Aarex Tiaokhiao 2020-09-07 10:16:04 -04:00
parent 20222e3f19
commit b1e7fa5845
4 changed files with 58 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
index.html
View file

@ -285,16 +285,17 @@
<table> <table>
<tr> <tr>
<td><button class="opt" onclick="save()">Save</button></td> <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> <td><button class="opt" onclick="hardReset()">HARD RESET</button></td>
</tr> </tr>
<tr> <tr>
<td><button class="opt" onclick="exportSave()">Export to clipboard</button></td> <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="importSave()">Import</button></td>
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td>
</tr> </tr>
<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="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> </tr>
</table> </table>
</div> </div>
@ -341,7 +342,7 @@
</table><table> </table><table>
<td><button class="treeNode hidden"></button></td> <td><button class="treeNode hidden"></button></td>
</table><table> </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 id="l" v-if="layerUnl('l')"><button class="treeNode l can">L</button></td>
<td><button class="treeNode hidden"></button></td> <td><button class="treeNode hidden"></button></td>
<td id="sp" v-if="layerUnl('sp')"><button class="treeNode sp can">SP</button></td> <td id="sp" v-if="layerUnl('sp')"><button class="treeNode sp can">SP</button></td>
@ -476,12 +477,14 @@
</table> </table>
</div> </div>
<br><br><br> <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]=='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)">+{{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]=='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> <br><br><br>
<div class="upgTable"> <div class="upgTable">
<div v-for="row in LAYER_UPGS[layer].rows" class="upgRow"> <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>
</div> </div>
<br><br> <br><br>

14
js/canvas.js
View file

@ -22,6 +22,12 @@ function resizeCanvas() {
drawTree(); drawTree();
} }
var colors = {
1: "#ffffff",
2: "#bfbfbf",
3: "#7f7f7f"
}
function drawTree() { function drawTree() {
if (!retrieveCanvasData()) return; if (!retrieveCanvasData()) return;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
@ -51,6 +57,7 @@ function drawTree() {
drawTreeBranch("q", "m") drawTreeBranch("q", "m")
} }
if (layerUnl('ba')) { if (layerUnl('ba')) {
drawTreeBranch("h", "ba", 2)
drawTreeBranch("q", "ba") drawTreeBranch("q", "ba")
drawTreeBranch("ss", "ba") drawTreeBranch("ss", "ba")
} }
@ -63,7 +70,8 @@ function drawTree() {
drawTreeBranch("m", "l") drawTreeBranch("m", "l")
} }
if (layerUnl('ps')) { if (layerUnl('ps')) {
drawTreeBranch("h", "ps") drawTreeBranch("h", "ps", 3)
drawTreeBranch("q", "ps", 3)
} }
if (layerUnl('hs')) { if (layerUnl('hs')) {
drawTreeBranch("ss", "hs") drawTreeBranch("ss", "hs")
@ -75,7 +83,7 @@ function drawTree() {
needCanvasUpdate = false; 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 start = document.getElementById(num1).getBoundingClientRect();
let end = document.getElementById(num2).getBoundingClientRect(); let end = document.getElementById(num2).getBoundingClientRect();
let x1 = start.left + (start.width / 2) + (document.getElementById("treeTab").scrollLeft || document.body.scrollLeft); 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); let y2 = end.top + (end.height / 2) + (document.getElementById("treeTab").scrollTop || document.body.scrollTop);
ctx.lineWidth = 15; ctx.lineWidth = 15;
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = "white" ctx.strokeStyle = colors[color_id]
ctx.moveTo(x1, y1); ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2); ctx.lineTo(x2, y2);
ctx.stroke(); ctx.stroke();

16
js/game.js
View file

@ -1343,6 +1343,7 @@ function load() {
checkForVars(); checkForVars();
convertToDecimal(); convertToDecimal();
versionCheck(); versionCheck();
changeTreeQuality();
updateTemp(); updateTemp();
updateTemp(); updateTemp();
loadVue(); loadVue();
@ -1488,6 +1489,13 @@ function convertToDecimal() {
function toggleOpt(name) { function toggleOpt(name) {
player[name] = !player[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) { function exponentialFormat(num, precision) {
@ -1737,16 +1745,16 @@ function layerUnl(layer) {
return false //player.m.unl && player.ba.unl return false //player.m.unl && player.ba.unl
break; break;
case "l": case "l":
return false //player.m.unl&&player.ba.unl return false //player.sp.unl
break; break;
case "ps": case "ps":
return false //player.m.unl&&player.ba.unl return false //player.l.unl
break; break;
case "hs": case "hs":
return false //player.m.unl&&player.ba.unl return false //player.sp.unl
break; break;
case "i": case "i":
return false //player.m.unl&&player.ba.unl return false //player.ps.unl && player.hs.unl
break; break;
} }
} }

42
style.css
View file

@ -41,6 +41,11 @@ html, body {
margin: 0 auto; margin: 0 auto;
} }
.upgAlign {
height: 120px;
vertical-align: 0
}
h1, h2 { h1, h2 {
display: inline; display: inline;
} }
@ -49,8 +54,10 @@ h1, h2 {
height: 100px; height: 100px;
width: 100px; width: 100px;
border-radius: 50%; 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; font-size: 40px;
text-shadow: var(--hqProperty2);
} }
.locked { .locked {
@ -63,8 +70,9 @@ h1, h2 {
} }
.can:hover { .can:hover {
transform: scale(1.1, 1.1); transform: scale(1.15, 1.15);
text-shadow: 0px 0px 7px white; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
z-index: 3
} }
.bought { .bought {
@ -89,17 +97,17 @@ h1, h2 {
} }
.reset { .reset {
height: 100px; height: 125px;
width: 150px; width: 150px;
border-radius: 50%; border-radius: 40%;
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);
} }
.upg { .upg {
height: 120px; height: 120px;
width: 120px; width: 120px;
border-radius: 25%; 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; font-size: 10px;
} }
@ -107,14 +115,14 @@ h1, h2 {
height: 200px; height: 200px;
width: 200px; width: 200px;
border-radius: 25%; 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 { .longUpg {
height: 50px; height: 50px;
width: 120px; width: 120px;
border-radius: 50%; 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; font-size: 10px;
} }
@ -122,7 +130,7 @@ h1, h2 {
height: 40px; height: 40px;
width: 40px; width: 40px;
border-radius: 25%; 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 { .p {
@ -186,13 +194,13 @@ h1, h2 {
} }
.sb { .sb {
background-color: #415a9e; background-color: #494b99;
color: black; color: black;
} }
.sb_txt { .sb_txt {
color: #415a9e; color: #494b99;
text-shadow: 0px 0px 10px #415a9e; text-shadow: 0px 0px 10px #494b99;
} }
.h { .h {
@ -256,13 +264,13 @@ h1, h2 {
} }
.sg { .sg {
background-color: #409c6e; background-color: #3d997a;
color: black; color: black;
} }
.sg_txt { .sg_txt {
color: #409c6e; color: #3d997a;
text-shadow: 0px 0px 10px #409c6e; text-shadow: 0px 0px 10px #3d997a;
} }
.sp { .sp {
@ -353,7 +361,7 @@ a {
border-radius: 25%; border-radius: 25%;
border-color: black; border-color: black;
background-color: #a1a1a1; 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; cursor: pointer;
} }