From d18e097108bdea0332aff4930c59a979969323c1 Mon Sep 17 00:00:00 2001 From: Acamaeda Date: Tue, 27 Oct 2020 19:25:03 -0400 Subject: [PATCH] The dawn of navTab --- changelog.md | 4 ++ demo.html | 70 ++++++++++++++++------------------- docs/!general-info.md | 1 + docs/subtabs-and-microtabs.md | 7 +++- index.html | 70 ++++++++++++++++------------------- js/Demo/demoLayers.js | 1 + js/Demo/demoMod.js | 7 +++- js/mod.js | 7 +++- js/temp.js | 2 +- js/utils.js | 10 ++--- js/v.js | 45 +++++++++++++++++++++- style.css | 7 ++++ 12 files changed, 140 insertions(+), 91 deletions(-) diff --git a/changelog.md b/changelog.md index 87db74e..6224a2e 100644 --- a/changelog.md +++ b/changelog.md @@ -1,6 +1,10 @@ # The Modding Tree changelog: +- You can now embed a layer inside of a subtab or microtab! +- Added support for hiding the tree tab (although some aspects are still lazy and WIP) +- Added shouldNotify to subtab/microtab buttons. (You can make them highlighted) - NaN is now handled more intelligently. +- Thank you to thepaperpilot for fixing errors in docs and the infobox appearance! ### v2.1.4 - 10/25/20 - Added an infobox component. Thank you to thepaperpilot for this contribution! diff --git a/demo.html b/demo.html index 640043a..91922b8 100644 --- a/demo.html +++ b/demo.html @@ -20,7 +20,7 @@

Loading... (If this takes too long it means there was a serious error!)

-
+

{{modInfo.name}} {{VERSION.withoutName}}



@@ -41,11 +41,11 @@
-


+


-
+

{{modInfo.name}}


{{VERSION.withName}}

@@ -72,7 +72,7 @@
{{key.description}}
-
+
@@ -95,7 +95,7 @@
-
+
{{VERSION.withoutName}}

i
@@ -131,7 +131,7 @@
-
+




- - -


+ + + +
-
-


-
- - -
- -
- - -
- -
- - - - -

-
-
-
- -
-
-
- -
- -
-
+ + +
+
diff --git a/docs/!general-info.md b/docs/!general-info.md index 98a2676..e9e7884 100644 --- a/docs/!general-info.md +++ b/docs/!general-info.md @@ -43,5 +43,6 @@ While reading this documentation, the following key will be used when describing - [Challenges](challenges.md): How to create challenges for a layer. - [Bars](bars.md): Display some information as a progress bar, gauge, or similar. They are highly customizable, and can be horizontal and vertical as well. - [Subtabs and Microtabs](subtabs-and-microtabs.md): Create subtabs for your tabs, as well as "microtab" components that you can put inside the tabs. + You can even use them to embed a layer inside another layer! - [Achievements](milestones.md): How to create achievements for a layer (or for the whole game). - [Infoboxes](infoboxes.md): Boxes containing text that can be shown or hidden. diff --git a/docs/subtabs-and-microtabs.md b/docs/subtabs-and-microtabs.md index fe8c5e0..e7e489b 100644 --- a/docs/subtabs-and-microtabs.md +++ b/docs/subtabs-and-microtabs.md @@ -1,6 +1,6 @@ # Subtabs and Microtabs -Subtabs are separate sections of a tab that you can view by selecting one at the top of the tab. Microtabs are smaller areas that function in much the same way. +Subtabs are separate sections of a tab that you can view by selecting one at the top of the tab. Microtabs are smaller areas that function in much the same way. You can also embed layers inside of subtabs/microtabs. Subtabs are defined by using the tab format like this, where each element of tabFormat is given the name of that subtab: @@ -45,3 +45,8 @@ Normal subtabs and microtab subtabs both use the same features: - buttonStyle: **optional**. A CSS object, which affects the appearance of the button for that subtab. - unlocked(): **optional**. a function to determine if the button for this subtab should be visible. By default, a subtab is always unlocked. You can't use the "this" keyword in this function. + +- shouldNotify(): **optional**, if true, the tab button will be highlighted to notify the player that there is something there. + +- embedLayer: **SIGNIFICANT**, the id of another layer. If you have this, it will override "content", "style" and "shouldNotify", + instead displaying the entire layer in the subtab. \ No newline at end of file diff --git a/index.html b/index.html index 628c1fe..a0724f7 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

Loading... (If this takes too long it means there was a serious error!)

-
+

{{modInfo.name}} {{VERSION.withoutName}}



@@ -41,11 +41,11 @@
-


+


-
+

{{modInfo.name}}


{{VERSION.withName}}

@@ -72,7 +72,7 @@
{{key.description}}
-
+
@@ -95,7 +95,7 @@
-
+
{{VERSION.withoutName}}

i
@@ -131,7 +131,7 @@
-
+




- - -


+ + + +
-
-


-
- - -
- -
- - -
- -
- - - - -

-
-
-
- -
-
-
- -
- -
-
+ + +
+
diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js index 08f0b27..1bbb5f5 100644 --- a/js/Demo/demoLayers.js +++ b/js/Demo/demoLayers.js @@ -285,6 +285,7 @@ addLayer("c", { tabFormat: { "main tab": { buttonStyle() {return {'color': 'orange'}}, + shouldNotify: true, content: ["main-display", "prestige-button", "resource-display", diff --git a/js/Demo/demoMod.js b/js/Demo/demoMod.js index c3679b3..3d3d6a3 100644 --- a/js/Demo/demoMod.js +++ b/js/Demo/demoMod.js @@ -5,8 +5,11 @@ let modInfo = { discordName: "", discordLink: "", changelogLink: "https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md", - offlineLimit: 1, // In hours - initialStartPoints: new Decimal (10) // Used for hard resets and new players + initialStartPoints: new Decimal (10), // Used for hard resets and new players + + offlineLimit: 1, // In hours + startTab: "none", + startNavTab: "tree", } // Set your version in num and name diff --git a/js/mod.js b/js/mod.js index 08aa52e..f7d62f7 100644 --- a/js/mod.js +++ b/js/mod.js @@ -6,8 +6,11 @@ let modInfo = { discordName: "", discordLink: "", changelogLink: "https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md", - offlineLimit: 1, // In hours - initialStartPoints: new Decimal (10) // Used for hard resets and new players + initialStartPoints: new Decimal (10), // Used for hard resets and new players + + offlineLimit: 1, // In hours + startTab: "none", + startNavTab: "tree", } // Set your version in num and name diff --git a/js/temp.js b/js/temp.js index 2c885a1..fd866e8 100644 --- a/js/temp.js +++ b/js/temp.js @@ -91,7 +91,7 @@ function updateTempData(layerData, tmpData) { else if (isFunction(layerData[item]) && !activeFunctions.includes(item)){ let value = layerData[item]() if (value !== value || value === decimalNaN){ - if (NaNalert === true || confirm ("Invalid value found in tmp, named '" + item + "'. Please let the creator of this mknow! Would you like to try to auto-fix the save and keep going?")){ + if (NaNalert === true || confirm ("Invalid value found in tmp, named '" + item + "'. Please let the creator of this mod know! Would you like to try to auto-fix the save and keep going?")){ NaNalert = true value = (value !== value ? 0 : decimalZero) } diff --git a/js/utils.js b/js/utils.js index 8471f3b..b9f17fc 100644 --- a/js/utils.js +++ b/js/utils.js @@ -80,7 +80,8 @@ function save() { function startPlayerBase() { return { - tab: "tree", + tab: modInfo.startTab, + navTab: modInfo.startNavTab, time: Date.now(), autosave: true, notify: {}, @@ -224,7 +225,6 @@ function load() { else player = Object.assign(getStartPlayer(), JSON.parse(atob(get))) fixSave() - player.tab = "tree" if (player.offlineProd) { if (player.offTime === undefined) player.offTime = { remain: 0 } player.offTime.remain += (Date.now() - player.time) / 1000 @@ -254,7 +254,7 @@ function NaNcheck(data) { NaNcheck(data[item]) } else if (data[item] !== data[item] || data[item] === decimalNaN){ - if (NaNalert === true || confirm ("Invalid value found in player, named '" + item + "'. Please let the creator of this mknow! Would you like to try to auto-fix the save and keep going?")){ + if (NaNalert === true || confirm ("Invalid value found in player, named '" + item + "'. Please let the creator of this mod know! Would you like to try to auto-fix the save and keep going?")){ NaNalert = true data[item] = (data[item] !== data[item] ? 0 : decimalZero) } @@ -589,7 +589,7 @@ var onTreeTab = true function showTab(name) { if (LAYERS.includes(name) && !layerunlocked(name)) return - var toTreeTab = name == "tree" + var toTreeTab = name == "none" player.tab = name if (toTreeTab != onTreeTab) { @@ -609,7 +609,7 @@ function nodeShown(layer) { if (tmp[layer].layerShown) return true switch(layer) { case "idk": - return player.l.unlocked + return player.idk.unlocked break; } return false diff --git a/js/v.js b/js/v.js index 5408529..74ffc92 100644 --- a/js/v.js +++ b/js/v.js @@ -313,7 +313,9 @@ function loadVue() {
- + + +
` }) @@ -386,7 +388,7 @@ function loadVue() { template: `
- +
` @@ -420,8 +422,47 @@ function loadVue() { {{abb}} ` + }, + + Vue.component('layer-tab', { + props: ['layer', 'back'], + template: `
+


+
+ + +
+ +
+ + +
+ +
+ + + + +

+
+
+
+ +
+
+
+ +
+ +
+
+ ` }) + + + ) + app = new Vue({ el: "#app", diff --git a/style.css b/style.css index 37efe76..a91ddee 100644 --- a/style.css +++ b/style.css @@ -115,6 +115,13 @@ h1, h2, h3, b, input { z-index: 4 } +.tabButton.notify { + transform: scale(1.05, 1.05); + border-color: rgba(0, 0, 0, 0.125); + box-shadow: var(--hqProperty2a), 0px 0px 20px #ff0000; + z-index: 3 +} + .bought { background-color: #77bf5f; cursor: default;