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 17:31:50 +00:00
Code Issues Releases Activity Actions

aaaa

Browse source
This commit is contained in:
Acamaeda 2020-10-24 20:45:50 -04:00
parent db4b525d62
commit ff08c2b0e8
4 changed files with 543 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
changelog.md
View file

@ -1,4 +1,107 @@
<<<<<<< Updated upstream
#The Modding Tree changelog:
=======
# The Modding Tree changelog:
- Fixed the "blank" component breaking if only specifying the height.
- Fixed some numbers not displaying with enough digits.
- Made a few more things able to be functions.
### v2.1.3.1 - 10/21/20
- Fixed the update function.
### v2.1.3 - 10/21/20
- gainMult and gainExp are now optional.
- Layer unlocking is now kept on reset.
- Game should start up faster.
- Layer updates now have a determined order and starts with earlier-rowed layers.
- Automation now has a determined order and starts with later-rowed layers.
- Fixed issues with resetting clickables and challenges.
- Commas should no longer appear in the decimal places of a number.
- Fixed potential issue in displaying the tree.
### v2.1.2 - 10/19/20
- Added buyUpgrade function (buyUpg still works though)
- Added author name to modInfo.
- Fix to crash caused when the name of a subtab or microtab is changed.
- Fixes to outdated information in docs.
- Improvements to Discord links.
- Thank you to thepaperpilot for contributing to this update!
### v2.1.1 - 10/17/20
- Added resource-display component, which displays the base currency for the prestige layer, as well as the best
and/or total of this layer's prestige currency.
- Fixed the value for the base currency not updating in resource-display.
## v2.1: We should have thought of this sooner! - 10/17/20
- Moved most of the code users will want to edit to mod.js, added documentation for it.
- Specifically, modInfo, VERSION, canGenPoints, getPointGen, and maxTickLength
- Added getStartPoints()
- Added the ability to store non-layer-related data
- Added the ability to display more things at the top of the tree tab below points.
- Made the endgame condition customizable
- Added "sell one" and "sell all" buttons for buyables.
- Moved the old "game" to demo.js, and replaced it with a minimal game that won't cause issues when edited.
- Fixed issues with version number
- Fixed number formatting issue making things like "10e9" appear.
### v2.0.5 - 10/16/20
- Made more features (including prestige parameters) able to be dynamic.
- Layer nodes can be hidden but still take up space with "ghost" visibility
- Added clickableEffect for real.
- Fixed some visual issues with bars.
- A few other minor tweaks and improvements.
### v2.0.4 - 10/16/20
- Fixed HTML on buttons interfering with clicking on them.
### v2.0.3 - 10/16/20
- Fixed hotkeys not displaying in info.
- Fixed the game supressing all external hotkeys.
- You can use more things as currencies for upgrade costs and challenge goals using currencyLocation.
- Added maxTickLength, which can be used to prevent offline time or tab-switching from breaking time-limit based mechanics.
- Made buyable respec buttons and clickable "master" buttons their own components, and gave them a hide/show feature.
- Added a general "tooltip" feature for achievements.
### v2.0.2 - 10/15/20
- Branches are now dynamic (they can be functions).
- Fixed a crash related to offline time.
- Fixed links being too wide.
### v2.0.1 - 10/15/20
- Fixed side layers appearing multiple times.
## v2.0: The Pinnacle of Achievement Mountain - 10/15/20
- Added progress bars, which are highly customizable and can be horizontal or vertical!
- Added "side layers", displayed smaller and off to the side, and don't get reset by default.
They can be used for global achievements and statistics. Speaking of which...
- Added achievements!
- Added clickables, a more generalized variant of buyables.
- Almost every value in layer data can be either a function or a constant value!
- Added support for multiple completions of challenges.
- Added "none" prestige type, which removes the need for any other prestige-related features.
- The points display and other gui elements stay at the top of the screen when the tree scrolls.
- Added getter/setter functions for the amounts and effects of most Big Features
- Moved modInfo to game.js, added a spot in modInfo for a Discord link, changelog link.
Also added a separate mod version from the TMT version in VERSION.
- Tree structure is based on layer data, no index.html editing is needed.
- Tmp does not need to be manually updated.
- You don't have to have the same amount of upgrades in every row (and challs and buyables)
- "unlocked" is optional for all Big Components (defaults to true).
- All displays will update correctly.
- Changelog is no longer in index.html at all.
- Generation of Points now happens in the main game loop
- Changed the reset functions to make keeping things easier
- Renamed many things to increase readability (see the list in the link below)
- Improved documentation based on feedback
[For a full list of changes to the format and functionality of existing things, click here.](2.0-format-changes.md)
### v1.3.5:
>>>>>>> Stashed changes
##v1.3.5

194
demo.html Normal file
View file

@ -0,0 +1,194 @@
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script type="text/javascript" src="js/break_eternity.js"></script>
<script type="text/javascript" src="js/layerSupport.js"></script>
<script type="text/javascript" src="js/demo/demoLayers.js"></script>
<script type="text/javascript" src="js/demo/demoMod.js"></script>
<script type="text/javascript" src="js/temp.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/v.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
</head>
<body onload="load()">
<div id="app">
<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 v-if="player.tab=='gameEnded'" 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>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>
<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>
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 v-if="player.tab=='changelog'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
</div>
<div v-if="player.tab=='info'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br>
<h2>{{modInfo.name}}</h2>
<br>
<h3>{{VERSION.withName}}</h3>
<span v-if="modInfo.author">
<br>
Made by {{modInfo.author}}
</span>
<br>
The Modding Tree {{TMT_VERSION.tmtNum}} by Acamaeda
<br>
The Prestige Tree made by Jacorb and Aarex
<br>
Original idea by papyrus (on discord)
<br><br>
<a v-bind:href="modInfo.changelogLink" target="_blank" class="link" >Changelog</a><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>
Note by Jacorb: If anyone wishes to make a mod of this game, that is perfectly fine with me, just make sure to name it something different (ex: Prestige Tree NG+) and to let me know on <a href="https://discord.gg/wwQfgPa" target="_blank">my discord</a>.
<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"><br>{{key.description}}</span>
</div>
<div v-if="player.tab=='options'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br>
<table>
<tr>
<td><button class="opt" onclick="save()">Save</button></td>
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ player.autosave?"ON":"OFF" }}</button></td>
<td><button class="opt" onclick="hardReset()">HARD RESET</button></td>
</tr>
<tr>
<td><button class="opt" onclick="exportSave()">Export to clipboard</button></td>
<td><button class="opt" onclick="importSave()">Import</button></td>
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td>
</tr>
<tr>
<td><button class="opt" onclick="switchTheme()">Theme: {{ getThemeName() }}</button></td>
<td><button class="opt" onclick="adjustMSDisp()">Show Milestones: {{ player.msDisplay.toUpperCase() }}</button></td>
<td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ player.hqTree?"ON":"OFF" }}</button></td>
</tr>
<tr>
<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ player.hideChallenges?"HIDDEN":"SHOWN" }}</button></td>
<!-- <td><button class="opt" onclick="toggleOpt('oldStyle')">Style: {{ player.oldStyle?"v1.0":"NEW" }}</button></td>-->
</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="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>
<div id="discord" class="overlayThing">
<img onclick="window.open((modInfo.discordLink ? modInfo.discordLink : 'https://discord.gg/F3xveHV'),'mywindow')" src="discord.png" target="_blank"></img>
<ul id="discord-links">
<li v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></li>
<li><a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br></li>
<li><a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a></li>
</ul>
</div>
<div class="overlayThing" style="padding-bottom:7px; width: 90%">
<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 class="sideLayers" >
<div v-for="node in OTHER_LAYERS['side']"><layer-node :layer='node.layer' :abb='tmp[node.layer].symbol' :size="'small'"></layer-node></div>
</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'}">
<br><br><br><br>
<div 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>
<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>
</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">
<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>
</div>
</div>
</body>

84
index.html
View file

@ -137,6 +137,7 @@
</tr>
</table>
</div>
<<<<<<< Updated upstream
<div id="treeTab" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}">
<div id="version" onclick="showTab('changelog')">{{VERSION.withoutName}}</div>
<img id="optionWheel" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
@ -147,6 +148,68 @@
</span>
<span v-if="player.offTime !== undefined">
<br>Offline Time: {{formatTime(player.offTime.remain)}}<br>
=======
<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="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>
<div id="discord" class="overlayThing">
<img onclick="window.open((modInfo.discordLink ? modInfo.discordLink : 'https://discord.gg/F3xveHV'),'mywindow')" src="discord.png" target="_blank"></img>
<ul id="discord-links">
<li v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></li>
<li><a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br></li>
<li><a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a></li>
</ul>
</div>
<div class="overlayThing" style="padding-bottom:7px; width: 90%">
<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 class="sideLayers" >
<div v-for="node in OTHER_LAYERS['side']"><layer-node :layer='node.layer' :abb='tmp[node.layer].symbol' :size="'small'"></layer-node></div>
</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'}">
<br><br><br><br>
<div 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>
<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>
>>>>>>> Stashed changes
</span>
<span v-if="false && !player.keepGoing">
<br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
@ -171,6 +234,7 @@
</table>
<canvas id="treeCanvas" class="canvas"></canvas>
</div>
<<<<<<< Updated upstream
<div v-for="layer in LAYERS">
<div v-if="player.tab==layer" v-bind:class="'col right'" v-bind:style="tmp.style[layer] ? tmp.style[layer] : {}">
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
@ -184,15 +248,35 @@
<milestones v-bind:style="tmp.componentStyles[layer].milestones" :layer="layer"></milestones>
<div v-if="Array.isArray(layers[layer].midsection)">
<column :layer="layer" :data="layers[layer].midsection"></column>
=======
<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">
<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>
>>>>>>> Stashed changes
</div>
<buyables v-bind:style="tmp.componentStyles[layer].buyables" :layer="layer"></buyables>
<upgrades v-bind:style="tmp.componentStyles[layer]['upgrades']" :layer="layer"></upgrades>
<challs v-bind:style="tmp.componentStyles[layer]['challs']" :layer="layer"></challs>
<br><br>
</div>
<<<<<<< Updated upstream
<div v-if="layers[layer].tabFormat">
<div v-if="Array.isArray(layers[layer].tabFormat)">
<column :layer="layer" :data="layers[layer].tabFormat"></column>
=======
<div v-if="tmp[layer].tabFormat">
<div v-if="Array.isArray(tmp[layer].tabFormat)">
<column :layer="layer" :data="tmp[layer].tabFormat"></column>
>>>>>>> Stashed changes
</div>
<div v-else v-bind:style="[{'margin-top': '-50px'}, readData(layers[layer].tabFormat[player.subtabs[layer].mainTabs].style)]">
<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">

162
js/v.js
View file

@ -118,10 +118,17 @@ function loadVue() {
props: ['layer'],
template: `
<div v-if="layers[layer].upgrades" class="upgTable">
<<<<<<< Updated upstream
<div v-for="row in layers[layer].upgrades.rows" class="upgRow">
<div v-for="col in layers[layer].upgrades.cols" class="upgAlign">
<upgrade :layer = "layer" :data = "row*10+col" v-bind:style="tmp.componentStyles[layer].upgrade"></upgrade>
</div>
=======
<div v-for="row in tmp[layer].upgrades.rows" 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>
>>>>>>> Stashed changes
</div>
<br>
</div>
@ -132,12 +139,21 @@ function loadVue() {
Vue.component('upgrade', {
props: ['layer', 'data'],
template: `
<<<<<<< Updated upstream
<button v-if="layers[layer].upgrades && tmp.upgrades[layer][data].unl" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(data), locked: (!(canAffordUpg(layer, data))&&!player[layer].upgrades.includes(data)), can: (canAffordUpg(layer, data)&&!player[layer].upgrades.includes(data))}"
v-bind:style="[((!hasUpg(layer, data) && canAffordUpg(layer, data)) ? {'background-color': tmp.layerColor[layer]} : {}), tmp.upgrades[layer][data].style]">
<span v-if= "tmp.upgrades[layer][data].title"><h3 v-html="tmp.upgrades[layer][data].title"></h3><br></span>
<span v-html="tmp.upgrades[layer][data].desc"></span>
<span v-if="tmp.upgrades[layer][data].effect"><br>Currently: <span v-html="(tmp.upgrades[layer][data].effectDisplay) ? (tmp.upgrades[layer][data].effectDisplay) : format(tmp.upgrades[layer][data].effect)"></span></span>
<br><br>Cost: {{ formatWhole(tmp.upgrades[layer][data].cost) }} {{(layers[layer].upgrades[data].currencyDisplayName ? layers[layer].upgrades[data].currencyDisplayName : layers[layer].resource)}}
=======
<button v-if="layers[layer].upgrades && tmp[layer].upgrades[data]!== undefined && tmp[layer].upgrades[data].unlocked" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: hasUpgrade(layer, data), locked: (!(canAffordUpgrade(layer, data))&&!hasUpgrade(layer, data)), can: (canAffordUpgrade(layer, data)&&!hasUpgrade(layer, data))}"
v-bind:style="[((!hasUpgrade(layer, data) && canAffordUpgrade(layer, data)) ? {'background-color': tmp[layer].color} : {}), tmp[layer].upgrades[data].style]">
<span v-if= "tmp[layer].upgrades[data].title"><h3 v-html="tmp[layer].upgrades[data].title"></h3><br></span>
<span v-html="tmp[layer].upgrades[data].description"></span>
<span v-if="tmp[layer].upgrades[data].effect"><br>Currently: <span v-html="(tmp[layer].upgrades[data].effectDisplay) ? (tmp[layer].upgrades[data].effectDisplay) : format(tmp[layer].upgrades[data].effect)"></span></span>
<br><br>Cost: {{ formatWhole(tmp[layer].upgrades[data].cost) }} {{(tmp[layer].upgrades[data].currencyDisplayName ? tmp[layer].upgrades[data].currencyDisplayName : tmp[layer].resource)}}
>>>>>>> Stashed changes
</button>
`
})
@ -147,9 +163,15 @@ function loadVue() {
template: `
<div v-if="layers[layer].milestones">
<table>
<<<<<<< Updated upstream
<tr v-for="id in Object.keys(layers[layer].milestones)">
<milestone :layer = "layer" :data = "id" v-bind:style="tmp.componentStyles[layer].milestone"></milestone>
</tr>
=======
<tr v-for="id in Object.keys(tmp[layer].milestones)"><div v-if="tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked"
<milestone :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles.milestone"></milestone>
</tr></div>
>>>>>>> Stashed changes
</table>
<br>
</div>
@ -160,10 +182,17 @@ function loadVue() {
Vue.component('milestone', {
props: ['layer', 'data'],
template: `
<<<<<<< Updated upstream
<td v-if="layers[layer].milestones && milestoneShown(layer, data)" v-bind:style="[(layers[layer].milestones[data].unl && !tmp.milestones[layer][data].unl) ? {'visibility': 'hidden'} : {}, tmp.milestones[layer][data].style]" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}">
<h3 v-html="tmp.milestones[layer][data].requirementDesc"></h3><br>
<span v-html="tmp.milestones[layer][data].effectDesc"></span><br>
<span v-if="(layers[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v-for="toggle in layers[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle" v-bind:style="tmp.componentStyles[layer].toggle"></toggle>&nbsp;</span></td></tr>
=======
<td v-if="layers[layer].milestones && tmp[layer].milestones[data]!== undefined && milestoneShown(layer, data)" v-bind:style="[(!tmp[layer].milestones[data].unlocked) ? {'visibility': 'hidden'} : {}, tmp[layer].milestones[data].style]" v-bind:class="{milestone: !hasMilestone(layer, data), milestoneDone: hasMilestone(layer, data)}">
<h3 v-html="tmp[layer].milestones[data].requirementDescription"></h3><br>
<span v-html="tmp[layer].milestones[data].effectDescription"></span><br>
<span v-if="(tmp[layer].milestones[data].toggles)&&(hasMilestone(layer, data))" v-for="toggle in tmp[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle" v-bind:style="tmp[layer].componentStyles.toggle"></toggle>&nbsp;</span></td></tr>
>>>>>>> Stashed changes
`
})
@ -203,11 +232,19 @@ function loadVue() {
props: ['layer', 'data'],
template: `
<div v-if="layers[layer].buyables" class="upgTable">
<<<<<<< Updated upstream
<button v-if="layers[layer].buyables.respec" v-on:click="respecBuyables(layer)" v-bind:class="{ longUpg: true, can: player[layer].unl, locked: !player[layer].unl }">{{layers[layer].buyables.respecText ? tmp.buyables[layer].respecText : "Respec"}}</button><br>
<div v-for="row in layers[layer].buyables.rows" class="upgRow">
<div v-for="col in layers[layer].buyables.cols" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : '200px'),}">
<buyable :layer = "layer" :data = "row*10+col" :size = "data" v-bind:style="tmp.componentStyles[layer].buyable"></buyable>
</div>
=======
<respec-button v-if="tmp[layer].buyables.respec && !(tmp[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" :layer = "layer" v-bind:style="[{'margin-bottom': '12px'}, tmp[layer].componentStyles['respec-button']]"></respec-button>
<div v-for="row in tmp[layer].buyables.rows" class="upgRow">
<div v-for="col in tmp[layer].buyables.cols"><div v-if="tmp[layer].buyables[row*10+col]!== undefined && tmp[layer].buyables[row*10+col].unlocked" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : 'inherit'),}">
<buyable :layer = "layer" :data = "row*10+col" :size = "data"></buyable>
</div></div>
>>>>>>> Stashed changes
<br>
</div>
</div>
@ -218,6 +255,7 @@ function loadVue() {
Vue.component('buyable', {
props: ['layer', 'data', 'size'],
template: `
<<<<<<< Updated upstream
<button
v-if="layers[layer].buyables && tmp.buyables[layer][data].unl"
v-bind:class="{ buyable: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
@ -225,10 +263,70 @@ function loadVue() {
v-on:click="buyBuyable(layer, data)">
<span v-if= "layers[layer].buyables[data].title"><h2 v-html="tmp.buyables[layer][data].title"></h2><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="tmp.buyables[layer][data].display"></span>
=======
<div v-if="layers[layer].buyables && tmp[layer].buyables[data]!== undefined && tmp[layer].buyables[data].unlocked" style="display: grid">
<button v-bind:class="{ buyable: true, can: tmp[layer].buyables[data].canAfford, locked: !tmp[layer].buyables[data].canAfford}"
v-bind:style="[tmp[layer].buyables[data].canAfford ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].componentStyles.buyable, tmp[layer].buyables[data].style]"
v-on:click="buyBuyable(layer, data)">
<span v-if= "tmp[layer].buyables[data].title"><h2 v-html="tmp[layer].buyables[data].title"></h2><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="tmp[layer].buyables[data].display"></span>
</button>
<br v-if="(tmp[layer].buyables[data].sellOne !== undefined && !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)) || (tmp[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false))">
<sell-one :layer="layer" :data="data" v-bind:style="tmp[layer].componentStyles['sell-one']" v-if="(tmp[layer].buyables[data].sellOne)&& !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)"></sell-one>
<sell-all :layer="layer" :data="data" v-bind:style="tmp[layer].componentStyles['sell-all']" v-if="(tmp[layer].buyables[data].sellAll)&& !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)"></sell-all>
</div>
`
})
Vue.component('respec-button', {
props: ['layer', 'data'],
template: `
<button v-if="layers[layer].buyables && tmp[layer].buyables.respec && !(tmp[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" v-on:click="respecBuyables(layer)" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.respecText ? tmp[layer].buyables.respecText : "Respec"}}</button>
`
})
// data = button size, in px
Vue.component('clickables', {
props: ['layer', 'data'],
template: `
<div v-if="layers[layer].clickables" class="upgTable">
<master-button v-if="tmp[layer].clickables.masterButtonPress && !(tmp[layer].clickables.showMasterButton !== undefined && tmp[layer].clickables.showMasterButton == false)" :layer = "layer" v-bind:style="[{'margin-bottom': '12px'}, tmp[layer].componentStyles['master-button']]"></master-button>
<div v-for="row in tmp[layer].clickables.rows" class="upgRow">
<div v-for="col in tmp[layer].clickables.cols"><div v-if="tmp[layer].clickables[row*10+col]!== undefined && tmp[layer].clickables[row*10+col].unlocked" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : 'inherit'),}">
<clickable :layer = "layer" :data = "row*10+col" :size = "data" v-bind:style="tmp[layer].componentStyles.clickable"></clickable>
</div></div>
<br>
</div>
</div>
`
})
// data = id of clickable
Vue.component('clickable', {
props: ['layer', 'data', 'size'],
template: `
<button
v-if="layers[layer].clickables && tmp[layer].clickables[data]!== undefined && tmp[layer].clickables[data].unlocked"
v-bind:class="{ upg: true, can: tmp[layer].clickables[data].canClick, locked: !tmp[layer].clickables[data].canClick}"
v-bind:style="[tmp[layer].clickables[data].canClick ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].clickables[data].style]"
v-on:click="clickClickable(layer, data)">
<span v-if= "tmp[layer].clickables[data].title"><h2 v-html="tmp[layer].clickables[data].title"></h2><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="tmp[layer].clickables[data].display"></span>
>>>>>>> Stashed changes
</button>
`
})
<<<<<<< Updated upstream
=======
Vue.component('master-button', {
props: ['layer', 'data'],
template: `
<button v-if="tmp[layer].clickables && tmp[layer].clickables.masterButtonPress && !(tmp[layer].clickables.showMasterButton !== undefined && tmp[layer].clickables.showMasterButton == false)" v-on:click="tmp[layer].clickables.masterButtonPress()" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].clickables.masterButtonText ? tmp[layer].clickables.masterButtonText : "Click me!"}}</button>
`
})
>>>>>>> Stashed changes
// data = button size, in px
Vue.component('microtabs', {
props: ['layer', 'data'],
@ -246,6 +344,70 @@ function loadVue() {
})
<<<<<<< Updated upstream
=======
// data = id of the bar
Vue.component('bar', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].dims, {'display': 'table'}]">
<div class = "overlayTextContainer barBorder" v-bind:style="[tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
<span class = "overlayText" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v-html="tmp[layer].bars[data].display"></span>
</div>
<div class ="barBG barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
<div class ="fill" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].fillDims]"></div>
</div>
</div></div>
`
})
Vue.component('achievements', {
props: ['layer'],
template: `
<div v-if="layers[layer].achievements" class="upgTable">
<div v-for="row in tmp[layer].achievements.rows" class="upgRow">
<div v-for="col in tmp[layer].achievements.cols"><div v-if="tmp[layer].achievements[row*10+col]!== undefined && tmp[layer].achievements[row*10+col].unlocked" class="upgAlign">
<achievement :layer = "layer" :data = "row*10+col" v-bind:style="tmp[layer].componentStyles.achievement"></achievement>
</div></div>
</div>
<br>
</div>
`
})
// data = id
Vue.component('achievement', {
props: ['layer', 'data'],
template: `
<div v-if="layers[layer].achievements && tmp[layer].achievements[data]!== undefined && tmp[layer].achievements[data].unlocked" v-bind:class="{ [layer]: true, achievement: true, locked: !hasAchievement(layer, data), bought: hasAchievement(layer, data)}"
v-bind:tooltip="
hasAchievement(layer, data) ? (tmp[layer].achievements[data].doneTooltip ? tmp[layer].achievements[data].doneTooltip : (tmp[layer].achievements[data].tooltip ? tmp[layer].achievements[data].tooltip : 'You did it!'))
: (tmp[layer].achievements[data].goalTooltip ? tmp[layer].achievements[data].goalTooltip : (tmp[layer].achievements[data].tooltip ? tmp[layer].achievements[data].tooltip : 'LOCKED'))
"
v-bind:style="[(!tmp[layer].achievements[data].unlocked) ? {'visibility': 'hidden'} : {}, tmp[layer].achievements[data].style,]">
<span v-if= "tmp[layer].achievements[data].name"><br><h3 v-html="tmp[layer].achievements[data].name"></h3><br></span>
</div>
`
})
// These are for buyables, data is the id of the corresponding buyable
Vue.component('sell-one', {
props: ['layer', 'data'],
template: `
<button v-if="layers[layer].buyables && tmp[layer].buyables[data].sellOne && !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)" v-on:click="tmp[layer].buyables[data].sellOne()" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.sellOneText ? tmp[layer].buyables.sellOneText : "Sell One"}}</button>
`
})
Vue.component('sell-all', {
props: ['layer', 'data'],
template: `
<button v-if="layers[layer].buyables && tmp[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)" v-on:click="tmp[layer].buyables[data].sellAll()" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.sellAllText ? tmp[layer].buyables.sellAllText : "Sell All"}}</button>
`
})
>>>>>>> Stashed changes
// NOT FOR USE IN STANDARD TAB FORMATTING
Vue.component('tab-buttons', {
props: ['layer', 'data', 'name'],