Index.html has lost its relevance!

changelog.md

@@ -1,9 +1,11 @@
 #The Modding Tree changelog:
 
+Tmp does not need to be manually updated.
 Almost every value in layer data can be a function or a constant value!
 effectDisplay in Challenges and Upgrades no longer takes an argument
 You don't have to have the same amount of upgrades in every row (and challs and buyables)
 Unl is optional for all Big Components (defaults to true).
+Moved modInfo to game.js, added a spot for a Discord link, and a separate mod version from the TMT version
 
 ##v1.3.5
 - Completely automated convertToDecimal, now you never have to worry about it again.

docs/layer-features.md

@@ -121,6 +121,11 @@ Key:
 
 # Tree/node features
 
+- symbol: **optional**, the text that appears on this layer's node. Default is the layer id with the first letter capitalized
+
+- position: **optional**, Determines the horizontal position of the layer in its row. By default, it uses the layer id,
+            and layers are sorted in alphabetical order.
+
 - branches: **optional**, an array of layer ids. On a tree, a line will appear from this layer to all of the layers
             in the list. Alternatively, an entry in the array can be a pair consisting of the layer id and a color
             value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors)

index.html

@@ -8,8 +8,8 @@
 	<script type="text/javascript" src="js/layerSupport.js"></script>
 	<script type="text/javascript" src="js/layers.js"></script>
 	<script type="text/javascript" src="js/temp.js"></script>
-	<script type="text/javascript" src="js/utils.js"></script>
 	<script type="text/javascript" src="js/game.js"></script>
+	<script type="text/javascript" src="js/utils.js"></script>
 	<script type="text/javascript" src="js/v.js"></script>
 	<script type="text/javascript" src="js/canvas.js"></script>
 
@@ -118,17 +118,11 @@
 			<br>
 			<span v-if="showPointGen()">({{format(getPointGen())}}/sec)</span>
 			<br><br><br><br>
-			<!-- *************************** Modify the tree in the table below! *************************** -->
-			<table>
-				<td><layer-node layer='c' abb='C'></layer-node></td>
-			</table><table>
-				<td><button class="treeNode hidden"></button></td>
-			</table><table>
-				<td v-if="player.tab=='tree'&&(player.c.unl||player.c.unl)" class="left"><br><br><img class="remove" src="remove.png" onclick="resetRow(1)"></img></td>
-				<td><layer-node layer='f' abb='F'></layer-node></td>
-			</table><table>
-				<td><button class="treeNode hidden"></button></td>
-			</table>
+			<span v-for="row in TREE_LAYERS"><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>
+				<table><button class="treeNode hidden"></button></td></table>
+			</span>
 			<canvas id="treeCanvas" class="canvas"></canvas>
 		</div>
 		<div v-for="layer in LAYERS">

js/layerSupport.js

@@ -23,10 +23,12 @@ function updateHotkeys()
 }
 
 var ROW_LAYERS = {}
+var TREE_LAYERS = {}
 
 function updateLayers(){
     LAYERS = Object.keys(layers);
     ROW_LAYERS = {}
+    TREE_LAYERS = {}
     for (layer in layers){
         layers[layer].layer = layer
         if (layers[layer].upgrades){
@@ -72,12 +74,21 @@ function updateLayers(){
         }
 
         if(!layers[layer].componentStyles) layers[layer].componentStyles = {}
-
+        if(layers[layer].symbol === undefined) layers[layer].symbol = layer.charAt(0).toUpperCase() + layer.slice(1)
 
         row = layers[layer].row
         if(!ROW_LAYERS[row]) ROW_LAYERS[row] = {}
+        if(!TREE_LAYERS[row]) TREE_LAYERS[row] = []
         ROW_LAYERS[row][layer]=layer;
+        let position = (layers[layer].position !== undefined ? layers[layer].position : layer)
+        TREE_LAYERS[row].push({layer: layer, position: position})
+
+        
     }
+    for (row in TREE_LAYERS) {
+        TREE_LAYERS[row].sort((a, b) => (a.position > b.position) ? 1 : -1)
+    }
+
     updateHotkeys()
 }
 
@@ -94,6 +105,13 @@ function readData(data, args=null){
 		return data;
 }
 
+function someLayerUnlocked(row){
+    for (layer in ROW_LAYERS[row])
+        if (player[layer].unl)
+            return true
+    return false
+}
+
 // This isn't worth making a .ts file over
 const UP = 1
 const DOWN = 2

js/layers.js

@@ -1,6 +1,8 @@
 addLayer("c", {
         layer: "c", // This is assigned automatically, both to the layer and all upgrades, etc. Shown here so you know about it
         name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
+        symbol: "C", // This appears on the layer's node. Default is the id with the first letter capitalized
+        position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
         startData() { return {
             unl: true,
 			points: new Decimal(0),
@@ -346,4 +348,3 @@ addLayer("f", {
     }, 
 )
 
-