Centralized layer node components and styles removing duplicated code

changelog.md

@@ -1,5 +1,8 @@
 # The Modding Tree changelog:
 
+### v2.2.3 -
+- Button nodes now work as side "layers".
+
 ### v2.2.2 - 11/22/20
 - Fixed right half of the screen being unclickable in some circumstances.
 - Fixed tree branches being offset.

demo.html

@@ -60,7 +60,7 @@
 			</div>
 			<overlay-head v-if="!(gameEnded && !player.keepGoing)"></overlay-head>
 			<div class="sideLayers" >
-				<div v-for="node in OTHER_LAYERS['side']"><layer-node :layer='node' :abb='tmp[node].symbol' :size="'small'"></layer-node></div>
+				<div v-for="node in OTHER_LAYERS['side']"><tree-node :layer='node' :abb='tmp[node].symbol' :size="'small'"></tree-node></div>
 			</div>
 		</div>
 

index.html

@@ -60,7 +60,7 @@
 			</div>
 			<overlay-head v-if="!(gameEnded && !player.keepGoing)"></overlay-head>
 			<div class="sideLayers" >
-				<div v-for="node in OTHER_LAYERS['side']"><layer-node :layer='node' :abb='tmp[node].symbol' :size="'small'"></layer-node></div>
+				<div v-for="node in OTHER_LAYERS['side']"><tree--node :layer='node' :abb='tmp[node].symbol' :size="'small'"></tree-node></div>
 			</div>
 		</div>
 

js/Demo/demoTree.js

@@ -37,7 +37,7 @@ addNode("h", {
     layerShown: true,
     tooltip: "Restore your points to 10",
     tooltipLocked: "Restore your points to 10",
-
+    row: "side",
     canClick() {return player.points.lt(10)},
     onClick() {player.points = new Decimal(10)}
 }, 

js/components.js

@@ -372,9 +372,8 @@ function loadVue() {
 		props: ['layer', 'data'],
 		template: `<div>
 		<span v-for="row in data"><table>
-			<td v-for="node in row">
-				<layer-node v-if="tmp[node].isLayer" :layer='node' :abb='tmp[node].symbol'></layer-node>
-				<button-node v-else :layer='node' :abb='tmp[node].symbol'></layer-node>
+			<td v-for="node in row" style = "{width: 0px}">
+				<tree-node  :layer='node' :abb='tmp[node].symbol'></tree-node>
 			</td>
 			<tr><table><button class="treeNode hidden"></button></table></tr>
 		</span></div>
@@ -399,8 +398,7 @@ function loadVue() {
 	// SYSTEM COMPONENTS
 
 	Vue.component('tab-buttons', systemComponents['tab-buttons'])
-	Vue.component('button-node', systemComponents['button-node'])
-	Vue.component('layer-node', systemComponents['layer-node'])
+	Vue.component('tree-node', systemComponents['tree-node'])
 	Vue.component('layer-tab', systemComponents['layer-tab'])
 	Vue.component('overlay-head', systemComponents['overlay-head'])
 	Vue.component('info-tab', systemComponents['info-tab'])

js/technical/systemComponents.js

@@ -10,64 +10,45 @@ var systemComponents = {
 		`
 	},
 
-	'button-node': {
+	'tree-node': {
 		props: ['layer', 'abb', 'size'],
 		template: `
 		<button v-if="nodeShown(layer)"
 			v-bind:id="layer"
 			v-on:click="function() {
-				layers[layer].onClick()
+				if(tmp[layer].isLayer) {showTab(layer)}
+				else {layers[layer].onClick()}
 			}"
-			v-bind:tooltip="
-				tmp[layer].canClick ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
-				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'I am a button!')
-			"
-			v-bind:class="{
-				treeButton: size != 'small',
-				smallNode: size == 'small',
-				[layer]: true,
-				ghost: tmp[layer].layerShown == 'ghost',
-				hidden: !tmp[layer].layerShown,
-				locked: !tmp[layer].canClick,
-				notify: tmp[layer].notify,
-				can: tmp[layer].canClick,
-			}"
-			v-bind:style="[tmp[layer].canClick ? {'background-color': tmp[layer].color} : {}, tmp[layer].nodeStyle]">
-			{{abb}}
-		</button>
-		`
-	},
 
-	'layer-node': {
-		props: ['layer', 'abb', 'size'],
-		template: `
-		<button v-if="nodeShown(layer)"
-			v-bind:id="layer"
-			v-on:click="function() {
-				showTab(layer)
-			}"
-			v-bind:tooltip="
+			v-bind:tooltip=" (tmp[layer].isLayer) ? (
 				player[layer].unlocked ? (tmp[layer].tooltip ? tmp[layer].tooltip : formatWhole(player[layer].points) + ' ' + tmp[layer].resource)
 				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'Reach ' + formatWhole(tmp[layer].requires) + ' ' + tmp[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp[layer].baseAmount) + ' ' + tmp[layer].baseResource + ')')
+			)
+			: (
+				tmp[layer].canClick ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
+				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'I am a button!')
+			)
 			"
 			v-bind:class="{
-				treeNode: size != 'small',
+				treeNode: tmp[layer].isLayer,
+				treeButton: !tmp[layer].isLayer,
 				smallNode: size == 'small',
 				[layer]: true,
 				ghost: tmp[layer].layerShown == 'ghost',
 				hidden: !tmp[layer].layerShown,
-				locked: !player[layer].unlocked && !tmp[layer].baseAmount.gte(tmp[layer].requires),
+				locked: tmp[layer].isLayer ? !(player[layer].unlocked || tmp[layer].canReset) : !(tmp[layer].canClick),
 				notify: tmp[layer].notify,
 				resetNotify: tmp[layer].prestigeNotify,
-				can: player[layer].unlocked,
+				can: (player[layer].unlocked && tmp[layer].isLayer) || (!tmp[layer].isLayer && tmp[layer].canClick),
 			}"
-			v-bind:style="[layerunlocked(layer) ? {
+			v-bind:style="[(tmp[layer].isLayer && layerunlocked(layer)) || (!tmp[layer].isLayer && tmp[layer].canClick) ? {
 				'background-color': tmp[layer].color,
 			} : {}, tmp[layer].nodeStyle]">
 			{{abb}}
 		</button>
 		`
 	},
+
 	
 	'layer-tab': {
 		props: ['layer', 'back', 'spacing'],

style.css

@@ -97,16 +97,7 @@ h1, h2, h3, b, input {
 .smallNode {
 	height: 60px;
 	width: 60px;
-	border: var(--hqProperty1);
-	border-color: rgba(0, 0, 0, 0.125);
-	border-radius: 50%;
-	box-shadow: var(--hqProperty2a), var(--hqProperty2b);
 	font-size: 30px;
-	font-family: "Lucida Console", "Courier New", monospace;
-	color: rgba(0, 0, 0, 0.5);
-	text-shadow: var(--hqProperty3);
-	padding: 0;
-
 }