incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2025-02-17 18:12:45 +00:00
Code Issues Releases Activity Actions

The dawn of navTab

Browse source
This commit is contained in:
Acamaeda 2020-10-27 19:25:03 -04:00
parent 2682f739ec
commit d18e097108
12 changed files with 140 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
changelog.md
View file

@ -1,6 +1,10 @@
# The Modding Tree changelog: # 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. - 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 ### v2.1.4 - 10/25/20
- Added an infobox component. Thank you to thepaperpilot for this contribution! - Added an infobox component. Thank you to thepaperpilot for this contribution!

70
demo.html
View file

@ -20,7 +20,7 @@
<div v-if="false" id="loadingSection" class="fullWidth"> <div v-if="false" id="loadingSection" class="fullWidth">
<h1>Loading... (If this takes too long it means there was a serious error!)</h1> <h1>Loading... (If this takes too long it means there was a serious error!)</h1>
</div> </div>
<div class="vl" v-if="player.tab!='tree'&&player.tab!='gameEnded'"></div> <div class="vl" v-if="player.navTab!= 'none' &&player.tab!='none'&&player.tab!='gameEnded'"></div>
<div v-if="player.tab=='gameEnded'" class="fullWidth"> <div v-if="player.tab=='gameEnded'" class="fullWidth">
<br> <br>
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br> <h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
@ -41,11 +41,11 @@
<br> <br>
</div> </div>
<div v-if="player.tab=='changelog'" class="col right"> <div v-if="player.tab=='changelog'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br><br><br> <button class="back" onclick="showTab('none')">←</button><br><br><br>
</div> </div>
<div v-if="player.tab=='info'" class="col right"> <div v-if="player.tab=='info'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br> <button class="back" onclick="showTab('none')">←</button><br>
<h2>{{modInfo.name}}</h2> <h2>{{modInfo.name}}</h2>
<br> <br>
<h3>{{VERSION.withName}}</h3> <h3>{{VERSION.withName}}</h3>
@ -72,7 +72,7 @@
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span> <span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span>
</div> </div>
<div v-if="player.tab=='options'" class="col right"> <div v-if="player.tab=='options'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br> <button class="back" onclick="showTab('none')">←</button><br>
<table> <table>
<tr> <tr>
<td><button class="opt" onclick="save()">Save</button></td> <td><button class="opt" onclick="save()">Save</button></td>
@ -95,7 +95,7 @@
</tr> </tr>
</table> </table>
</div> </div>
<div id="treeOverlay" class="treeOverlay" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}"> <div id="treeOverlay" class="treeOverlay" v-if="player.tab!='gameEnded'" 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" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
<img id="optionWheel" class="overlayThing" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img> <img id="optionWheel" class="overlayThing" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
<div id="info" v-if="player.tab!='info'" class="overlayThing" onclick="showTab('info')"><br>i</div> <div id="info" v-if="player.tab!='info'" class="overlayThing" onclick="showTab('info')"><br>i</div>
@ -131,7 +131,7 @@
</div> </div>
<div id="treeTab" style="z-index: 0" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}"> <div v-if="player.navTab == 'tree' && player.tab!='gameEnded'" id="treeTab" style="z-index: 0" onscroll="resizeCanvas()" v-bind:class= "{ fullWidth: player.tab == 'none', col: player.tab != 'none', left: player.tab != 'none'}">
<br><br><br><br> <br><br><br><br>
<div id="fakeHead" style="visibility: hidden;"> <div id="fakeHead" style="visibility: hidden;">
<span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing"> <span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing">
@ -152,43 +152,35 @@
<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div> <div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div> </div>
<span v-for="(n, row) in (maxRow + 1)"><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 TREE_LAYERS[row]">
<td v-for="node in TREE_LAYERS[row]"><layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node></td> <layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node>
<table><button class="treeNode hidden"></button></td></table> </td>
<table><button class="treeNode hidden"></button></table>
</span> </span>
<canvas id="treeCanvas" class="canvas"></canvas> <canvas id="treeCanvas" class="canvas"></canvas>
</div> </div>
<div v-for="layer in LAYERS" > <div v-for="layer in LAYERS" >
<div v-if="player.tab==layer" v-bind:class="'col right fast tab'" 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="player.navTab == 'none'" id="fakeHead" style="visibility: hidden;">
<button class="back" onclick="showTab('tree')">←</button><br><br><br> <span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing">
<div v-if="!tmp[layer].tabFormat"> <br>Dev Speed: {{format(player.devSpeed)}}x<br>
<infobox v-if="tmp[layer].infoboxes" v-bind:style="tmp[layer].componentStyles['infobox']" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]"></infobox> </span>
<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display> <span v-if="player.offTime !== undefined" class="overlayThing">
<div v-if="tmp[layer].type !== 'none'"> <br>Offline Time: {{formatTime(player.offTime.remain)}}<br>
<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button> </span>
</div> <span v-if="false && !player.keepGoing" class="overlayThing">
<resource-display v-bind:style="tmp[layer].componentStyles['resource-display']" :layer="layer"></resource-display> <br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
<milestones v-bind:style="tmp[layer].componentStyles.milestones" :layer="layer"></milestones> </span>
<div v-if="Array.isArray(tmp[layer].midsection)"> <br>
<column :layer="layer" :data="tmp[layer].midsection"></column> <span v-if="player.points.lt('1e1000')" class="overlayThing">You have </span>
</div> <h2 class="overlayThing" id="points">{{format(player.points)}}</h2>
<clickables v-bind:style="tmp[layer].componentStyles['clickables']" :layer="layer"></clickables> <span v-if="player.points.lt('1e1e6')" class="overlayThing"> {{modInfo.pointsName}}</span>
<buyables v-bind:style="tmp[layer].componentStyles.buyables" :layer="layer"></buyables> <br>
<upgrades v-bind:style="tmp[layer].componentStyles['upgrades']" :layer="layer"></upgrades> <span v-if="canGenPoints()" class="overlayThing">({{format(getPointGen())}}/sec)</span>
<challenges v-bind:style="tmp[layer].componentStyles['challenges']" :layer="layer"></challenges> <div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
<br><br> </div>
</div>
<div v-if="tmp[layer].tabFormat"> <div v-if="player.tab==layer" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-if="Array.isArray(tmp[layer].tabFormat)"> <layer-tab :layer="layer" :back="'none'"></layer-tab>
<column :layer="layer" :data="tmp[layer].tabFormat"></column>
</div>
<div v-else v-bind:style="[{'margin-top': '-50px'}]">
<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">
<tab-buttons v-bind:style="tmp[layer].componentStyles['tab-buttons']" :layer="layer" :data="tmp[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
</div>
<column :layer="layer" :data="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].content"></column>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

1
docs/!general-info.md
View file

@ -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. - [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. - [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. - [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). - [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. - [Infoboxes](infoboxes.md): Boxes containing text that can be shown or hidden.

7
docs/subtabs-and-microtabs.md
View file

@ -1,6 +1,6 @@
# Subtabs and Microtabs # 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: 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. - 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. - 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.

70
index.html
View file

@ -20,7 +20,7 @@
<div v-if="false" id="loadingSection" class="fullWidth"> <div v-if="false" id="loadingSection" class="fullWidth">
<h1>Loading... (If this takes too long it means there was a serious error!)</h1> <h1>Loading... (If this takes too long it means there was a serious error!)</h1>
</div> </div>
<div class="vl" v-if="player.tab!='tree'&&player.tab!='gameEnded'"></div> <div class="vl" v-if="player.navTab!= 'none' &&player.tab!='none'&&player.tab!='gameEnded'"></div>
<div v-if="player.tab=='gameEnded'" class="fullWidth"> <div v-if="player.tab=='gameEnded'" class="fullWidth">
<br> <br>
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br> <h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
@ -41,11 +41,11 @@
<br> <br>
</div> </div>
<div v-if="player.tab=='changelog'" class="col right"> <div v-if="player.tab=='changelog'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br><br><br> <button class="back" onclick="showTab('none')">←</button><br><br><br>
</div> </div>
<div v-if="player.tab=='info'" class="col right"> <div v-if="player.tab=='info'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br> <button class="back" onclick="showTab('none')">←</button><br>
<h2>{{modInfo.name}}</h2> <h2>{{modInfo.name}}</h2>
<br> <br>
<h3>{{VERSION.withName}}</h3> <h3>{{VERSION.withName}}</h3>
@ -72,7 +72,7 @@
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span> <span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span>
</div> </div>
<div v-if="player.tab=='options'" class="col right"> <div v-if="player.tab=='options'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br> <button class="back" onclick="showTab('none')">←</button><br>
<table> <table>
<tr> <tr>
<td><button class="opt" onclick="save()">Save</button></td> <td><button class="opt" onclick="save()">Save</button></td>
@ -95,7 +95,7 @@
</tr> </tr>
</table> </table>
</div> </div>
<div id="treeOverlay" class="treeOverlay" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}"> <div id="treeOverlay" class="treeOverlay" v-if="player.tab!='gameEnded'" 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" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
<img id="optionWheel" class="overlayThing" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img> <img id="optionWheel" class="overlayThing" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
<div id="info" v-if="player.tab!='info'" class="overlayThing" onclick="showTab('info')"><br>i</div> <div id="info" v-if="player.tab!='info'" class="overlayThing" onclick="showTab('info')"><br>i</div>
@ -131,7 +131,7 @@
</div> </div>
<div id="treeTab" style="z-index: 0" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}"> <div v-if="player.navTab == 'tree' && player.tab!='gameEnded'" id="treeTab" style="z-index: 0" onscroll="resizeCanvas()" v-bind:class= "{ fullWidth: player.tab == 'none', col: player.tab != 'none', left: player.tab != 'none'}">
<br><br><br><br> <br><br><br><br>
<div id="fakeHead" style="visibility: hidden;"> <div id="fakeHead" style="visibility: hidden;">
<span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing"> <span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing">
@ -152,43 +152,35 @@
<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div> <div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div> </div>
<span v-for="(n, row) in (maxRow + 1)"><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 TREE_LAYERS[row]">
<td v-for="node in TREE_LAYERS[row]"><layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node></td> <layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node>
<table><button class="treeNode hidden"></button></td></table> </td>
<table><button class="treeNode hidden"></button></table>
</span> </span>
<canvas id="treeCanvas" class="canvas"></canvas> <canvas id="treeCanvas" class="canvas"></canvas>
</div> </div>
<div v-for="layer in LAYERS" > <div v-for="layer in LAYERS" >
<div v-if="player.tab==layer" v-bind:class="'col right fast tab'" 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="player.navTab == 'none'" id="fakeHead" style="visibility: hidden;">
<button class="back" onclick="showTab('tree')">←</button><br><br><br> <span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing">
<div v-if="!tmp[layer].tabFormat"> <br>Dev Speed: {{format(player.devSpeed)}}x<br>
<info-box v-if="tmp[layer].infoboxes" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]"></info-box> </span>
<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display> <span v-if="player.offTime !== undefined" class="overlayThing">
<div v-if="tmp[layer].type !== 'none'"> <br>Offline Time: {{formatTime(player.offTime.remain)}}<br>
<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button> </span>
</div> <span v-if="false && !player.keepGoing" class="overlayThing">
<resource-display v-bind:style="tmp[layer].componentStyles['resource-display']" :layer="layer"></resource-display> <br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
<milestones v-bind:style="tmp[layer].componentStyles.milestones" :layer="layer"></milestones> </span>
<div v-if="Array.isArray(tmp[layer].midsection)"> <br>
<column :layer="layer" :data="tmp[layer].midsection"></column> <span v-if="player.points.lt('1e1000')" class="overlayThing">You have </span>
</div> <h2 class="overlayThing" id="points">{{format(player.points)}}</h2>
<clickables v-bind:style="tmp[layer].componentStyles['clickables']" :layer="layer"></clickables> <span v-if="player.points.lt('1e1e6')" class="overlayThing"> {{modInfo.pointsName}}</span>
<buyables v-bind:style="tmp[layer].componentStyles.buyables" :layer="layer"></buyables> <br>
<upgrades v-bind:style="tmp[layer].componentStyles['upgrades']" :layer="layer"></upgrades> <span v-if="canGenPoints()" class="overlayThing">({{format(getPointGen())}}/sec)</span>
<challenges v-bind:style="tmp[layer].componentStyles['challenges']" :layer="layer"></challenges> <div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
<br><br> </div>
</div>
<div v-if="tmp[layer].tabFormat"> <div v-if="player.tab==layer" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-if="Array.isArray(tmp[layer].tabFormat)"> <layer-tab :layer="layer" :back="'none'"></layer-tab>
<column :layer="layer" :data="tmp[layer].tabFormat"></column>
</div>
<div v-else v-bind:style="[{'margin-top': '-50px'}]">
<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">
<tab-buttons v-bind:style="tmp[layer].componentStyles['tab-buttons']" :layer="layer" :data="tmp[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
</div>
<column :layer="layer" :data="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].content"></column>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

1
js/Demo/demoLayers.js
View file

@ -285,6 +285,7 @@ addLayer("c", {
tabFormat: { tabFormat: {
"main tab": { "main tab": {
buttonStyle() {return {'color': 'orange'}}, buttonStyle() {return {'color': 'orange'}},
shouldNotify: true,
content: content:
["main-display", ["main-display",
"prestige-button", "resource-display", "prestige-button", "resource-display",

7
js/Demo/demoMod.js
View file

@ -5,8 +5,11 @@ let modInfo = {
discordName: "", discordName: "",
discordLink: "", discordLink: "",
changelogLink: "https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md", 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 // Set your version in num and name

7
js/mod.js
View file

@ -6,8 +6,11 @@ let modInfo = {
discordName: "", discordName: "",
discordLink: "", discordLink: "",
changelogLink: "https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md", 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 // Set your version in num and name

2
js/temp.js
View file

@ -91,7 +91,7 @@ function updateTempData(layerData, tmpData) {
else if (isFunction(layerData[item]) && !activeFunctions.includes(item)){ else if (isFunction(layerData[item]) && !activeFunctions.includes(item)){
let value = layerData[item]() let value = layerData[item]()
if (value !== value || value === decimalNaN){ 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 NaNalert = true
value = (value !== value ? 0 : decimalZero) value = (value !== value ? 0 : decimalZero)
} }

10
js/utils.js
View file

@ -80,7 +80,8 @@ function save() {
function startPlayerBase() { function startPlayerBase() {
return { return {
tab: "tree", tab: modInfo.startTab,
navTab: modInfo.startNavTab,
time: Date.now(), time: Date.now(),
autosave: true, autosave: true,
notify: {}, notify: {},
@ -224,7 +225,6 @@ function load() {
else player = Object.assign(getStartPlayer(), JSON.parse(atob(get))) else player = Object.assign(getStartPlayer(), JSON.parse(atob(get)))
fixSave() fixSave()
player.tab = "tree"
if (player.offlineProd) { if (player.offlineProd) {
if (player.offTime === undefined) player.offTime = { remain: 0 } if (player.offTime === undefined) player.offTime = { remain: 0 }
player.offTime.remain += (Date.now() - player.time) / 1000 player.offTime.remain += (Date.now() - player.time) / 1000
@ -254,7 +254,7 @@ function NaNcheck(data) {
NaNcheck(data[item]) NaNcheck(data[item])
} }
else if (data[item] !== data[item] || data[item] === decimalNaN){ 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 NaNalert = true
data[item] = (data[item] !== data[item] ? 0 : decimalZero) data[item] = (data[item] !== data[item] ? 0 : decimalZero)
} }
@ -589,7 +589,7 @@ var onTreeTab = true
function showTab(name) { function showTab(name) {
if (LAYERS.includes(name) && !layerunlocked(name)) return if (LAYERS.includes(name) && !layerunlocked(name)) return
var toTreeTab = name == "tree" var toTreeTab = name == "none"
player.tab = name player.tab = name
if (toTreeTab != onTreeTab) { if (toTreeTab != onTreeTab) {
@ -609,7 +609,7 @@ function nodeShown(layer) {
if (tmp[layer].layerShown) return true if (tmp[layer].layerShown) return true
switch(layer) { switch(layer) {
case "idk": case "idk":
return player.l.unlocked return player.idk.unlocked
break; break;
} }
return false return false

45
js/v.js
View file

@ -313,7 +313,9 @@ function loadVue() {
<div class="upgTable"> <div class="upgTable">
<tab-buttons :layer="layer" :data="tmp[layer].microtabs[data]" :name="data" v-bind:style="tmp[layer].componentStyles['tab-buttons']"></tab-buttons> <tab-buttons :layer="layer" :data="tmp[layer].microtabs[data]" :name="data" v-bind:style="tmp[layer].componentStyles['tab-buttons']"></tab-buttons>
</div> </div>
<column 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> <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>
<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> </div>
` `
}) })
@ -386,7 +388,7 @@ function loadVue() {
template: ` template: `
<div class="upgRow"> <div class="upgRow">
<div v-for="tab in Object.keys(data)"> <div v-for="tab in Object.keys(data)">
<button v-if="data[tab].unlocked == undefined || data[tab].unlocked" class="tabButton" v-bind:style="[{'border-color': tmp[layer].color}, tmp[layer].componentStyles['tab-button'], data[tab].buttonStyle]" v-on:click="player.subtabs[layer][name] = tab">{{tab}}</button> <button v-if="data[tab].unlocked == undefined || data[tab].unlocked" v-bind:class="{tabButton: true, notify: (data[tab].embedLayer ? tmp[data[tab].embedLayer].notify : data[tab].shouldNotify)}" v-bind:style="[{'border-color': tmp[layer].color}, tmp[layer].componentStyles['tab-button'], data[tab].buttonStyle]" v-on:click="player.subtabs[layer][name] = tab">{{tab}}</button>
</div> </div>
</div> </div>
` `
@ -420,8 +422,47 @@ function loadVue() {
{{abb}} {{abb}}
</button> </button>
` `
},
Vue.component('layer-tab', {
props: ['layer', 'back'],
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 : {}]">
<button v-if="back" class="back" v-on:click="showTab(back)">←</button><br><br><br>
<div v-if="!tmp[layer].tabFormat">
<info-box v-if="tmp[layer].infoboxes" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]"></info-box>
<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
<div v-if="tmp[layer].type !== 'none'">
<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button>
</div>
<resource-display v-bind:style="tmp[layer].componentStyles['resource-display']" :layer="layer"></resource-display>
<milestones v-bind:style="tmp[layer].componentStyles.milestones" :layer="layer"></milestones>
<div v-if="Array.isArray(tmp[layer].midsection)">
<column :layer="layer" :data="tmp[layer].midsection"></column>
</div>
<clickables v-bind:style="tmp[layer].componentStyles['clickables']" :layer="layer"></clickables>
<buyables v-bind:style="tmp[layer].componentStyles.buyables" :layer="layer"></buyables>
<upgrades v-bind:style="tmp[layer].componentStyles['upgrades']" :layer="layer"></upgrades>
<challenges v-bind:style="tmp[layer].componentStyles['challenges']" :layer="layer"></challenges>
<br><br>
</div>
<div v-if="tmp[layer].tabFormat">
<div v-if="Array.isArray(tmp[layer].tabFormat)">
<column :layer="layer" :data="tmp[layer].tabFormat"></column>
</div>
<div v-else v-bind:style="[{'margin-top': '-50px'}]">
<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">
<tab-buttons v-bind:style="tmp[layer].componentStyles['tab-buttons']" :layer="layer" :data="tmp[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
</div>
<column :layer="layer" :data="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].content"></column>
</div>
</div></div>
`
}) })
)
app = new Vue({ app = new Vue({
el: "#app", el: "#app",

7
style.css
View file

@ -115,6 +115,13 @@ h1, h2, h3, b, input {
z-index: 4 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 { .bought {
background-color: #77bf5f; background-color: #77bf5f;
cursor: default; cursor: default;