Fixed everything with branches

demo.html

@@ -98,7 +98,7 @@
 			<overlay-head id="fakeHead" style="visibility: hidden;">
 			</overlay-head>
 			<layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" :key="'left'"></layer-tab>
-
+			<bg :layer="player.navTab == 'none' ? player.tab : player.navTab" ></bg>
 		</div>
 
 		<!-- Popups -->
@@ -117,12 +117,15 @@
 				</div>
 		</div>
 
-		<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" style="background-color:var(--background)" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
+		<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
 			<div v-for="layer in LAYERS">
 				<div v-if="player.tab==layer">
 					<layer-tab :layer="layer" :back="'none'" :spacing="'50px'" :key="'left'"></layer-tab>
 				</div>
 			</div>
+			<bg :layer="player.tab" ></bg>
+
 		</div>
+		<div class="bg2"></div>
 	</div>
 </body>

js/Demo/demoLayers.js

@@ -328,6 +328,8 @@ addLayer("c", {
                     ["display-image", "discord.png"],],
             },
             jail: {
+                style() {return  {'background-color': '#222222'}},
+
                 content: [
                     ["infobox", "coolInfo"],
                     ["bar", "longBoi"], "blank",

js/Demo/demoTree.js

@@ -50,5 +50,6 @@ addLayer("tree-tab", {
     tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]],
     previousTab: "",
     leftTab: true,
+                style() {return  {'background-color': '#222222'}},
 
 })

js/components.js

@@ -550,6 +550,7 @@ function loadVue() {
 	Vue.component('options-tab', systemComponents['options-tab'])
 	Vue.component('tooltip', systemComponents['tooltip'])
 	Vue.component('particle', systemComponents['particle'])
+	Vue.component('bg', systemComponents['bg'])
 
 
 	app = new Vue({

js/technical/canvas.js

@@ -7,7 +7,6 @@ function retrieveCanvasData() {
 	let treeCanv = document.getElementById("treeCanvas")
 	let treeTab = document.getElementById("treeTab")
 	if (treeCanv===undefined||treeCanv===null) return false;
-	if (treeTab===undefined||treeTab===null) return false;
 	canvas = treeCanv;
 	ctx = canvas.getContext("2d");
 	return true;
@@ -52,7 +51,6 @@ function drawTree() {
 function drawTreeBranch(num1, data) { // taken from Antimatter Dimensions & adjusted slightly
 	let num2 = data
 	let color_id = 1
-
 	if (Array.isArray(data)){
 		num2 = data[0]
 		color_id = data[1]

js/technical/displays.js

@@ -51,7 +51,6 @@ function achievementStyle(layer, id){
 
 function updateWidth() {
 	let screenWidth = window.innerWidth
-	let last = tmp.other.splitScreen
 	let splitScreen = screenWidth >= 1024
 	if (player.forceOneTab) splitScreen = false
 	if (player.navTab == "none") splitScreen = true
@@ -60,7 +59,6 @@ function updateWidth() {
 
 	tmp.other.splitScreen = splitScreen
 	tmp.other.lastPoints = player.points
-	if (last !== tmp.other.splitScreen) needCanvasUpdate = true
 }
 
 function updateOomps(diff)

js/technical/systemComponents.js

@@ -66,7 +66,7 @@ var systemComponents = {
 	
 	'layer-tab': {
 		props: ['layer', 'back', 'spacing', 'embedded'],
-		template: `<div v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]">
+		template: `<div v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}, {'background-color': 'transparent !important', '--background': 'transparent !important'}]">
 		<div v-if="back"><button v-bind:class="back == 'big' ? 'other-back' : 'back'" v-on:click="goBack(layer)">←</button></div>
 		<div v-if="!tmp[layer].tabFormat">
 			<div v-if="spacing" v-bind:style="{'height': spacing}" :key="this.$vnode.key + '-spacing'"></div>
@@ -136,8 +136,6 @@ var systemComponents = {
         The Modding Tree <a v-bind:href="'https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md'" target="_blank" class="link" v-bind:style = "{'font-size': '14px', 'display': 'inline'}" >{{TMT_VERSION.tmtNum}}</a> by Acamaeda
         <br>
         The Prestige Tree made by Jacorb and Aarex
-        <br>
-        Original idea by papyrus (on discord)
 		<br><br>
 		<div class="link" onclick="showTab('changelog-tab')">Changelog</div><br>
         <span v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></span>
@@ -211,5 +209,11 @@ var systemComponents = {
 		`
 	},
 
+	'bg': {
+		props: ['layer'],
+		template: `<div class ="bg"  v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]"></div>
+		`
+	}
+
 }
 

js/utils/options.js

@@ -25,6 +25,7 @@ function changeTreeQuality() {
 }
 function toggleAuto(toggle) {
 	player[toggle[0]][toggle[1]] = !player[toggle[0]][toggle[1]];
+	needCanvasUpdate=true
 }
 
 const MS_DISPLAYS = ["ALL", "LAST, AUTO, INCOMPLETE", "AUTOMATION, INCOMPLETE", "INCOMPLETE", "NONE"];

style.css

@@ -7,6 +7,7 @@
 	margin: auto;
 	-webkit-text-size-adjust: none;
 	text-size-adjust: none;
+
 }
 
 *:focus {
@@ -15,12 +16,12 @@
 }
 
 body {
-	background-color: var(--background);
 	color: var(--color);
 	overflow: hidden;
 	--background: #0f0f0f;
 	--color: #dfdfdf;
 	--points: #ffffff;
+	background: var(--background)
 }
 
 html, body {
@@ -643,7 +644,6 @@ ul {
 .overlayThing {
 	z-index: 10000;
 	pointer-events:auto;
-	background-color: var(--background);
 }
 
 .sideLayers {
@@ -652,6 +652,8 @@ ul {
 	position: absolute;
 	right: 55px;
 	top: 65px;
+	background-color: transparent;
+
 }
 
 button > * {
@@ -754,3 +756,12 @@ button > * {
 .star:after {
 	transform: rotate(35deg);
 }
+
+.bg {
+	z-index: -9000;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background-color: var(--background);
+	top: 0
+}