From b353693c89b5e2fdaa9b7d421eaae06e1f5ed493 Mon Sep 17 00:00:00 2001
From: Acamaeda <acamaeda@gmail.com>
Date: Tue, 29 Sep 2020 21:47:26 -0400
Subject: [PATCH] Added CSS styling for layer tabs

---
 index.html      | 35 +++++++++++++++++------------------
 js/layers.js    |  5 ++++-
 sampleLayers.js |  6 +++++-
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index bc18d1b..66e7609 100644
--- a/index.html
+++ b/index.html
@@ -130,28 +130,27 @@
 			<canvas id="treeCanvas" class="canvas"></canvas>
 		</div>
 		<div v-for="layer in LAYERS">
-			<div v-if="player.tab==layer && !layers[layer].tabFormat" class="col right">
+			<div v-if="player.tab==layer" v-bind:class="'col right'" v-bind:style="layers[layer].style ? layers[layer].style : {}">
 				<button class="back" onclick="showTab('tree')">←</button><br><br><br>
-				<main-display :layer="layer"></main-display>
-				<prestige-button :layer="layer"></prestige-button>
-				<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
-				<br><br>
-				<span v-if="player[layer].best != undefined">Your best {{layers[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
-				<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{layers[layer].resource}}<br></span>
-				<milestones :layer="layer"></milestones>
-				<br><br>
-				<upgrades :layer="layer"></upgrades>
-				<challs :layer="layer"></challs>
-				<br><br>
-			</div>
-			<div v-if="player.tab==layer && layers[layer].tabFormat" class="col right">
-				<button class="back" onclick="showTab('tree')">←</button><br><br><br>
-				<div v-for="data in layers[layer].tabFormat">
+				<div v-if="!layers[layer].tabFormat">
+					<main-display :layer="layer"></main-display>
+					<prestige-button :layer="layer"></prestige-button>
+					<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
+					<br><br>
+					<span v-if="player[layer].best != undefined">Your best {{layers[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
+					<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{layers[layer].resource}}<br></span>
+					<milestones :layer="layer"></milestones>
+					<br><br>
+					<upgrades :layer="layer"></upgrades>
+					<challs :layer="layer"></challs>
+					<br><br>
+				</div>
+				<div v-if="layers[layer].tabFormat">
+					<div v-for="data in layers[layer].tabFormat">
 					<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
 					<div v-else-if="data.length==3" v-bind:is="data[0]" :layer= "layer" :data= "data[1]" :data2="data[2]"></div>
 					<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
-
-				</div>
+				</divs>
 			</div>
 		</div>
 	</div>
diff --git a/js/layers.js b/js/layers.js
index 70f1ce8..ae397ef 100644
--- a/js/layers.js
+++ b/js/layers.js
@@ -107,7 +107,10 @@ var layers = {
                         {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
                     "blank",
                     ["toggle", ["c", "beep"]],
-                    "milestones", "blank", "blank", "upgrades"]
+                    "milestones", "blank", "blank", "upgrades"],
+        style: {
+            'background-color': 'blue'
+        },
     }, 
 
     f: {
diff --git a/sampleLayers.js b/sampleLayers.js
index 5d3c052..84d20c0 100644
--- a/sampleLayers.js
+++ b/sampleLayers.js
@@ -133,7 +133,11 @@ var layers = {
                         {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
                     "blank",
                     ["toggle", ["c", "beep"]],
-                    "milestones", "blank", "blank", "upgrades"]    }, 
+                    "milestones", "blank", "blank", "upgrades"] ,
+        style: {
+            'background-color': 'blue'
+        },
+   }, 
     f: { // This layer contains a more minimal set of things, besides a branch and "boop"
         startData() { return {
             unl: false,