Optimized tab formats

changelog.md

@@ -1,7 +1,7 @@
 # The Modding Tree changelog:
 
 # v2.5.3 - 5/8/21
-- Improved performance of bars.
+- Improved performance of tab formats and bars.
 - Respec confirmation settings are now kept on resets.
 - Improved compatibility with older browsers.
 - Fixed missing pixel on vertical bars.

js/Demo/demoLayers.js

@@ -221,6 +221,8 @@ addLayer("c", {
                     content: ["upgrades", ["display-text", function() {return "confirmed"}]]
                 },
                 second: {
+                    embedLayer: "f",
+
                     content: [["upgrade", 11],
                             ["row", [["upgrade", 11], "blank", "blank", ["upgrade", 11],]],
                         

js/Demo/demoMod.js

@@ -11,7 +11,7 @@ let modInfo = {
 
 // Set your version in num and name
 let VERSION = {
-	num: "2.5.2.1",
+	num: "2.5.3",
 	name: "Dreams Really Do Come True",
 }
 

js/game.js

@@ -5,7 +5,7 @@ var scrolled = false;
 
 // Don't change this
 const TMT_VERSION = {
-	tmtNum: "2.5.2.1",
+	tmtNum: "2.5.3",
 	tmtName: "Dreams Really Do Come True"
 }
 
@@ -418,6 +418,7 @@ var interval = setInterval(function() {
 	updateTemp();
 	updateOomps(diff);
 	updateWidth()
+	updateTabFormats()
 	gameLoop(diff)
 	fixNaNs()
 	adjustPopupTime(0.05) 

js/technical/displays.js

@@ -118,4 +118,77 @@ function constructBarStyle(layer, id) {
 			style.fillDims['clip-path'] = 'inset(0% 50% 0% 0%)'
 	}
 	return style
+}
+
+function constructTabFormat(layer, id, family){
+	let tabTemp, tabLayer, tabFunc, location, key
+	if (id === undefined){
+		tabTemp = tmp[layer].tabFormat
+		tabLayer = layers[layer].tabFormat
+		tabFunc = funcs[layer].tabFormat
+		location = tmp[layer]
+		key = "tabFormat"
+	}
+	else if (family === undefined) {
+		tabTemp = tmp[layer].tabFormat[id].content
+		tabLayer = layers[layer].tabFormat[id].content
+		tabFunc = funcs[layer].tabFormat[id].content
+		location = tmp[layer].tabFormat[id]
+		key = "content"
+
+	}
+	else {
+		tabTemp = tmp[layer].microtabs[family][id].content
+		tabLayer = layers[layer].microtabs[family][id].content
+		tabFunc = funcs[layer].microtabs[family][id].content
+		location = tmp[layer].microtabs[family][id]
+		key = "tabFormat"
+
+	}
+	if (isFunction(tabLayer)) {
+		
+		let bound = tabLayer.bind(layers[layer])
+		Vue.set(tabTemp, key, bound())
+	}
+	updateTempData(tabLayer, tabTemp, tabFunc)
+	return tabTemp
+}
+
+function updateTabFormats() {
+	updateTabFormat(player.tab)
+	updateTabFormat(player.navTab)
+}
+
+function updateTabFormat(layer) {
+	if (layers[layer]?.tabFormat === undefined) return
+
+	let tab = player.subtabs[layer]?.mainTabs
+	if (isFunction(layers[layer].tabFormat)) {
+		Vue.set(temp[layer], 'tabFormat', layers[layer].tabFormat())
+	}
+	else if (Array.isArray(layers[layer].tabFormat)) {
+		Vue.set(temp[layer], 'tabFormat', constructTabFormat(layer))
+	}
+	else if (isPlainObject(layers[layer].tabFormat)) {
+		if (layers[layer].tabFormat[tab].embedLayer === undefined)
+		Vue.set(temp[layer].tabFormat[tab], 'content', constructTabFormat(layer, tab))
+	}
+
+	// Check for embedded layer
+	if (isPlainObject(tmp[layer].tabFormat) && tmp[layer].tabFormat[tab].embedLayer !== undefined) { 
+		constructTabFormat(tmp[layer].tabFormat[tab].embedLayer)
+	}
+
+	// Update microtabs
+	for (family in layers[layer].microtabs) {
+		tab = player.subtabs[layer][family]
+
+		if (tmp[layer].microtabs[family][tab]) {
+
+			if (tmp[layer].microtabs[family][tab].embedLayer)
+				constructTabFormat(tmp[layer].microtabs[family][tab].embedLayer)
+			else
+				constructTabFormat(layer, tab, family)
+		}
+	}
 }

js/technical/systemComponents.js

@@ -6,7 +6,7 @@ var systemComponents = {
 				<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}, (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>
+						v-on:click="function(){player.subtabs[layer][name] = tab; updateTabFormats(); needCanvasUpdate = true;}">{{tab}}</button>
 				</div>
 			</div>
 		`

js/technical/temp.js

@@ -117,6 +117,7 @@ function updateTempData(layerData, tmpData, funcsData) {
 	
 	for (item in funcsData){
 		if (Array.isArray(layerData[item])) {
+			if (item === "tabFormat" || item === "content") return // These are only updated when needed
 			updateTempData(layerData[item], tmpData[item], funcsData[item])
 		}
 		else if ((!!layerData[item]) && (layerData[item].constructor === Object) || (typeof layerData[item] === "object") && traversableClasses.includes(layerData[item].constructor.name)){

js/utils.js

@@ -195,8 +195,10 @@ function showTab(name) {
 	player.tab = name
 	if (player.navTab == "none" && (tmp[name].row !== "side") && (tmp[name].row !== "otherside")) player.lastSafeTab = name
 	delete player.notify[name]
+	updateTabFormats()
 	needCanvasUpdate = true
 	document.activeElement.blur()
+
 }
 
 function showNavTab(name) {
@@ -205,6 +207,7 @@ function showNavTab(name) {
 	var toTreeTab = name == "tree"
 	player.navTab = name
 	player.notify[name] = false
+	updateTabFormats()
 	needCanvasUpdate = true
 }
 
@@ -425,7 +428,7 @@ function adjustPopupTime(diff) {
 }
 
 function run(func, target, args = null) {
-	if (!!(func && func.constructor && func.call && func.apply)) {
+	if (isFunction(func)) {
 		let bound = func.bind(target)
 		return bound(args)
 	}

js/utils/save.js

@@ -190,6 +190,7 @@ function load() {
 	setupTemp();
 	updateTemp();
 	updateTemp();
+	updateTabFormats()
 	loadVue();
 }
 function setupModInfo() {