Added subtabs, fixed some issues

changelog.md

@@ -0,0 +1,41 @@
+#The Modding Tree changelog:
+
+##v1.2.4 - 10/4/20
+
+- Layers are now highlighted if you can buy an upgrade, and a new feature, shouldNotify,
+lets you make it highlight other ways.
+- Fixed bugs with hasUpg, hasChall, hasMilestone, and inChallenge.
+- Changed the sample code to use the above functions for convenience.
+
+##v1.2.3 - 10/3/20
+
+- Added a row component, which displays a list of objects in a row.
+- Added a column component, which displays a list of objects in a column (useful within a row).
+- Changed blanks to have a customizable width and height.
+
+#v1.2: This Changes Everything! - 10/3/20
+
+- Many layer features can now be static values or functions. (This made some formats change,
+which will break old things)
+- You can now use the "this" keyword, to make code easier to transfer when making new layers.
+- Also added "this.layer", which is the current layer's name, and works on existing subfeatures
+(e.g. individual upgrades) as well! Subfeatures also have "this.id".
+- Fixed a big save issue. If you use a unique mod id, your save will never conflict with other mods.
+- Added a configurable offline time limit in modinfo at the top of index.html. (default 1 hour)
+- Added a few minor features, and updated the docs with new information.
+
+
+
+##v1.1.1
+
+- You can define hotkeys directly from layer config.
+
+#v1.1: Enhanced Edition
+
+- Added "Buyables", which can function like Space Buildings or Enhancers.
+- Custom CSS can now be used on any component! Make the third argument an object with CSS
+parameters.
+- Lots of minor good things.
+
+#v1.0:
+- First release.

index.html

@@ -45,46 +45,13 @@
 		</div>
 		<div v-if="player.tab=='changelog'" class="col right">
 			<button class="back" onclick="showTab('tree')">←</button><br>
-			<h3>v1.2.4</h3>
+			<h3>v1.3: Finally some real progress!</h3>
-			<ul>
-				<li>Layers are now highlighted if you can buy an upgrade, and a new feature, shouldNotify, lets you make it highlight other ways.</li>
-				<li>Fixed bugs with hasUpg, hasChall, hasMilestone, and inChallenge.</li>
-				<li>Changed the sample code to use the above functions for convenience.</li>
-			</ul><br>
-			<h3>v1.2.3</h3>
-			<ul>
-				<li>Added a row component, which displays a list of objects in a row.</li>
-				<li>Added a column component, which displays a list of objects in a column (useful within a row).</li>
-				<li>Changed blanks to have a customizable width and height.</li>
-			</ul><br>
-			<h3>v1.2: This Changes Everything!</h3>
 			<ul>
 				<li>Many layer features can now be static values or functions. (This made some notations change, which will break things)</li>
-				<li>You can now use the "this" keyword, to make code easier to transfer when making new layers. Also added "this.layer", which is the current layer's name, and works on existing subfeatures (e.g. individual upgrades) as well! Subfeatures also have "this.id".</li>
-				<li>Fixed a big save issue. If you use a unique mod id, your save will never conflict with other mods.</li>
-				<li>Added a configurable offline time limit in modinfo at the top of index.html. (default 1 hour)</li>
-				<li>Added a few minor features, and updated the docs with new information.</li>
 			</ul><br>
-			<div class="link" onclick="showTab('old-stuff')">Alpha / Beta</div><br>
+			<a href="https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md" target="_blank" class="link" >Full history</a><br>
 		</div>
-		<div v-if="player.tab=='old-stuff'" class="col right">
-			<button class="back" onclick="showTab('changelog')">←</button><br>
-			<h3>v1.1.1</h3>
-			<ul>
-				<li>You can define hotkeys in layer config.</li>
-			</ul><br>
-			<h3>v1.1: Enhanced Edition</h3>
-			<ul>
-				<li>Added "Buyables", which can function like Space Buildings or Enhancers.</li>
-				<li>Custom CSS can now be used on any component! Make the third argument an object with the CSS parameters.</li>
-				<li>Lots of minor good things.</li>
-			</ul><br>
-			<h3>v1.0: Technically Something</h3>
-			<ul>
-				<li>The first numbered version.</li>
-			</ul><br>
 		
-		</div>
 		<div v-if="player.tab=='info'" class="col right">
 			<button class="back" onclick="showTab('tree')">←</button><br>
 			<h2>{{modInfo.name}}</h2>
@@ -175,12 +142,22 @@
 					<br><br>
 				</div>
 				<div v-if="layers[layer].tabFormat">
-					<div v-for="data in layers[layer].tabFormat">
+					<div v-if="Array.isArray(layers[layer].tabFormat)">
-						<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
+						<column :layer="layer" :data="layers[layer].tabFormat"></column>
-						<div v-else-if="data.length==3" v-bind:style="(data[2] ? data[2] : {})" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
+					</div>
-						<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]">	
+					<div v-else>
+						<div class="upgTable" v-bind:style="{'margin-top': '-30px', 'margin-bottom': '24px'}">
+							<div class="upgRow">
+								<div v-for="tab in Object.keys(layers[layer].tabFormat)">
+									<button class="tabButton" v-on:click="player[layer].subtab = tab">{{tab}}</button>
+								</div>
+							</div>
+						</div>
+						<div v-for="tab in Object.keys(layers[layer].tabFormat)">
+							<column v-if="player[layer].subtab == tab" :layer="layer" :data="layers[layer].tabFormat[tab]"></column>
+						</div>
+					</div>
 				</div>
-				</divs>
 			</div>
 		</div>
 	</div>

js/game.js

@@ -5,39 +5,8 @@ var NaNalert = false;
 var gameEnded = false;
 
 let VERSION = {
-	num: "1.2.4",
+	num: "1.3",
-	name: "This changes everything!"
+	name: "Finally some real progress!"
-}
-
-function startPlayerBase() {
-	return {
-		tab: "tree",
-		time: Date.now(),
-		autosave: true,
-		notify: {},
-		msDisplay: "always",
-		offlineProd: true,
-		versionType: "Modding",
-		version: VERSION.num,
-		beta: VERSION.beta,
-		timePlayed: 0,
-		keepGoing: false,
-		hasNaN: false,
-		points: new Decimal(10),
-	}
-}
-
-function getStartPlayer() {
-	playerdata = startPlayerBase()
-	for (layer in layers){
-		playerdata[layer] = layers[layer].startData()
-		playerdata[layer].buyables = getStartBuyables(layer)
-		playerdata[layer].spentOnBuyables = new Decimal(0)
-		playerdata[layer].upgrades = []
-		playerdata[layer].milestones = []
-		playerdata[layer].challs = []
-	}
-	return playerdata
 }
 
 function getPointGen() {

js/layers.js

@@ -172,14 +172,18 @@ addLayer("c", {
         incr_order: [], // Array of layer names to have their order increased when this one is first unlocked
 
         // Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
-        tabFormat: ["main-display",
+        tabFormat: {
+            main: 
+                ["main-display",
                 ["prestige-button", function() {return "Melt your points into "}],
                 ["blank", "5px"], // Height
                 ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
                 ["display-text",
                     function() {return 'I have ' + format(player.points) + ' pointy points!'},
                     {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
-                    ["buyables", "150px"],
+                "milestones", "blank", "upgrades", "challs"],
+            thingies: [
+                ["buyables", "150px"], "blank",
                 ["row", [
                     ["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
                     ["display-text", function() {return "Beep"}], "blank",
@@ -188,7 +192,8 @@ addLayer("c", {
                         ["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
                 ]],
             ]],
-                    "milestones", "blank", "upgrades", "challs"],
+],
+        },
         style() {return {
             'background-color': '#3325CC'
         }},

js/utils.js

@@ -56,6 +56,40 @@ function save() {
 	localStorage.setItem(modInfo.id, btoa(JSON.stringify(player)))
 }
 
+function startPlayerBase() {
+	return {
+		tab: "tree",
+		time: Date.now(),
+		autosave: true,
+		notify: {},
+		msDisplay: "always",
+		offlineProd: true,
+		versionType: "Modding",
+		version: VERSION.num,
+		beta: VERSION.beta,
+		timePlayed: 0,
+		keepGoing: false,
+		hasNaN: false,
+		points: new Decimal(10),
+	}
+}
+
+function getStartPlayer() {
+	playerdata = startPlayerBase()
+	for (layer in layers){
+		playerdata[layer] = layers[layer].startData()
+		playerdata[layer].buyables = getStartBuyables(layer)
+		playerdata[layer].spentOnBuyables = new Decimal(0)
+		playerdata[layer].upgrades = []
+		playerdata[layer].milestones = []
+		playerdata[layer].challs = []
+		if (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat))
+			playerdata[layer].subtab = Object.keys(layers[layer].tabFormat)[0]
+
+	}
+	return playerdata
+}
+
 function fixSave() {
 	defaultData = startPlayerBase()
 	for (datum in defaultData){
@@ -89,6 +123,9 @@ function fixSave() {
 					player[layer].buyables[id] = new Decimal(0)
 			}
 		}
+		
+		if (player[layer].subtab == undefined && layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat))
+			player[layer].subtab = Object.keys(layers[layer].tabFormat)[0]
 	}
 }
 
@@ -145,12 +182,12 @@ function versionCheck() {
 	let setVersion = true
 	
 	if (player.versionType===undefined||player.version===undefined) {
-		player.versionType = "Modding"
+		player.versionType = modInfo.id
 		player.version = 0
 	}
 	
 	if (setVersion) {
-		if (player.versionType == "Modding" && VERSION.num > player.version) player.keepGoing = false
+		if (player.versionType == modInfo.id && VERSION.num > player.version) player.keepGoing = false
 		player.versionType = getStartPlayer().versionType
 		player.version = VERSION.num
 		player.beta = VERSION.beta

style.css

@@ -124,6 +124,20 @@ h1, h2, h3, b, input {
 	text-shadow: 0px 0px 7px var(--color);
 }
 
+.tabButton {
+	background-color: transparent;
+	border: none;
+	color: var(--color);
+	font-size: 24px;
+	cursor: pointer;
+	padding: 10px 50px 10px 50px
+}
+
+.tabButton:hover {
+	transform: scale(1.1, 1.1);
+	text-shadow: 0px 0px 7px var(--color);
+}
+
 .reset {
 	height: 120px;
 	width: 180px;