A lot

changelog.md

@@ -1,5 +1,11 @@
 # The Modding Tree changelog:
 
+- The changelog tab is back, and can be set in mod.js.
+- The victory screen text is configurable.
+- Added an argument to use specific rows in an "upgrades" component.
+- Added the ability to easily make a tab that is a collection of layers in subtabs.
+- Improved spacing for embedding layers with subtabs into subtabs.
+
 ### v2.2.8 12/03/20
 - Double-clicking a layer node brings you to the main subtab for that layer.
 - Attempted to fix challenges visually updating a different way.

demo.html

@@ -28,10 +28,9 @@
 		<div v-if="(gameEnded && !player.keepGoing)" class="fullWidth">
 			<br>
 			<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
-			<h3>Congratulations! You have reached the end and beaten this game, but for now...</h3><br>
+			<h3 v-html="modInfo.winText"></h3><br>
 			<h3>Please check the Discord to see if there are new content updates!</h3><br><br>
 			<div v-if="!player.timePlayedReset">It took you {{formatTime(player.timePlayed)}} to beat the game.</div>
-			<div v-if="player.timePlayedReset">Make sure that you record the time in your stream or else your speedrun won't count!</div>
 			<br>
 			<button class="longUpg can" onclick="hardReset(true)">Play Again</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="longUpg can" onclick="keepGoing()">Keep Going</button>
 			<br><br><br>
@@ -39,14 +38,10 @@
 			<a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br>
 			<a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a><br>
 			<br><br>
-			If you would like to speedrun this, press Play Again and record your attempt, then submit on the Discord Server in the channel #speedrun-submissions.
-			<br><br><br>
-			<h1>Oh, you are still reading this?</h1>
-			<br>
 		</div>		
 		
 		<div id="treeOverlay" v-if="!(gameEnded && !player.keepGoing)" class="treeOverlay" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
-			<div id="version" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
+			<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
 			<button v-if= "player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside')" class="other-back overlayThing" onclick="goBack()">←</button>
 			<img id="optionWheel"  class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png" onclick="showTab('options-tab')"></img>
 			<div id="info" v-if="player.tab!='info-tab'"  class="overlayThing" onclick="showTab('info-tab')"><br>i</div>

docs/custom-tab-layouts.md

@@ -41,7 +41,9 @@ These are the existing components, but you can create more in [components.js](/j
 
 - prestige-button: The argument is a string that the prestige button should say before the amount of currency you will gain. It can also be a function that returns updating text.
 
-- upgrades, milestones, challenges, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.
+- upgrades: The layer's upgrades. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.
+
+- milestones, challenges, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.
 
 - buyables, clickables: Display all of the buyables/clickables for this layer, as appropriate. The argument is optional and is the size of the boxes in pixels.
 

docs/main-mod-info.md

@@ -13,7 +13,6 @@ Here's a breakdown of what's in it:
 
         "discordName" is the text on the link, and "discordLink" is the url of an invite. If you're using a Discord invite, please make sure it's set to never expire.
 
-    - changelogLink: You can use this to set a link to a page where your changelog for the game is displayed.
     - offlineLimit: The maximum amount of offline time that the player can accumulate, in hours. Any extra time is lost. (a number)
 
         This is useful because most of these mods are fast-paced enough that too much offline time ruins the balance, such as the time in between updates. That is why I suggest developers disable offline time on their own savefile.
@@ -24,6 +23,8 @@ Here's a breakdown of what's in it:
     - num: The mod's version number, displayed at the top right of the tree tab.
     - name: The version's name, displayed alongside the number in the info tab.
 
+- changelog is the HTML displayed in the changelog tab.
+
 - doNotCallTheseFunctionsEveryTick is very important. TMT calls every function anywhere in "layers" every tick to store the result, unless specifically told not to. Functions that have are used to do an action need to be identified. "Official" functions (those in the documentation) are all fine, but if you make any new ones, add their names to this array.
 
 ```js

index.html

@@ -28,10 +28,9 @@
 		<div v-if="(gameEnded && !player.keepGoing)" class="fullWidth">
 			<br>
 			<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
-			<h3>Congratulations! You have reached the end and beaten this game, but for now...</h3><br>
+			<h3 v-html="modInfo.winText"></h3><br>
 			<h3>Please check the Discord to see if there are new content updates!</h3><br><br>
 			<div v-if="!player.timePlayedReset">It took you {{formatTime(player.timePlayed)}} to beat the game.</div>
-			<div v-if="player.timePlayedReset">Make sure that you record the time in your stream or else your speedrun won't count!</div>
 			<br>
 			<button class="longUpg can" onclick="hardReset(true)">Play Again</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="longUpg can" onclick="keepGoing()">Keep Going</button>
 			<br><br><br>
@@ -39,14 +38,10 @@
 			<a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br>
 			<a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a><br>
 			<br><br>
-			If you would like to speedrun this, press Play Again and record your attempt, then submit on the Discord Server in the channel #speedrun-submissions.
-			<br><br><br>
-			<h1>Oh, you are still reading this?</h1>
-			<br>
 		</div>		
 		
 		<div id="treeOverlay" v-if="!(gameEnded && !player.keepGoing)" class="treeOverlay" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
-			<div id="version" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
+			<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
 			<button v-if= "player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside')" class="other-back overlayThing" onclick="goBack()">←</button>
 			<img id="optionWheel"  class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png" onclick="showTab('options-tab')"></img>
 			<div id="info" v-if="player.tab!='info-tab'"  class="overlayThing" onclick="showTab('info-tab')"><br>i</div>

js/Demo/demoLayers.js

@@ -395,7 +395,6 @@ addLayer("f", {
     tooltipLocked() { // Optional, tooltip displays when the layer is locked
         return ("This weird farmer dinosaur will only see you if you have at least " + this.requires() + " candies. You only have " + formatWhole(player.points))
     },
-
     midsection: [
         "blank", ['display-image', 'https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390'],
         ["display-text", "Bork bork!"]

js/Demo/demoMod.js

@@ -4,7 +4,6 @@ let modInfo = {
 	pointsName: "points",
 	discordName: "",
 	discordLink: "",
-	changelogLink: "https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md",
 	initialStartPoints: new Decimal (10), // Used for hard resets and new players
 	
 	offlineLimit: 1,  // In hours
@@ -12,10 +11,16 @@ let modInfo = {
 
 // Set your version in num and name
 let VERSION = {
-	num: "2.2.8",
+	num: "2.2.9",
 	name: "Uprooted",
 }
 
+let changelog = `<h1>Changelog:</h1><br>
+	<h3>v0.0</h3><br>
+		- Added things.<br>
+		- Added stuff.`
+
+let winText = `Congratulations! You have reached the end and beaten this game, but for now...`
 // If you add new functions anywhere inside of a layer, and those functions have an effect when called, add them here.
 // (The ones here are examples, all official functions are already taken care of)
 var doNotCallTheseFunctionsEveryTick = ["doReset", "buy", "onPurchase", "blowUpEverything"]

js/components.js

@@ -134,10 +134,10 @@ function loadVue() {
 	})
 
 	Vue.component('upgrades', {
-		props: ['layer'],
+		props: ['layer', 'data'],
 		template: `
 		<div v-if="tmp[layer].upgrades" class="upgTable">
-			<div v-for="row in tmp[layer].upgrades.rows" class="upgRow">
+			<div v-for="row in (data === undefined ? tmp[layer].upgrades.rows : data)" class="upgRow">
 				<div v-for="col in tmp[layer].upgrades.cols"><div v-if="tmp[layer].upgrades[row*10+col]!== undefined && tmp[layer].upgrades[row*10+col].unlocked" class="upgAlign">
 					<upgrade :layer = "layer" :data = "row*10+col" v-bind:style="tmp[layer].componentStyles.upgrade"></upgrade>
 				</div></div>
@@ -320,7 +320,7 @@ function loadVue() {
 			<div class="upgTable instant">
 				<tab-buttons :layer="layer" :data="tmp[layer].microtabs[data]" :name="data" v-bind:style="tmp[layer].componentStyles['tab-buttons']"></tab-buttons>
 			</div>
-			<layer-tab v-if="tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" :layer="tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" ></layer-tab>
+			<layer-tab v-if="tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" :layer="tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" :embedded="true"></layer-tab>
 
 			<column v-else v-bind:style="tmp[layer].microtabs[data][player.subtabs[layer][data]].style" :layer="layer" :data="tmp[layer].microtabs[data][player.subtabs[layer][data]].content"></column>
 		</div>

js/game.js

@@ -4,7 +4,7 @@ var gameEnded = false;
 
 // Don't change this
 const TMT_VERSION = {
-	tmtNum: "2.2.8",
+	tmtNum: "2.2.9",
 	tmtName: "Uprooted"
 }
 

js/mod.js

@@ -5,7 +5,6 @@ let modInfo = {
 	pointsName: "points",
 	discordName: "",
 	discordLink: "",
-	changelogLink: "https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md",
 	initialStartPoints: new Decimal (10), // Used for hard resets and new players
 	
 	offlineLimit: 1,  // In hours
@@ -17,6 +16,13 @@ let VERSION = {
 	name: "Literally nothing",
 }
 
+let changelog = `<h1>Changelog:</h1><br>
+	<h3>v0.0</h3><br>
+		- Added things.<br>
+		- Added stuff.`
+
+let winText = `Congratulations! You have reached the end and beaten this game, but for now...`
+
 // If you add new functions anywhere inside of a layer, and those functions have an effect when called, add them here.
 // (The ones here are examples, all official functions are already taken care of)
 var doNotCallTheseFunctionsEveryTick = ["blowUpEverything"]

js/technical/layerSupport.js

@@ -144,6 +144,7 @@ function updateLayers(){
         if(layers[layer].softcap === undefined) layers[layer].softcap = new Decimal("e1e7")
         if(layers[layer].softcapPower === undefined) layers[layer].softcapPower = new Decimal("0.5")
         if(layers[layer].displayRow === undefined) layers[layer].displayRow = layers[layer].row
+        if(layers[layer].name === undefined) layers[layer].name = layer
 
         let row = layers[layer].row
 
@@ -180,9 +181,30 @@ function updateLayers(){
     updateHotkeys()
 }
 
-function addLayer(layerName, layerData){ // Call this to add layers from a different file!
+
+function addLayer(layerName, layerData, tabLayers = null){ // Call this to add layers from a different file!
     layers[layerName] = layerData
     layers[layerName].isLayer = true
+    if (tabLayers !== null)
+    {
+        let format = {}
+        for (id in tabLayers) {
+            layer = tabLayers[id]
+            format[(layers[layer].name ? layers[layer].name : layer)] = {
+                embedLayer: layer,
+                buttonStyle() {
+                    if (!tmp[this.embedLayer].nodeStyle) return {'border-color': tmp[this.embedLayer].color}
+                    else {
+                        style = tmp[this.embedLayer].nodeStyle
+                        if (style['border-color'] === undefined) style['border-color'] = tmp[this.embedLayer].color
+                        return style
+                    } 
+                },
+                unlocked() {return tmp[this.embedLayer].layerShown},
+            }       
+        }
+        layers[layerName].tabFormat = format
+    }
 }
 
 function addNode(layerName, layerData){ // Does the same thing, but for non-layer nodes
@@ -190,7 +212,6 @@ function addNode(layerName, layerData){ // Does the same thing, but for non-laye
     layers[layerName].isLayer = false
 }
 
-
 // If data is a function, return the result of calling it. Otherwise, return the data.
 function readData(data, args=null){
 	if (!!(data && data.constructor && data.call && data.apply))
@@ -223,3 +244,8 @@ addLayer("options-tab", {
     tabFormat: ["options-tab"],
     row: "otherside"
 })
+
+addLayer("changelog-tab", {
+    tabFormat() {return ([["raw-html", modInfo.changelog]])},
+    row: "otherside"
+})

js/technical/systemComponents.js

@@ -51,7 +51,7 @@ var systemComponents = {
 
 	
 	'layer-tab': {
-		props: ['layer', 'back', 'spacing'],
+		props: ['layer', 'back', 'spacing', 'embedded'],
 		template: `<div v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]">
 		<div v-if="back"><button v-bind:class="back == 'big' ? 'other-back' : 'back'" v-on:click="goBack()">←</button></div>
 		<div v-if="!tmp[layer].tabFormat">
@@ -78,10 +78,10 @@ var systemComponents = {
 				<column :layer="layer" :data="tmp[layer].tabFormat"></column>
 			</div>
 			<div v-else>
-				<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">
+				<div class="upgTable" v-bind:style="{'padding-top': (embedded ? '0' : '25px'), 'margin-top': (embedded ? '-10px' : '0'), 'margin-bottom': '24px'}">
 					<tab-buttons v-bind:style="tmp[layer].componentStyles['tab-buttons']" :layer="layer" :data="tmp[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
 				</div>
-				<layer-tab v-if="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].embedLayer" :layer="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].embedLayer"></layer-tab>
+				<layer-tab v-if="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].embedLayer" :layer="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].embedLayer" :embedded="true"></layer-tab>
 				<column v-else :layer="layer" :data="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].content"></column>
 			</div>
 		</div></div>
@@ -122,17 +122,17 @@ var systemComponents = {
             Made by {{modInfo.author}}	
         </span>
         <br>
-        The Modding Tree {{TMT_VERSION.tmtNum}} by Acamaeda
+        The Modding Tree <a v-bind:href="'https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md'" target="_blank" class="link" v-bind:style = "{'font-size': '14px', 'display': 'inline'}" >{{TMT_VERSION.tmtNum}}</a> by Acamaeda
         <br>
         The Prestige Tree made by Jacorb and Aarex
         <br>
         Original idea by papyrus (on discord)
-        <br><br>
+		<br><br>
-        <a v-bind:href="modInfo.changelogLink" target="_blank" class="link" >Changelog</a><br>
+		<div class="link" onclick="showTab('changelog-tab')">Changelog</div><br>
         <span v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></span>
         <a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br>
         <a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a><br>
-        <br><br>
+		<br><br>
         Time Played: {{ formatTime(player.timePlayed) }}<br><br>
         <h3>Hotkeys</h3><br>
         <span v-for="key in hotkeys" v-if="player[key.layer].unlocked && tmp[key.layer].hotkeys[key.id].unlocked"><br>{{key.description}}</span></div>

js/technical/temp.js

@@ -129,7 +129,6 @@ function updateChallengeTemp(layer)
 function updateChallengeDisplay(layer) {
 	for (id in player[layer].challenges) {
 		let style = "locked"
-		console.log(layer + " " + id)
 		if (player[layer].activeChallenge == id && canCompleteChallenge(layer, id)) style = "canComplete"
 		else if (hasChallenge(layer, id)) style = "done"
 		tmp[layer].challenges[id].defaultStyle = style

js/utils.js

@@ -256,6 +256,7 @@ function load() {
 	changeTheme();
 	changeTreeQuality();
 	updateLayers()
+	setupModInfo()
 
 	setupTemp();
 	updateTemp();
@@ -263,6 +264,11 @@ function load() {
 	loadVue();
 }
 
+function setupModInfo() {
+	modInfo.changelog = changelog
+	modInfo.winText = winText ? winText : `Congratulations! You have reached the end and beaten this game, but for now...`
+
+}
 
 function fixNaNs() {
 	NaNcheck(player)