Fix layer ordering issues

changelog.md

@@ -1,5 +1,10 @@
 # The Modding Tree changelog:
 
+- Layer updates now have a determined order and starts with earlier-rowed layers.
+- Automation now has a determined order and starts with later-rowed layers.
+- Commas should no longer appear in the decimal places of a number.
+- Fixed potential issue in displaying the tree.
+
 ### v2.1.2 - 10/19/20
 - Added buyUpgrade function (buyUpg still works though)
 - Added author name to modInfo.

index.html

@@ -151,9 +151,9 @@
 				<span v-if="canGenPoints()"  class="overlayThing">({{format(getPointGen())}}/sec)</span>
 				<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
 			</div>
-			<span v-for="row in TREE_LAYERS"><table>
+			<span v-for="(n, row) in (maxRow + 1)"><table>
 				<td v-if="player.tab=='tree'&& someLayerUnlocked(row) && row != 0" class="left"><br><br><img class="remove" src="remove.png" onclick="resetRow(row)"></img></td>
-				<td v-for="node in row"><layer-node :layer='node.layer' :abb='layers[node.layer].symbol'></layer-node></td>
+				<td v-for="node in TREE_LAYERS[row]"><layer-node :layer='node.layer' :abb='layers[node.layer].symbol'></layer-node></td>
 				<table><button class="treeNode hidden"></button></td></table>
 			</span>
 			<canvas id="treeCanvas" class="canvas"></canvas>

js/game.js

@@ -283,12 +283,33 @@ function gameLoop(diff) {
 
 	addTime(diff)
 	player.points = player.points.add(tmp.pointGen.times(diff)).max(0)
-	for (layer in layers){
-		if (layers[layer].update) layers[layer].update(diff);
+
+	for (x = 0; x <= maxRow; x++){
+		for (item in TREE_LAYERS[x]) {
+			let layer = TREE_LAYERS[x][item].layer
+			if (layers[layer].update) layers[layer].update();
+		}
 	}
 
-	for (layer in layers){
-		if (layers[layer].automate) layers[layer].automate();
+	for (row in OTHER_LAYERS){
+		for (item in OTHER_LAYERS[row]) {
+			let layer = OTHER_LAYERS[row][item].layer
+			if (layers[layer].update) layers[layer].update();
+		}
+	}	
+
+	for (x = maxRow; x >= 0; x--){
+		for (item in TREE_LAYERS[x]) {
+			let layer = TREE_LAYERS[x][item].layer
+			if (layers[layer].automate) layers[layer].automate();
+		}
+	}
+
+	for (row in OTHER_LAYERS){
+		for (item in OTHER_LAYERS[row]) {
+			let layer = OTHER_LAYERS[row][item].layer
+			if (layers[layer].automate) layers[layer].automate();
+		}
 	}
 
 	for (layer in layers){

js/layerSupport.js

@@ -8,6 +8,8 @@ var LAYERS = Object.keys(layers);
 
 var hotkeys = {};
 
+var maxRow = 0;
+
 function updateHotkeys()
 {
     hotkeys = {};
@@ -115,7 +117,7 @@ function updateLayers(){
         if(layers[layer].symbol === undefined) layers[layer].symbol = layer.charAt(0).toUpperCase() + layer.slice(1)
         if(layers[layer].unlockOrder === undefined) layers[layer].unlockOrder = 0
 
-        row = layers[layer].row
+        let row = layers[layer].row
         if(!ROW_LAYERS[row]) ROW_LAYERS[row] = {}
         if(!TREE_LAYERS[row] && !isNaN(row)) TREE_LAYERS[row] = []
         if(!OTHER_LAYERS[row] && isNaN(row)) OTHER_LAYERS[row] = []
@@ -125,6 +127,8 @@ function updateLayers(){
         
         if (!isNaN(row)) TREE_LAYERS[row].push({layer: layer, position: position})
         else OTHER_LAYERS[row].push({layer: layer, position: position})
+
+        if (maxRow < layers[layer].row) maxRow = layers[layer].row
         
     }
     for (row in OTHER_LAYERS) {

js/utils.js

@@ -16,6 +16,13 @@ function commaFormat(num, precision) {
 	return num.toStringWithDecimalPlaces(precision).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
 }
 
+
+function regularFormat(num, precision) {
+	if (num === null || num === undefined) return "NaN"
+	if (num.mag < 0.001) return (0).toFixed(precision)
+	return num.toStringWithDecimalPlaces(precision)
+}
+
 function fixValue(x, y = 0) {
 	return x || new Decimal(y)
 }
@@ -41,7 +48,7 @@ function format(decimal, precision=2) {
 	} else if (decimal.gte("1e1000")) return exponentialFormat(decimal, 0)
 	else if (decimal.gte(1e9)) return exponentialFormat(decimal, precision)
 	else if (decimal.gte(1e3)) return commaFormat(decimal, 0)
-	else return commaFormat(decimal, precision)
+	else return regularFormat(decimal, precision)
 }
 
 function formatWhole(decimal) {

style.css

@@ -220,6 +220,7 @@ h1, h2, h3, b, input {
 }
 .achievement:hover {
 	box-shadow: 0px 0px 10px var(--points);
+	z-index: 7;
 }
 
 .buyable {