Added glowColor for subtabs

changelog.md

@@ -1,5 +1,7 @@
 # The Modding Tree changelog:
 
+# v2.5.2 - 5/7/21
+- Added glowColor for subtabs.
 - Improved the display for extremely small numbers.
 - Fixed issues in the buyable docs.
 

docs/subtabs-and-microtabs.md

@@ -52,5 +52,8 @@ Normal subtabs and microtab subtabs both use the same features:
 
 - shouldNotify()/prestigeNotify(): **optional**, if true, the tab button will be highlighted to notify the player that there is something there.
 
+- glowColor: **optional**, specifies the color that the subtab glows. If this subtab is causing the main layer to node glow
+    (and it would't otherwise) the node also glows this color. Is NOT overridden by embedding a layer.
+
 - embedLayer: **SIGNIFICANT**, the id of another layer. If you have this, it will override "content", "style" and "shouldNotify",
                 instead displaying the entire layer in the subtab.

js/Demo/demoLayers.js

@@ -302,6 +302,8 @@ addLayer("c", {
                         function() {return 'I have ' + format(player.points) + ' ' + player.c.thingy + ' points!'},
                         {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
                     "h-line", "milestones", "blank", "upgrades", "challenges"],
+                glowColor: "blue",
+
             },
             thingies: {
                 prestigeNotify: true,

js/game.js

@@ -88,21 +88,27 @@ function shouldNotify(layer){
 		return true
 	}
 
+	if (tmp[layer].shouldNotify)
+		return true
+
 	if (isPlainObject(tmp[layer].tabFormat)) {
 		for (subtab in tmp[layer].tabFormat){
-			if (subtabShouldNotify(layer, 'mainTabs', subtab))
+			if (subtabShouldNotify(layer, 'mainTabs', subtab)) {
+				tmp[layer].trueGlowColor = tmp[layer].tabFormat[subtab].glowColor
 				return true
 			}
 		}
+	}
 
 	for (family in tmp[layer].microtabs) {
 		for (subtab in tmp[layer].microtabs[family]){
 			if (subtabShouldNotify(layer, family, subtab))
+				tmp[layer].trueGlowColor = tmp[layer].microtabs[family][subtab].glowColor
 				return true
 		}
 	}
 	 
-	return tmp[layer].shouldNotify
+	return false
 	
 }
 

js/technical/displays.js

@@ -18,8 +18,8 @@ function constructNodeStyle(layer){
 		style.push({'background-color': tmp[layer].color})
 	if (tmp[layer].image !== undefined)
 		style.push({'background-image': 'url("' + tmp[layer].image + '")'})
-	if(tmp[layer].glowColor !== undefined && tmp[layer].notify && player[layer].unlocked)
+	if(tmp[layer].notify && player[layer].unlocked)
-		style.push({'box-shadow': 'var(--hqProperty2a), 0 0 20px ' + tmp[layer].glowColor})
+		style.push({'box-shadow': 'var(--hqProperty2a), 0 0 20px ' + tmp[layer].trueGlowColor})
 	style.push(tmp[layer].nodeStyle)
     return style
 }

js/technical/layerSupport.js

@@ -174,6 +174,7 @@ function setupLayer(layer){
     if(layers[layer].displayRow === undefined) layers[layer].displayRow = layers[layer].row
     if(layers[layer].name === undefined) layers[layer].name = layer
     if(layers[layer].layerShown === undefined) layers[layer].layerShown = true
+    if(layers[layer].glowColor === undefined) layers[layer].glowColor = "#ff0000"
 
     let row = layers[layer].row
 

js/technical/systemComponents.js

@@ -4,7 +4,8 @@ var systemComponents = {
 		template: `
 			<div class="upgRow">
 				<div v-for="tab in Object.keys(data)">
-					<button v-if="data[tab].unlocked == undefined || data[tab].unlocked" v-bind:class="{tabButton: true, notify: subtabShouldNotify(layer, name, tab), resetNotify: subtabResetNotify(layer, name, tab)}" v-bind:style="[{'border-color': tmp[layer].color}, tmp[layer].componentStyles['tab-button'], data[tab].buttonStyle]"
+					<button v-if="data[tab].unlocked == undefined || data[tab].unlocked" v-bind:class="{tabButton: true, notify: subtabShouldNotify(layer, name, tab), resetNotify: subtabResetNotify(layer, name, tab)}"
+					v-bind:style="[{'border-color': tmp[layer].color}, (data[tab].glowColor && subtabShouldNotify(layer, name, tab) ? {'box-shadow': 'var(--hqProperty2a), 0 0 20px '  + data[tab].glowColor} : {}), tmp[layer].componentStyles['tab-button'], data[tab].buttonStyle]"
 						v-on:click="function(){player.subtabs[layer][name] = tab; needCanvasUpdate = true;}">{{tab}}</button>
 				</div>
 			</div>

js/technical/temp.js

@@ -37,6 +37,7 @@ function setupTemp() {
 		tmp[layer].computedNodeStyle = []
 		setupBarStyles(layer)
 		setupBuyables(layer)
+		tmp[layer].trueGlowColor = []
 	}
 
 	tmp.other = {
@@ -98,6 +99,7 @@ function updateTemp() {
 		tmp[layer].nextAt = getNextAt(layer)
 		tmp[layer].nextAtDisp = getNextAt(layer, true)
 		tmp[layer].canReset = canReset(layer)
+		tmp[layer].trueGlowColor = tmp[layer].glowColor
 		tmp[layer].notify = shouldNotify(layer)
 		tmp[layer].prestigeNotify = prestigeNotify(layer)
 		constructBarStyles(layer)