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 2024-11-24 09:21:46 +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:
- 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!

70
demo.html
View file

@ -20,7 +20,7 @@
<div v-if="false" id="loadingSection" class="fullWidth">
<h1>Loading... (If this takes too long it means there was a serious error!)</h1>
</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">
<br>
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
@ -41,11 +41,11 @@
<br>
</div>
<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 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>
<br>
<h3>{{VERSION.withName}}</h3>
@ -72,7 +72,7 @@
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span>
</div>
<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>
<tr>
<td><button class="opt" onclick="save()">Save</button></td>
@ -95,7 +95,7 @@
</tr>
</table>
</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>
<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>
@ -131,7 +131,7 @@
</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>
<div id="fakeHead" style="visibility: hidden;">
<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>
<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]"><layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node></td>
<table><button class="treeNode hidden"></button></td></table>
<td v-for="node in TREE_LAYERS[row]">
<layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node>
</td>
<table><button class="treeNode hidden"></button></table>
</span>
<canvas id="treeCanvas" class="canvas"></canvas>
</div>
<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 : {}]">
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
<div v-if="!tmp[layer].tabFormat">
<infobox v-if="tmp[layer].infoboxes" v-bind:style="tmp[layer].componentStyles['infobox']" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]"></infobox>
<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 v-if="player.navTab == 'none'" id="fakeHead" style="visibility: hidden;">
<span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing">
<br>Dev Speed: {{format(player.devSpeed)}}x<br>
</span>
<span v-if="player.offTime !== undefined" class="overlayThing">
<br>Offline Time: {{formatTime(player.offTime.remain)}}<br>
</span>
<span v-if="false && !player.keepGoing" class="overlayThing">
<br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
</span>
<br>
<span v-if="player.points.lt('1e1000')" class="overlayThing">You have </span>
<h2 class="overlayThing" id="points">{{format(player.points)}}</h2>
<span v-if="player.points.lt('1e1e6')" class="overlayThing"> {{modInfo.pointsName}}</span>
<br>
<span v-if="canGenPoints()" class="overlayThing">({{format(getPointGen())}}/sec)</span>
<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div>
<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}">
<layer-tab :layer="layer" :back="'none'"></layer-tab>
</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.
- [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.

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

@ -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.

70
index.html
View file

@ -20,7 +20,7 @@
<div v-if="false" id="loadingSection" class="fullWidth">
<h1>Loading... (If this takes too long it means there was a serious error!)</h1>
</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">
<br>
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
@ -41,11 +41,11 @@
<br>
</div>
<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 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>
<br>
<h3>{{VERSION.withName}}</h3>
@ -72,7 +72,7 @@
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span>
</div>
<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>
<tr>
<td><button class="opt" onclick="save()">Save</button></td>
@ -95,7 +95,7 @@
</tr>
</table>
</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>
<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>
@ -131,7 +131,7 @@
</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>
<div id="fakeHead" style="visibility: hidden;">
<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>
<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]"><layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node></td>
<table><button class="treeNode hidden"></button></td></table>
<td v-for="node in TREE_LAYERS[row]">
<layer-node :layer='node.layer' :abb='tmp[node.layer].symbol'></layer-node>
</td>
<table><button class="treeNode hidden"></button></table>
</span>
<canvas id="treeCanvas" class="canvas"></canvas>
</div>
<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 : {}]">
<button class="back" onclick="showTab('tree')">←</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 v-if="player.navTab == 'none'" id="fakeHead" style="visibility: hidden;">
<span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing">
<br>Dev Speed: {{format(player.devSpeed)}}x<br>
</span>
<span v-if="player.offTime !== undefined" class="overlayThing">
<br>Offline Time: {{formatTime(player.offTime.remain)}}<br>
</span>
<span v-if="false && !player.keepGoing" class="overlayThing">
<br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
</span>
<br>
<span v-if="player.points.lt('1e1000')" class="overlayThing">You have </span>
<h2 class="overlayThing" id="points">{{format(player.points)}}</h2>
<span v-if="player.points.lt('1e1e6')" class="overlayThing"> {{modInfo.pointsName}}</span>
<br>
<span v-if="canGenPoints()" class="overlayThing">({{format(getPointGen())}}/sec)</span>
<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div>
<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}">
<layer-tab :layer="layer" :back="'none'"></layer-tab>
</div>
</div>
</div>

1
js/Demo/demoLayers.js
View file

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

7
js/Demo/demoMod.js
View file

@ -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

7
js/mod.js
View file

@ -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

2
js/temp.js
View file

@ -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)
}

10
js/utils.js
View file

@ -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

45
js/v.js
View file

@ -313,7 +313,9 @@ function loadVue() {
<div class="upgTable">
<tab-buttons :layer="layer" :data="tmp[layer].microtabs[data]" :name="data" v-bind:style="tmp[layer].componentStyles['tab-buttons']"></tab-buttons>
</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>
`
})
@ -386,7 +388,7 @@ function loadVue() {
template: `
<div class="upgRow">
<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>
`
@ -420,8 +422,47 @@ function loadVue() {
{{abb}}
</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({
el: "#app",

7
style.css
View file

@ -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;