diff --git a/index.html b/index.html index 671f4b2..344abe6 100644 --- a/index.html +++ b/index.html @@ -285,16 +285,17 @@ + + - - +
@@ -341,7 +342,7 @@
- + @@ -476,12 +477,14 @@







- - + +


-
+
+ +


diff --git a/js/canvas.js b/js/canvas.js index 1b3fb6a..d81f057 100644 --- a/js/canvas.js +++ b/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(); diff --git a/js/game.js b/js/game.js index 4a76553..34185e2 100644 --- a/js/game.js +++ b/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; } } diff --git a/style.css b/style.css index 5cd7a3d..001cd72 100644 --- a/style.css +++ b/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; }