nif/just_another_tree
1
0
Fork 0
generated from incremental-social/The-Modding-Tree
Code Issues Pull requests Activity Actions

Initial commit

Browse source
This commit is contained in:
Nif 2024-03-03 11:53:50 +00:00
commit 3f8de45f2a
64 changed files with 10011 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
LICENSE Normal file
View file

@ -0,0 +1,21 @@
MIT License
Modding Tree Copyright (c) 2020 Acamaeda
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

27
Old Things/2.0-format-changes.md Normal file
View file

@ -0,0 +1,27 @@
# 2.0 format changes
- Temp format is changed from `temp.something[layer]` to `temp[layer].something`, for consistency
- Challenges are now saved as an object with the amount of completions in each spot. (This will break saves.)
- `effectDisplay` in Challenges and Upgrades no longer takes an argument, and neither does `effect` for Buyables
- Buyable cost can take an argument for amount of buyables, but it needs to function if no argument is supplied (it should do the cost for the next purchase).
- Generation of Points now happens in the main game loop (not in a layer update function), enabled by `canGenPoints` in [game.js](js/game.js).
- Changed `fullLayerReset` to `layerDataReset`, which takes an array of names of values to keep
In addition, many names were changed, mostly expanding abbreviations:
All instances of:
- chall -> challenge
- unl -> unlocked
- upg -> upgrade (besides CSS)
- amt -> amount
- desc -> description
- resCeil -> roundUpCost
- order -> unlockOrder
- incr_order -> increaseUnlockOrder
Challenges:
- desc -> challengeDescription
- reward -> rewardDescription
- effect -> rewardEffect
- effectDisplay -> rewardDisplay
- active -> challengeActive

21
Prestige-tree-license Normal file
View file

@ -0,0 +1,21 @@
MIT License
Prestige Tree Copyright (c) 2020 Jacorb
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

7
README.md Normal file
View file

@ -0,0 +1,7 @@
# The-Modding-Tree
An incremental game engine based on The Prestige Tree. It still requires programming knowledge, but it's mostly pretty easy things and copy/pasting.
[Look here for a tutorial on getting started with modding with TMT](docs/tutorials/getting-started.md)
You can look in the [documentation](docs/!general-info.md) for more information on how it all works, or look at the code in layers.js to see what it all looks like.

542
changelog.md Normal file
View file

@ -0,0 +1,542 @@
# The Modding Tree changelog:
# v2.6.6.2 = 9/9/21
- nodeStyle can now be used to set fonts.
# v2.6.6.1 = 9/8/21
- Fixed options not updating when new ones are added.
# v2.6.6 - 9/7/21
- Added option for shift-clicking nodes toggling their tooltips.
- Fixed NaN check for setting Decimal values with text boxes.
- Added display-image, h-line, and v-line to documentation.
- Fixed an issue with subtab glow colors.
- Locked/hidden subtabs can't cause node glowing.
- Fixed being able to buy upgrades on deactivated layers.
- Updated break_eternity library.
- Cleaned up buyable/clickable code.
# v2.6.5.1 - 7/13/21
- Fixed offline production more.
# v2.6.5 - 7/7/21
- Fixed offline production.
- Fixed formatting for small negative numbers.
- Fixed divide by zero when a 0-second tick occurs.
- "deactivated" now also affects achievement/milestone unlocking.
- Locked challenges cannot be entered.
- Fixed a bug with subtab glow colors.
# v2.6.4.2 - 6/17/21
- Fixed a bug with the endgame screen.
- Fixed hotkey-related crash.
- Fixed resetting not working correctly.
# v2.6.4 - 6/17/21
- The game now autosaves before closing, if autosave is on. (Thank you to thepaperpilot for this!)
- More Anti-NaN safety.
- Fixed challenges glowing from countsAs.
- Improved tooltip centering (thanks to Scarlettt!)
- canReset now works properly for non-custom layers.
- Fixed baseAmount being set to 0 even when a layer resets nothing.
- Fixed centering on tooltips.
- Changed some default values on startup to prevent potential issues.
- Cleaned up resetting.
# v2.6.3 - 6/11/21
- Added better support for using multiple layer files and similar. See modFiles in modInfo.
- The demo now has each layer in its own file as well.
# v2.6.2.2 - 6/10/21
- Fixed an error message regarding popup.css.
# v2.6.2.1 - 6/10/21
- Fixed a visual bug with milestones.
## v2.6.2 - 6/10/21
- Broke up style.css into many files to make it easier to find and customize what matters. If you already have custom CSS, keep that and ignore the new ones maybe?
- Added buyable and clickable trees.
- Added optional tooltips to upgrades, buyables, clickables, milestones, and gridables.
- Fixed the passiveGeneration display.
- Fixed "marked" feature.
- doReset now will function on non-numeric rows besides "side".
## v2.6.1 - 6/7/21
- Added global background style to mod.js.
- Tree branches can have custom line widths.
- If an upgrade has both canAfford and cost, it checks both. (So you can use canAfford for other things)
- Releasing a held buyable/clickable with onHold doesn't click it again.
- Fixed hard resetting while NaN'ed and exporting NaN saves for debugging.
- Attempt to fix buttons sometimes not updating.
- Added "instant" feature for bars. (not useful for most people)
- Improvements to theme code, partially by Cubedey.
## v2.6.0.1 - 6/4/21
- Removed excess NaN alerts (now only checks player, not temp).
- Fixed background images covering up tree branches.
## v2.6: Fixed Reality - 6/3/21
- Fixed issues with NaN checking. The game also will not save if the save is broken.
- Added a drop-down menu component!
- Added upgrade-tree component!
- Options are now saved separately, and not affected by hard resetting or importing saves.
- Fixed demo.html
- Fixed branches not working on the right tab.
- Fixed background color not working on the left tab.
- Fixed branches not updating when tree tab is not shown.
- You can now use "this" in tabFormat!
- Added per-row displaying for achievements, challenges, milestones, grids, buyables, and clickables. THIS WILL BREAK BUYABLES/CLICKABLES THAT PREVIOUSLY USED THEIR TABFORMAT ARGUMENT FOR SIZE.
- Added onComplete for milestones.
- Added addBuyables.
- The prestige/sec display now shows non-whole numbers.
- resetsNothing now works immediately on a reset that enables it.
- Made the star on maxed challenges larger.
- diff can no longer be negative.
- Fixed challenges with no currencyDisplayName using "points" instead of the mod's pointsName.
- inChallenge no longer can return undefined.
- Fixed certain things skipping negative rows (now they are treated like non-numeric rows, and don't appear in the tree still).
- Things are 0.2% more optimized.
- Fixed problems in the documentation.
- Added more customization to the "mark" component (but not an easy way to access it)
### v2.5.11.1 - 5/27/21
- Fixed issues caused when the tree tab is disabled.
### v2.5.11 - 5/27/21
- Finished part 1 of the "making a mod" tutorial.
- The challenge that you are currently in is highlighted, and will not be hidden if "hide completed challenges" is on and it is already completed.
- Added leftTab, which makes a layer use the left tab instead of the right one (good for trees-within-trees and such)
- Added startNavTab, which lets you choose which tab starts out on the left side.
- Fixed the infobox not appearing in default tabFormat.
- Fixed upgrade/buyable layering when they are hovered over.
- Fixed devSpeed being applied twice.
### v2.5.10.2 - 5/24/21
- Fixed some things in the tree tab not being clickable.
### v2.5.10.1 - 5/23/21
- Actually fixed the tooltip issue.
### v2.5.10 - 5/22/21
- Tooltips can now show over the top overlay again.
- Tweaked number formatting (e1000's keep the decimal places on the mantissa.)
- Fixed text on two settings buttons not changing.
- Started making a new tutorial.
### v2.5.9.2 - 5/19/21
- Fixed many issues with things not updating.
### v2.5.9.1 - 5/18/21
- Made text inputs never give NaNs.
### v2.5.9 - 5/18/21
- Fixed issue when using text inputs for Numbers.
- Added particle color feature.
- Particle speed and dir are updated as it moves.
- Added setSpeed and setDir for particles.
- Added more trig functions.
### v2.5.8 - 5/17/21
- Added makeShinies, which creates a stationary particle in a random spot.
- Bars will visually update more quickly.
- Fixed a major particle-related issue.
- Fixed autoUpgrade.
- Fixed a minor visual issue with tree nodes.
### v2.5.7 - 5/15/21
- Added a particle system! Not only can it be used for visual effects, but particles can interact with the mouse. They could be used to create golden cookies or collectables, for example.
- Added marked feature to buyables, clickables, and challenges. By default, stars multi-completion challenges when maxed.
- Added 'deactivated' feature to layers, which disables many features.
- Improved number formatting slightly.
### v2.5.6 - 5/14/21
- You can now use non-numeric ids for upgrades, buyables, etc.
- Fixed an exploit that let you buy an extra buyable.
- Moved basic getter/setter functions to easyAccess.js.
### v2.5.5.2 - 5/12/21
- Fixed a major issue with buyables.
- Fixed a variety of tabFormat-related issues.
- Fixed commas appearing in decimal places (thanks to pg132!)
### v2.5.5.1 - 5/12/21
- Fixed clickables.
### v2.5.5 - 5/12/21
- Added grids! They are a grid of buttons which behave the same, but have their own data. Good for inventory grids, map tiles, and more!
- Added "marked" feature to add a mark to a node. Can be an image instead of a star. (Originally by Jacorb)
- Added "layer-proxy" component that lets you use components from another layer.
- Added the ability to display non-whole numbers in main-display.
### v2.5.4 - 5/10/21
- Added a setting to always use single-tab mode.
- Added directMult, which multiplies prestige gain after exponents and softcaps. It actually multiplies gain for static layers.
- Added onEnter and onExit for challenges.
- Improved displaying numbers between 0.0001 and 0.1.
- Added documentation on how gainMult/Exp work for static layers.
- Fixed a visual issue on mobile, thanks to thepaperpilot.
- Improved documentation in general.
### v2.5.3 - 5/8/21
- Improved performance of tab formats and bars.
- Respec confirmation settings are now kept on resets.
- Improved compatibility with older browsers.
- Fixed missing pixel on vertical bars.
### v2.5.2.1 - 5/7/21
- Fixed microtabs making layers highlight incorrectly.
### v2.5.2 - 5/7/21
- Added glowColor for subtabs.
- Improved the display for extremely small numbers.
- Fixed issues in the buyable docs.
### v2.5.1 - 5/7/21
- Fixed dynamic things in tabFormat not updating.
## v2.5: Dreams Really Do Come True - 5/7/21
- Optimizations, hopefully a significant amount.
- Added OOM/s point gen display at high values (thanks to Ducdat!)
- Only one tab will display if the window is not wide enough (also thanks to Ducdat!)
- Holding down a buyable's button now buys it continuously.
- New milestone setting will also show the most recently unlocked milestone. (Also renamed all settings to be clearer)
- Added an onHold feature for clickables.
- Layer nodes will be highlighted even if the player is on the same tab.
- Added customizable node glowColor.
- Added buyable purchaseLimit.
- Amount is automatically supplied to buyable cost and effect functions.
- Locked (not yet visible) milestones no longer take up space. Also fixed hidden milestones taking a tiny bit of space.
- Re-centered respec buttons.
- Force-displayed tooltips are not hidden by resets.
- Added formatting support for very small numbers. Disabled in most places by default because rounding errors might cause issues. Access it with formatSmall, or enable it globally by adding "allowSmall: true" to modInfo.
### v2.4.1 - 4/29/21
- A number of minor fixes, many thanks to thepaperpilot.
- The respec confirmation checkbox is now part of the respec-button component.
(This also fixes the checkbox appearing when there is no respec button)
- Added a few undocumented changes to the 2.4 changelog (the two at the bottom)
## v2.4: Rationalized Edition - 4/29/21
- Completely reworked tooltips. Shift-click a node to force its tooltip to stay displayed. (And hopefully finally fixed flickering!)
- Added text-input and slider components.
- Added the ability to toggle respec confirmations.
- Added custom respec confirmation messages.
- The red layer highlight will not appear before a layer is unlocked.
- Added unlocking hotkeys.
- You no longer need to supply 'rows' and 'cols' for any Big Features.
- Node symbols can use HTML.
- Added documentation for the respec button.
- Added prestigeNotify to subtabs, and prestigeNotify in subtabs also highlights the layer node.
- The version number no longer contains special characters or irrational numbers.
- Added ctrlDown and shiftDown variables.
- Tooltips now use HTML (this means you need to replace any newlines with <br>)
### v2.π.1 - 4/7/21
- Fixed formatting for some larger numbers.
- Upgrades will expand if there is too much text to display.
- Fixed styling challenges.
- No longer attempts to display a base currency when there is none.
## v2.π: Incrementally Updated - 2/5/21
- Performance improvements.
- Fixed tooltips overlapping with the top display.
- Clicking a popup dismisses it immediately.
- Added support for bulk challenge completions.
- "Best" is updated automatically.
- Fixed keeping Decimal values on reset.
- Code reorganization and style improvements by fudo.
### v2.3.5 - 12/21/20
- Added resetTime, which tracks the time since a layer prestiged or was reset.
- A layer node will be highlighted red if one of its subtabs is highlighted red.
- Fixed issues with keeping challenges, buyables, and clickables on reset.
- Improved the unlocking of custom layers.
- Other minor fixes.
### v2.3.4 - 12/16/20
- Added a node image feature.
- Resource display now always shows the amount of the currency the layer's gain is based on.
- Added spacing between tree nodes.
- Another attempt to fix tooltip flickering.
### v2.3.3 - 12/13/20
- Fixed the first node in a row always taking up space.
- layerShown is now optional.
- All prestige types can now use features for custom prestige types.
### v2.3.2 - 12/13/20
- Fixed achievement/milestone popups.
### v2.3.1 - 12/12/20
- Another attempt to fix flickering tooltips.
- The "this" keyword should work everywhere except tabFormat arrays (although I may have missed some things).
- Fixed tree branches not updating when scrolling on the right-side tab.
- Fixed a spacing issue when a node's symbol is ""
- Removed some old, unneeded files.
## v2.3: Cooler and Newer Edition - 12/10/20
- Added achievement/milestone popups (thank you to Jacorb for this contribution!)
- The changelog tab is back, and can be set in mod.js.
- Layer nodes and respec buttons will not be clicked by pressing "enter".
- Possible fix for flickering tooltips and strange transitions.
- The victory screen text is configurable.
- Added image and textStyle features to achievements.
- Added an argument to use specific rows in an "upgrades" component.
- Fixed the comma appearing in the main display when there was no effectDescription
- Added the ability to easily make a tab that is a collection of layers in subtabs.
- Improved spacing for embedding layers with subtabs into subtabs.
### v2.2.8 - 12/03/20
- Double-clicking a layer node brings you to the main subtab for that layer.
- Attempted to fix challenges visually updating a different way.
- Added a softcap function for use in formulas.
- Added displayRow feature, which lets layers be shown somewhere separate from where they are in the reset order (e.g. side layers)
- Fixed autoupgrade issue.
### v2.2.7 - 11/30/20
- Added autoUpgrade feature.
- resource-display now shows resource gain per second if passiveGain is active.
- Fixed formatting issues on some large numbers.
- Better support for using classed objects in player and in layers/tmp.
- Made hard resetting more effective.
- Removed Herobrine from getStartClickables.
### v2.2.6 - 11/30/20
- Added goalDescription for challenges and made the new "canComplete" system the standard.
- Another attempt to fix challenges not visually updating.
- Fixed side layers not appearing.
- Fixed getStartClickables again.
### v2.2.5 - 11/29/20
- Added features for overriding the displays and costs/goals of upgrades and challenges to make them fully custom.
- best, total, and unlocked are always automatically added to layerData (but best and total will only display if you add them yourself).
- Fixed getStartClickables.
### v2.2.4 - 11/28/20
- Added softcap and softcapPower features (for Normal layers)
- Offline time limit and default max tick length were fixed (previously the limits were 1000x too large)
- Added fixOldSaves.
- You can use HTML in main-display.
- Fixed a number of minor oddities.
### v2.2.3 - 11/28/20
- Layers will be highlighted if you can finish a challenge.
- The "can complete challenge" color now overrides the "already completed" color.
- Button nodes now work as side "layers".
- Setting a tooltip to "" hides it entirely.
### v2.2.2 - 11/22/20
- Fixed right half of the screen being unclickable in some circumstances.
- Fixed tree branches being offset.
- Fix to lastSafeTab.
### v2.2.1 - 11/7/20
- Added a small highlight to layers you can meaningfully prestige on.
- Added passiveGeneration and autoPrestige features to standardize prestige automation. (The old ways still work, but the new ones work better with other things)
- Improved milestones visually a bit.
- "best" and "total" are now only displayed if present in startData.
- Fixed issues with things not updating visually. (Thank you to to Jacorb!)
- Side layers and button nodes can now be highlighted.
- Updated docs on the new tree-related features.
## v2.2: Uprooted - 11/7/20
- You can now embed a layer inside of a subtab or microtab!
- Added support for hiding or reformatting the tree tab
- Added non-layer button nodes
- Added shouldNotify to subtab/microtab buttons. (You can make them highlighted)
- Added commas to large exponents.
- Upgrades now only show "currently" if they have an effectDisplay (so not for constant effects).
- Achievements are part of the default tab format.
- NaN is now handled more intelligently.
- Renamed files, and moved less relevant ones to another folder.
- The "hide completed challenges" setting now only hides challenges at max completions.
- Thank you to thepaperpilot for fixing errors in docs and improving the infobox appearance!
- Many other minor fixes.
### v2.1.4 - 10/25/20
- Added an infobox component. Thank you to thepaperpilot for this contribution!
- Layer type is now optional, and defaults to "none".
- Improved the look of bars and tab buttons.
- Improved spacing between layer nodes (also thanks to thepaperpilot!)
- 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.
- A few other minor fixes.
### 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:
- Completely automated convertToDecimal, now you never have to worry about it again.
- Branches can be defined without a color id. But they can also use hex values for color ids!
- Created a tutorial for getting started with TMT and Github.
- Page title is now automatically taken from mod name.
### v1.3.4 - 10/8/20
- Added "midsection" feature to add things to a tab's layout while still keeping the standard layout.
- Fix for being able to buy more buyables than you should.
### v1.3.3 - 10/7/20
- Fix for the "order of operations" issue in temp.
### v1.3.1 - 10/7/20
- Added custom CSS and tooltips for Layer Nodes.
- Added custom CSS for upgrades, buyables, milestones, and challenges, both individually and layer-wide.
- You can now use HTML in most display text!
- You can now make milestones unlockable and not display immediately.
- Fixed importing saves, and issue with upgrades not appearing, and probably more.
- Optional "name" layer feature, used in confirmation messages.
## v1.3: Tabception... ception! - 10/7/20
- Added subtabs! And also a Micro-tab component to let you make smaller subtab-esque areas anywhere.
- Added a "custom" prestige formula type, and a number of features to support it.
- Added points/sec display (can be disabled).
- Added h-line, v-line and image-display components, plus components for individual upgrades, challenges, and milestones.
- Added upgEffect, buyableEffect, and challEffect functions.
- Added "hide completed challenges" setting.
- Moved old changelogs to a separate place.
- Fixed hasMilestone and incr_order.
- Static layers now show the currency amount needed for the next one if you can buy max.
### v1.2.4 - 10/4/20
- Layers are now highlighted if you can buy an upgrade, and a new feature, shouldNotify,
lets you make it highlight other ways.
- Fixed bugs with hasUpg, hasChall, hasMilestone, and inChallenge.
- Changed the sample code to use the above functions for convenience.
### v1.2.3 - 10/3/20
- Added a row component, which displays a list of objects in a row.
- Added a column component, which displays a list of objects in a column (useful within a row).
- Changed blanks to have a customizable width and height.
## v1.2: This Changes Everything! - 10/3/20
- Many layer features can now be static values or functions. (This made some formats change,
which will break old things)
- You can now use the "this" keyword, to make code easier to transfer when making new layers.
- Also added "this.layer", which is the current layer's name, and works on existing subfeatures
(e.g. individual upgrades) as well! Subfeatures also have "this.id".
- Fixed a big save issue. If you use a unique mod id, your save will never conflict with other mods.
- Added a configurable offline time limit in modinfo at the top of index.html. (default 1 hour)
- Added a few minor features, and updated the docs with new information.
### v1.1.1 - 9/30/20
- You can define hotkeys directly from layer config.
## v1.1: Enhanced Edition - 9/30/20
- Added "Buyables", which can function like Space Buildings or Enhancers.
- Custom CSS can now be used on any component! Make the third argument an object with CSS
parameters.
- Lots of minor good things.
## v1.0 - 9/27/20
- First release.

38
css/bars.css Normal file
View file

@ -0,0 +1,38 @@
.barBase {
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
display:table
}
.barBorder {
border: 2px solid;
border-radius: 10px;
border-color: var(--color);
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
margin:0
}
.overlayTextContainer {
z-index: 3;
border-radius: 10px;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: left;
position: absolute;
}
.fill {
background-color: var(--color);
z-index:2;
position: absolute;
overflow: hidden;
margin-left: -0.5px;
transition-duration: 0.2s;
}
.overlayText {
z-index: 6;
}

166
css/components.css Normal file
View file

@ -0,0 +1,166 @@
.upg {
min-height: 120px;
width: 120px;
border-radius: 25%;
border: 2px solid;
border-color: rgba(0, 0, 0, 0.125);
font-size: 10px;
overflow: visible;
}
.achievement {
height: 90px;
width: 90px;
border-radius: 25%;
border: 2px solid;
border-color: rgba(0, 0, 0, 0.125);
font-size: 10px;
color: white;
text-shadow: 0 0 2px #000000;
}
.achievement:hover {
box-shadow: 0 0 10px var(--points);
z-index: 7;
}
.buyable {
height: 200px;
width: 200px;
border-radius: 25%;
border: 2px solid;
border-color: rgba(0, 0, 0, 0.125);
font-size: 10px;
position:relative;
}
.milestone {
width: 100%;
min-width: 120px;
padding-left: 5px;
padding-right: 5px;
height: 75px;
background-color: #bf8f8f;
border: 4px solid;
border-radius: 4px;
border-color: rgba(0, 0, 0, 0.125);
color: rgba(0, 0, 0, 0.5);
}
.milestoneDone {
width: 100%;
min-width: 120px;
padding-left: 5px;
padding-right: 5px;
height: 75px;
background-color: #77bf5f;
border: 4px solid;
border-radius: 4px;
border-color: rgba(0, 0, 0, 0.125);
color: rgba(0, 0, 0, 0.5);
}
.challenge {
background-color: #bf8f8f;
position: relative;
border: 4px solid;
border-color: rgba(0, 0, 0, 0.125);
color: rgba(0, 0, 0, 0.5);
width: 300px;
height: 300px;
font-size: 15px;
border-radius: 33.33%;
}
.challenge.done {
background-color: #77bf5f;
}
.challenge.canComplete {
background-color: #ffbf00;
}
/* Infoboxes */
.story {
width: 600px;
max-width: 95%;
border-bottom: solid 4px;
border-radius: 8px;
margin-bottom: 8px;
text-align: left;
}
.story-title {
text-align: left;
font-size: 24px;
color: black;
cursor: pointer;
border: none;
padding: 2px;
border-radius: 8px 8px 0 0;
}
.story-toggle {
border: none;
background: black;
color: white;
font-size: 20px;
pointer-events: none;
width: 1em;
display: inline-block;
}
.story-text {
padding: 2px;
border: solid 4px;
border-color: inherit;
border-radius: inherit;
border-top-left-radius: 0;
margin-bottom: -2px;
}
/* Tiles are gridables */
.tile {
height: 80px;
width: 80px;
border-radius: 15%;
border: 2px solid;
border-color: rgba(0, 0, 0, 0.125);
font-size: 10px;
overflow: visible;
}
.tile.can:hover {
box-shadow: 0 0 10px var(--points);
transform: scale(1.1, 1.1);
z-index: 7;
}
.upgBig {
height: 200px;
width: 200px;
border-radius: 25%;
border: 2px solid;
border-color: rgba(0, 0, 0, 0.125);
}
/* Used for respec button and similar */
.longUpg {
height: 50px;
width: 120px;
background: var(--points);
border-radius: 50%;
border: 2px solid;
border-color: rgba(0, 0, 0, 0.125);
font-size: 10px;
}
.smallUpg {
height: 40px;
width: 40px;
border-radius: 25%;
border: 2px solid;
border-color: rgba(0, 0, 0, 0.125);
}

41
css/general-style.css Normal file
View file

@ -0,0 +1,41 @@
/* Global things */
body {
color: var(--color);
overflow: hidden;
--background: #0f0f0f;
--color: #dfdfdf;
--points: #ffffff;
background: var(--background)
}
/* General text */
h1, h2, h3, b, input {
display: inline;
font-family: "Lucida Console", "Courier New", monospace
}
/* These are styles for different states of components. You can make layer-specific versions with .c.locked, for example */
.locked {
background-color: #bf8f8f;
cursor: not-allowed;
}
/* Can meens can be clicked/bought/etc */
.can {
cursor: pointer;
}
.can:hover {
transform: scale(1.15, 1.15);
box-shadow: 0 0 20px var(--points)
}
.bought {
background-color: #77bf5f;
cursor: default;
}
#points {
color: var(--points);
text-shadow: 0 0 10px var(--points);
}

83
css/misc.css Normal file
View file

@ -0,0 +1,83 @@
/* Prestige button */
.reset {
height: 120px;
width: 180px;
border-radius: 25%;
border: 4px solid;
border-color: rgba(0, 0, 0, 0.125);
}
.tabButton {
background-color: transparent;
color: var(--color);
font-size: 20px;
cursor: pointer;
padding: 5px 20px;
margin: 5px;
border-radius: 10px;
border: 2px solid;
color: var(--color);
}
.tabButton:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--color);
}
.tooltip {
pointer-events: none;
text-align: center;
width: 150px;
font-size: 16px;
line-height: 1.2;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
transform: translateX(-50%);
padding: 7px;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity: 0;
transition: opacity 0.5s;
position: absolute;
z-index: 20000;
background-color: var(--background_tooltip);
color: var(--points);
content: attr(tooltip);
font-size:14px;
}
.tooltip::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--background_tooltip) transparent transparent transparent;
}
/* Horizontal/vertical lines */
.vl {
border-left: 6px solid var(--color);
height: 100%;
position: absolute;
left: 50%;
margin-left: -3px;
top: 0
}
.hl {
border-top: 3px solid var(--color);
}

111
css/other-tabs.css Normal file
View file

@ -0,0 +1,111 @@
#optionWheel {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
cursor: pointer;
}
#optionWheel:hover {
transform: rotate(360deg);
}
#info {
font-size: 20px;
color: white;
position: absolute;
top: 50px;
left: 4px;
cursor: pointer;
width: 40px;
height: 40px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #02f2f2;
}
#info:hover {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px #02f2f2,
-3px 0 12px #02f2f2;
}
#discord {
position: absolute;
top: 120px;
left: 4px;
width: 40px;
height: 40px;
}
#discord img {
width: 100%;
height: 100%;
}
#discord-links {
position: absolute;
top: 0;
padding-top: 44px;
left: -244px;
width: 200px;
transition: left .3s ease;
}
#discord:hover #discord-links {
left: -4px;
}
#version {
position: absolute;
right: 4px;
top: 4px;
text-align: right;
color: var(--points);
text-shadow: 0 0 10px var(--points);
cursor: pointer;
}
#version:hover {
transform: scale(1.1, 1.1);
right: 4.8px;
}
a {
color: #007fff;
text-decoration-line: none;
cursor: pointer
}
.link {
display: block;
font-size: 20px;
color: #41f5f5;
cursor: pointer;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #02f2f2;
text-decoration: none;
}
.link:hover {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px #02f2f2,
-3px 0 12px #02f2f2;
}
.opt {
height: 100px;
width: 100px;
border-radius: 25%;
border: 4px solid;
background-color: var(--color);
border-color: rgba(0, 0, 0, 0.125);
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.opt:hover {
background-color: #439ea3;
}

52
css/popup.css Normal file
View file

@ -0,0 +1,52 @@
.popup {
border: 4px solid;
border-radius: 7px;
width: 300px;
min-height: 60px;
color: #000000;
display: block;
margin-top: 30px;
padding-top: 15px;
padding-bottom: 15px;
border-color: rgba(0, 0, 0, 0.25);
}
.popup-container {
position: absolute;
z-index: 9999999999999999999999999999999999;
right: 30px;
width: 300px;
}
.achievement-popup {
background: #7182BC;
}
.milestone-popup {
background: #D1C23C;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .3s
}
.fade-transition {
transition: opacity .3s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
.redtext {
color: red;
}
.particle {
background-color: transparent;
display: block;
position:absolute;
z-index: 99999;
background-size:contain;
}

251
css/system-style.css Normal file
View file

@ -0,0 +1,251 @@
* {
transition-duration: 0.5s;
text-align: center;
font-family: "Inconsolata", monospace;
font-weight: bold;
table-align: center;
margin: auto;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
*:focus {
outline: none;
webkit-outline: none;
}
html, body {
min-height: 100%;
height: 100%;
}
td {
padding: 0
}
.upgTable {
display: flex !important;
flex-flow: column wrap;
justify-content: center;
align-items: center;
max-width: 100%;
margin: 0 auto;
}
.upgRow {
display: flex !important;
flex-flow: row wrap;
justify-content: center;
align-items: center;
max-width: 100%;
margin: 0 auto;
}
.upgAlign {
vertical-align: 0
}
.bigUpgAlign {
vertical-align: 0
}
.treeThing {
margin: 0 10px 0 10px;
vertical-align: middle;
}
.can.upg:hover {
z-index: 2
}
.can.buyable:hover {
z-index: 2
}
.back {
position: absolute;
top: 0;
left: 0;
background-color: transparent;
border: 1px solid transparent;
color: var(--color);
font-size: 40px;
cursor: pointer;
}
.other-back {
position: absolute;
top: 0;
left: 60px;
background-color: transparent;
border: 1px solid transparent;
color: var(--color);
font-size: 60px;
cursor: pointer;
}
.back:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--color);
}
.hidden {
visibility: hidden;
height: 50px !important;
}
.canvas {
top: 0;
left: 0;
position: absolute;
z-index: -999;
}
.left {
position: absolute;
left: 0;
}
.remove {
height: 24px;
width: 24px;
cursor: pointer;
}
.remove:hover {
transform: scale(1.1, 1.1);
}
.col {
min-width: 49.5%;
max-width: 49.5%;
width: 49.5%;
height: 100%;
min-height: 100%;
column-span: 1;
position: absolute;
overflow-y: auto;
overflow-x: auto;
transition-duration: 0s
}
.instant {
transition-duration: 0s !important
}
.fast {
transition:color none
}
.col.right {
top: 0;
right: 0;
}
#app {
column-count: 2;
column-width: 50%;
min-height: 100%;
}
.vl2 {
border-left: 3px solid var(--color);
height: 100%;
}
ul {
list-style-type: none;
}
.fullWidth {
position: absolute;
height: 100%;
width: 100%;
min-width: 100%;
overflow-y: auto;
overflow-x: auto;
transition-duration: 0s
}
.tooltipBox {
position: relative;
}
.tooltipBox:hover .tooltip{
opacity: 1;
}
.forceTooltip .tooltip{
opacity: 1;
}
.respecCheckbox {
display: inline-block;
}
#loadingSection {
display: flex;
flex-direction: column;
justify-content: center;
}
.treeOverlay {
pointer-events:none;
overflow:hidden;
}
.front {
z-index: 30000
}
.overlayThing {
z-index: 10000;
pointer-events:auto;
}
.sideLayers {
z-index: 10000;
pointer-events:auto;
position: absolute;
right: 55px;
top: 65px;
background-color: transparent;
}
button > * {
pointer-events:none;
}
.ghost {
visibility: hidden
}
#treeTab td button {
margin: 0 10px;
}
.bg {
z-index: -9000;
width: 100%;
height: 100%;
position: absolute;
background-color: transparent;
top: 0
}
.bg2 {
z-index: -9009;
width: 100%;
height: 100%;
position: absolute;
top: 0
}
.noBackground {
background: transparent !important;
background-image: none !important;
--background: transparent !important;
}

108
css/tree-node.css Normal file
View file

@ -0,0 +1,108 @@
/* Tree nodes, button nodes, and side layers */
.treeNode {
height: 100px;
width: 100px;
border: var(--hqProperty1);
border-color: rgba(0, 0, 0, 0.125);
border-radius: 50%;
box-shadow: var(--hqProperty2a), var(--hqProperty2b);
font-size: 40px;
font-family: "Lucida Console", "Courier New", monospace;
color: rgba(0, 0, 0, 0.5);
text-shadow: var(--hqProperty3);
padding: 0;
margin: 0 10px 0 10px;
}
.nodeLabel {
font: inherit;
font-family: inherit;
}
.treeButton {
height: 100px;
width: 100px;
border: var(--hqProperty1);
border-color: rgba(0, 0, 0, 0.125);
border-radius: 33%;
box-shadow: var(--hqProperty2a), var(--hqProperty2b);
font-size: 40px;
font-family: "Lucida Console", "Courier New", monospace;
color: rgba(0, 0, 0, 0.5);
text-shadow: var(--hqProperty3);
padding: 0;
}
.smallNode {
height: 60px;
width: 60px;
font-size: 30px;
}
.resetNotify {
box-shadow: var(--hqProperty2a), 0 0 8px #ffffff;
}
.treeNode.can:hover {
transform: scale(1.15, 1.15);
box-shadow: var(--hqProperty2a), 0 0 20px var(--points);
}
.notify {
transform: scale(1.05, 1.05);
border-color: rgba(0, 0, 0, 0.125);
box-shadow: var(--hqProperty2a), 0 0 20px #ff0000;
}
.mark {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
z-index: 10000;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid transparent;
border-left: 0.3em solid transparent;
font-size: 10px;
overflow:auto;
pointer-events: none;
}
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
z-index: 10000;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 0.3em solid transparent;
font-size: 10px;
pointer-events: none;
}
.star:before, .star:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}

140
demo.html Normal file
View file

@ -0,0 +1,140 @@
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/system-style.css" />
<link rel="stylesheet" type="text/css" href="css/bars.css" />
<link rel="stylesheet" type="text/css" href="css/components.css" />
<link rel="stylesheet" type="text/css" href="css/general-style.css" />
<link rel="stylesheet" type="text/css" href="css/misc.css" />
<link rel="stylesheet" type="text/css" href="css/other-tabs.css" />
<link rel="stylesheet" type="text/css" href="css/popup.css" />
<link rel="stylesheet" type="text/css" href="css/tree-node.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 src="js/technical/break_eternity.js"></script>
<script src="js/technical/layerSupport.js"></script>
<script src="js/Demo/demoMod.js"></script>
<script src="js/technical/loader.js"></script>
<script src="js/technical/temp.js" id = "temp"></script>
<script src="js/technical/displays.js"></script>
<script src="js/game.js"></script>
<script src="js/utils.js"></script>
<script src="js/utils/easyAccess.js"></script>
<script src="js/technical/systemComponents.js"></script>
<script src="js/components.js"></script>
<script src="js/technical/canvas.js"></script>
<script src="js/technical/particleSystem.js"></script>
<script src="js/utils/NumberFormating.js"></script>
<script src="js/utils/options.js"></script>
<script src="js/utils/save.js"></script>
<script src="js/utils/themes.js"></script>
</head>
<body onload="load()" onmousemove="updateMouse(event)">
<div id="app">
<canvas id="treeCanvas" class="canvas" v-if="!(tmp.gameEnded && !player.keepGoing)"></canvas>
<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.navTab !== 'none' && tmp.other.splitScreen && player.tab!='none' && !(tmp.gameEnded && !player.keepGoing)"></div>
<div v-if="(tmp.gameEnded && !player.keepGoing)" class="fullWidth">
<br>
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
<h3 v-html="modInfo.winText"></h3><br>
<h3>Please check the Discord to see if there are new content updates!</h3><br><br>
<div v-if="!player.timePlayedReset">It took you {{formatTime(player.timePlayed)}} to beat the game.</div>
<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>
</div>
<div id="treeOverlay" v-if="!(tmp.gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen || !readData(layoutInfo.showTree))" class="treeOverlay" onscroll="resizeCanvas()"
v-bind:class="{
fullWidth: (player.tab == 'none' || player.navTab == 'none'),
col: (player.tab !== 'none' && player.navTab !== 'none'),
left: (player.tab !== 'none' && player.navTab !== 'none')}"
:style="{'margin-top': !readData(layoutInfo.showTree) && player.tab == 'info-tab' ? '50px' : ''}">
<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px" >
{{VERSION.withoutName}}</div>
<button
v-if="((player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside' || player[player.tab].prevTab)) || player[player.navTab]?.prevTab)" class="other-back overlayThing" onclick="goBack(player.navTab == 'none' ? player.tab : player.navTab)">←</button>
<img id="optionWheel" class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png"
onclick="showTab('options-tab')"></img>
<div id="info" v-if="player.tab!='info-tab'" class="overlayThing" onclick="showTab('info-tab')"><br>i</div>
<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>
<overlay-head v-if="!(tmp.gameEnded && !player.keepGoing)"></overlay-head>
<div class="sideLayers">
<div v-for="(node, index) in OTHER_LAYERS['side']">
<tree-node :layer='node' :abb='tmp[node].symbol' :size="'small'" :key="'side' + index"></tree-node>
</div>
</div>
</div>
<div v-if="!(tmp.gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen)" id="treeTab" 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')}">
<br><br><br><br>
<overlay-head id="fakeHead" style="visibility: hidden;">
</overlay-head>
<layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" :key="'left'"></layer-tab>
<bg :layer="player.navTab == 'none' ? player.tab : player.navTab" ></bg>
</div>
<!-- Popups -->
<div class="popup-container">
<transition-group name="fade">
<div v-for="popup,index in activePopups" class="popup" v-bind:class="popup.type"
v-bind:key="'p' + popup.id" v-on:click="() => {activePopups.splice(index, 1)}" v-bind:style="popup.color ? {'background-color': popup.color} : {}">
<h3>{{popup.title}}</h3><br>
<h2 v-html="popup.message"></h2>
</div>
</transition-group>
</div>
<div class="particle-container">
<div v-for="particle,index in particles">
<particle :data="particle" :index="index" v-bind:key="'b' + particle.id"></particle>
</div>
</div>
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(tmp.gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS">
<div v-if="player.tab==layer">
<layer-tab :layer="layer" :back="'none'" :spacing="'50px'" :key="'left'"></layer-tab>
</div>
</div>
<bg :layer="player.tab" ></bg>
</div>
<div class = "bg2" v-bind:style = "tmp.backgroundStyle"></div>
</div>
</body>

BIN
discord.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

59
docs/!general-info.md Normal file
View file

@ -0,0 +1,59 @@
# The-Modding-Tree
Making a game in The Modding Tree mostly involves defining parameters or functions on objects. If you aren't following the [getting started guide](tutorials/getting-started.md), you should start by [setting up your basic mod info](main-mod-info.md) in [mod.js](/js/mod.js). It's important to set a mod id to ensure saving works properly.
Beyond that, the main way to add content is through creating layers. You can add new layers by calling `addLayer(layername, layerdata)`. There is an example of a basic layer in [layers.js](/js/layers.js). It is just an example and can be freely deleted. You can also use it as a reference or a base for your own layers.
You can test your mod by opening the [index.html](/index.html) file in your browser.
Most of the time, you won't need to dive deep into the code to create things, but you still can if you really want to, for example to add new Vue components in [components.js](/js/components.js).
The Modding Tree uses [break\_eternity.js](https://github.com/Patashu/break_eternity.js) to store large values. This means that many numbers are `Decimal` objects, and must be treated differently. For example, you have to use `new Decimal(x)` to create a `Decimal` value instead of a plain number (x can be a number or a string for larger values). You perform operations on them by calling functions. e.g, instead of `x = x + y`, use `x = x.add(y)`. Keep in mind this also applies to comparison operators, which should be replaced with calling the `.gt`, `.gte`, `.lt`, `.lte`, `.eq`, and `.neq` functions. See the [break\_eternity.js](https://github.com/Patashu/break_eternity.js) docs for more details on working with `Decimal` values.
Almost all values can be either a constant value, or a dynamic value. Dynamic values are defined by putting a function that returns what the value should be at any given time.
All display text can use basic HTML elements (But you can't use most Vue features there).
While reading this documentation, the following key will be used when describing features:
- No label: This is required and the game may crash if it isn't included.
- **sometimes required**: This is may be required, depending on other things in the layer.
- **optional**: You can leave this out if you don't intend to use that feature for the layer.
- **assigned automagically**: This value will be set automatically and override any value you set.
- **deprecated**: This feature is not recommended to be used, because newer features are able to achieve the same thing in a better, easier way.
## Table of Contents
### General
- [Getting Started](tutorials/getting-started.md): A guide to getting your own copy of the code set up with Github Desktop.
- [Making a Mod](tutorials/making-a-mod.md): A guide to using TMT to make a basic mod.
- [Main mod info](main-mod-info.md): How to set up general things for your mod in [mod.js](/js/mod.js).
- [Basic layer breakdown](basic-layer-breakdown.md): Breaking down the components of a layer with minimal features.
- [Layer features](layer-features.md): Explanations of all of the different properties that you can give a layer.
- [Custom Tab Layouts](custom-tab-layouts.md): An optional way to give your tabs a different layout. You can even create entirely new components to use.
- [Custom Game Layouts](trees-and-tree-customization.md): You can get rid of the tree tab, add buttons and other things to the tree,
or even customize the tab's layout like a layer tab.
- [Updating TMT](tutorials/updating-tmt.md): Using Github Desktop to update your mod's version of TMT.
- [Other Things](other.md): Other neat features that TMT has that don't merit their own page.
### Common components
- [Upgrades](upgrades.md): How to create upgrades for a layer.
- [Milestones](milestones.md): How to create milestones for a layer.
- [Buyables](buyables.md): Create rebuyable upgrades for your layer (with the option to make them respec-able). Can be used to make Enhancers or Space Buildings, for example.
- [Clickables](clickables.md): A more generalized variant of buyables, for any kind of thing that is sometimes clickable. Between these and Buyables, you can do just about anything.
- [Achievements](achievements.md): How to create achievements for a layer (or for the whole game).
### Other components and features
- [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!
- [Grids](grids.md): Create a group buttons that behave the same, but have their own data. Good for map tiles, an inventory grid, and more!
- [Infoboxes](infoboxes.md): Boxes containing text that can be shown or hidden.
- [Trees](trees-and-tree-customization.md): Make your own trees. You can make non-layer button nodes too!
- [Particle system](particles.md): Can be used to create particles for visual effects, but also interactable things like golden cookies or collectables.

54
docs/achievements.md Normal file
View file

@ -0,0 +1,54 @@
# Achievements
Achievements are awarded to the player when they meet a certain goal, and optionally give some benefit.
You can make global achievements by putting them in a side layer by making its row equal to "side" instead of a number.
Useful functions for dealing with achievements and implementing their effects:
- hasAchievement(layer, id): determine if the player has the Achievement.
- achievementEffect(layer, id): Returns the current effects of the achievement, if any.
Achievements should be formatted like this:
```js
achievements: {
11: {
name: "Blah",
more features
},
etc
}
```
Usually, each achievement should have an id where the first digit is the row and the second digit is the column.
Individual achievement can have these features:
- name: **optional**. displayed at the top of the achievement. The only visible text. It can also be a function that returns updating text. Can use basic HTML.
- done(): A function returning a boolean to determine if the achievement should be awarded.
- tooltip: Default tooltip for the achievement, appears when it is hovered over. Should convey the goal and any reward for completing the achievement. It can also be a function that returns updating text. Can use basic HTML. Setting this to "" disables the tooltip.
- effect(): **optional**. A function that calculates and returns the current values of any bonuses from the achievement. Can return a value or an object containing multiple values.
- unlocked(): **optional**. A function returning a bool to determine if the achievement is visible or not. Default is unlocked.
- onComplete() - **optional**. this function will be called when the achievement is completed.
- image: **optional**, puts the image from the given URL (relative or absolute) in the achievement
- style: **optional**. Applies CSS to this achievement, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- textStyle: **optional**. Applies CSS to the text, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the achievement was stored under, for convenient access. The achievement in the example's id is 11.
- goalTooltip: **optional, deprecated**. Appears when the achievement is hovered over and locked, overrides the basic tooltip. This is to display the goal (or a hint). It can also be a function that returns updating text. Can use basic HTML.
- doneTooltip: **optional, deprecated**. Appears when the achievement is hovered over and completed, overrides the basic tooltip. This can display what the player achieved (the goal), and the rewards, if any. It can also be a function that returns updating text. Can use basic HTML.
Disable achievement popups by adding `achievementsPopups: false` to the layer.

40
docs/bars.md Normal file
View file

@ -0,0 +1,40 @@
# Bars
Bars let you display information in a more direct way. It can be a progress bar, health bar, capacity gauge, or anything else.
Bars are defined like other Big Features:
```js
bars: {
bigBar: {
direction: RIGHT,
width: 200,
height: 50,
progress() { return 0 },
etc
},
etc
}
```
Features:
- direction: UP, DOWN, LEFT, or RIGHT (not strings). Determines the direction that the bar is filled as it progresses. RIGHT means from left to right.
- width, height: The size in pixels of the bar, but as numbers (no "px" at the end).
- progress(): A function that returns the portion of the bar that is filled, from "empty" at 0 to "full" at 1, updating automatically.
(Nothing bad happens if the value goes out of these bounds, and it can be a number or `Decimal`)
- display(): **optional**. A function that returns text to be displayed on top of the bar, can use HTML.
- unlocked(): **optional**. A function returning a bool to determine if the bar is visible or not. Default is unlocked.
- baseStyle, fillStyle, borderStyle, textStyle: **Optional**, Apply CSS to the unfilled portion, filled portion, border, and display text on the bar, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the bar was stored under, for convenient access. The bar in the example's id is "bigBar".
- instant: **very optional**. If this is true, the bar will instantly snap to the current value instead of animating in between. Good for things involving precise timing.

38
docs/basic-layer-breakdown.md Normal file
View file

@ -0,0 +1,38 @@
# Basic layer breakdown
This is a relatively minimal layer with few features. Most things will require additional features.
```js
addLayer("p", {
startData() { return { // startData is a function that returns default data for a layer.
unlocked: true, // You can add more variables here to add them to your layer.
points: new Decimal(0), // "points" is the internal name for the main resource of the layer.
}},
color: "#4BDC13", // The color for this layer, which affects many elements.
resource: "prestige points", // The name of this layer's main prestige resource.
row: 0, // The row this layer is on (0 is the first row).
baseResource: "points", // The name of the resource your prestige gain is based on.
baseAmount() { return player.points }, // A function to return the current amount of baseResource.
requires: new Decimal(10), // The amount of the base needed to gain 1 of the prestige currency.
// Also the amount required to unlock the layer.
type: "normal", // Determines the formula used for calculating prestige currency.
exponent: 0.5, // "normal" prestige gain is (currency^exponent).
gainMult() { // Returns your multiplier to your gain of the prestige resource.
return new Decimal(1) // Factor in any bonuses multiplying gain here.
},
gainExp() { // Returns the exponent to your gain of the prestige resource.
return new Decimal(1)
},
layerShown() { return true }, // Returns a bool for if this layer's node should be visible in the tree.
upgrades: {
// Look in the upgrades docs to see what goes here!
},
})
```

86
docs/buyables.md Normal file
View file

@ -0,0 +1,86 @@
# Buyables
Buyables are usually things that can be bought multiple times with scaling costs. They come with optional buttons that can be used for respeccing or selling buyables, among other things.
The amount of a buyable owned is a `Decimal`.
Useful functions for dealing with buyables and implementing their effects:
- getBuyableAmount(layer, id): get the amount of the buyable the player has
- addBuyables(layer, id, amount): add to the amount of the buyable
- setBuyableAmount(layer, id, amount): set the amount of the buyable the player has
- buyableEffect(layer, id): Returns the current effects of the buyable, if any.
Buyables should be formatted like this:
```js
buyables: {
11: {
cost(x) { return new Decimal(1).mul(x) },
display() { return "Blah" },
canAfford() { return player[this.layer].points.gte(this.cost()) },
buy() {
player[this.layer].points = player[this.layer].points.sub(this.cost())
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
etc
},
etc
}
```
Features:
- title: **optional**. displayed at the top in a larger font. It can also be a function that returns updating text.
- cost(): cost for buying the next buyable. Can have an optional argument "x" to calculate the cost of the x+1th purchase. (x is a `Decimal`).
Can return an object if there are multiple currencies.
- effect(): **optional**. A function that calculates and returns the current values of bonuses of this buyable. Can have an optional argument "x" to calculate the effect of having x of the buyable..
Can return a value or an object containing multiple values.
- display(): A function returning everything that should be displayed on the buyable after the title, likely including the description, amount bought, cost, and current effect. Can use basic HTML.
- unlocked(): **optional**. A function returning a bool to determine if the buyable is visible or not. Default is unlocked.
- canAfford(): A function returning a bool to determine if you can buy one of the buyables.
- buy(): A function that implements buying one of the buyable, including spending the currency.
- buyMax(): **optional**. A function that implements buying as many of the buyable as possible.
- style: **optional**. Applies CSS to this buyable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- purchaseLimit: **optional**. The limit on how many of the buyable can be bought. The default is no limit.
- marked: **optional** Adds a mark to the corner of the buyable. If it's "true" it will be a star, but it can also be an image URL.
- tooltip: **optional**. Adds a tooltip to this buyable, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the buyable was stored under, for convenient access. The buyable in the example's id is 11.
Sell One/Sell All:
Including a `sellOne` or `sellAll` function will cause an additional button to appear beneath the buyable. They are functionally identical, but "sell one" appears above "sell all". You can also use them for other things.
- sellOne/sellAll(): **optional**. Called when the button is pressed. The standard use would be to decrease/reset the amount of the buyable, and possibly return some currency to the player.
- canSellOne/canSellAll(): **optional**. booleans determining whether or not to show the buttons. If "canSellOne/All" is absent but "sellOne/All" is present, the appropriate button will always show.
To add a respec button, or something similar, add the respecBuyables function to the main buyables object (not individual buyables).
You can use these features along with it:
- respec(): **optional**. This is called when the button is pressed (after a toggleable confirmation message).
- respecText: **optional**. Text to display on the respec Button.
- showRespec(): **optional**. A function determining whether or not to show the button, if respecBuyables is defined. Defaults to true if absent.
- respecMessage: **optional**. A custom confirmation message on respec, in place of the default one.
- branches: **optional**, This is primarially useful for buyable trees. An array of buyable ids. A line will appear from this buyable to all of the buyables in the list. Alternatively, an entry in the array can be a 2-element array consisting of the buyable id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors). A third element in the array optionally specifies line width.

80
docs/challenges.md Normal file
View file

@ -0,0 +1,80 @@
# Challenges
Challenges can have fully customizable win conditions. Useful functions for dealing with Challenges and implementing their effects:
- inChallenge(layer, id): determine if the player is in a given challenge (or another challenge on the same layer that counts as this one).
- hasChallenge(layer, id): determine if the player has completed the challenge.
- challengeCompletions(layer, id): determine how many times the player completed the challenge.
- maxedChallenge(layer, id): determines if the player has reached the maximum completions.
- challengeEffect(layer, id): Returns the current effects of the challenge, if any.
Challenges are stored in the following format:
```js
challenges: {
11: {
name: "Ouch",
challengeDescription: "description of ouchie",
canComplete: function() {return player.points.gte(100)},
etc
},
etc
}
```
Usually, each challenge should have an id where the first digit is the row and the second digit is the column.
Individual Challenges can have these features:
- name: Name of the challenge, can be a string or a function. Can use basic HTML.
- challengeDescription: A description of what makes the challenge a challenge. *You will need to implement these elsewhere.* It can also be a function that returns updating text. Can use basic HTML.
- goalDescription: A description of the win condition for the challenge. It can also be a function that returns updating text.
Can use basic HTML. (Optional if using the old goal system)
- canComplete(): A function that returns true if you meet the win condition for the challenge. Returning a number will allow bulk completing the challenge.
(Optional if using the old goal system)
- rewardDescription: A description of the reward's effect. *You will also have to implement the effect where it is applied.* It can also be a function that returns updating text. Can use basic HTML.
- rewardEffect(): **optional**. A function that calculates and returns the current values of any bonuses from the reward. Can return a value or an object containing multiple values. Can use basic HTML.
- rewardDisplay(): **optional**. A function that returns a display of the current effects of the reward with formatting. Default behavior is to just display the a number appropriately formatted.
- fullDisplay(): **OVERRIDE**. Overrides the other displays and descriptions, and lets you set the full text for the challenge. Can use basic HTML.
- unlocked(): **optional**. A function returning a bool to determine if the challenge is visible or not. Default is unlocked.
- onComplete() - **optional**. this function will be called when the challenge is completed when previously incomplete.
- onEnter() - **optional**. this function will be called when entering the challenge
- onExit() - **optional**. this function will be called when exiting the challenge in any way
- countsAs: **optional**. If a challenge combines the effects of other challenges in this layer, you can use this. An array of challenge ids. The player is effectively in all of those challenges when in the current one.
- completionLimit: **optional**. the amount of times you can complete this challenge. Default is 1 completion.
- style: **optional**. Applies CSS to this challenge, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- marked: **optional** Adds a mark to the corner of the challenge. If it's "true" it will be a star, but it can also be an image URL. By default, if the challenge has multiple completions, it will be starred at max completions.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
- id: **assigned automagically**. It's the "key" which the challenge was stored under, for convenient access. The challenge in the example's id is 11.
The old goal system uses these features:
- goal: **deprecated**, A Decimal for the amount of currency required to beat the challenge. By default, the goal is in basic Points. The goal can also be a function if its value changes.
- currencyDisplayName: **deprecated**. the name to display for the currency for the goal
- currencyInternalName: **deprecated**. the internal name for that currency
- currencyLayer: **deprecated**. the internal name of the layer that currency is stored in. If it's not in a layer, omit. If it's not stored directly in a layer, instead use the next feature.
- currencyLocation(): **deprecated**. if your currency is stored in something inside a layer (e.g. a buyable's amount), you can access it this way. This is a function returning the object in "player" that contains the value (like `player[this.layer].buyables`)

63
docs/clickables.md Normal file
View file

@ -0,0 +1,63 @@
# Clickables
Clickables are any kind of thing that you can click for an effect. They're a more generalized version of Buyables.
DO NOT USE THESE TO MAKE THINGS THAT YOU CLICK REPEATEDLY FOR A BONUS BECAUSE THOSE ARE AWFUL.
There are several differences between the two. One is that a buyable's saved data is its amount as a `Decimal`, while Clickables store a "state" which can be a number or string, but not `Decimal`, array, or object). Buyables have a number of extra features which you can see on their page. Clickables also have a smaller default size.
Useful functions for dealing with clickables and implementing their effects:
- getClickableState(layer, id): get the state of the clickable the player has
- setClickableState(layer, id, state): set the state of the clickable the player has
- clickableEffect(layer, id): Returns the current effects of the clickable, if any.
Clickables should be formatted like this:
```js
clickables: {
11: {
display() {return "Blah"},
etc
}
etc
}
```
Features:
- title: **optional**. displayed at the top in a larger font. It can also be a function that returns updating text.
- effect(): **optional**. A function that calculates and returns the current values of bonuses of this clickable. Can return a value or an object containing multiple values.
- display(): A function returning everything that should be displayed on the clickable after the title, likely changing based on its state. Can use basic HTML.
- unlocked(): **optional**. A function returning a bool to determine if the clickable is visible or not. Default is unlocked.
- canClick(): A function returning a bool to determine if you can click the clickable.
- onClick(): A function that implements clicking the clickable.
- onHold(): **optional** A function that is called 20x/sec when the button is held for at least 0.25 seconds.
- style: **optional**. Applies CSS to this clickable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- marked: **optional** Adds a mark to the corner of the clickable. If it's "true" it will be a star, but it can also be an image URL.
- tooltip: **optional**. Adds a tooltip to this clickable, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the clickable was stored under, for convenient access. The clickable in the example's id is 11.
You can also use these features on the clickables object to add a button above all the clickables, for implementing a respec button or similar.
- masterButtonPress(): **optional**. If present, an additional button will appear above the clickables. Pressing it will call this function.
- masterButtonText: **optional**. Text to display on the Master Button.
- showMasterButton(): **optional**. A function determining whether or not to show the button, if masterButtonPress is defined. Defaults to true if absent.
- branches: **optional**, This is primarially useful for clickable trees. An array of clickable ids. A line will appear from this clickable to all of the clickables in the list. Alternatively, an entry in the array can be a 2-element array consisting of the clickable id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors). A third element in the array optionally specifies line width.

85
docs/custom-tab-layouts.md Normal file
View file

@ -0,0 +1,85 @@
# Custom tab layouts
Note: If you are using subtabs, `tabFormat` is used differently, but the same format is used for defining their layouts. [See here for more on subtabs](subtabs-and-microtabs.md).
Custom tab layouts can be used to do basically anything in a tab window, especially combined with the "style" layer feature. The `tabFormat` feature is an array of things, like this:
```js
tabFormat: [
"main-display",
["prestige-button"],
"blank",
["display-text",
function() { return 'I have ' + format(player.points) + ' pointy points!' },
{ "color": "red", "font-size": "32px", "font-family": "Comic Sans MS" }],
"blank",
["toggle", ["c", "beep"]],
"milestones",
"blank",
"blank",
"upgrades"
]
```
It is a list of components, which can be either just a name, or an array with arguments. If it's an array, the first item is the name of the component, the second is the data passed into it, and the third (optional) applies a CSS style to it with a "CSS object", where the keys are CSS attributes.
These are the existing components, but you can create more in [components.js](/js/components.js):
- display-text: Displays some text (can use basic HTML). The argument is the text to display. It can also be a function that returns updating text.
- display-image: Displays an image. The argument is the url of the image.
- h-line, v-line: Display a horizontal or vertical divider line, respectively.
- raw-html: Displays some basic HTML, can also be a function.
- blank: Adds empty space. The default dimensions are 8px x 17px. The argument changes the dimensions. If it's a single value (e.g. "20px"), that determines the height. If you have a pair of arguments, the first is width and the second is height.
- row: Display a list of components horizontally. The argument is an array of components in the tab layout format.
- column: Display a list of components vertically. The argument is an array of components in the tab layout format. This is useful to display columns within a row.
- main-display: The text that displays the main currency for the layer and its effects. The argument is the amount of precision to use, allowing it to display non-whole numbers.
- resource-display: The text that displays the currency that this layer is based on, as well as the best and/or total values for this layer's prestige currency (if they are put in `startData` for this layer).
- prestige-button: The button to reset for a currency in this layer.
- text-input: A text input box. The argument is the name of the variable in player[layer] that the input is for, player[layer][argument]
(Works with strings, numbers, and Decimals!)
- slider: Lets the user input a value with a slider. The argument a 3-element array: [name, min, max].
The name is the name of the variable in player[layer] that the input is for, and min and max are the limits of the slider.
(Does not work for Decimal values)
- drop-down: Lets the user input a value with a dropdown menu. The argument a 2-element array: [name, options].
The name is the name of the variable in player[layer] that the input is for, and options is an array of strings for options you can use.
- upgrades, milestones, challenges, achievements, buyables, clickables: Displays the layers upgrades/challenges/etc, as appropriate. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.
- microtabs: Display a set of subtabs for an area. The argument is the name of the set of microtabs in the "microtabs" feature.
- bar: Display a bar. The argument is the id of the bar to display.
- infobox: Display an infobox. The argument is the id of the infobox to display.
- tree: Displays a tree. The argument is an array of arrays containing the names of the nodes in the tree (first by row, then by column)
[See here for more information on tree layouts and nodes!](trees-and-tree-customization.md)
- upgrade-tree, buyable-tree, clickable-tree: Displays a tree of upgrades/buyables/clickables from this layer. The argument is an array of arrays containing the ids of the upgrade/etc in the tree (first by row, then by column). A tree can only have one type of component in it.
- toggle: A toggle button that toggles a bool value. The argument is a pair that identifies the location in player of the bool to toggle, e.g. `[layer, id]`. 'layer' also affects the color of the toggle.
- grid: Displays the gridable grid for the layer. If you need more than one grid, use a layer proxy. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.
- layer-proxy: Lets you use components from another layer. The argument is a pair, `[layer, data]`, consisting of the id of the layer to proxy from, and the tabFormat for the components to show.
(Note: you cannot use a microtab within a layer proxy)
The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.
- upgrade, milestone, challenge, buyable, clickable, achievement, gridable: An individual upgrade, challenge, etc. The argument is the id. This can be used if you want to have upgrades split up across multiple subtabs, for example.
- respec-button, master-button: The respec and master buttons for buyables and clickables, respectively.
- sell-one, sell-all: The "sell one" and "sell all" for buyables, respectively. The argument is the id of the buyable.

70
docs/grids.md Normal file
View file

@ -0,0 +1,70 @@
# Grids
Grids are an easier way of making a group of similar clickables. They all have the same behavior, but are different based on their data.
**NOTE: Gridables are similar to clickables in some respects, but are fundamentally different from normal TMT Big Features in quite a few ways. Be sure to keep these in mind:**
- Gridable ids use base 100 instead of base 10, so you can have more than 10 tiles in a row. This means that a grid might look like this:
101 102
201 202
- Individual gridables are not defined individually. All properties go directly into the "grid" object. Functions are called with arguments for the id of the gridables and its associated data, so you can give them the appropriate appearance and properties based on that.
- If you need two unrelated grids in a layer, you'll need to use a layer proxy component.
Useful functions for dealing with grids:
- getGridData(layer, id): get the data for the chosen gridable
- setGridData(layer, id, state): set the data for the chosen gridable
- gridEffect(layer, id): get the effect for the chosen gridable
The grid should be formatted like this:
```js
grid: {
rows: 4, // If these are dynamic make sure to have a max value as well!
cols: 5,
getStartData(id) {
return 0
},
getUnlocked(id) { // Default
return true
},
getCanClick(data, id) {
return true
},
onClick(data, id) {
player[this.layer].grid[id]++
},
getDisplay(data, id) {
return data
},
etc
}
```
Features:
- rows, cols: The amount of rows and columns of gridable to display.
- maxRows, maxCols: **sometimes needed**. If rows or cols are dynamic, you need to define the maximum amount that there can be (you can increase it when you update the game though). These CANNOT be dynamic.
- getStartData(id): Creates the default data for the gridable at this position. This can be an object, or a regular value.
- getUnlocked(id): **optional**. Returns true if the gridable at this position should be visible.
- getTitle(data, id): **optional**. Returns text that should displayed at the top in a larger font, based on the position and data of the gridable.
- getDisplay(data, id): **optional**. Returns everything that should be displayed on the gridable after the title, based on the position and data of the gridable.
- getStyle(data, id): **optional**. Returns CSS to apply to this gridable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- getCanClick(data, id): **optional**. A function returning a bool to determine if you can click a gridable, based on its data and position. If absent, you can always click it.
- onClick(data, id): A function that implements clicking on the gridable, based on its position and data.
- onHold(data, id): **optional** A function that is called 20x/sec when the button is held for at least 0.25 seconds.
- getEffect(data, id): **optional**. A function that calculates and returns a gridable's effect, based on its position and data. (Whatever that means for a gridable)
- getTooltip(data, id): **optional**. Adds a tooltip to the gridables, appears when they hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.

32
docs/infoboxes.md Normal file
View file

@ -0,0 +1,32 @@
# Infoboxes
Infoboxes are good for displaying "lore", or story elements, as well as for explaining complicated things.
In the default tab layout, the first infobox will be displayed at the very top of the tab.
Infoboxes are defined like other Big Features:
```js
infoboxes: {
lore: {
title: "foo",
body() { return "bar" },
etc
},
etc
}
```
Features:
- title: The text displayed above the main box. Can be a function to be dynamic, and can use basic HTML.
- body: The text displayed inside the box. Can be a function to be dynamic, and can use basic HTML.
- style, titleStyle, bodyStyle: **optional**. Apply CSS to the infobox, or to the title button or body of the infobox, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- unlocked(): **optional**. A function returning a bool to determine if the infobox is visible or not. Default is unlocked.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar
- id: **assigned automagically**. It's the "key" which the bar was stored under, for convenient access. The infobox in the example's id is "lore".

192
docs/layer-features.md Normal file
View file

@ -0,0 +1,192 @@
# Layer Features
This is a more comprehensive list of established features to add to layers. You can add more freely, if you want to have other functions or values associated with your layer. These have special functionality, though.
You can make almost any value dynamic by using a function in its place, including all display strings and styling/color features.
## Layer Definition features
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar to access the saved value. It makes copying code to new layers easier. It is also assigned to all upgrades and buyables and such.
- name: **optional**. used in reset confirmations (and the default infobox title). If absent, it just uses the layer's id.
- startData(): A function to return the default save data for this layer. Add any variables you have to it. Make sure to use `Decimal` values rather than normal numbers.
Standard values:
- Required:
- unlocked: a bool determining if this layer is unlocked or not
- points: a Decimal, the main currency for the layer
- Optional:
- total: A Decimal, tracks total amount of main prestige currency. Always tracked, but only shown if you add it here.
- best: A Decimal, tracks highest amount of main prestige currency. Always tracked, but only shown if you add it here.
- unlockOrder: used to keep track of relevant layers unlocked before this one.
- resetTime: A number, time since this layer was last prestiged (or reset by another layer)
- color: A color associated with this layer, used in many places. (A string in hex format with a #)
- row: The row of the layer, starting at 0. This affects where the node appears on the standard tree, and which resets affect the layer.
Using "side" instead of a number will cause the layer to appear off to the side as a smaller node (useful for achievements and statistics). Side layers are not affected by resets unless you add a doReset to them.
- displayRow: **OVERRIDE** Changes where the layer node appears without changing where it is in the reset order.
- resource: Name of the main currency you gain by resetting on this layer.
- effect(): **optional**. A function that calculates and returns the current values of any bonuses inherent to the main currency. Can return a value or an object containing multiple values. *You will also have to implement the effect where it is applied.*
- effectDescription: **optional**. A function that returns a description of this effect. If the text stays constant, it can just be a string.
- layerShown(): **optional**, A function returning a bool which determines if this layer's node should be visible on the tree. It can also return "ghost", which will hide the layer, but its node will still take up space in the tree.
Defaults to true.
- hotkeys: **optional**. An array containing information on any hotkeys associated with this layer:
```js
hotkeys: [
{
key: "p", // What the hotkey button is. Use uppercase if it's combined with shift, or "ctrl+x" for holding down ctrl.
description: "p: reset your points for prestige points", // The description of the hotkey that is displayed in the game's How To Play tab
onPress() { if (player.p.unlocked) doReset("p") },
unlocked() {return hasMilestone('p', 3)} // Determines if you can use the hotkey, optional
}
]
```
- style: **optional**. a "CSS object" where the keys are CSS attributes, containing any CSS that should affect this layer's entire tab.
- tabFormat: **optional**. use this if you want to add extra things to your tab or change the layout. [See here for more info.](custom-tab-layouts.md)
- midsection: **optional**, an alternative to `tabFormat`, which is inserted in between Milestones and Buyables in the standard tab layout. (cannot do subtabs)
## Big features (all optional)
- upgrades: A set of one-time purchases which can have unique upgrade conditions, currency costs, and bonuses. [See here for more info.](upgrades.md)
- milestones: A list of bonuses gained upon reaching certain thresholds of a resource. Often used for automation/QOL. [See here for more info.](milestones.md)
- challenges: The player can enter challenges, which make the game harder. If they reach a goal and beat the challenge, they recieve a bonus. [See here for more info.](challenges.md)
- buyables: Effectively upgrades that can be bought multiple times, and are optionally respeccable. Many uses. [See here for more info.](buyables.md)
- clickables: Extremely versatile and generalized buttons which can only be clicked sometimes. [See here for more info.](clickables.md)
- microtabs: An area that functions like a set of subtabs, with buttons at the top changing the content within. (Advanced) [See here for more info.](subtabs-and-microtabs.md)
- bars: Display some information as a progress bar, gague, or similar. They are highly customizable, and can be vertical as well. [See here for more info.](bars.md)
- achievements: Kind of like milestones, but with a different display style and some other differences. Extra features are on the way at a later date! [See here for more info.](achievements.md)
- achievementPopups, milestonePopups: **optional**, If false, disables popup message when you get the achievement/milestone. True by default.
- infoboxes: Displays some text in a box that can be shown or hidden. [See here for more info.](infoboxes.md)
- grid: A grid of buttons that behave the same, but have their own data.[See here for more info.](grids.md)
## Prestige formula features
- type: **optional**. Determines which prestige formula you use. Defaults to "none".
- "normal": The amount of currency you gain is independent of its current amount (like Prestige). The formula before bonuses is based on `baseResource^exponent`
- "static": The cost is dependent on your total after reset. The formula before bonuses is based on `base^(x^exponent)`
- "custom": You can define everything, from the calculations to the text on the button, yourself. (See more at the bottom)
- "none": This layer does not prestige, and therefore does not need any of the other features in this section.
- baseResource: The name of the resource that determines how much of the main currency you gain on reset.
- baseAmount(): A function that gets the current value of the base resource.
- requires: A Decimal, the amount of the base needed to gain 1 of the prestige currency. Also the amount required to unlock the layer. You can instead make this a function, to make it harder if another layer was unlocked first (based on unlockOrder).
- exponent: Used as described above.
- base: **sometimes required**. required for "static" layers, used as described above. If absent, defaults to 2. Must be greater than 1.
- roundUpCost: **optional**. a bool, which is true if the resource cost needs to be rounded up. (use if the base resource is a "static" currency.)
- gainMult(), gainExp(): **optional**. For normal layers, these functions calculate the multiplier and exponent on resource gain from upgrades and boosts and such. Plug in most bonuses here.
For static layers, they instead multiply and roots the cost of the resource. (So to make a boost you want to make gainMult smaller and gainExp larger.)
- directMult(): **optional**. Directly multiplies the resource gain, after exponents and softcaps. For static layers, actually multiplies resource gain instead of reducing the cost.
- softcap, softcapPower: **optional**. For normal layers, gain beyond [softcap] points is put to the [softcapPower]th power
Default for softcap is e1e7, and for power is 0.5.
## Other prestige-related features
- canBuyMax(): **sometimes required**. required for static layers, function used to determine if buying max is permitted.
- onPrestige(gain): **optional**. A function that triggers when this layer prestiges, just before you gain the currency. Can be used to have secondary resource gain on prestige, or to recalculate things or whatnot.
- resetDescription: **optional**. Use this to replace "Reset for " on the Prestige button with something else.
- prestigeButtonText(): **sometimes required**. Use this to make the entirety of the text a Prestige button contains. Only required for custom layers, but usable by all types.
- passiveGeneration(): **optional**, returns a regular number. You automatically generate your gain times this number every second (does nothing if absent)
This is good for automating Normal layers.
- autoPrestige(): **optional**, returns a boolean, if true, the layer will always automatically do a prestige if it can.
This is good for automating Static layers.
## Tree/node features
- symbol: **optional**. The text that appears on this layer's node. Default is the layer id with the first letter capitalized.
- image: **override**. The url (local or global) of an image that goes on the node. (Overrides symbol)
- position: **optional**. Determines the horizontal position of the layer in its row in a standard tree. By default, it uses the layer id, and layers are sorted in alphabetical order.
- branches: **optional**. An array of layer/node ids. On a tree, a line will appear from this layer to all of the layers in the list. Alternatively, an entry in the array can be a 2-element array consisting of the layer id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors). A third element in the array optionally specifies line width.
- nodeStyle: **optional**. A CSS object, where the keys are CSS attributes, which styles this layer's node on the tree.
- tooltip() / tooltipLocked(): **optional**. Functions that return text, which is the tooltip for the node when the layer is unlocked or locked, respectively. By default the tooltips behave the same as in the original Prestige Tree.
If the value is "", the tooltip will be disabled.
- marked: **optional** Adds a mark to the corner of the node. If it's "true" it will be a star, but it can also be an image URL.
## Other features
- doReset(resettingLayer): **optional**. Is triggered when a layer on a row greater than or equal to this one does a reset. The default behavior is to reset everything on the row, but only if it was triggered by a layer in a higher row. `doReset` is always called for side layers, but for these the default behavior is to reset nothing.
If you want to keep things, determine what to keep based on `resettingLayer`, `milestones`, and such, then call `layerDataReset(layer, keep)`, where `layer` is this layer, and `keep` is an array of the names of things to keep. It can include things like "points", "best", "total" (for this layer's prestige currency), "upgrades", any unique variables like "generatorPower", etc. If you want to only keep specific upgrades or something like that, save them in a separate variable, then call `layerDataReset`, and then set `player[this.layer].upgrades` to the saved upgrades.
- update(diff): **optional**. This function is called every game tick. Use it for any passive resource production or time-based things. `diff` is the time since the last tick.
- autoUpgrade: **optional**, a boolean value, if true, the game will attempt to buy this layer's upgrades every tick. Defaults to false.
- automate(): **optional**. This function is called every game tick, after production. Use it to activate automation things that aren't otherwise supported.
- resetsNothing: **optional**. Returns true if this layer shouldn't trigger any resets when you prestige.
- increaseUnlockOrder: **optional**. An array of layer ids. When this layer is unlocked for the first time, the `unlockOrder` value for any not-yet-unlocked layers in this list increases. This can be used to make them harder to unlock.
- shouldNotify: **optional**. A function to return true if this layer should be highlighted in the tree. The layer will automatically be highlighted if you can buy an upgrade whether you have this or not.
- glowColor: **optional**. The color that this layer will be highlighted if it should notify. The default is red. You can use this if you want several different notification types!
- componentStyles: **optional**. An object that contains a set of functions returning CSS objects. Each of these will be applied to any components on the layer with the type of its id. Example:
```js
componentStyles: {
"challenge"() { return {'height': '200px'} },
"prestige-button"() { return {'color': '#AA66AA'} }
}
```
- leftTab: **optional**, if true, this layer will use the left tab instead of the right tab.
- previousTab: **optional**, a layer's id. If a layer has a previousTab, the layer will always have a back arrow and pressing the back arrow on this layer will take you to the layer with this id.
- deactivated: **optional**, if this is true, hasUpgrade, hasChallenge, hasAchievement, and hasMilestone will return false for things in the layer, and you will be unable to buy or click things, or gain achievements/milestones on the layer. You will have to disable effects of buyables, the innate layer effect, and possibly other things yourself.
## Custom Prestige type
(All of these can also be used by other prestige types)
- getResetGain(): **mostly for custom prestige type**. Returns how many points you should get if you reset now. You can call `getResetGain(this.layer, useType = "static")` or similar to calculate what your gain would be under another prestige type (provided you have all of the required features in the layer).
- getNextAt(canMax=false): **mostly for custom prestige type**. Returns how many of the base currency you need to get to the next point. `canMax` is an optional variable used with Static-ish layers to differentiate between if it's looking for the first point you can reset at, or the requirement for any gain at all (Supporting both is good). You can also call `getNextAt(this.layer, canMax=false, useType = "static")` or similar to calculate what your next at would be under another prestige type (provided you have all of the required features in the layer).
- canReset(): **mostly for custom prestige type**. Return true only if you have the resources required to do a prestige here.
- prestigeNotify(): **mostly for custom prestige types**, returns true if this layer should be subtly highlighted to indicate you
can prestige for a meaningful gain.

63
docs/main-mod-info.md Normal file
View file

@ -0,0 +1,63 @@
# mod.js
Most of the non-layer code and data that you're likely to edit is here in [mod.js](/js/mod.js).
Everything in [mod.js](/js/mod.js) will not be altered by updates, besides the addition of new things.
Here's a breakdown of what's in it:
- modInfo is where most of the basic configuration for the mod is. It contains:
- name: The name of your mod. (a string)
- id: The id for your mod, a unique string that is used to determine savefile location. Be sure to set it when you start making a mod, and don't change it later because it will erase all saves.
- author: The name of the author, displayed in the info tab.
- pointsName: This changes what is displayed instead of "points" for the main currency. (It does not affect it in the code.)
- modFiles: An array of file addresses which will be loaded for this mod. Using smaller files makes it easier to find what you're looking for.
- discordName, discordLink: If you have a Discord server or other discussion place, you can add a link to it.
"discordName" is the text on the link, and "discordLink" is the url of an invite. If you're using a Discord invite, please make sure it's set to never expire.
- offlineLimit: The maximum amount of offline time that the player can accumulate, in hours. Any extra time is lost. (a number)
This is useful because most of these mods are fast-paced enough that too much offline time ruins the balance, such as the time in between updates. That is why I suggest developers disable offline time on their own savefile.
- initialStartPoints: A Decimal for the amount of points a new player should start with.
- VERSION is used to describe the current version of your mod. It contains:
- num: The mod's version number, displayed at the top right of the tree tab.
- name: The version's name, displayed alongside the number in the info tab.
- changelog is the HTML displayed in the changelog tab. If this gets particularly long, it might be good to put in a separate file (be sure to add the file to index.html)
- doNotCallTheseFunctionsEveryTick is very important, if you are adding non-standard functions. TMT calls every function anywhere in "layers" every tick to store the result, unless specifically told not to. Functions that have are used to do an action need to be identified. "Official" functions (those in the documentation) are all fine, but if you make any new ones, add their names to this array.
```js
// (The ones here are examples, all official functions are already taken care of)
var doNotCallTheseFunctionsEveryTick = ["doReset", "buy", "onPurchase", "blowUpEverything"]
```
- getStartPoints(): A function to determine the amount of points the player starts with after a reset. (returns a Decimal value)
- canGenPoints(): A function returning a boolean for if points should be generated. Use this if you want an upgrade to unlock generating points.
- getPointGen(): A function that calculates your points per second. Anything that affects your point gain should go into the calculation here.
- addedPlayerData(): A function that returns any non-layer-related data that you want to be added to the save data and "player" object.
```js
function addedPlayerData() { return {
weather: "Yes",
happiness: new Decimal(72),
}}
```
- displayThings: An array of functions used to display extra things at the top of the tree tab. Each function returns a string, which is a line to display (with basic HTML support). If a function returns nothing, nothing is displayed (and it doesn't take up a line).
- isEndgame(): A function to determine if the player has reached the end of the game, at which point the "you win!" screen appears.
Less important things beyond this point!
- backgroundStyle: A CSS object containing the styling for the background of the full game. Can be a function!
- maxTickLength(): Returns the maximum tick length, in milliseconds. Only really useful if you have something that reduces over time, which long ticks mess up (usually a challenge).
- fixOldSave(): Can be used to modify a save file when loading into a new version of the game. Use this to undo inflation, never forcibly hard reset your players.

42
docs/milestones.md Normal file
View file

@ -0,0 +1,42 @@
# Milestones
Milestones are awarded to the player when they meet a certain goal, and give some benefit. Milestones should be formatted like this:
```js
milestones: {
0: {
requirementDescription: "123 waffles",
effectDescription: "blah",
done() { return player.w.points.gte(123) }
}
etc
}
```
You can use `hasMilestone(layer, id)` to determine if the player has a given milestone
Milestone features:
- requirementDescription: A string describing the requirement for unlocking this milestone. Suggestion: Use a "total". It can also be a function that returns updating text. Can use basic HTML.
- effectDescription: A string describing the reward for having the milestone. *You will have to implement the reward elsewhere.* It can also be a function that returns updating text. Can use basic HTML.
- done(): A function returning a boolean to determine if the milestone should be awarded.
- onComplete() - **optional**. this function will be called when the milestone is completed.
- toggles: **optional**. Creates toggle buttons that appear on the milestone when it is unlocked. The toggles can toggle a given boolean value in a layer. It is defined as an array of paired items, one pair per toggle. The first is the internal name of the layer the value being toggled is stored in, and the second is the internal name of the variable to toggle. (e.g. [["b", "auto"], ["g", "auto"])
**Tip:** Toggles are not de-set if the milestone becomes locked! In this case, you should also check if the player has the milestone.
- style: **optional**. Applies CSS to this milestone, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- unlocked(): **optional**. A function returning a boolean to determine if the milestone should be shown. If absent, it is always shown.
- tooltip: **optional**. Adds a tooltip to this milestone, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the milestone was stored under, for convenient access. The milestone in the example's id is 0.
Disable milestone popups by adding `milestonePopups: false` to the layer.

8
docs/other.md Normal file
View file

@ -0,0 +1,8 @@
# Other Things
## CSS
A good way to give your game a unique feel is to customize the appearance of it. Modifying the CSS files helps you to do that on a global level. The CSS is broken up into several files to make it easier to find what is relevant to you.
CSS tip: Every component is automatically given a CSS class with the same name as its layer id. You can use this toapply something specifically for a single layer! You can also combine classes, such as .p.achievement or .c.locked, to change specific things in specific layers.
## Temp
temp/tmp (either works) is a data structure that is a copy of layers (which contains all of the layer data you defined plus default things), but it replaces most functions with the result of calling those functions. e.g. if layer p's baseAmount is based on points, layers.p.baseAmount is a function that returns player.points. The player currently has 54 points, so temp.p.baseAmount is 54 (as a Decimal). You can use temp to improve performance.

63
docs/particles.md Normal file
View file

@ -0,0 +1,63 @@
# Particles
Particles are free-floating elements that can move and have many different behaviors. They can also interact with the mouse.
To make particles, use `makeParticles(particle, amount)`. `particle` is a particle-defining object, with features as explained below. There is also `makeShinies`, which uses different defaults and creates stationary particles at a random location. There are also a few other useful things listed at the end.
```js
const myParticle {
image:"options_wheel.png",
spread: 20,
gravity: 2,
time: 3,
speed() { // Randomize speed a bit
return (Math.random() + 1.2) * 8
},
etc...
}
```
Features can be functions or constant. These features will be called when each particle is made, with an `id` argument, which is assigned based on which of the `amount` particles being spawned this is. **All of these are optional**, with a default value.
All distances are in pixels and angles are in degrees, with 0 being up and going clockwise.
- time: The amount of time, in seconds, that the particle will last. Default is 3.
- fadeOutTime: The amount of seconds that fading out at the end should take (part of the total lifetime). Default is 1.
- fadeInTime: The amount of seconds that fading in should take (part of the total lifetime). Default is 0.
- image: The image the particle should display. `""` will display no image. Default is a generic particle.
- text: Displays text on the particle. Can use basic HTML.
- style: Lets you apply other CSS styling to the particle.
- width, height: The dimensions of the particle. Default is 35 and 35.
- color: Sets the color of the image to this color.
- angle: The angle that the particle should face. Default is 0.
- dir: The initial angle that the particles should move in, before spread is factored in. Default is whatever angle is.
- spread: If there are several particles, they will be spread out by this many degrees, centered on dir. Default is 30.
- rotation: The amount that the (visual) angle of the particle should change by. Default is 0.
- speed: The starting speed of the particle. Default is 15.
- gravity: The amount the particle should accelerate downwards. Default is 0.
- x, y: The starting coordinates of the particle. Default is at the mouse position.
- offset: How far from the start each particle should appear. Default is 10.
- xVel, yVel: Set initially based on other properties, then used to update movement.
- layer: When changing tabs, if leaving the `layer` tab, this particle will be erased.
- You can add other features to particles, but you must impliment their effects yourself.
Function features: These stay as functions and are for more advanced things. They are optional.
- update(): Called each tick. Lets you do more advanced visual and movement behaviors by changing other properties.
- onClick(), onMouseOver(), onMouseLeave(): Called when the particle is interacted with.
Other useful things that are not features of the particle object:
- setDir(particle, dir), setSpeed(particle, speed): Set the speed/direction on a particle.
- clearParticles(check): Function to delete particles. With no check, it deletes all particles. Check is a function that takes a particle, and returns true if that particle should be deleted.
- You can use Vue.delete(particles, this.id) to make a particle delete itself.
- mouseX and mouseY are variables that track the mouse position.
- sin(x), cos(x), tan(x): functions that do these operations, with x in degrees. (Instead of radians).
- asin(x), acos(x), atan(x): functions that do these operations, with the returned value in degrees. (instead of radians).

59
docs/subtabs-and-microtabs.md Normal file
View file

@ -0,0 +1,59 @@
# 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. 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:
```js
tabFormat: {
"Main tab": {
content: [tab format things],
*subtab features*
},
"Other tab": {
content: [tab format things],
*subtab features*
},
etc
}
```
Microtabs are defined similarly, and use the same features, but are defined in the "microtabs" feature. Each entry is a group of tabs which will appear in a microtabs component. The first set, "stuff", has 2 tabs, and the second, "otherStuff", has none.
```js
microtabs: {
stuff: {
first: {
content: [tab format things],
*subtab features*
},
second: {
content: [tab format things],
*subtab features*
}
},
otherStuff: {
// There could be another set of microtabs here
}
}
```
Normal subtabs and microtab subtabs both use the same features:
# Features:
- content: The tab layout code for the subtab, in [the tab layout format](custom-tab-layouts.md).
- style: **optional**. Applies CSS to the whole subtab when switched to, in the form of an "CSS Object", where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- 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()/prestigeNotify(): **optional**, if true, the tab button will be highlighted to notify the player that there is something there.
- glowColor: **optional**, specifies the color that the subtab glows. If this subtab is causing the main layer to node glow
(and it would't otherwise) the node also glows this color. Is NOT overridden by embedding a layer.
- 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.

54
docs/trees-and-tree-customization.md Normal file
View file

@ -0,0 +1,54 @@
# Trees and tree customization
If you want to have something beyond the standard tree on the left tab, you can do that in tree.js. You can change the layout
of the tree, including making non-layer nodes, change it into something other than a tree, or hide the left tab altogether.
This also introduces the "tree" component, which can be used in your layers as well.
## layoutInfo
The most important part is layoutInfo, containing:
- startTab: The id of the default tab to show on the right at the start.
- startNavTab: The id of the default tab to show on the left at the start.
- showTree: True if the tree tab should be shown at the start of the game. (The other tab will fill the whole page)
- treeLayout: If present, overrides the tree layout and places nodes as you describe instead (explained in the next section).
Additionally, if you want the main layout to not be a tree, you can edit the "tree-tab" layer at the bottom of tree.js to modify it just like a normal layer's tab. You can even switch between left tabs, using showNavTab(layer) to make that layer appear on the left.
## Trees
The tree component is defined as an array of arrays of names of layers or nodes to show in the tree. They work just like layers/
nodes in the main tree (but branches between nodes will only work on the first node if you have duplicates.)
Here is an example tree:
```js
[["p"],
["left", "blank", "right", "blank"]
["a", "b", "blank", "c", "weirdButton"]]
```
## Nodes
Nodes are non-layer buttons that can go in trees. They are defined similarly to layers, but with addNode instead of addLayer.
Features:
- color: **optional**, The node's color. (A string in hex format with a #)
- symbol: **optional** The text on the button (The id capitalized by default)
- canClick(): Returns true if the player can click the node. ()
- onClick(): The function called when the node is clicked.
- layerShown(): **optional**, A function returning a bool which determines if this node should be visible. It can also return "ghost", which will hide the layer, but its node will still take up space in its tree.
- branches: **optional**. An array of layer/node ids. On a tree, a line will appear from this node to all of the nodes in the list. Alternatively, an entry in the array can be a 2-element array consisting of the id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors).
- nodeStyle: **optional**. A CSS object, where the keys are CSS attributes, which styles this node on the tree.
- tooltip() / tooltipLocked(): **optional**. Functions that return text, which is the tooltip for the node when the layer is unlocked or locked, respectively. By default the tooltips behave the same as in the original Prestige Tree.
- row: **optional**, the row that this node appears in (for the default tree).
- position: **optional**, Determines the horizontal position of the layer in its row in a default tree. By default, it uses the id,
and layers/nodes are sorted in alphabetical order.

48
docs/tutorials/getting-started.md Normal file
View file

@ -0,0 +1,48 @@
# Getting started
Welcome to The Modding Tree!
Using the Modding Tree, at its simplest level, just requires getting a copy of it onto your computer. However, if you do it the right way, it will help in many ways.
Don't let the word "Github" scare you away. It's actually much easier to use than most people think, especially because most people use it the hard way. The key is Github Desktop, which lets you do everything you need to, without even touching the command line.
The benefits of using Github:
- It makes it much, much easier to update The Modding Tree.
- You can share your work without any extra effort using githack, or with a bit more effort, set up a github.io site.
- It lets you undo changes to your code, and to have multiple versions of it.
- It lets you collaborate with other people, if you want to.
## Getting set up with Github Desktop, Visual Studio Code, and The Modding Tree:
1. Install [Github Desktop](https://desktop.github.com/) and [Visual Studio Code](https://code.visualstudio.com/).
2. Make a Github account. You can handle this on your own.
3. Log in on your browser, and go back to [The Modding Tree page](https://github.com/Acamaeda/The-Modding-Tree). At the top right, there should be a button that says "fork". Click on it, and then on your username. You now have your own fork, or copy, of The Modding Tree.
4. Open Github Desktop and log in. Ignore everything else and choose "clone a repository". A "repository" is basically a "Github project", like The Modding Tree. "Cloning" is downloading a copy of the repository to your computer.
5. Look for The Modding Tree in the list of repositiories (it should be the only one) and click "clone".
6. Select that you're using it for your own purposes, and click continue. It will download the files and handle everything.
### Using your repository
1. Click on "show in explorer/finder" to the right, and then open the index.html file in the folder. The page should open up on your browser. This will let you view and test your project locally!
2. To edit your project, click "open in VSCode" in Github Desktop.
3. Open [mod.js](/js/mod.js) in VSCode, and look at the top part where it has a "modInfo" object. Fill in your mod's name to whatever you want, and change the id as well. (It can be any string value, and it's used to determine where the savefile is. Make it something that's probably unique, and don't change it again later or else it'll effectively wipe existing saves)
4. Save [mod.js](/js/mod.js), and then reload [index.html](/index.html) in your browser. The title on the tab, as well as on the info page, will now be updated! **You can reload the page every time you change the code to test it quickly and easily.**
5. Go back to Github Desktop. It's time to save your changes into the git system by making a "commit". This basically saves your work and creates a snapshot of what your code looks like at this moment, allowing you to look back at it later.
6. At the bottom right corner, add a summary of your changes, and then click "commit to master".
7. Finally, at the top middle, click "push origin" to push your changes out onto the online repository.
8. You can view your project online, or share it with others, by going to https://raw.githack.com/[YOUR-GITHUB-USERNAME]/The-Modding-Tree/master/index.html. **You do NOT need to do this to test your mod locally.**
And now, you have successfully used Github! You can look at the next tutorial on [making a mod](making-a-mod.md), or look at the [documentation](/documentation/!general-info.md) to see how The Modding Tree's system works and to make your mod a reality.

104
docs/tutorials/making-a-mod.md Normal file
View file

@ -0,0 +1,104 @@
# Making a Mod
This guide assumes you have already gone through the [getting started guide](getting-started.md). It will walk you through the basics of using TMT to create a mod. Let's get started!
## Setting up mod info
Open mod.js. This is where you define things that are for the mod in general as opposed to layer-specific. For now, modInfo, you can set the mod name and author name, and also the points name, which changes what the game calls your basic points (but they're still referred to as `player.points` in the code). **Be sure that you set a mod id as well**.
One suggestion: When you're testing your mod, you should turn off offline progress in the in-game settings, and don't leave the game running when you aren't using it. You could unintentionally balance your game with large timewalls caused by this extra time.
## Making a layer
Now for the good stuff! Head into layers.js. There is a basic layer already there (although it has a few redundant things in it.) Let's see what it's doing...
The most important thing is on the first line, where it says `addLayer("p", {` . This is how you create a new layer. The "p" here becomes the layer id, which is used throughout TMT to refer to the layer. You can change the id, but you will have to replace instances of "p" in the tutorial code as well.
A layer is basically a big object with lots of different properties that you can set to create features. For fun customization, you can change a few things:
- name: Your layer's name!
- color: Sets the color of a lot of things for this layer. (Can be a hex code or the name of a color)
- symbol: The text that appears on this layer's node.
- resource: The name of this layer's main currency.
Reload the page to see your newly customized layer! You can ignore the other features in the layer, for now. Most of it is involved in calculating how many prestige points you get. For now, let's make an upgrade!
## Upgrades
Upgrades are one of several Big Features in TMT, and most of them work the same way. Most of what applies to upgrades applies to milestones, buyables, etc. To add upgrades to your layer, after all of the other features, add a comma to the end of the last one, and then put:
```js
upgrades: {
},
```
"upgrades" is an object, which contains an object for each upgrade. Each upgrade has an id that corresponds to its position. The upgrade "12" will appear as the second upgrade in the first row.
Given that, let's make our first upgrade! Insert this line in between the brackets after "upgrades":
```js
11: {
},
```
Reload the page, and an upgrade will appear in the layer's tab! It will just be blank though. We need to fill out its features, which works similarly to giving a layer features. Here are the features we'll need:
```js
title: "Make this whatever you want!",
description: "Double your point gain.",
cost: new Decimal(1),
```
Reload the page, and the upgrade will appear, fully formed! But it won't have any effect when you buy it! To impliment a boost, we need to go to the place where it is calculated. In this case, point gain is calculated in getPointGen in mod.js, so let's head over there.
It's time to explain Decimals. Decimals are a special way of handling numbers over the normal Javascript limit. They are handled in a very different way. To perform any operations, instead of doing x = x + y, you have to do x = x.add(y). x has to be a Decimal, but y can be either a Decimal or Number (regular javascript number). A more detailed description is in [!general-info.md](/documentation/!general-info.md)
With that knowledge in hand, what we need to do is check if the player has the upgrade, and then boost point gain if so. We can do that by inserting this line between gain being defined and returned:
```js
if (hasUpgrade('p', 11)) gain = gain.times(2)
```
Refresh the page again, and it should work! You are gaining 2 points per second!
## Upgraded upgrades
Now that you know how to make a simple upgrade, let's make a more interesting one, that scales its effect based on your prestige points!
Copying things is often the easiest way to do things, so copy upgrade 11 and paste it afterwards. Replace the 11 with a 12, and change the name and description as you see fit, and bump the cost up to 2. Now, let's add an effect. effect is a function that calculates the bonus from an upgrade, and effectDisplay lets you display the effect.
```js
effect() {
return player[this.layer].points.add(1).pow(0.5)
},
effectDisplay() { return format(upgradeEffect(this.layer, this.id))+"x" }, // Add formatting to the effect
```
this.layer and this.id are automatically set to the layer that the upgrade is in, and the id of the upgrade (in this case "12"). Using them makes it much easier to reuse code. You can also see that player[this.layer].points gets the prestige currency amount for this layer.
Now, in mod.js, under the last line you added, you can apply the effect with
```js
if (hasUpgrade('p', 12)) gain = gain.times(upgradeEffect('p', 12))
```
Refresh it to see that it works! Now, for one last upgrade, let's make points boost prestige point gain! Copy the last upgrade, and change the number to 13. Change the title and name, set the cost to 5. (This mod is balanced to be fast-paced and easy to test). We can reuse the effectDisplay, so we just need to change the effect:
```js
effect() {
return player.points.add(1).pow(0.15)
},
```
To implement this effect, we modify gainMult, which returns the multiplier to this layer's prestige gain.
```js
gainMult() {
let mult = new Decimal(1)
if (hasUpgrade('p', 13)) mult = mult.times(upgradeEffect('p', 13))
return mult
},
```
Refresh the page and see your new upgrade! Next time: a new layer...

21
docs/tutorials/updating-tmt.md Normal file
View file

@ -0,0 +1,21 @@
# Updating The Modding Tree
This tutorial assumes that you have used [the Getting Started Tutorial](getting-started.md), and are using Github Desktop and VSCode for your mod.
Here's what you have to do when there's a TMT update:
1. Look at the changelog. It will warn you if the update will break anything or require any changes. Decide if you want to try to update.
2. Open Github Desktop, and at the top middle, click "fetch origin". This will make Github Desktop get information about the update.
3. Click where it says "current branch: master" at the top middle, and at the bottom of the thing that appears, click "choose a branch to merge into master".
4. Select upstream/master. It will likely say there are conflicts, but you have tools to resolve them. Click "Merge upstream/master into master".
5. A conflict happens when the things you're trying to merge have both made changes in the same place. Click "open in Visual Studio Code" next to the first file.
6. Scroll down through the file, and look for the parts highlighted in red and green. One of these is your code, and the other is some code that will be modified by the update. Do your best to try to edit things to keep the updated changes, but keep your content.
7. Continue to do this for all remaining changes.
8. Do any other changes required by the update, run the game, fix issues, etc.

70
docs/upgrades.md Normal file
View file

@ -0,0 +1,70 @@
# Upgrades
Useful functions for dealing with Upgrades and implementing their effects:
- hasUpgrade(layer, id): determine if the player has the upgrade
- upgradeEffect(layer, id): Returns the current effects of the upgrade, if any
- buyUpgrade(layer, id): Buys an upgrade directly (if affordable)
Hint: Basic point gain is calculated in [mod.js](/js/mod.js)'s "getPointGen" function.
Upgrades are stored in the following format:
```js
upgrades: {
11: {
description: "Blah",
cost: new Decimal(100),
etc
},
etc
}
```
Usually, upgrades should have an id where the first digit is the row and the second digit is the column.
Individual upgrades can have these features:
- title: **optional**. Displayed at the top in a larger font. It can also be a function that returns updating text. Can use basic HTML.
- description: A description of the upgrade's effect. *You will also have to implement the effect where it is applied.* It can also be a function that returns updating text. Can use basic HTML.
- effect(): **optional**. A function that calculates and returns the current values of any bonuses from the upgrade. Can return a value or an object containing multiple values.
- effectDisplay(): **optional**. A function that returns a display of the current effects of the upgrade with formatting. Default displays nothing. Can use basic HTML.
- fullDisplay(): **OVERRIDE**. Overrides the other displays and descriptions, and lets you set the full text for the upgrade. Can use basic HTML.
- cost: **sort of optional** A Decimal for the cost of the upgrade. By default, upgrades cost the main prestige currency for the layer.
- unlocked(): **optional**. A function returning a bool to determine if the upgrade is visible or not. Default is unlocked.
- onPurchase(): **optional**. This function will be called when the upgrade is purchased. Good for upgrades like "makes this layer act like it was unlocked first".
- style: **optional**. Applies CSS to this upgrade, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- tooltip: **optional**. Adds a tooltip to this upgrade, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the upgrade was stored under, for convenient access. The upgrade in the example's id is 11.
By default, upgrades use the main prestige currency for the layer. You can include these to change them (but it needs to be a Decimal):
- currencyDisplayName: **optional**. The name to display for the currency for the upgrade.
- currencyInternalName: **optional**. The internal name for that currency.
- currencyLayer: **optional**. The internal name of the layer that currency is stored in. If it's not in a layer (like Points), omit. If it's not stored directly in a layer, instead use the next feature.
- currencyLocation: **optional**. If your currency is stored in something inside a layer (e.g. a buyable's amount), you can access it this way. This is a function returning the object in "player" that contains the value (like `player[this.layer].buyables`)
If you want to do something more complicated like upgrades that cost two currencies, or have extra requirements, you can override the purchase system with these. (and you need to use fullDisplay if you don't use "cost")
- canAfford(): **OVERRIDE**, a function determining if you are able to buy the upgrade. (If you also have a cost, it will check both the cost and this function)
- pay(): **OVERRIDE**, a function that reduces your currencies when you buy the upgrade
- branches: **optional**, This is primarially useful for upgrade trees. An array of upgrade ids. A line will appear from this upgrade to all of the upgrades in the list. Alternatively, an entry in the array can be a 2-element array consisting of the upgrade id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors). A third element in the array optionally specifies line width.

139
index.html Normal file
View file

@ -0,0 +1,139 @@
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/system-style.css" />
<link rel="stylesheet" type="text/css" href="css/bars.css" />
<link rel="stylesheet" type="text/css" href="css/components.css" />
<link rel="stylesheet" type="text/css" href="css/general-style.css" />
<link rel="stylesheet" type="text/css" href="css/misc.css" />
<link rel="stylesheet" type="text/css" href="css/other-tabs.css" />
<link rel="stylesheet" type="text/css" href="css/popup.css" />
<link rel="stylesheet" type="text/css" href="css/tree-node.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 src="js/technical/break_eternity.js"></script>
<script src="js/technical/layerSupport.js"></script>
<script src="js/mod.js"></script>
<script src="js/technical/loader.js"></script>
<script src="js/technical/temp.js"></script>
<script src="js/technical/displays.js"></script>
<script src="js/game.js"></script>
<script src="js/utils.js"></script>
<script src="js/utils/easyAccess.js"></script>
<script src="js/technical/systemComponents.js"></script>
<script src="js/components.js"></script>
<script src="js/technical/canvas.js"></script>
<script src="js/technical/particleSystem.js"></script>
<script src="js/utils/NumberFormating.js"></script>
<script src="js/utils/options.js"></script>
<script src="js/utils/save.js"></script>
<script src="js/utils/themes.js"></script>
</head>
<body onload="load()" onmousemove="updateMouse(event)">
<div id="app">
<canvas id="treeCanvas" class="canvas" v-if="!(tmp.gameEnded && !player.keepGoing)"></canvas>
<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.navTab !== 'none' && tmp.other.splitScreen && player.tab!='none' && !(tmp.gameEnded && !player.keepGoing)"></div>
<div v-if="(tmp.gameEnded && !player.keepGoing)" class="fullWidth">
<br>
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
<h3 v-html="modInfo.winText"></h3><br>
<h3>Please check the Discord to see if there are new content updates!</h3><br><br>
<div v-if="!player.timePlayedReset">It took you {{formatTime(player.timePlayed)}} to beat the game.</div>
<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>
</div>
<div id="treeOverlay" v-if="!(tmp.gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen || !readData(layoutInfo.showTree))" class="treeOverlay" onscroll="resizeCanvas()"
v-bind:class="{
fullWidth: (player.tab == 'none' || player.navTab == 'none'),
col: (player.tab !== 'none' && player.navTab !== 'none'),
left: (player.tab !== 'none' && player.navTab !== 'none')}"
:style="{'margin-top': !readData(layoutInfo.showTree) && player.tab == 'info-tab' ? '50px' : ''}">
<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px" >
{{VERSION.withoutName}}</div>
<button
v-if="((player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside' || player[player.tab].prevTab)) || player[player.navTab]?.prevTab)" class="other-back overlayThing" onclick="goBack(player.navTab == 'none' ? player.tab : player.navTab)">←</button>
<img id="optionWheel" class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png"
onclick="showTab('options-tab')"></img>
<div id="info" v-if="player.tab!='info-tab'" class="overlayThing" onclick="showTab('info-tab')"><br>i</div>
<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>
<overlay-head v-if="!(tmp.gameEnded && !player.keepGoing)"></overlay-head>
<div class="sideLayers">
<div v-for="(node, index) in OTHER_LAYERS['side']">
<tree-node :layer='node' :abb='tmp[node].symbol' :size="'small'" :key="'side' + index"></tree-node>
</div>
</div>
</div>
<div v-if="!(tmp.gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen)" id="treeTab" 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')}">
<br><br><br><br>
<overlay-head id="fakeHead" style="visibility: hidden;">
</overlay-head>
<layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" :key="'left'"></layer-tab>
<bg :layer="player.navTab == 'none' ? player.tab : player.navTab" ></bg>
</div>
<!-- Popups -->
<div class="popup-container">
<transition-group name="fade">
<div v-for="popup,index in activePopups" class="popup" v-bind:class="popup.type"
v-bind:key="'p' + popup.id" v-on:click="() => {activePopups.splice(index, 1)}" v-bind:style="popup.color ? {'background-color': popup.color} : {}">
<h3>{{popup.title}}</h3><br>
<h2 v-html="popup.message"></h2>
</div>
</transition-group>
</div>
<div class="particle-container">
<div v-for="particle,index in particles">
<particle :data="particle" :index="index" v-bind:key="'b' + particle.id"></particle>
</div>
</div>
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(tmp.gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS">
<div v-if="player.tab==layer">
<layer-tab :layer="layer" :back="'none'" :spacing="'50px'" :key="'left'"></layer-tab>
</div>
</div>
<bg :layer="player.tab" ></bg>
</div>
<div class = "bg2" v-bind:style = "tmp.backgroundStyle"></div>
</div>
</body>

83
js/Demo/demoMod.js Normal file
View file

@ -0,0 +1,83 @@
let modInfo = {
name: "The Modding Tree",
id: "modbase",
pointsName: "points",
modFiles: ["Demo/layers/c.js", "Demo/layers/f.js", "Demo/layers/a.js", "Demo/demoTree.js"],
discordName: "",
discordLink: "",
initialStartPoints: new Decimal (10), // Used for hard resets and new players
offlineLimit: 1, // In hours
}
// Set your version in num and name
let VERSION = {
num: "2.6.6",
name: "Fixed Reality",
}
let changelog = `<h1>Changelog:</h1><br>
<h3>v0.0</h3><br>
- Added things.<br>
- Added stuff.`
let winText = `Congratulations! You have reached the end and beaten this game, but for now...`
// If you add new functions anywhere inside of a layer, and those functions have an effect when called, add them here.
// (The ones here are examples, all official functions are already taken care of)
var doNotCallTheseFunctionsEveryTick = ["doReset", "buy", "onPurchase", "blowUpEverything"]
function getStartPoints(){
return new Decimal(modInfo.initialStartPoints)
}
// Determines if it should show points/sec
function canGenPoints(){
return hasUpgrade("c", 11)
}
// Calculate points/sec!
function getPointGen() {
if(!canGenPoints())
return new Decimal(0)
let gain = new Decimal(1)
if (hasUpgrade("c", 12)) gain = gain.times(upgradeEffect("c", 12))
return gain
}
// You can add non-layer related variables that should to into "player" and be saved here, along with default values
function addedPlayerData() { return {
weather: "Yes",
happiness: new Decimal(72),
}}
// Display extra things at the top of the page
var displayThings = [
function() {if (player.points.eq(69)) return "Tee hee!"},
function() {if (player.f.points.gt(1)) return `You have ${player.f.points} farm points. (Which do nothing.)`},
function() {if (inChallenge("c", 11)) return "The game is currently <h1>0%</h1> harder."},
]
// Determines when the game "ends"
function isEndgame() {
return player.points.gte(new Decimal("11"))
}
// Less important things beyond this point!
// Style for the background, can be a function
var backgroundStyle = {
}
// You can change this if you have things that can be messed up by long tick lengths
function maxTickLength() {
return(3600) // Default is 1 hour which is just arbitrarily large
}
// Use this if you need to undo inflation from an older version. If the version is older than the version that fixed the issue,
// you can cap their current resources with this.
function fixOldSave(oldVersion){
}

55
js/Demo/demoTree.js Normal file
View file

@ -0,0 +1,55 @@
// treeLayout will override the default tree's layout if used
var layoutInfo = {
startTab: "c",
startNavTab: "tree-tab",
showTree: true,
//treeLayout: ""
}
// A "ghost" layer which offsets f in the tree
addNode("spook", {
row: 1,
layerShown: "ghost",
},
)
// A "ghost" layer which offsets f in the tree
addNode("g", {
symbol: "TH",
branches: [["c", "red", 4]],
color: '#6d3678',
layerShown: true,
canClick() {return player.points.gte(10)},
tooltip: "Thanos your points",
tooltipLocked: "Thanos your points",
onClick() {player.points = player.points.div(2)
console.log(this.layer)}
},
)
// A "ghost" layer which offsets f in the tree
addNode("h", {
branches: ["g"],
layerShown: true,
tooltip() {return "Restore your points to " + player.c.otherThingy},
tooltipLocked() {return "Restore your points to " + player.c.otherThingy},
row: "side",
canClick() {return player.points.lt(player.c.otherThingy)},
onClick() {player.points = new Decimal(player.c.otherThingy)}
},
)
addLayer("tree-tab", {
tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]],
previousTab: "",
leftTab: true,
style() {return {'background-color': '#222222'}},
})

65
js/Demo/layers/a.js Normal file
View file

@ -0,0 +1,65 @@
// A side layer with achievements, with no prestige
addLayer("a", {
startData() { return {
unlocked: true,
points: new Decimal(0),
}},
color: "yellow",
resource: "achievement power",
row: "side",
tooltip() { // Optional, tooltip displays when the layer is locked
return ("Achievements")
},
achievementPopups: true,
achievements: {
11: {
image: "discord.png",
name: "Get me!",
done() {return true}, // This one is a freebie
goalTooltip: "How did this happen?", // Shows when achievement is not completed
doneTooltip: "You did it!", // Showed when the achievement is completed
},
12: {
name: "Impossible!",
done() {return false},
goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
doneTooltip: "HOW????", // Showed when the achievement is completed
textStyle: {'color': '#04e050'},
},
13: {
name: "EIEIO",
done() {return player.f.points.gte(1)},
tooltip: "Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).", // Showed when the achievement is completed
onComplete() {console.log("Bork bork bork!")}
},
},
midsection: ["grid", "blank"],
grid: {
maxRows: 3,
rows: 2,
cols: 2,
getStartData(id) {
return id
},
getUnlocked(id) { // Default
return true
},
getCanClick(data, id) {
return player.points.eq(10)
},
getStyle(data, id) {
return {'background-color': '#'+ (data*1234%999999)}
},
onClick(data, id) { // Don't forget onHold
player[this.layer].grid[id]++
},
getTitle(data, id) {
return "Gridable #" + id
},
getDisplay(data, id) {
return data
},
},
},
)

396
js/Demo/layers/c.js Normal file
View file

@ -0,0 +1,396 @@
var testTree = [["f", "c"],
["g", "spook", "h"]]
addLayer("c", {
layer: "c", // This is assigned automatically, both to the layer and all upgrades, etc. Shown here so you know about it
name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
symbol: "C", // This appears on the layer's node. Default is the id with the first letter capitalized
position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
startData() { return {
unlocked: true,
points: new Decimal(0),
best: new Decimal(0),
total: new Decimal(0),
buyables: {}, // You don't actually have to initialize this one
beep: false,
thingy: "pointy",
otherThingy: 10,
drop: "drip",
}},
color: "#4BDC13",
requires: new Decimal(10), // Can be a function that takes requirement increases into account
resource: "lollipops", // Name of prestige currency
baseResource: "points", // Name of resource prestige is based on
baseAmount() {return player.points}, // Get the current amount of baseResource
type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
exponent: 0.5, // Prestige currency exponent
base: 5, // Only needed for static layers, base of the formula (b^(x^exp))
roundUpCost: false, // True if the cost needs to be rounded up (use when baseResource is static?)
// For normal layers, gain beyond [softcap] points is put to the [softcapPower]th power
softcap: new Decimal(1e100),
softcapPower: new Decimal(0.5),
canBuyMax() {}, // Only needed for static layers with buy max
gainMult() { // Calculate the multiplier for main currency from bonuses
mult = new Decimal(1)
if (hasUpgrade(this.layer, 166)) mult = mult.times(2) // These upgrades don't exist
if (hasUpgrade(this.layer, 120)) mult = mult.times(upgradeEffect(this.layer, 120))
return mult
},
gainExp() { // Calculate the exponent on main currency from bonuses
return new Decimal(1)
},
row: 0, // Row the layer is in on the tree (0 is the first row)
effect() {
return { // Formulas for any boosts inherent to resources in the layer. Can return a single value instead of an object if there is just one effect
waffleBoost: (true == false ? 0 : Decimal.pow(player[this.layer].points, 0.2)),
icecreamCap: (player[this.layer].points * 10)
}},
effectDescription() { // Optional text to describe the effects
eff = this.effect();
eff.waffleBoost = eff.waffleBoost.times(buyableEffect(this.layer, 11).first)
return "which are boosting waffles by "+format(eff.waffleBoost)+" and increasing the Ice Cream cap by "+format(eff.icecreamCap)
},
infoboxes:{
coolInfo: {
title: "Lore",
titleStyle: {'color': '#FE0000'},
body: "DEEP LORE!",
bodyStyle: {'background-color': "#0000EE"}
}
},
milestones: {
0: {requirementDescription: "3 Lollipops",
done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
effectDescription: "Unlock the next milestone",
},
1: {requirementDescription: "4 Lollipops",
unlocked() {return hasMilestone(this.layer, 0)},
done() {return player[this.layer].best.gte(4)},
effectDescription: "You can toggle beep and boop (which do nothing)",
toggles: [
["c", "beep"], // Each toggle is defined by a layer and the data toggled for that layer
["f", "boop"]],
style() {
if(hasMilestone(this.layer, this.id)) return {
'background-color': '#1111DD'
}},
},
},
challenges: {
11: {
name: "Fun",
completionLimit: 3,
challengeDescription() {return "Makes the game 0% harder<br>"+challengeCompletions(this.layer, this.id) + "/" + this.completionLimit + " completions"},
unlocked() { return player[this.layer].best.gt(0) },
goalDescription: 'Have 20 points I guess',
canComplete() {
return player.points.gte(20)
},
rewardEffect() {
let ret = player[this.layer].points.add(1).tetrate(0.02)
return ret;
},
rewardDisplay() { return format(this.rewardEffect())+"x" },
countsAs: [12, 21], // Use this for if a challenge includes the effects of other challenges. Being in this challenge "counts as" being in these.
rewardDescription: "Says hi",
onComplete() {console.log("hiii")}, // Called when you successfully complete the challenge
onEnter() {console.log("So challenging")},
onExit() {console.log("Sweet freedom!")},
},
},
upgrades: {
11: {
title: "Generator of Genericness",
description: "Gain 1 Point every second.",
cost: new Decimal(1),
unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
branches: [12],
tooltip: "hi",
},
12: {
description: "Point generation is faster based on your unspent Lollipops.",
cost: new Decimal(1),
unlocked() { return (hasUpgrade(this.layer, 11))},
effect() { // Calculate bonuses from the upgrade. Can return a single value or an object with multiple values
let ret = player[this.layer].points.add(1).pow(player[this.layer].upgrades.includes(24)?1.1:(player[this.layer].upgrades.includes(14)?0.75:0.5))
if (ret.gte("1e20000000")) ret = ret.sqrt().times("1e10000000")
return ret;
},
effectDisplay() { return format(this.effect())+"x" }, // Add formatting to the effect
},
13: {
unlocked() { return (hasUpgrade(this.layer, 12))},
onPurchase() { // This function triggers when the upgrade is purchased
player[this.layer].unlockOrder = 0
},
style() {
if (hasUpgrade(this.layer, this.id)) return {
'background-color': '#1111dd'
}
else if (!canAffordUpgrade(this.layer, this.id)) {
return {
'background-color': '#dd1111'
}
} // Otherwise use the default
},
canAfford(){return player.points.lte(7)},
pay(){player.points = player.points.add(7)},
fullDisplay: "Only buyable with less than 7 points, and gives you 7 more. Unlocks a secret subtab."
},
22: {
title: "This upgrade doesn't exist",
description: "Or does it?.",
currencyLocation() {return player[this.layer].buyables}, // The object in player data that the currency is contained in
currencyDisplayName: "exhancers", // Use if using a nonstandard currency
currencyInternalName: 11, // Use if using a nonstandard currency
cost: new Decimal(3),
unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
},
},
buyables: {
showRespec: true,
respec() { // Optional, reset things and give back your currency. Having this function makes a respec button appear
player[this.layer].points = player[this.layer].points.add(player[this.layer].spentOnBuyables) // A built-in thing to keep track of this but only keeps a single value
resetBuyables(this.layer)
doReset(this.layer, true) // Force a reset
},
respecText: "Respec Thingies", // Text on Respec button, optional
respecMessage: "Are you sure? Respeccing these doesn't accomplish much.",
11: {
title: "Exhancers", // Optional, displayed at the top in a larger font
cost(x) { // cost for buying xth buyable, can be an object if there are multiple currencies
if (x.gte(25)) x = x.pow(2).div(25)
let cost = Decimal.pow(2, x.pow(1.5))
return cost.floor()
},
effect(x) { // Effects of owning x of the items, x is a decimal
let eff = {}
if (x.gte(0)) eff.first = Decimal.pow(25, x.pow(1.1))
else eff.first = Decimal.pow(1/25, x.times(-1).pow(1.1))
if (x.gte(0)) eff.second = x.pow(0.8)
else eff.second = x.times(-1).pow(0.8).times(-1)
return eff;
},
display() { // Everything else displayed in the buyable button after the title
let data = tmp[this.layer].buyables[this.id]
return "Cost: " + format(data.cost) + " lollipops\n\
Amount: " + player[this.layer].buyables[this.id] + "/4\n\
Adds + " + format(data.effect.first) + " things and multiplies stuff by " + format(data.effect.second)
},
unlocked() { return player[this.layer].unlocked },
canAfford() {
return player[this.layer].points.gte(tmp[this.layer].buyables[this.id].cost)},
buy() {
cost = tmp[this.layer].buyables[this.id].cost
player[this.layer].points = player[this.layer].points.sub(cost)
player[this.layer].buyables[this.id] = player[this.layer].buyables[this.id].add(1)
player[this.layer].spentOnBuyables = player[this.layer].spentOnBuyables.add(cost) // This is a built-in system that you can use for respeccing but it only works with a single Decimal value
},
buyMax() {}, // You'll have to handle this yourself if you want
style: {'height':'222px'},
purchaseLimit: new Decimal(4),
sellOne() {
let amount = getBuyableAmount(this.layer, this.id)
if (amount.lte(0)) return // Only sell one if there is at least one
setBuyableAmount(this.layer, this.id, amount.sub(1))
player[this.layer].points = player[this.layer].points.add(this.cost)
},
},
},
doReset(resettingLayer){ // Triggers when this layer is being reset, along with the layer doing the resetting. Not triggered by lower layers resetting, but is by layers on the same row.
if(layers[resettingLayer].row > this.row) layerDataReset(this.layer, ["points"])
},
layerShown() {return true}, // Condition for when layer appears on the tree
automate() {
}, // Do any automation inherent to this layer if appropriate
resetsNothing() {return false},
onPrestige(gain) {
return
}, // Useful for if you gain secondary resources or have other interesting things happen to this layer when you reset it. You gain the currency after this function ends.
hotkeys: [
{key: "c", description: "C: reset for lollipops or whatever", onPress(){if (canReset(this.layer)) doReset(this.layer)}},
{key: "ctrl+c", description: "Ctrl+c: respec things", onPress(){respecBuyables(this.layer)}, unlocked() {return hasUpgrade('c', '22')}} ,
],
increaseUnlockOrder: [], // Array of layer names to have their order increased when this one is first unlocked
microtabs: {
stuff: {
first: {
content: ["upgrades", ["display-text", function() {return "confirmed<br>" + player.c.drop}], ["drop-down", ["drop", ["drip", "drop"]]]]
},
second: {
embedLayer: "f",
content: [["upgrade", 11],
["row", [["upgrade", 11], "blank", "blank", ["upgrade", 11],]],
["display-text", function() {return "double confirmed"}]]
},
},
otherStuff: {
// There could be another set of microtabs here
}
},
bars: {
longBoi: {
fillStyle: {'background-color' : "#FFFFFF"},
baseStyle: {'background-color' : "#696969"},
textStyle: {'color': '#04e050'},
borderStyle() {return {}},
direction: RIGHT,
width: 300,
height: 30,
progress() {
return (player.points.add(1).log(10).div(10)).toNumber()
},
display() {
return format(player.points) + " / 1e10 points"
},
unlocked: true,
},
tallBoi: {
fillStyle: {'background-color' : "#4BEC13"},
baseStyle: {'background-color' : "#000000"},
textStyle: {'text-shadow': '0px 0px 2px #000000'},
borderStyle() {return {'border-width': "7px"}},
direction: UP,
width: 50,
height: 200,
progress() {
return player.points.div(100)
},
display() {
return formatWhole((player.points.div(1)).min(100)) + "%"
},
unlocked: true,
},
flatBoi: {
fillStyle: {'background-color' : "#FE0102"},
baseStyle: {'background-color' : "#222222"},
textStyle: {'text-shadow': '0px 0px 2px #000000'},
borderStyle() {return {}},
direction: UP,
width: 100,
height: 30,
progress() {
return player.c.points.div(50)
},
unlocked: true,
},
},
// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
tabFormat: {
"main tab": {
buttonStyle() {return {'color': 'orange'}},
shouldNotify: true,
content:
["main-display",
"prestige-button", "resource-display",
["blank", "5px"], // Height
["raw-html", function() {return "<button onclick='console.log(`yeet`); makeParticles(textParticle)'>'HI'</button>"}],
["display-text", "Name your points!"],
["text-input", "thingy"],
["display-text",
function() {return 'I have ' + format(player.points) + ' ' + player[this.layer].thingy + ' points!'},
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
"h-line", "milestones", "blank", "upgrades", "challenges"],
glowColor: "blue",
},
thingies: {
prestigeNotify: true,
style() {return {'background-color': '#222222'}},
buttonStyle() {return {'border-color': 'orange'}},
content:[
"buyables", "blank",
["row", [
["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
["display-text", function() {return "Beep"}], "blank", ["v-line", "200px"],
["column", [
["prestige-button", "", {'width': '150px', 'height': '80px'}],
["prestige-button", "", {'width': '100px', 'height': '150px'}],
]],
], {'width': '600px', 'height': '350px', 'background-color': 'green', 'border-style': 'solid'}],
"blank",
["display-image", "discord.png"],],
},
jail: {
style() {return {'background-color': '#222222'}},
content: [
["infobox", "coolInfo"],
["bar", "longBoi"], "blank",
["row", [
["column", [
["display-text", "Sugar level:", {'color': 'teal'}], "blank", ["bar", "tallBoi"]],
{'background-color': '#555555', 'padding': '15px'}],
"blank",
["column", [
["display-text", "idk"],
["blank", ['0', '50px']], ["bar", "flatBoi"]
]],
]],
"blank", ["display-text", "It's jail because \"bars\"! So funny! Ha ha!"],["tree", testTree],
],
},
illuminati: {
unlocked() {return (hasUpgrade("c", 13))},
content:[
["raw-html", function() {return "<h1> C O N F I R M E D </h1>"}], "blank",
["microtabs", "stuff", {'width': '600px', 'height': '350px', 'background-color': 'brown', 'border-style': 'solid'}],
["display-text", "Adjust how many points H gives you!"],
["slider", ["otherThingy", 1, 30]], "blank", ["upgrade-tree", [[11],
[12, 22, 22, 11]]]
]
}
},
style() {return {
//'background-color': '#3325CC'
}},
nodeStyle() {return { // Style on the layer node
'color': '#3325CC',
'text-decoration': 'underline',
'font-family': 'cursive'
}},
glowColor: "orange", // If the node is highlighted, it will be this color (default is red)
componentStyles: {
"challenge"() {return {'height': '200px'}},
"prestige-button"() {return {'color': '#AA66AA'}},
},
tooltip() { // Optional, tooltip displays when the layer is unlocked
let tooltip = formatWhole(player[this.layer].points) + " " + this.resource
if (player[this.layer].buyables[11].gt(0)) tooltip += "<br><i><br><br><br>" + formatWhole(player[this.layer].buyables[11]) + " Exhancers</i>"
return tooltip
},
shouldNotify() { // Optional, layer will be highlighted on the tree if true.
// Layer will automatically highlight if an upgrade is purchasable.
return (player.c.buyables[11] == 1)
},
marked: "discord.png",
resetDescription: "Melt your points into ",
})
const textParticle = {
spread: 20,
gravity: 0,
time: 3,
speed: 0,
text: function() { return "<h1 style='color:yellow'>" + format(player.points)},
offset: 30,
fadeInTime: 1,
}

147
js/Demo/layers/f.js Normal file
View file

@ -0,0 +1,147 @@
// This layer is mostly minimal but it uses a custom prestige type and a clickable
addLayer("f", {
infoboxes:{
coolInfo: {
title: "Lore",
titleStyle: {'color': '#FE0000'},
body: "DEEP LORE!",
bodyStyle: {'background-color': "#0000EE"}
}
},
startData() { return {
unlocked: false,
points: new Decimal(0),
boop: false,
clickables: {[11]: "Start"}, // Optional default Clickable state
}},
color: "#FE0102",
requires() {return new Decimal(10)},
resource: "farm points",
baseResource: "points",
baseAmount() {return player.points},
type: "static",
exponent: 0.5,
base: 3,
roundUpCost: true,
canBuyMax() {return false},
//directMult() {return new Decimal(player.c.otherThingy)},
row: 1,
layerShown() {return true},
branches: ["c"], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
tooltipLocked() { // Optional, tooltip displays when the layer is locked
return ("This weird farmer dinosaur will only see you if you have at least " + this.requires() + " points. You only have " + formatWhole(player.points))
},
midsection: [
"blank", ['display-image', 'https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390'],
["display-text", "Bork bork!"]
],
// The following are only currently used for "custom" Prestige type:
prestigeButtonText() { //Is secretly HTML
if (!this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your points and lollipops! (At least " + formatWhole(tmp[this.layer].nextAt) + " points)"
if (this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" + formatWhole(tmp[this.layer].resetGain) + "</b> Farm Points in exchange for all of your points and lollipops! (You'll get another one at " + formatWhole(tmp[this.layer].nextAtDisp) + " points)"
},
getResetGain() {
return getResetGain(this.layer, useType = "static")
},
getNextAt(canMax=false) { //
return getNextAt(this.layer, canMax, useType = "static")
},
canReset() {
return tmp[this.layer].baseAmount.gte(tmp[this.layer].nextAt)
},
// This is also non minimal, a Clickable!
clickables: {
masterButtonPress() {
if (getClickableState(this.layer, 11) == "Borkened...")
player[this.layer].clickables[11] = "Start"
},
masterButtonText() {return (getClickableState(this.layer, 11) == "Borkened...") ? "Fix the clickable!" : "Does nothing"}, // Text on Respec button, optional
11: {
title: "Clicky clicky!", // Optional, displayed at the top in a larger font
display() { // Everything else displayed in the buyable button after the title
let data = getClickableState(this.layer, this.id)
return "Current state:<br>" + data
},
unlocked() { return player[this.layer].unlocked },
canClick() {
return getClickableState(this.layer, this.id) !== "Borkened..."},
onClick() {
switch(getClickableState(this.layer, this.id)){
case "Start":
player[this.layer].clickables[this.id] = "A new state!"
break;
case "A new state!":
player[this.layer].clickables[this.id] = "Keep going!"
break;
case "Keep going!":
player[this.layer].clickables[this.id] = "Maybe that's a bit too far..."
break;
case "Maybe that's a bit too far...":
makeParticles(coolParticle, 4)
player[this.layer].clickables[this.id] = "Borkened..."
break;
default:
player[this.layer].clickables[this.id] = "Start"
break;
}
},
onHold(){
console.log("Clickkkkk...")
},
style() {
switch(getClickableState(this.layer, this.id)){
case "Start":
return {'background-color': 'green'}
break;
case "A new state!":
return {'background-color': 'yellow'}
break;
case "Keep going!":
return {'background-color': 'orange'}
break;
case "Maybe that's a bit too far...":
return {'background-color': 'red'}
break;
default:
return {}
break;
}},
},
},
},
)
const coolParticle = {
image:"options_wheel.png",
spread: 20,
gravity: 2,
time: 3,
rotation (id) {
return 20 * (id - 1.5) + (Math.random() - 0.5) * 10
},
dir() {
return (Math.random() - 0.5) * 10
},
speed() {
return (Math.random() + 1.2) * 8
},
onClick() {
console.log("yay")
},
onMouseOver() {
console.log("hi")
},
onMouseLeave() {
console.log("bye")
},
update() {
//this.width += 1
//setDir(this, 135)
},
layer: 'f',
}

665
js/components.js Normal file
View file

@ -0,0 +1,665 @@
var app;
function loadVue() {
// data = a function returning the content (actually HTML)
Vue.component('display-text', {
props: ['layer', 'data'],
template: `
<span class="instant" v-html="data"></span>
`
})
// data = a function returning the content (actually HTML)
Vue.component('raw-html', {
props: ['layer', 'data'],
template: `
<span class="instant" v-html="data"></span>
`
})
// Blank space, data = optional height in px or pair with width and height in px
Vue.component('blank', {
props: ['layer', 'data'],
template: `
<div class = "instant">
<div class = "instant" v-if="!data" v-bind:style="{'width': '8px', 'height': '17px'}"></div>
<div class = "instant" v-else-if="Array.isArray(data)" v-bind:style="{'width': data[0], 'height': data[1]}"></div>
<div class = "instant" v-else v-bind:style="{'width': '8px', 'height': data}"><br></div>
</div>
`
})
// Displays an image, data is the URL
Vue.component('display-image', {
props: ['layer', 'data'],
template: `
<img class="instant" v-bind:src= "data" v-bind:alt= "data">
`
})
// data = an array of Components to be displayed in a row
Vue.component('row', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `
<div class="upgTable instant">
<div class="upgRow">
<div v-for="(item, index) in data">
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp[layer].componentStyles[item]" :key="key + '-' + index"></div>
<div v-else-if="item.length==3" v-bind:style="[tmp[layer].componentStyles[item[0]], (item[2] ? item[2] : {})]" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" :key="key + '-' + index"></div>
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" v-bind:style="tmp[layer].componentStyles[item[0]]" :key="key + '-' + index"></div>
</div>
</div>
</div>
`
})
// data = an array of Components to be displayed in a column
Vue.component('column', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `
<div class="upgTable instant">
<div class="upgCol">
<div v-for="(item, index) in data">
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp[layer].componentStyles[item]" :key="key + '-' + index"></div>
<div v-else-if="item.length==3" v-bind:style="[tmp[layer].componentStyles[item[0]], (item[2] ? item[2] : {})]" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" :key="key + '-' + index"></div>
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" v-bind:style="tmp[layer].componentStyles[item[0]]" :key="key + '-' + index"></div>
</div>
</div>
</div>
`
})
// data [other layer, tabformat for within proxy]
Vue.component('layer-proxy', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `
<div>
<column :layer="data[0]" :data="data[1]" :key="key + 'col'"></column>
</div>
`
})
Vue.component('infobox', {
props: ['layer', 'data'],
template: `
<div class="story instant" v-if="tmp[layer].infoboxes && tmp[layer].infoboxes[data]!== undefined && tmp[layer].infoboxes[data].unlocked" v-bind:style="[{'border-color': tmp[layer].color, 'border-radius': player.infoboxes[layer][data] ? 0 : '8px'}, tmp[layer].infoboxes[data].style]">
<button class="story-title" v-bind:style="[{'background-color': tmp[layer].color}, tmp[layer].infoboxes[data].titleStyle]"
v-on:click="player.infoboxes[layer][data] = !player.infoboxes[layer][data]">
<span class="story-toggle">{{player.infoboxes[layer][data] ? "+" : "-"}}</span>
<span v-html="tmp[layer].infoboxes[data].title ? tmp[layer].infoboxes[data].title : (tmp[layer].name)"></span>
</button>
<div v-if="!player.infoboxes[layer][data]" class="story-text" v-bind:style="tmp[layer].infoboxes[data].bodyStyle">
<span v-html="tmp[layer].infoboxes[data].body ? tmp[layer].infoboxes[data].body : 'Blah'"></span>
</div>
</div>
`
})
// Data = width in px, by default fills the full area
Vue.component('h-line', {
props: ['layer', 'data'],
template:`
<hr class="instant" v-bind:style="data ? {'width': data} : {}" class="hl">
`
})
// Data = height in px, by default is bad
Vue.component('v-line', {
props: ['layer', 'data'],
template: `
<div class="instant" v-bind:style="data ? {'height': data} : {}" class="vl2"></div>
`
})
Vue.component('challenges', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].challenges" class="upgTable">
<div v-for="row in (data === undefined ? tmp[layer].challenges.rows : data)" class="upgRow">
<div v-for="col in tmp[layer].challenges.cols">
<challenge v-if="tmp[layer].challenges[row*10+col]!== undefined && tmp[layer].challenges[row*10+col].unlocked" :layer = "layer" :data = "row*10+col" v-bind:style="tmp[layer].componentStyles.challenge"></challenge>
</div>
</div>
</div>
`
})
// data = id
Vue.component('challenge', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].challenges && tmp[layer].challenges[data]!== undefined && tmp[layer].challenges[data].unlocked && !(options.hideChallenges && maxedChallenge(layer, [data]) && !inChallenge(layer, [data]))"
v-bind:class="['challenge', challengeStyle(layer, data), player[layer].activeChallenge === data ? 'resetNotify' : '']" v-bind:style="tmp[layer].challenges[data].style">
<br><h3 v-html="tmp[layer].challenges[data].name"></h3><br><br>
<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp[layer].color}" v-on:click="startChallenge(layer, data)">{{challengeButtonText(layer, data)}}</button><br><br>
<span v-if="layers[layer].challenges[data].fullDisplay" v-html="run(layers[layer].challenges[data].fullDisplay, layers[layer].challenges[data])"></span>
<span v-else>
<span v-html="tmp[layer].challenges[data].challengeDescription"></span><br>
Goal: <span v-if="tmp[layer].challenges[data].goalDescription" v-html="tmp[layer].challenges[data].goalDescription"></span><span v-else>{{format(tmp[layer].challenges[data].goal)}} {{tmp[layer].challenges[data].currencyDisplayName ? tmp[layer].challenges[data].currencyDisplayName : modInfo.pointsName}}</span><br>
Reward: <span v-html="tmp[layer].challenges[data].rewardDescription"></span><br>
<span v-if="layers[layer].challenges[data].rewardDisplay!==undefined">Currently: <span v-html="(tmp[layer].challenges[data].rewardDisplay) ? (run(layers[layer].challenges[data].rewardDisplay, layers[layer].challenges[data])) : format(tmp[layer].challenges[data].rewardEffect)"></span></span>
</span>
<node-mark :layer='layer' :data='tmp[layer].challenges[data].marked' :offset="20" :scale="1.5"></node-mark></span>
</div>
`
})
Vue.component('upgrades', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].upgrades" class="upgTable">
<div v-for="row in (data === undefined ? tmp[layer].upgrades.rows : data)" class="upgRow">
<div v-for="col in tmp[layer].upgrades.cols"><div v-if="tmp[layer].upgrades[row*10+col]!== undefined && tmp[layer].upgrades[row*10+col].unlocked" class="upgAlign">
<upgrade :layer = "layer" :data = "row*10+col" v-bind:style="tmp[layer].componentStyles.upgrade"></upgrade>
</div></div>
</div>
<br>
</div>
`
})
// data = id
Vue.component('upgrade', {
props: ['layer', 'data'],
template: `
<button v-if="tmp[layer].upgrades && tmp[layer].upgrades[data]!== undefined && tmp[layer].upgrades[data].unlocked" :id='"upgrade-" + layer + "-" + data' v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, tooltipBox: 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="layers[layer].upgrades[data].fullDisplay" v-html="run(layers[layer].upgrades[data].fullDisplay, layers[layer].upgrades[data])"></span>
<span v-else>
<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="layers[layer].upgrades[data].effectDisplay"><br>Currently: <span v-html="run(layers[layer].upgrades[data].effectDisplay, layers[layer].upgrades[data])"></span></span>
<br><br>Cost: {{ formatWhole(tmp[layer].upgrades[data].cost) }} {{(tmp[layer].upgrades[data].currencyDisplayName ? tmp[layer].upgrades[data].currencyDisplayName : tmp[layer].resource)}}
</span>
<tooltip v-if="tmp[layer].upgrades[data].tooltip" :text="tmp[layer].upgrades[data].tooltip"></tooltip>
</button>
`
})
Vue.component('milestones', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].milestones">
<table>
<tr v-for="id in (data === undefined ? Object.keys(tmp[layer].milestones) : data)" v-if="tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked && milestoneShown(layer, id)">
<milestone :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles.milestone"></milestone>
</tr>
</table>
<br>
</div>
`
})
// data = id
Vue.component('milestone', {
props: ['layer', 'data'],
template: `
<td v-if="tmp[layer].milestones && tmp[layer].milestones[data]!== undefined && milestoneShown(layer, data) && tmp[layer].milestones[data].unlocked" v-bind:style="[tmp[layer].milestones[data].style]" v-bind:class="{milestone: !hasMilestone(layer, data), tooltipBox: true, milestoneDone: hasMilestone(layer, data)}">
<h3 v-html="tmp[layer].milestones[data].requirementDescription"></h3><br>
<span v-html="run(layers[layer].milestones[data].effectDescription, layers[layer].milestones[data])"></span><br>
<tooltip v-if="tmp[layer].milestones[data].tooltip" :text="tmp[layer].milestones[data].tooltip"></tooltip>
<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>
`
})
Vue.component('toggle', {
props: ['layer', 'data'],
template: `
<button class="smallUpg can" v-bind:style="{'background-color': tmp[data[0]].color}" v-on:click="toggleAuto(data)">{{player[data[0]][data[1]]?"ON":"OFF"}}</button>
`
})
Vue.component('prestige-button', {
props: ['layer', 'data'],
template: `
<button v-if="(tmp[layer].type !== 'none')" v-bind:class="{ [layer]: true, reset: true, locked: !tmp[layer].canReset, can: tmp[layer].canReset}"
v-bind:style="[tmp[layer].canReset ? {'background-color': tmp[layer].color} : {}, tmp[layer].componentStyles['prestige-button']]"
v-html="prestigeButtonText(layer)" v-on:click="doReset(layer)">
</button>
`
})
// Displays the main resource for the layer
Vue.component('main-display', {
props: ['layer', 'data'],
template: `
<div><span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': tmp[layer].color, 'text-shadow': '0px 0px 10px ' + tmp[layer].color}">{{data ? format(player[layer].points, data) : formatWhole(player[layer].points)}}</h2> {{tmp[layer].resource}}<span v-if="layers[layer].effectDescription">, <span v-html="run(layers[layer].effectDescription, layers[layer])"></span></span><br><br></div>
`
})
// Displays the base resource for the layer, as well as the best and total values for the layer's currency, if tracked
Vue.component('resource-display', {
props: ['layer'],
template: `
<div style="margin-top: -13px">
<span v-if="tmp[layer].baseAmount"><br>You have {{formatWhole(tmp[layer].baseAmount)}} {{tmp[layer].baseResource}}</span>
<span v-if="tmp[layer].passiveGeneration"><br>You are gaining {{format(tmp[layer].resetGain.times(tmp[layer].passiveGeneration))}} {{tmp[layer].resource}} per second</span>
<br><br>
<span v-if="tmp[layer].showBest">Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
<span v-if="tmp[layer].showTotal">You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}<br></span>
</div>
`
})
Vue.component('buyables', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].buyables" class="upgTable">
<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 (data === undefined ? tmp[layer].buyables.rows : data)" 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"></buyable>
</div></div>
<br>
</div>
</div>
`
})
Vue.component('buyable', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].buyables && tmp[layer].buyables[data]!== undefined && tmp[layer].buyables[data].unlocked" style="display: grid">
<button v-bind:class="{ buyable: true, tooltipBox: true, can: tmp[layer].buyables[data].canBuy, locked: !tmp[layer].buyables[data].canBuy, bought: player[layer].buyables[data].gte(tmp[layer].buyables[data].purchaseLimit)}"
v-bind:style="[tmp[layer].buyables[data].canBuy ? {'background-color': tmp[layer].color} : {}, tmp[layer].componentStyles.buyable, tmp[layer].buyables[data].style]"
v-on:click="if(!interval) buyBuyable(layer, data)" :id='"buyable-" + layer + "-" + data' @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
<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="run(layers[layer].buyables[data].display, layers[layer].buyables[data])"></span>
<node-mark :layer='layer' :data='tmp[layer].buyables[data].marked'></node-mark>
<tooltip v-if="tmp[layer].buyables[data].tooltip" :text="tmp[layer].buyables[data].tooltip"></tooltip>
</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>
`,
data() { return { interval: false, time: 0,}},
methods: {
start() {
if (!this.interval) {
this.interval = setInterval((function() {
if(this.time >= 5)
buyBuyable(this.layer, this.data)
this.time = this.time+1
}).bind(this), 50)}
},
stop() {
clearInterval(this.interval)
this.interval = false
this.time = 0
}
},
})
Vue.component('respec-button', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].buyables && tmp[layer].buyables.respec && !(tmp[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)">
<div class="tooltipBox respecCheckbox"><input type="checkbox" v-model="player[layer].noRespecConfirm" ><tooltip v-bind:text="'Disable respec confirmation'"></tooltip></div>
<button v-on:click="respecBuyables(layer)" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }" style="margin-right: 18px">{{tmp[layer].buyables.respecText ? tmp[layer].buyables.respecText : "Respec"}}</button>
</div>
`
})
Vue.component('clickables', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[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 (data === undefined ? tmp[layer].clickables.rows : data)" 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" v-bind:style="tmp[layer].componentStyles.clickable"></clickable>
</div></div>
<br>
</div>
</div>
`
})
// data = id of clickable
Vue.component('clickable', {
props: ['layer', 'data'],
template: `
<button
v-if="tmp[layer].clickables && tmp[layer].clickables[data]!== undefined && tmp[layer].clickables[data].unlocked"
v-bind:class="{ upg: true, tooltipBox: 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} : {}, tmp[layer].clickables[data].style]"
v-on:click="if(!interval) clickClickable(layer, data)" :id='"clickable-" + layer + "-" + data' @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
<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="run(layers[layer].clickables[data].display, layers[layer].clickables[data])"></span>
<node-mark :layer='layer' :data='tmp[layer].clickables[data].marked'></node-mark>
<tooltip v-if="tmp[layer].clickables[data].tooltip" :text="tmp[layer].clickables[data].tooltip"></tooltip>
</button>
`,
data() { return { interval: false, time: 0,}},
methods: {
start() {
if (!this.interval && layers[this.layer].clickables[this.data].onHold) {
this.interval = setInterval((function() {
let c = layers[this.layer].clickables[this.data]
if(this.time >= 5 && run(c.canClick, c)) {
run(c.onHold, c)
}
this.time = this.time+1
}).bind(this), 50)}
},
stop() {
clearInterval(this.interval)
this.interval = false
this.time = 0
}
},
})
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="run(tmp[layer].clickables.masterButtonPress, tmp[layer].clickables)" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].clickables.masterButtonText ? tmp[layer].clickables.masterButtonText : "Click me!"}}</button>
`
})
// data = optionally, array of rows for the grid to show
Vue.component('grid', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].grid" class="upgTable">
<div v-for="row in (data === undefined ? tmp[layer].grid.rows : data)" class="upgRow">
<div v-for="col in tmp[layer].grid.cols"><div v-if="run(layers[layer].grid.getUnlocked, layers[layer].grid, row*100+col)"
class="upgAlign" v-bind:style="{'margin': '1px', 'height': 'inherit',}">
<gridable :layer = "layer" :data = "row*100+col" v-bind:style="tmp[layer].componentStyles.gridable"></gridable>
</div></div>
<br>
</div>
</div>
`
})
Vue.component('gridable', {
props: ['layer', 'data'],
template: `
<button
v-if="tmp[layer].grid && player[layer].grid[data]!== undefined && run(layers[layer].grid.getUnlocked, layers[layer].grid, data)"
v-bind:class="{ tile: true, can: canClick, locked: !canClick, tooltipBox: true,}"
v-bind:style="[canClick ? {'background-color': tmp[layer].color} : {}, gridRun(layer, 'getStyle', player[this.layer].grid[this.data], this.data)]"
v-on:click="clickGrid(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
<span v-if= "layers[layer].grid.getTitle"><h3 v-html="gridRun(this.layer, 'getTitle', player[this.layer].grid[this.data], this.data)"></h3><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="gridRun(this.layer, 'getDisplay', player[this.layer].grid[this.data], this.data)"></span>
<tooltip v-if="layers[layer].grid.getTooltip" :text="gridRun(this.layer, 'getTooltip', player[this.layer].grid[this.data], this.data)"></tooltip>
</button>
`,
data() { return { interval: false, time: 0,}},
computed: {
canClick() {
return gridRun(this.layer, 'getCanClick', player[this.layer].grid[this.data], this.data)}
},
methods: {
start() {
if (!this.interval && layers[this.layer].grid.onHold) {
this.interval = setInterval((function() {
if(this.time >= 5 && gridRun(this.layer, 'getCanClick', player[this.layer].grid[this.data], this.data)) {
gridRun(this.layer, 'onHold', player[this.layer].grid[this.data], this.data) }
this.time = this.time+1
}).bind(this), 50)}
},
stop() {
clearInterval(this.interval)
this.interval = false
this.time = 0
}
},
})
// data = id of microtab family
Vue.component('microtabs', {
props: ['layer', 'data'],
computed: {
currentTab() {return player.subtabs[layer][data]}
},
template: `
<div v-if="tmp[layer].microtabs" :style="{'border-style': 'solid'}">
<div class="upgTable instant">
<tab-buttons :layer="layer" :data="tmp[layer].microtabs[data]" :name="data" v-bind:style="tmp[layer].componentStyles['tab-buttons']"></tab-buttons>
</div>
<layer-tab v-if="tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" :layer="tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" :embedded="true"></layer-tab>
<column v-else v-bind:style="tmp[layer].microtabs[data][player.subtabs[layer][data]].style" :layer="layer" :data="tmp[layer].microtabs[data][player.subtabs[layer][data]].content"></column>
</div>
`
})
// data = id of the bar
Vue.component('bar', {
props: ['layer', 'data'],
computed: {
style() {return constructBarStyle(this.layer, this.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, style.dims, {'display': 'table'}]">
<div class = "overlayTextContainer barBorder" v-bind:style="[tmp[layer].bars[data].borderStyle, style.dims]">
<span class = "overlayText" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v-html="run(layers[layer].bars[data].display, layers[layer].bars[data])"></span>
</div>
<div class ="barBG barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, style.dims]">
<div class ="fill" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, style.fillDims]"></div>
</div>
</div></div>
`
})
Vue.component('achievements', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].achievements" class="upgTable">
<div v-for="row in (data === undefined ? tmp[layer].achievements.rows : data)" 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="tmp[layer].achievements && tmp[layer].achievements[data]!== undefined && tmp[layer].achievements[data].unlocked" v-bind:class="{ [layer]: true, achievement: true, tooltipBox:true, locked: !hasAchievement(layer, data), bought: hasAchievement(layer, data)}"
v-bind:style="achievementStyle(layer, data)">
<tooltip :text="
(tmp[layer].achievements[data].tooltip == '') ? false : 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'))
"></tooltip>
<span v-if= "tmp[layer].achievements[data].name"><br><h3 v-bind:style="tmp[layer].achievements[data].textStyle" v-html="tmp[layer].achievements[data].name"></h3><br></span>
</div>
`
})
// Data is an array with the structure of the tree
Vue.component('tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `<div>
<span class="upgRow" v-for="(row, r) in data"><table>
<span v-for="(node, id) in row" style = "{width: 0px}">
<tree-node :layer='node' :prev='layer' :abb='tmp[node].symbol' :key="key + '-' + r + '-' + id"></tree-node>
</span>
<tr><table><button class="treeNode hidden"></button></table></tr>
</span></div>
`
})
// Data is an array with the structure of the tree
Vue.component('upgrade-tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `<thing-tree :layer="layer" :data = "data" :type = "'upgrade'"></thing-tree>`
})
// Data is an array with the structure of the tree
Vue.component('buyable-tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `<thing-tree :layer="layer" :data = "data" :type = "'buyable'"></thing-tree>`
})
// Data is an array with the structure of the tree
Vue.component('clickable-tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `<thing-tree :layer="layer" :data = "data" :type = "'clickable'"></thing-tree>`
})
Vue.component('thing-tree', {
props: ['layer', 'data', 'type'],
computed: {
key() {return this.$vnode.key}
},
template: `<div>
<span class="upgRow" v-for="(row, r) in data"><table>
<span v-for="id in row" style = "{width: 0px; height: 0px;}" v-if="tmp[layer][type+'s'][id]!== undefined && tmp[layer][type+'s'][id].unlocked" class="upgAlign">
<div v-bind:is="type" :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles[type]" class = "treeThing"></div>
</span>
<tr><table><button class="treeNode hidden"></button></table></tr>
</span></div>
`
})
// Updates the value in player[layer][data]
Vue.component('text-input', {
props: ['layer', 'data'],
template: `
<input class="instant" :id="'input-' + layer + '-' + data" :value="player[layer][data].toString()" v-on:focus="focused(true)" v-on:blur="focused(false)"
v-on:change="player[layer][data] = toValue(document.getElementById('input-' + layer + '-' + data).value, player[layer][data])">
`
})
// Updates the value in player[layer][data][0]
Vue.component('slider', {
props: ['layer', 'data'],
template: `
<div class="tooltipBox">
<tooltip :text="player[layer][data[0]]"></tooltip><input type="range" v-model="player[layer][data[0]]" :min="data[1]" :max="data[2]"></div>
`
})
// Updates the value in player[layer][data[0]], options are an array in data[1]
Vue.component('drop-down', {
props: ['layer', 'data'],
template: `
<select v-model="player[layer][data[0]]">
<option v-for="item in data[1]" v-bind:value="item">{{item}}</option>
</select>
`
})
// These are for buyables, data is the id of the corresponding buyable
Vue.component('sell-one', {
props: ['layer', 'data'],
template: `
<button v-if="tmp[layer].buyables && tmp[layer].buyables[data].sellOne && !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)" v-on:click="run(tmp[layer].buyables[data].sellOne, tmp[layer].buyables[data])"
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="tmp[layer].buyables && tmp[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)" v-on:click="run(tmp[layer].buyables[data].sellAll, tmp[layer].buyables[data])"
v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.sellAllText ? tmp[layer].buyables.sellAllText : "Sell All"}}</button>
`
})
// SYSTEM COMPONENTS
Vue.component('node-mark', systemComponents['node-mark'])
Vue.component('tab-buttons', systemComponents['tab-buttons'])
Vue.component('tree-node', systemComponents['tree-node'])
Vue.component('layer-tab', systemComponents['layer-tab'])
Vue.component('overlay-head', systemComponents['overlay-head'])
Vue.component('info-tab', systemComponents['info-tab'])
Vue.component('options-tab', systemComponents['options-tab'])
Vue.component('tooltip', systemComponents['tooltip'])
Vue.component('particle', systemComponents['particle'])
Vue.component('bg', systemComponents['bg'])
app = new Vue({
el: "#app",
data: {
player,
tmp,
options,
Decimal,
format,
formatWhole,
formatTime,
formatSmall,
focused,
getThemeName,
layerunlocked,
doReset,
buyUpg,
buyUpgrade,
startChallenge,
milestoneShown,
keepGoing,
hasUpgrade,
hasMilestone,
hasAchievement,
hasChallenge,
maxedChallenge,
getBuyableAmount,
getClickableState,
inChallenge,
canAffordUpgrade,
canBuyBuyable,
canCompleteChallenge,
subtabShouldNotify,
subtabResetNotify,
challengeStyle,
challengeButtonText,
constructBarStyle,
constructParticleStyle,
VERSION,
LAYERS,
hotkeys,
activePopups,
particles,
mouseX,
mouseY,
shiftDown,
ctrlDown,
run,
gridRun,
},
})
}

430
js/game.js Normal file
View file

@ -0,0 +1,430 @@
var player;
var needCanvasUpdate = true;
// Don't change this
const TMT_VERSION = {
tmtNum: "2.6.6.2",
tmtName: "Fixed Reality"
}
function getResetGain(layer, useType = null) {
let type = useType
if (!useType){
type = tmp[layer].type
if (layers[layer].getResetGain !== undefined)
return layers[layer].getResetGain()
}
if(tmp[layer].type == "none")
return new Decimal (0)
if (tmp[layer].gainExp.eq(0)) return decimalZero
if (type=="static") {
if ((!tmp[layer].canBuyMax) || tmp[layer].baseAmount.lt(tmp[layer].requires)) return decimalOne
let gain = tmp[layer].baseAmount.div(tmp[layer].requires).div(tmp[layer].gainMult).max(1).log(tmp[layer].base).times(tmp[layer].gainExp).pow(Decimal.pow(tmp[layer].exponent, -1))
gain = gain.times(tmp[layer].directMult)
return gain.floor().sub(player[layer].points).add(1).max(1);
} else if (type=="normal"){
if (tmp[layer].baseAmount.lt(tmp[layer].requires)) return decimalZero
let gain = tmp[layer].baseAmount.div(tmp[layer].requires).pow(tmp[layer].exponent).times(tmp[layer].gainMult).pow(tmp[layer].gainExp)
if (gain.gte(tmp[layer].softcap)) gain = gain.pow(tmp[layer].softcapPower).times(tmp[layer].softcap.pow(decimalOne.sub(tmp[layer].softcapPower)))
gain = gain.times(tmp[layer].directMult)
return gain.floor().max(0);
} else if (type=="custom"){
return layers[layer].getResetGain()
} else {
return decimalZero
}
}
function getNextAt(layer, canMax=false, useType = null) {
let type = useType
if (!useType) {
type = tmp[layer].type
if (layers[layer].getNextAt !== undefined)
return layers[layer].getNextAt(canMax)
}
if(tmp[layer].type == "none")
return new Decimal (Infinity)
if (tmp[layer].gainMult.lte(0)) return new Decimal(Infinity)
if (tmp[layer].gainExp.lte(0)) return new Decimal(Infinity)
if (type=="static")
{
if (!tmp[layer].canBuyMax) canMax = false
let amt = player[layer].points.plus((canMax&&tmp[layer].baseAmount.gte(tmp[layer].nextAt))?tmp[layer].resetGain:0).div(tmp[layer].directMult)
let extraCost = Decimal.pow(tmp[layer].base, amt.pow(tmp[layer].exponent).div(tmp[layer].gainExp)).times(tmp[layer].gainMult)
let cost = extraCost.times(tmp[layer].requires).max(tmp[layer].requires)
if (tmp[layer].roundUpCost) cost = cost.ceil()
return cost;
} else if (type=="normal"){
let next = tmp[layer].resetGain.add(1).div(tmp[layer].directMult)
if (next.gte(tmp[layer].softcap)) next = next.div(tmp[layer].softcap.pow(decimalOne.sub(tmp[layer].softcapPower))).pow(decimalOne.div(tmp[layer].softcapPower))
next = next.root(tmp[layer].gainExp).div(tmp[layer].gainMult).root(tmp[layer].exponent).times(tmp[layer].requires).max(tmp[layer].requires)
if (tmp[layer].roundUpCost) next = next.ceil()
return next;
} else if (type=="custom"){
return layers[layer].getNextAt(canMax)
} else {
return decimalZero
}}
function softcap(value, cap, power = 0.5) {
if (value.lte(cap)) return value
else
return value.pow(power).times(cap.pow(decimalOne.sub(power)))
}
// Return true if the layer should be highlighted. By default checks for upgrades only.
function shouldNotify(layer){
for (id in tmp[layer].upgrades){
if (isPlainObject(layers[layer].upgrades[id])){
if (canAffordUpgrade(layer, id) && !hasUpgrade(layer, id) && tmp[layer].upgrades[id].unlocked){
return true
}
}
}
if (player[layer].activeChallenge && canCompleteChallenge(layer, player[layer].activeChallenge)) {
return true
}
if (tmp[layer].shouldNotify)
return true
if (isPlainObject(tmp[layer].tabFormat)) {
for (subtab in tmp[layer].tabFormat){
if (subtabShouldNotify(layer, 'mainTabs', subtab)) {
tmp[layer].trueGlowColor = tmp[layer].tabFormat[subtab].glowColor || defaultGlow
return true
}
}
}
for (family in tmp[layer].microtabs) {
for (subtab in tmp[layer].microtabs[family]){
if (subtabShouldNotify(layer, family, subtab)) {
tmp[layer].trueGlowColor = tmp[layer].microtabs[family][subtab].glowColor
return true
}
}
}
return false
}
function canReset(layer)
{
if (layers[layer].canReset!== undefined)
return run(layers[layer].canReset, layers[layer])
else if(tmp[layer].type == "normal")
return tmp[layer].baseAmount.gte(tmp[layer].requires)
else if(tmp[layer].type== "static")
return tmp[layer].baseAmount.gte(tmp[layer].nextAt)
else
return false
}
function rowReset(row, layer) {
for (lr in ROW_LAYERS[row]){
if(layers[lr].doReset) {
if (!isNaN(row)) Vue.set(player[lr], "activeChallenge", null) // Exit challenges on any row reset on an equal or higher row
run(layers[lr].doReset, layers[lr], layer)
}
else
if(tmp[layer].row > tmp[lr].row && !isNaN(row)) layerDataReset(lr)
}
}
function layerDataReset(layer, keep = []) {
let storedData = {unlocked: player[layer].unlocked, forceTooltip: player[layer].forceTooltip, noRespecConfirm: player[layer].noRespecConfirm, prevTab:player[layer].prevTab} // Always keep these
for (thing in keep) {
if (player[layer][keep[thing]] !== undefined)
storedData[keep[thing]] = player[layer][keep[thing]]
}
Vue.set(player[layer], "buyables", getStartBuyables(layer))
Vue.set(player[layer], "clickables", getStartClickables(layer))
Vue.set(player[layer], "challenges", getStartChallenges(layer))
Vue.set(player[layer], "grid", getStartGrid(layer))
layOver(player[layer], getStartLayerData(layer))
player[layer].upgrades = []
player[layer].milestones = []
player[layer].achievements = []
for (thing in storedData) {
player[layer][thing] =storedData[thing]
}
}
function addPoints(layer, gain) {
player[layer].points = player[layer].points.add(gain).max(0)
if (player[layer].best) player[layer].best = player[layer].best.max(player[layer].points)
if (player[layer].total) player[layer].total = player[layer].total.add(gain)
}
function generatePoints(layer, diff) {
addPoints(layer, tmp[layer].resetGain.times(diff))
}
function doReset(layer, force=false) {
if (tmp[layer].type == "none") return
let row = tmp[layer].row
if (!force) {
if (tmp[layer].canReset === false) return;
if (tmp[layer].baseAmount.lt(tmp[layer].requires)) return;
let gain = tmp[layer].resetGain
if (tmp[layer].type=="static") {
if (tmp[layer].baseAmount.lt(tmp[layer].nextAt)) return;
gain =(tmp[layer].canBuyMax ? gain : 1)
}
if (layers[layer].onPrestige)
run(layers[layer].onPrestige, layers[layer], gain)
addPoints(layer, gain)
updateMilestones(layer)
updateAchievements(layer)
if (!player[layer].unlocked) {
player[layer].unlocked = true;
needCanvasUpdate = true;
if (tmp[layer].increaseUnlockOrder){
lrs = tmp[layer].increaseUnlockOrder
for (lr in lrs)
if (!player[lrs[lr]].unlocked) player[lrs[lr]].unlockOrder++
}
}
}
if (run(layers[layer].resetsNothing, layers[layer])) return
tmp[layer].baseAmount = decimalZero // quick fix
for (layerResetting in layers) {
if (row >= layers[layerResetting].row && (!force || layerResetting != layer)) completeChallenge(layerResetting)
}
player.points = (row == 0 ? decimalZero : getStartPoints())
for (let x = row; x >= 0; x--) rowReset(x, layer)
for (r in OTHER_LAYERS){
rowReset(r, layer)
}
player[layer].resetTime = 0
updateTemp()
updateTemp()
}
function resetRow(row) {
if (prompt('Are you sure you want to reset this row? It is highly recommended that you wait until the end of your current run before doing this! Type "I WANT TO RESET THIS" to confirm')!="I WANT TO RESET THIS") return
let pre_layers = ROW_LAYERS[row-1]
let layers = ROW_LAYERS[row]
let post_layers = ROW_LAYERS[row+1]
rowReset(row+1, post_layers[0])
doReset(pre_layers[0], true)
for (let layer in layers) {
player[layer].unlocked = false
if (player[layer].unlockOrder) player[layer].unlockOrder = 0
}
player.points = getStartPoints()
updateTemp();
resizeCanvas();
}
function startChallenge(layer, x) {
let enter = false
if (!player[layer].unlocked || !tmp[layer].challenges[x].unlocked) return
if (player[layer].activeChallenge == x) {
completeChallenge(layer, x)
Vue.set(player[layer], "activeChallenge", null)
} else {
enter = true
}
doReset(layer, true)
if(enter) {
Vue.set(player[layer], "activeChallenge", x)
run(layers[layer].challenges[x].onEnter, layers[layer].challenges[x])
}
updateChallengeTemp(layer)
}
function canCompleteChallenge(layer, x)
{
if (x != player[layer].activeChallenge) return
let challenge = tmp[layer].challenges[x]
if (challenge.canComplete !== undefined) return challenge.canComplete
if (challenge.currencyInternalName){
let name = challenge.currencyInternalName
if (challenge.currencyLocation){
return !(challenge.currencyLocation[name].lt(challenge.goal))
}
else if (challenge.currencyLayer){
let lr = challenge.currencyLayer
return !(player[lr][name].lt(challenge.goal))
}
else {
return !(player[name].lt(challenge.goal))
}
}
else {
return !(player.points.lt(challenge.goal))
}
}
function completeChallenge(layer, x) {
var x = player[layer].activeChallenge
if (!x) return
let completions = canCompleteChallenge(layer, x)
if (!completions){
Vue.set(player[layer], "activeChallenge", null)
run(layers[layer].challenges[x].onExit, layers[layer].challenges[x])
return
}
if (player[layer].challenges[x] < tmp[layer].challenges[x].completionLimit) {
needCanvasUpdate = true
player[layer].challenges[x] += completions
player[layer].challenges[x] = Math.min(player[layer].challenges[x], tmp[layer].challenges[x].completionLimit)
if (layers[layer].challenges[x].onComplete) run(layers[layer].challenges[x].onComplete, layers[layer].challenges[x])
}
Vue.set(player[layer], "activeChallenge", null)
run(layers[layer].challenges[x].onExit, layers[layer].challenges[x])
updateChallengeTemp(layer)
}
VERSION.withoutName = "v" + VERSION.num + (VERSION.pre ? " Pre-Release " + VERSION.pre : VERSION.pre ? " Beta " + VERSION.beta : "")
VERSION.withName = VERSION.withoutName + (VERSION.name ? ": " + VERSION.name : "")
function autobuyUpgrades(layer){
if (!tmp[layer].upgrades) return
for (id in tmp[layer].upgrades)
if (isPlainObject(tmp[layer].upgrades[id]) && (layers[layer].upgrades[id].canAfford === undefined || layers[layer].upgrades[id].canAfford() === true))
buyUpg(layer, id)
}
function gameLoop(diff) {
if (isEndgame() || tmp.gameEnded){
tmp.gameEnded = true
clearParticles()
}
if (isNaN(diff) || diff < 0) diff = 0
if (tmp.gameEnded && !player.keepGoing) {
diff = 0
//player.tab = "tmp.gameEnded"
clearParticles()
}
if (maxTickLength) {
let limit = maxTickLength()
if(diff > limit)
diff = limit
}
addTime(diff)
player.points = player.points.add(tmp.pointGen.times(diff)).max(0)
for (let x = 0; x <= maxRow; x++){
for (item in TREE_LAYERS[x]) {
let layer = TREE_LAYERS[x][item]
player[layer].resetTime += diff
if (tmp[layer].passiveGeneration) generatePoints(layer, diff*tmp[layer].passiveGeneration);
if (layers[layer].update) layers[layer].update(diff);
}
}
for (row in OTHER_LAYERS){
for (item in OTHER_LAYERS[row]) {
let layer = OTHER_LAYERS[row][item]
player[layer].resetTime += diff
if (tmp[layer].passiveGeneration) generatePoints(layer, diff*tmp[layer].passiveGeneration);
if (layers[layer].update) layers[layer].update(diff);
}
}
for (let x = maxRow; x >= 0; x--){
for (item in TREE_LAYERS[x]) {
let layer = TREE_LAYERS[x][item]
if (tmp[layer].autoPrestige && tmp[layer].canReset) doReset(layer);
if (layers[layer].automate) layers[layer].automate();
if (tmp[layer].autoUpgrade) autobuyUpgrades(layer)
}
}
for (row in OTHER_LAYERS){
for (item in OTHER_LAYERS[row]) {
let layer = OTHER_LAYERS[row][item]
if (tmp[layer].autoPrestige && tmp[layer].canReset) doReset(layer);
if (layers[layer].automate) layers[layer].automate();
player[layer].best = player[layer].best.max(player[layer].points)
if (tmp[layer].autoUpgrade) autobuyUpgrades(layer)
}
}
for (layer in layers){
if (layers[layer].milestones) updateMilestones(layer);
if (layers[layer].achievements) updateAchievements(layer)
}
}
function hardReset(resetOptions) {
if (!confirm("Are you sure you want to do this? You will lose all your progress!")) return
player = null
if(resetOptions) options = null
save(true);
window.location.reload();
}
var ticking = false
var interval = setInterval(function() {
if (player===undefined||tmp===undefined) return;
if (ticking) return;
if (tmp.gameEnded&&!player.keepGoing) return;
ticking = true
let now = Date.now()
let diff = (now - player.time) / 1e3
let trueDiff = diff
if (player.offTime !== undefined) {
if (player.offTime.remain > modInfo.offlineLimit * 3600) player.offTime.remain = modInfo.offlineLimit * 3600
if (player.offTime.remain > 0) {
let offlineDiff = Math.max(player.offTime.remain / 10, diff)
player.offTime.remain -= offlineDiff
diff += offlineDiff
}
if (!options.offlineProd || player.offTime.remain <= 0) player.offTime = undefined
}
if (player.devSpeed) diff *= player.devSpeed
player.time = now
if (needCanvasUpdate){ resizeCanvas();
needCanvasUpdate = false;
}
tmp.scrolled = document.getElementById('treeTab') && document.getElementById('treeTab').scrollTop > 30
updateTemp();
updateOomps(diff);
updateWidth()
updateTabFormats()
gameLoop(diff)
fixNaNs()
adjustPopupTime(trueDiff)
updateParticles(trueDiff)
ticking = false
}, 50)
setInterval(function() {needCanvasUpdate = true}, 500)

28
js/layers.js Normal file
View file

@ -0,0 +1,28 @@
addLayer("p", {
name: "prestige", // This is optional, only used in a few places, If absent it just uses the layer id.
symbol: "P", // This appears on the layer's node. Default is the id with the first letter capitalized
position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
startData() { return {
unlocked: true,
points: new Decimal(0),
}},
color: "#4BDC13",
requires: new Decimal(10), // Can be a function that takes requirement increases into account
resource: "prestige points", // Name of prestige currency
baseResource: "points", // Name of resource prestige is based on
baseAmount() {return player.points}, // Get the current amount of baseResource
type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
exponent: 0.5, // Prestige currency exponent
gainMult() { // Calculate the multiplier for main currency from bonuses
mult = new Decimal(1)
return mult
},
gainExp() { // Calculate the exponent on main currency from bonuses
return new Decimal(1)
},
row: 0, // Row the layer is in on the tree (0 is the first row)
hotkeys: [
{key: "p", description: "P: Reset for prestige points", onPress(){if (canReset(this.layer)) doReset(this.layer)}},
],
layerShown(){return true}
})

79
js/mod.js Normal file
View file

@ -0,0 +1,79 @@
let modInfo = {
name: "The ??? Tree",
id: "mymod",
author: "nobody",
pointsName: "points",
modFiles: ["layers.js", "tree.js"],
discordName: "",
discordLink: "",
initialStartPoints: new Decimal (10), // Used for hard resets and new players
offlineLimit: 1, // In hours
}
// Set your version in num and name
let VERSION = {
num: "0.0",
name: "Literally nothing",
}
let changelog = `<h1>Changelog:</h1><br>
<h3>v0.0</h3><br>
- Added things.<br>
- Added stuff.`
let winText = `Congratulations! You have reached the end and beaten this game, but for now...`
// If you add new functions anywhere inside of a layer, and those functions have an effect when called, add them here.
// (The ones here are examples, all official functions are already taken care of)
var doNotCallTheseFunctionsEveryTick = ["blowUpEverything"]
function getStartPoints(){
return new Decimal(modInfo.initialStartPoints)
}
// Determines if it should show points/sec
function canGenPoints(){
return true
}
// Calculate points/sec!
function getPointGen() {
if(!canGenPoints())
return new Decimal(0)
let gain = new Decimal(1)
return gain
}
// You can add non-layer related variables that should to into "player" and be saved here, along with default values
function addedPlayerData() { return {
}}
// Display extra things at the top of the page
var displayThings = [
]
// Determines when the game "ends"
function isEndgame() {
return player.points.gte(new Decimal("e280000000"))
}
// Less important things beyond this point!
// Style for the background, can be a function
var backgroundStyle = {
}
// You can change this if you have things that can be messed up by long tick lengths
function maxTickLength() {
return(3600) // Default is 1 hour which is just arbitrarily large
}
// Use this if you need to undo inflation from an older version. If the version is older than the version that fixed the issue,
// you can cap their current resources with this.
function fixOldSave(oldVersion){
}

2742
js/technical/break_eternity.js Normal file
View file

File diff suppressed because it is too large Load diff

88
js/technical/canvas.js Normal file
View file

@ -0,0 +1,88 @@
var canvas;
var ctx;
window.addEventListener("resize", (_=>resizeCanvas()));
function retrieveCanvasData() {
let treeCanv = document.getElementById("treeCanvas")
let treeTab = document.getElementById("treeTab")
if (treeCanv===undefined||treeCanv===null) return false;
canvas = treeCanv;
ctx = canvas.getContext("2d");
return true;
}
function resizeCanvas() {
if (!retrieveCanvasData()) return
canvas.width = 0;
canvas.height = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawTree();
}
var colors_theme
function drawTree() {
if (!retrieveCanvasData()) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (layer in layers){
if (tmp[layer].layerShown == true && tmp[layer].branches){
for (branch in tmp[layer].branches)
{
drawTreeBranch(layer, tmp[layer].branches[branch])
}
}
drawComponentBranches(layer, tmp[layer].upgrades, "upgrade-")
drawComponentBranches(layer, tmp[layer].buyables, "buyable-")
drawComponentBranches(layer, tmp[layer].clickables, "clickable-")
}
}
function drawComponentBranches(layer, data, prefix) {
for(id in data) {
if (data[id].branches) {
for (branch in data[id].branches)
{
drawTreeBranch(id, data[id].branches[branch], prefix + layer + "-")
}
}
}
}
function drawTreeBranch(num1, data, prefix) { // taken from Antimatter Dimensions & adjusted slightly
let num2 = data
let color_id = 1
let width = 15
if (Array.isArray(data)){
num2 = data[0]
color_id = data[1]
width = data[2] || width
}
if(typeof(color_id) == "number")
color_id = colors_theme[color_id]
if (prefix) {
num1 = prefix + num1
num2 = prefix + num2
}
if (document.getElementById(num1) == null || document.getElementById(num2) == null)
return
let start = document.getElementById(num1).getBoundingClientRect();
let end = document.getElementById(num2).getBoundingClientRect();
let x1 = start.left + (start.width / 2) + document.body.scrollLeft;
let y1 = start.top + (start.height / 2) + document.body.scrollTop;
let x2 = end.left + (end.width / 2) + document.body.scrollLeft;
let y2 = end.top + (end.height / 2) + document.body.scrollTop;
ctx.lineWidth = width;
ctx.beginPath();
ctx.strokeStyle = color_id
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}

195
js/technical/displays.js Normal file
View file

@ -0,0 +1,195 @@
function prestigeButtonText(layer) {
if (layers[layer].prestigeButtonText !== undefined)
return run(layers[layer].prestigeButtonText(), layers[layer])
if (tmp[layer].type == "normal")
return `${player[layer].points.lt(1e3) ? (tmp[layer].resetDescription !== undefined ? tmp[layer].resetDescription : "Reset for ") : ""}+<b>${formatWhole(tmp[layer].resetGain)}</b> ${tmp[layer].resource} ${tmp[layer].resetGain.lt(100) && player[layer].points.lt(1e3) ? `<br><br>Next at ${(tmp[layer].roundUpCost ? formatWhole(tmp[layer].nextAt) : format(tmp[layer].nextAt))} ${tmp[layer].baseResource}` : ""}`
if (tmp[layer].type == "static")
return `${tmp[layer].resetDescription !== undefined ? tmp[layer].resetDescription : "Reset for "}+<b>${formatWhole(tmp[layer].resetGain)}</b> ${tmp[layer].resource}<br><br>${player[layer].points.lt(30) ? (tmp[layer].baseAmount.gte(tmp[layer].nextAt) && (tmp[layer].canBuyMax !== undefined) && tmp[layer].canBuyMax ? "Next:" : "Req:") : ""} ${formatWhole(tmp[layer].baseAmount)} / ${(tmp[layer].roundUpCost ? formatWhole(tmp[layer].nextAtDisp) : format(tmp[layer].nextAtDisp))} ${tmp[layer].baseResource}
`
if (tmp[layer].type == "none")
return ""
return "You need prestige button text"
}
function constructNodeStyle(layer){
let style = []
if ((tmp[layer].isLayer && layerunlocked(layer)) || (!tmp[layer].isLayer && tmp[layer].canClick))
style.push({'background-color': tmp[layer].color})
if (tmp[layer].image !== undefined)
style.push({'background-image': 'url("' + tmp[layer].image + '")'})
if(tmp[layer].notify && player[layer].unlocked)
style.push({'box-shadow': 'var(--hqProperty2a), 0 0 20px ' + tmp[layer].trueGlowColor})
style.push(tmp[layer].nodeStyle)
return style
}
function challengeStyle(layer, id) {
if (player[layer].activeChallenge == id && canCompleteChallenge(layer, id)) return "canComplete"
else if (hasChallenge(layer, id)) return "done"
return "locked"
}
function challengeButtonText(layer, id) {
return (player[layer].activeChallenge==(id)?(canCompleteChallenge(layer, id)?"Finish":"Exit Early"):(hasChallenge(layer, id)?"Completed":"Start"))
}
function achievementStyle(layer, id){
ach = tmp[layer].achievements[id]
let style = []
if (ach.image){
style.push({'background-image': 'url("' + ach.image + '")'})
}
if (!ach.unlocked) style.push({'visibility': 'hidden'})
style.push(ach.style)
return style
}
function updateWidth() {
let screenWidth = window.innerWidth
let splitScreen = screenWidth >= 1024
if (options.forceOneTab) splitScreen = false
if (player.navTab == "none") splitScreen = true
tmp.other.screenWidth = screenWidth
tmp.other.screenHeight = window.innerHeight
tmp.other.splitScreen = splitScreen
tmp.other.lastPoints = player.points
}
function updateOomps(diff)
{
tmp.other.oompsMag = 0
if (player.points.lte(new Decimal(1e100)) || diff == 0) return
var pp = new Decimal(player.points);
var lp = tmp.other.lastPoints || new Decimal(0);
if (pp.gt(lp)) {
if (pp.gte("10^^8")) {
pp = pp.slog(1e10)
lp = lp.slog(1e10)
tmp.other.oomps = pp.sub(lp).div(diff)
tmp.other.oompsMag = -1;
} else {
while (pp.div(lp).log(10).div(diff).gte("100") && tmp.other.oompsMag <= 5 && lp.gt(0)) {
pp = pp.log(10)
lp = lp.log(10)
tmp.other.oomps = pp.sub(lp).div(diff)
tmp.other.oompsMag++;
}
}
}
}
function constructBarStyle(layer, id) {
let bar = tmp[layer].bars[id]
let style = {}
if (bar.progress instanceof Decimal)
bar.progress = bar.progress.toNumber()
bar.progress = (1 -Math.min(Math.max(bar.progress, 0), 1)) * 100
style.dims = {'width': bar.width + "px", 'height': bar.height + "px"}
let dir = bar.direction
style.fillDims = {'width': (bar.width + 0.5) + "px", 'height': (bar.height + 0.5) + "px"}
switch(bar.direction) {
case UP:
style.fillDims['clip-path'] = 'inset(' + bar.progress + '% 0% 0% 0%)'
style.fillDims.width = bar.width + 1 + 'px'
break;
case DOWN:
style.fillDims['clip-path'] = 'inset(0% 0% ' + bar.progress + '% 0%)'
style.fillDims.width = bar.width + 1 + 'px'
break;
case RIGHT:
style.fillDims['clip-path'] = 'inset(0% ' + bar.progress + '% 0% 0%)'
break;
case LEFT:
style.fillDims['clip-path'] = 'inset(0% 0% 0% ' + bar.progress + '%)'
break;
case DEFAULT:
style.fillDims['clip-path'] = 'inset(0% 50% 0% 0%)'
}
if (bar.instant) {
style.fillDims['transition-duration'] = '0s'
}
return style
}
function constructTabFormat(layer, id, family){
let tabTemp, tabLayer, tabFunc, location, key
if (id === undefined){
tabTemp = tmp[layer].tabFormat
tabLayer = layers[layer].tabFormat
tabFunc = funcs[layer].tabFormat
location = tmp[layer]
key = "tabFormat"
}
else if (family === undefined) {
tabTemp = tmp[layer].tabFormat[id].content
tabLayer = layers[layer].tabFormat[id].content
tabFunc = funcs[layer].tabFormat[id].content
location = tmp[layer].tabFormat[id]
key = "content"
}
else {
tabTemp = tmp[layer].microtabs[family][id].content
tabLayer = layers[layer].microtabs[family][id].content
tabFunc = funcs[layer].microtabs[family][id].content
location = tmp[layer].microtabs[family][id]
key = "tabFormat"
}
if (isFunction(tabLayer)) {
return tabLayer.bind(location)()
}
updateTempData(tabLayer, tabTemp, tabFunc, {layer, id, family})
return tabTemp
}
function updateTabFormats() {
updateTabFormat(player.tab)
updateTabFormat(player.navTab)
}
function updateTabFormat(layer) {
if (layers[layer]?.tabFormat === undefined) return
let tab = player.subtabs[layer]?.mainTabs
if (isFunction(layers[layer].tabFormat)) {
Vue.set(temp[layer], 'tabFormat', layers[layer].tabFormat())
}
else if (Array.isArray(layers[layer].tabFormat)) {
Vue.set(temp[layer], 'tabFormat', constructTabFormat(layer))
}
else if (isPlainObject(layers[layer].tabFormat)) {
if (layers[layer].tabFormat[tab].embedLayer === undefined)
Vue.set(temp[layer].tabFormat[tab], 'content', constructTabFormat(layer, tab))
}
// Check for embedded layer
if (isPlainObject(tmp[layer].tabFormat) && tmp[layer].tabFormat[tab].embedLayer !== undefined) {
updateTabFormat(tmp[layer].tabFormat[tab].embedLayer)
}
// Update microtabs
for (family in layers[layer].microtabs) {
tab = player.subtabs[layer][family]
if (tmp[layer].microtabs[family][tab]) {
if (tmp[layer].microtabs[family][tab].embedLayer)
updateTabFormat(tmp[layer].microtabs[family][tab].embedLayer)
else
Vue.set(temp[layer].microtabs[family][tab], 'content', constructTabFormat(layer, tab, family))
}
}
}

294
js/technical/layerSupport.js Normal file
View file

@ -0,0 +1,294 @@
var layers = {}
const decimalZero = new Decimal(0)
const decimalOne = new Decimal(1)
const decimalNaN = new Decimal(NaN)
const defaultGlow = "#ff0000"
function layerShown(layer){
return tmp[layer].layerShown;
}
var LAYERS = Object.keys(layers);
var hotkeys = {};
var maxRow = 0;
function updateHotkeys()
{
hotkeys = {};
for (layer in layers){
hk = layers[layer].hotkeys
if (hk){
for (id in hk){
hotkeys[hk[id].key] = hk[id]
hotkeys[hk[id].key].layer = layer
hotkeys[hk[id].key].id = id
if (hk[id].unlocked === undefined)
hk[id].unlocked = true
}
}
}
}
var ROW_LAYERS = {}
var TREE_LAYERS = {}
var OTHER_LAYERS = {}
function updateLayers(){
LAYERS = Object.keys(layers);
ROW_LAYERS = {}
TREE_LAYERS = {}
OTHER_LAYERS = {}
for (layer in layers){
setupLayer(layer)
}
for (row in OTHER_LAYERS) {
OTHER_LAYERS[row].sort((a, b) => (a.position > b.position) ? 1 : -1)
for (layer in OTHER_LAYERS[row])
OTHER_LAYERS[row][layer] = OTHER_LAYERS[row][layer].layer
}
for (row in TREE_LAYERS) {
TREE_LAYERS[row].sort((a, b) => (a.position > b.position) ? 1 : -1)
for (layer in TREE_LAYERS[row])
TREE_LAYERS[row][layer] = TREE_LAYERS[row][layer].layer
}
let treeLayers2 = []
for (x = 0; x < maxRow + 1; x++) {
if (TREE_LAYERS[x]) treeLayers2.push(TREE_LAYERS[x])
}
TREE_LAYERS = treeLayers2
updateHotkeys()
}
function setupLayer(layer){
layers[layer].layer = layer
if (layers[layer].upgrades){
setRowCol(layers[layer].upgrades)
for (thing in layers[layer].upgrades){
if (isPlainObject(layers[layer].upgrades[thing])){
layers[layer].upgrades[thing].id = thing
layers[layer].upgrades[thing].layer = layer
if (layers[layer].upgrades[thing].unlocked === undefined)
layers[layer].upgrades[thing].unlocked = true
}
}
}
if (layers[layer].milestones){
for (thing in layers[layer].milestones){
if (isPlainObject(layers[layer].milestones[thing])){
layers[layer].milestones[thing].id = thing
layers[layer].milestones[thing].layer = layer
if (layers[layer].milestones[thing].unlocked === undefined)
layers[layer].milestones[thing].unlocked = true
}
}
}
if (layers[layer].achievements){
setRowCol(layers[layer].achievements)
for (thing in layers[layer].achievements){
if (isPlainObject(layers[layer].achievements[thing])){
layers[layer].achievements[thing].id = thing
layers[layer].achievements[thing].layer = layer
if (layers[layer].achievements[thing].unlocked === undefined)
layers[layer].achievements[thing].unlocked = true
}
}
}
if (layers[layer].challenges){
setRowCol(layers[layer].challenges)
for (thing in layers[layer].challenges){
if (isPlainObject(layers[layer].challenges[thing])){
layers[layer].challenges[thing].id = thing
layers[layer].challenges[thing].layer = layer
if (layers[layer].challenges[thing].unlocked === undefined)
layers[layer].challenges[thing].unlocked = true
if (layers[layer].challenges[thing].completionLimit === undefined)
layers[layer].challenges[thing].completionLimit = 1
else if (layers[layer].challenges[thing].marked === undefined)
layers[layer].challenges[thing].marked = function() {return maxedChallenge(this.layer, this.id)}
}
}
}
if (layers[layer].buyables){
layers[layer].buyables.layer = layer
setRowCol(layers[layer].buyables)
for (thing in layers[layer].buyables){
if (isPlainObject(layers[layer].buyables[thing])){
layers[layer].buyables[thing].id = thing
layers[layer].buyables[thing].layer = layer
if (layers[layer].buyables[thing].unlocked === undefined)
layers[layer].buyables[thing].unlocked = true
layers[layer].buyables[thing].canBuy = function() {return canBuyBuyable(this.layer, this.id)}
if (layers[layer].buyables[thing].purchaseLimit === undefined) layers[layer].buyables[thing].purchaseLimit = new Decimal(Infinity)
}
}
}
if (layers[layer].clickables){
layers[layer].clickables.layer = layer
setRowCol(layers[layer].clickables)
for (thing in layers[layer].clickables){
if (isPlainObject(layers[layer].clickables[thing])){
layers[layer].clickables[thing].id = thing
layers[layer].clickables[thing].layer = layer
if (layers[layer].clickables[thing].unlocked === undefined)
layers[layer].clickables[thing].unlocked = true
}
}
}
if (layers[layer].bars){
layers[layer].bars.layer = layer
for (thing in layers[layer].bars){
layers[layer].bars[thing].id = thing
layers[layer].bars[thing].layer = layer
if (layers[layer].bars[thing].unlocked === undefined)
layers[layer].bars[thing].unlocked = true
}
}
if (layers[layer].infoboxes){
for (thing in layers[layer].infoboxes){
layers[layer].infoboxes[thing].id = thing
layers[layer].infoboxes[thing].layer = layer
if (layers[layer].infoboxes[thing].unlocked === undefined)
layers[layer].infoboxes[thing].unlocked = true
}
}
if (layers[layer].grid) {
layers[layer].grid.layer = layer
if (layers[layer].grid.getUnlocked === undefined)
layers[layer].grid.getUnlocked = true
if (layers[layer].grid.getCanClick === undefined)
layers[layer].grid.getCanClick = true
}
if (layers[layer].startData) {
data = layers[layer].startData()
if (data.best !== undefined && data.showBest === undefined) layers[layer].showBest = true
if (data.total !== undefined && data.showTotal === undefined) layers[layer].showTotal = true
}
if(!layers[layer].componentStyles) layers[layer].componentStyles = {}
if(layers[layer].symbol === undefined) layers[layer].symbol = layer.charAt(0).toUpperCase() + layer.slice(1)
if(layers[layer].unlockOrder === undefined) layers[layer].unlockOrder = []
if(layers[layer].gainMult === undefined) layers[layer].gainMult = decimalOne
if(layers[layer].gainExp === undefined) layers[layer].gainExp = decimalOne
if(layers[layer].directMult === undefined) layers[layer].directMult = decimalOne
if(layers[layer].type === undefined) layers[layer].type = "none"
if(layers[layer].base === undefined || layers[layer].base <= 1) layers[layer].base = 2
if(layers[layer].softcap === undefined) layers[layer].softcap = new Decimal("e1e7")
if(layers[layer].softcapPower === undefined) layers[layer].softcapPower = new Decimal("0.5")
if(layers[layer].displayRow === undefined) layers[layer].displayRow = layers[layer].row
if(layers[layer].name === undefined) layers[layer].name = layer
if(layers[layer].layerShown === undefined) layers[layer].layerShown = true
if(layers[layer].glowColor === undefined) layers[layer].glowColor = defaultGlow
let row = layers[layer].row
let displayRow = layers[layer].displayRow
if(!ROW_LAYERS[row]) ROW_LAYERS[row] = {}
if(!TREE_LAYERS[displayRow] && !isNaN(displayRow)) TREE_LAYERS[displayRow] = []
if(!OTHER_LAYERS[displayRow] && isNaN(displayRow)) OTHER_LAYERS[displayRow] = []
ROW_LAYERS[row][layer]=layer;
let position = (layers[layer].position !== undefined ? layers[layer].position : layer)
if (!isNaN(displayRow) || displayRow < 0) TREE_LAYERS[displayRow].push({layer: layer, position: position})
else OTHER_LAYERS[displayRow].push({layer: layer, position: position})
if (maxRow < layers[layer].displayRow) maxRow = layers[layer].displayRow
}
function addLayer(layerName, layerData, tabLayers = null){ // Call this to add layers from a different file!
layers[layerName] = layerData
layers[layerName].isLayer = true
if (tabLayers !== null)
{
let format = {}
for (id in tabLayers) {
layer = tabLayers[id]
format[(layers[layer].name ? layers[layer].name : layer)] = {
embedLayer: layer,
buttonStyle() {
if (!tmp[this.embedLayer].nodeStyle) return {'border-color': tmp[this.embedLayer].color}
else {
style = tmp[this.embedLayer].nodeStyle
if (style['border-color'] === undefined) style['border-color'] = tmp[this.embedLayer].color
return style
}
},
unlocked() {return tmp[this.embedLayer].layerShown},
}
}
layers[layerName].tabFormat = format
}
}
function addNode(layerName, layerData){ // Does the same thing, but for non-layer nodes
layers[layerName] = layerData
layers[layerName].isLayer = false
}
// If data is a function, return the result of calling it. Otherwise, return the data.
function readData(data, args=null){
if ((!!data && data.constructor && data.call && data.apply))
return data(args);
else
return data;
}
function setRowCol(upgrades) {
if (upgrades.rows && upgrades.cols) return
let maxRow = 0
let maxCol = 0
for (up in upgrades) {
if (!isNaN(up)) {
if (Math.floor(up/10) > maxRow) maxRow = Math.floor(up/10)
if (up%10 > maxCol) maxCol = up%10
}
}
upgrades.rows = maxRow
upgrades.cols = maxCol
}
function someLayerUnlocked(row){
for (layer in ROW_LAYERS[row])
if (player[layer].unlocked)
return true
return false
}
// This isn't worth making a .ts file over
const UP = 0
const DOWN = 1
const LEFT = 2
const RIGHT = 3
addLayer("info-tab", {
tabFormat: ["info-tab"],
row: "otherside"
})
addLayer("options-tab", {
tabFormat: ["options-tab"],
row: "otherside"
})
addLayer("changelog-tab", {
tabFormat() {return ([["raw-html", modInfo.changelog]])},
row: "otherside"
})

9
js/technical/loader.js Normal file
View file

@ -0,0 +1,9 @@
// Load files
for (file in modInfo.modFiles) {
let script = document.createElement("script");
script.setAttribute("src", "js/" + modInfo.modFiles[file]);
script.setAttribute("async", "false");
document.head.insertBefore(script, document.getElementById("temp"));
}

186
js/technical/particleSystem.js Normal file
View file

@ -0,0 +1,186 @@
var particles = {};
var particleID = 0;
var mouseX = 0;
var mouseY = 0;
function makeParticles(data, amount=1, type = "normal") {
for (let x = 0; x < amount; x++) {
let particle = newParticles[type]()
for (thing in data) {
switch(thing) {
case 'onClick': // Functions that should be copied over
case 'onMouseEnter':
case 'onMouseLeave':
case 'update':
particle[thing] = data[thing]
break;
default:
particle[thing]=run(data[thing], data, x)
}
}
if (data.dir === undefined) {
particle.dir = particle.angle
}
particle.dir = particle.dir + (particle.spread * (x- amount/2 + 0.5))
if(particle.offset) {
particle.x += particle.offset * sin(particle.dir)
particle.y += particle.offset * cos(particle.dir) * -1
}
particle.xVel = particle.speed * sin(particle.dir)
particle.yVel = particle.speed * cos(particle.dir) * -1
particle.fadeInTimer = particle.fadeInTime
Vue.set(particles, particle.id, particle)
}
}
// Makes a particle at a random location that stays still until it despawns
function makeShinies(data, amount=1) {
makeParticles(data, amount, "shiny")
}
function updateParticles(diff) {
for (p in particles) {
let particle = particles[p]
particle.time -= diff;
particle.fadeInTimer -= diff;
if (particle["time"] < 0) {
Vue.delete(particles, p);
}
else {
if (particle.update) run(particle.update, particle)
particle.angle += particle.rotation
particle.x += particle.xVel
particle.y += particle.yVel
particle.speed = Math.sqrt(Math.pow(particle.xVel, 2) + Math.pow(particle.yVel, 2))
particle.dir = atan(-particle.xVel/particle.yVel)
particle.yVel += particle.gravity
}
}
}
function setDir(particle, dir) {
particle.dir = dir
particle.xVel = particle.speed * sin(particle.dir)
particle.yVel = particle.speed * cos(particle.dir) * -1
}
function setSpeed(particle, speed) {
particle.speed = speed
particle.xVel = particle.speed * sin(particle.dir)
particle.yVel = particle.speed * cos(particle.dir) * -1
}
const newParticles = {
normal() {
particleID++
return {
time: 3,
id: particleID,
x: mouseX,
y: mouseY,
width: 35,
height: 35,
image: "resources/genericParticle.png",
angle: 0,
spread: 30,
offset: 10,
speed: 15,
xVel: 0,
yVel: 0,
rotation: 0,
gravity: 0,
fadeOutTime: 1,
fadeInTimer: 0,
fadeInTime: 0,
}
},
shiny() {
particleID++
return {
time: 10,
id: particleID,
x: Math.random() * (tmp.other.screenWidth - 100) + 50,
y: Math.random() * (tmp.other.screenHeight - 100) + 50,
width: 50,
height: 50,
image: "resources/genericParticle.png",
angle: 0,
spread: 0,
offset: 0,
speed: 0,
xVel: 0,
yVel: 0,
rotation: 0,
gravity: 0,
fadeOutTime: 1,
fadeInTimer: 0,
fadeInTime: 0.5,
}
},
}
function updateMouse(event) {
mouseX = event.clientX
mouseY = event.clientY
}
function getOpacity(particle) {
if ((particle.time < particle.fadeOutTime) && particle.fadeOutTime)
return particle.time / particle.fadeOutTime
if (particle.fadeInTimer > 0)
return 1 - (particle.fadeInTimer / particle.fadeInTime)
return 1
}
function constructParticleStyle(particle){
let style = {
left: (particle.x - particle.height/2) + 'px',
top: (particle.y - particle.height/2) + 'px',
width: particle.width + 'px',
height: particle.height + 'px',
transform: "rotate(" + particle.angle + "deg)",
opacity: getOpacity(particle),
"pointer-events": (particle.onClick || particle.onHover) ? 'auto' : 'none',
}
if (particle.color) {
style["background-color"] = particle.color
style.mask = "url(#pmask" + particle.id + ")"
style["-webkit-mask-box-image"] = "url(" + particle.image + ")"
}
else
style["background-image"] = "url(" + particle.image + ")"
return style
}
function clearParticles(check) {
if (!check) check = true
for (p in particles) {
if (run(check, particles[p], particles[p])){
Vue.delete(particles, p)
}
}
}
// Trig with degrees
function sin(x) { return Math.sin(x*Math.PI/180)}
function cos(x) {return Math.cos(x*Math.PI/180)}
function tan(x) {return Math.tan(x*Math.PI/180)}
function asin(x) { return Math.asin(x)*180/Math.PI}
function acos(x) { return Math.acos(x)*180/Math.PI}
function atan(x) { return Math.atan(x)*180/Math.PI}

220
js/technical/systemComponents.js Normal file
View file

@ -0,0 +1,220 @@
var systemComponents = {
'tab-buttons': {
props: ['layer', 'data', 'name'],
template: `
<div class="upgRow">
<div v-for="tab in Object.keys(data)">
<button v-if="data[tab].unlocked == undefined || data[tab].unlocked" v-bind:class="{tabButton: true, notify: subtabShouldNotify(layer, name, tab), resetNotify: subtabResetNotify(layer, name, tab)}"
v-bind:style="[{'border-color': tmp[layer].color}, (subtabShouldNotify(layer, name, tab) ? {'box-shadow': 'var(--hqProperty2a), 0 0 20px ' + (data[tab].glowColor || defaultGlow)} : {}), tmp[layer].componentStyles['tab-button'], data[tab].buttonStyle]"
v-on:click="function(){player.subtabs[layer][name] = tab; updateTabFormats(); needCanvasUpdate = true;}">{{tab}}</button>
</div>
</div>
`
},
'tree-node': {
props: ['layer', 'abb', 'size', 'prev'],
template: `
<button v-if="nodeShown(layer)"
v-bind:id="layer"
v-on:click="function() {
if (shiftDown && options.forceTooltips) player[layer].forceTooltip = !player[layer].forceTooltip
else if(tmp[layer].isLayer) {
if (tmp[layer].leftTab) {
showNavTab(layer, prev)
showTab('none')
}
else
showTab(layer, prev)
}
else {run(layers[layer].onClick, layers[layer])}
}"
v-bind:class="{
treeNode: tmp[layer].isLayer,
treeButton: !tmp[layer].isLayer,
smallNode: size == 'small',
[layer]: true,
tooltipBox: true,
forceTooltip: player[layer].forceTooltip,
ghost: tmp[layer].layerShown == 'ghost',
hidden: !tmp[layer].layerShown,
locked: tmp[layer].isLayer ? !(player[layer].unlocked || tmp[layer].canReset) : !(tmp[layer].canClick),
notify: tmp[layer].notify && player[layer].unlocked,
resetNotify: tmp[layer].prestigeNotify,
can: ((player[layer].unlocked || tmp[layer].canReset) && tmp[layer].isLayer) || (!tmp[layer].isLayer && tmp[layer].canClick),
front: !tmp.scrolled,
}"
v-bind:style="constructNodeStyle(layer)">
<span class="nodeLabel" v-html="(abb !== '' && tmp[layer].image === undefined) ? abb : '&nbsp;'"></span>
<tooltip
v-if="tmp[layer].tooltip != ''"
:text="(tmp[layer].isLayer) ? (
player[layer].unlocked ? (tmp[layer].tooltip ? tmp[layer].tooltip : formatWhole(player[layer].points) + ' ' + tmp[layer].resource)
: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'Reach ' + formatWhole(tmp[layer].requires) + ' ' + tmp[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp[layer].baseAmount) + ' ' + tmp[layer].baseResource + ')')
)
: (
tmp[layer].canClick ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'I am a button!')
)"></tooltip>
<node-mark :layer='layer' :data='tmp[layer].marked'></node-mark></span>
</button>
`
},
'layer-tab': {
props: ['layer', 'back', 'spacing', 'embedded'],
template: `<div v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]" class="noBackground">
<div v-if="back"><button v-bind:class="back == 'big' ? 'other-back' : 'back'" v-on:click="goBack(layer)">←</button></div>
<div v-if="!tmp[layer].tabFormat">
<div v-if="spacing" v-bind:style="{'height': spacing}" :key="this.$vnode.key + '-spacing'"></div>
<infobox v-if="tmp[layer].infoboxes" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]":key="this.$vnode.key + '-info'"></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" :key="this.$vnode.key + '-mid'"></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>
<achievements v-bind:style="tmp[layer].componentStyles.achievements" :layer="layer"></achievements>
<br><br>
</div>
<div v-if="tmp[layer].tabFormat">
<div v-if="Array.isArray(tmp[layer].tabFormat)"><div v-if="spacing" v-bind:style="{'height': spacing}"></div>
<column :layer="layer" :data="tmp[layer].tabFormat" :key="this.$vnode.key + '-col'"></column>
</div>
<div v-else>
<div class="upgTable" v-bind:style="{'padding-top': (embedded ? '0' : '25px'), 'margin-top': (embedded ? '-10px' : '0'), 'margin-bottom': '24px'}">
<tab-buttons v-bind:style="tmp[layer].componentStyles['tab-buttons']" :layer="layer" :data="tmp[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
</div>
<layer-tab v-if="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].embedLayer" :layer="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].embedLayer" :embedded="true" :key="this.$vnode.key + '-' + layer"></layer-tab>
<column v-else :layer="layer" :data="tmp[layer].tabFormat[player.subtabs[layer].mainTabs].content" :key="this.$vnode.key + '-col'"></column>
</div>
</div></div>
`
},
'overlay-head': {
template: `
<div class="overlayThing" style="padding-bottom:7px; width: 90%; z-index: 1000; position: relative">
<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>
<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">({{tmp.other.oompsMag != 0 ? format(tmp.other.oomps) + " OOM" + (tmp.other.oompsMag < 0 ? "^OOM" : tmp.other.oompsMag > 1 ? "^" + tmp.other.oompsMag : "") + "s" : formatSmall(getPointGen())}}/sec)</span>
<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div>
`
},
'info-tab': {
template: `
<div>
<h2>{{modInfo.name}}</h2>
<br>
<h3>{{VERSION.withName}}</h3>
<span v-if="modInfo.author">
<br>
Made by {{modInfo.author}}
</span>
<br>
The Modding Tree <a v-bind:href="'https://github.com/Acamaeda/The-Modding-Tree/blob/master/changelog.md'" target="_blank" class="link" v-bind:style = "{'font-size': '14px', 'display': 'inline'}" >{{TMT_VERSION.tmtNum}}</a> by Acamaeda
<br>
The Prestige Tree made by Jacorb and Aarex
<br><br>
<div class="link" onclick="showTab('changelog-tab')">Changelog</div><br>
<span v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></span>
<a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br>
<a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a><br>
<br><br>
Time Played: {{ formatTime(player.timePlayed) }}<br><br>
<h3>Hotkeys</h3><br>
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked && tmp[key.layer].hotkeys[key.id].unlocked"><br>{{key.description}}</span></div>
`
},
'options-tab': {
template: `
<table>
<tr>
<td><button class="opt" onclick="save()">Save</button></td>
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ options.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: {{ options.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: {{ MS_DISPLAYS[MS_SETTINGS.indexOf(options.msDisplay)]}}</button></td>
<td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ options.hqTree?"ON":"OFF" }}</button></td>
</tr>
<tr>
<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ options.hideChallenges?"HIDDEN":"SHOWN" }}</button></td>
<td><button class="opt" onclick="toggleOpt('forceOneTab'); needsCanvasUpdate = true">Single-Tab Mode: {{ options.forceOneTab?"ALWAYS":"AUTO" }}</button></td>
<td><button class="opt" onclick="toggleOpt('forceTooltips'); needsCanvasUpdate = true">Shift-Click to Toggle Tooltips: {{ options.forceTooltips?"ON":"OFF" }}</button></td>
</tr>
</table>`
},
'back-button': {
template: `
<button v-bind:class="back" onclick="goBack()">←</button>
`
},
'tooltip' : {
props: ['text'],
template: `<div class="tooltip" v-html="text"></div>
`
},
'node-mark': {
props: {'layer': {}, data: {}, offset: {default: 0}, scale: {default: 1}},
template: `<div v-if='data'>
<div v-if='data === true' class='star' v-bind:style='{position: "absolute", left: (offset-10) + "px", top: (offset-10) + "px", transform: "scale( " + scale||1 + ", " + scale||1 + ")"}'></div>
<img v-else class='mark' v-bind:style='{position: "absolute", left: (offset-22) + "px", top: (offset-15) + "px", transform: "scale( " + scale||1 + ", " + scale||1 + ")"}' v-bind:src="data"></div>
</div>
`
},
'particle': {
props: ['data', 'index'],
template: `<div><div class='particle instant' v-bind:style="[constructParticleStyle(data), data.style]"
v-on:click="run(data.onClick, data)" v-on:mouseenter="run(data.onMouseOver, data)" v-on:mouseleave="run(data.onMouseLeave, data)" ><span v-html="data.text"></span>
</div>
<svg version="2" v-if="data.color">
<mask v-bind:id="'pmask' + data.id">
<image id="img" v-bind:href="data.image" x="0" y="0" :height="data.width" :width="data.height" />
</mask>
</svg>
</div>
`
},
'bg': {
props: ['layer'],
template: `<div class ="bg" 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>
`
}
}

179
js/technical/temp.js Normal file
View file

@ -0,0 +1,179 @@
var tmp = {}
var temp = tmp // Proxy for tmp
var funcs = {}
var NaNalert = false;
// Tmp will not call these
var activeFunctions = [
"startData", "onPrestige", "doReset", "update", "automate",
"buy", "buyMax", "respec", "onPress", "onClick", "onHold", "masterButtonPress",
"sellOne", "sellAll", "pay", "actualCostFunction", "actualEffectFunction",
"effectDescription", "display", "fullDisplay", "effectDisplay", "rewardDisplay",
"tabFormat", "content",
"onComplete", "onPurchase", "onEnter", "onExit", "done",
"getUnlocked", "getStyle", "getCanClick", "getTitle", "getDisplay"
]
var noCall = doNotCallTheseFunctionsEveryTick
for (item in noCall) {
activeFunctions.push(noCall[item])
}
// Add the names of classes to traverse
var traversableClasses = []
function setupTemp() {
tmp = {}
tmp.pointGen = {}
tmp.backgroundStyle = {}
tmp.displayThings = []
tmp.scrolled = 0
tmp.gameEnded = false
funcs = {}
setupTempData(layers, tmp, funcs)
for (layer in layers){
tmp[layer].resetGain = {}
tmp[layer].nextAt = {}
tmp[layer].nextAtDisp = {}
tmp[layer].canReset = {}
tmp[layer].notify = {}
tmp[layer].prestigeNotify = {}
tmp[layer].computedNodeStyle = []
setupBuyables(layer)
tmp[layer].trueGlowColor = []
}
tmp.other = {
lastPoints: player.points || decimalZero,
oomps: decimalZero,
screenWidth: 0,
screenHeight: 0,
}
updateWidth()
temp = tmp
}
const boolNames = ["unlocked", "deactivated"]
function setupTempData(layerData, tmpData, funcsData) {
for (item in layerData){
if (layerData[item] == null) {
tmpData[item] = null
}
else if (layerData[item] instanceof Decimal)
tmpData[item] = layerData[item]
else if (Array.isArray(layerData[item])) {
tmpData[item] = []
funcsData[item] = []
setupTempData(layerData[item], tmpData[item], funcsData[item])
}
else if ((!!layerData[item]) && (layerData[item].constructor === Object)) {
tmpData[item] = {}
funcsData[item] = []
setupTempData(layerData[item], tmpData[item], funcsData[item])
}
else if ((!!layerData[item]) && (typeof layerData[item] === "object") && traversableClasses.includes(layerData[item].constructor.name)) {
tmpData[item] = new layerData[item].constructor()
funcsData[item] = new layerData[item].constructor()
}
else if (isFunction(layerData[item]) && !activeFunctions.includes(item)){
funcsData[item] = layerData[item]
if (boolNames.includes(item))
tmpData[item] = false
else
tmpData[item] = decimalOne // The safest thing to put probably?
} else {
tmpData[item] = layerData[item]
}
}
}
function updateTemp() {
if (tmp === undefined)
setupTemp()
updateTempData(layers, tmp, funcs)
for (layer in layers){
tmp[layer].resetGain = getResetGain(layer)
tmp[layer].nextAt = getNextAt(layer)
tmp[layer].nextAtDisp = getNextAt(layer, true)
tmp[layer].canReset = canReset(layer)
tmp[layer].trueGlowColor = tmp[layer].glowColor
tmp[layer].notify = shouldNotify(layer)
tmp[layer].prestigeNotify = prestigeNotify(layer)
if (tmp[layer].passiveGeneration === true) tmp[layer].passiveGeneration = 1 // new Decimal(true) = decimalZero
}
tmp.pointGen = getPointGen()
tmp.backgroundStyle = readData(backgroundStyle)
tmp.displayThings = []
for (thing in displayThings){
let text = displayThings[thing]
if (isFunction(text)) text = text()
tmp.displayThings.push(text)
}
}
function updateTempData(layerData, tmpData, funcsData, useThis) {
for (item in funcsData){
if (Array.isArray(layerData[item])) {
if (item !== "tabFormat" && item !== "content") // These are only updated when needed
updateTempData(layerData[item], tmpData[item], funcsData[item], useThis)
}
else if ((!!layerData[item]) && (layerData[item].constructor === Object) || (typeof layerData[item] === "object") && traversableClasses.includes(layerData[item].constructor.name)){
updateTempData(layerData[item], tmpData[item], funcsData[item], useThis)
}
else if (isFunction(layerData[item]) && !isFunction(tmpData[item])){
let value
if (useThis !== undefined) value = layerData[item].bind(useThis)()
else value = layerData[item]()
Vue.set(tmpData, item, value)
}
}
}
function updateChallengeTemp(layer)
{
updateTempData(layers[layer].challenges, tmp[layer].challenges, funcs[layer].challenges)
}
function updateBuyableTemp(layer)
{
updateTempData(layers[layer].buyables, tmp[layer].buyables, funcs[layer].buyables)
}
function updateClickableTemp(layer)
{
updateTempData(layers[layer].clickables, tmp[layer].clickables, funcs[layer].clickables)
}
function setupBuyables(layer) {
for (id in layers[layer].buyables) {
if (isPlainObject(layers[layer].buyables[id])) {
let b = layers[layer].buyables[id]
b.actualCostFunction = b.cost
b.cost = function(x) {
x = (x === undefined ? player[this.layer].buyables[this.id] : x)
return layers[this.layer].buyables[this.id].actualCostFunction(x)
}
b.actualEffectFunction = b.effect
b.effect = function(x) {
x = (x === undefined ? player[this.layer].buyables[this.id] : x)
return layers[this.layer].buyables[this.id].actualEffectFunction(x)
}
}
}
}
function checkDecimalNaN(x) {
return (x instanceof Decimal) && !x.eq(x)
}

23
js/tree.js Normal file
View file

@ -0,0 +1,23 @@
var layoutInfo = {
startTab: "none",
startNavTab: "tree-tab",
showTree: true,
treeLayout: ""
}
// A "ghost" layer which offsets other layers in the tree
addNode("blank", {
layerShown: "ghost",
},
)
addLayer("tree-tab", {
tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]],
previousTab: "",
leftTab: true,
})

412
js/utils.js Normal file
View file

@ -0,0 +1,412 @@
// ************ Big Feature related ************
function respecBuyables(layer) {
if (!layers[layer].buyables) return
if (!layers[layer].buyables.respec) return
if (!player[layer].noRespecConfirm && !confirm(tmp[layer].buyables.respecMessage || "Are you sure you want to respec? This will force you to do a \"" + (tmp[layer].name ? tmp[layer].name : layer) + "\" reset as well!")) return
run(layers[layer].buyables.respec, layers[layer].buyables)
updateBuyableTemp(layer)
document.activeElement.blur()
}
function canAffordUpgrade(layer, id) {
let upg = tmp[layer].upgrades[id]
if(tmp[layer].deactivated) return false
if (tmp[layer].upgrades[id].canAfford === false) return false
let cost = tmp[layer].upgrades[id].cost
if (cost !== undefined)
return canAffordPurchase(layer, upg, cost)
return true
}
function canBuyBuyable(layer, id) {
let b = temp[layer].buyables[id]
return (b.unlocked && run(b.canAfford, b) && player[layer].buyables[id].lt(b.purchaseLimit) && !tmp[layer].deactivated)
}
function canAffordPurchase(layer, thing, cost) {
if (thing.currencyInternalName) {
let name = thing.currencyInternalName
if (thing.currencyLocation) {
return !(thing.currencyLocation[name].lt(cost))
}
else if (thing.currencyLayer) {
let lr = thing.currencyLayer
return !(player[lr][name].lt(cost))
}
else {
return !(player[name].lt(cost))
}
}
else {
return !(player[layer].points.lt(cost))
}
}
function buyUpgrade(layer, id) {
buyUpg(layer, id)
}
function buyUpg(layer, id) {
if (!tmp[layer].upgrades || !tmp[layer].upgrades[id]) return
let upg = tmp[layer].upgrades[id]
if (!player[layer].unlocked || player[layer].deactivated) return
if (!tmp[layer].upgrades[id].unlocked) return
if (player[layer].upgrades.includes(id)) return
if (upg.canAfford === false) return
let pay = layers[layer].upgrades[id].pay
if (pay !== undefined)
run(pay, layers[layer].upgrades[id])
else {
let cost = tmp[layer].upgrades[id].cost
if (upg.currencyInternalName) {
let name = upg.currencyInternalName
if (upg.currencyLocation) {
if (upg.currencyLocation[name].lt(cost)) return
upg.currencyLocation[name] = upg.currencyLocation[name].sub(cost)
}
else if (upg.currencyLayer) {
let lr = upg.currencyLayer
if (player[lr][name].lt(cost)) return
player[lr][name] = player[lr][name].sub(cost)
}
else {
if (player[name].lt(cost)) return
player[name] = player[name].sub(cost)
}
}
else {
if (player[layer].points.lt(cost)) return
player[layer].points = player[layer].points.sub(cost)
}
}
player[layer].upgrades.push(id);
if (upg.onPurchase != undefined)
run(upg.onPurchase, upg)
needCanvasUpdate = true
}
function buyMaxBuyable(layer, id) {
if (!player[layer].unlocked) return
if (!tmp[layer].buyables[id].unlocked) return
if (!tmp[layer].buyables[id].canBuy) return
if (!layers[layer].buyables[id].buyMax) return
run(layers[layer].buyables[id].buyMax, layers[layer].buyables[id])
updateBuyableTemp(layer)
}
function buyBuyable(layer, id) {
if (!player[layer].unlocked) return
if (!tmp[layer].buyables[id].unlocked) return
if (!tmp[layer].buyables[id].canBuy) return
run(layers[layer].buyables[id].buy, layers[layer].buyables[id])
updateBuyableTemp(layer)
}
function clickClickable(layer, id) {
if (!player[layer].unlocked || tmp[layer].deactivated) return
if (!tmp[layer].clickables[id].unlocked) return
if (!tmp[layer].clickables[id].canClick) return
run(layers[layer].clickables[id].onClick, layers[layer].clickables[id])
updateClickableTemp(layer)
}
function clickGrid(layer, id) {
if (!player[layer].unlocked || tmp[layer].deactivated) return
if (!run(layers[layer].grid.getUnlocked, layers[layer].grid, id)) return
if (!gridRun(layer, 'getCanClick', player[layer].grid[id], id)) return
gridRun(layer, 'onClick', player[layer].grid[id], id)
}
// Function to determine if the player is in a challenge
function inChallenge(layer, id) {
let challenge = player[layer].activeChallenge
if (!challenge) return false
id = toNumber(id)
if (challenge == id) return true
if (layers[layer].challenges[challenge].countsAs)
return tmp[layer].challenges[challenge].countsAs.includes(id) || false
return false
}
// ************ Misc ************
var onTreeTab = true
function showTab(name, prev) {
if (LAYERS.includes(name) && !layerunlocked(name)) return
if (player.tab !== name) clearParticles(function(p) {return p.layer === player.tab})
if (tmp[name] && player.tab === name && isPlainObject(tmp[name].tabFormat)) {
player.subtabs[name].mainTabs = Object.keys(layers[name].tabFormat)[0]
}
var toTreeTab = name == "none"
player.tab = name
if (tmp[name] && (tmp[name].row !== "side") && (tmp[name].row !== "otherside")) player.lastSafeTab = name
updateTabFormats()
needCanvasUpdate = true
document.activeElement.blur()
}
function showNavTab(name, prev) {
console.log(prev)
if (LAYERS.includes(name) && !layerunlocked(name)) return
if (player.navTab !== name) clearParticles(function(p) {return p.layer === player.navTab})
if (tmp[name] && tmp[name].previousTab !== undefined) prev = tmp[name].previousTab
var toTreeTab = name == "tree-tab"
console.log(name + prev)
if (name!== "none" && prev && !tmp[prev]?.leftTab == !tmp[name]?.leftTab) player[name].prevTab = prev
else if (player[name])
player[name].prevTab = ""
player.navTab = name
updateTabFormats()
needCanvasUpdate = true
}
function goBack(layer) {
let nextTab = "none"
if (player[layer].prevTab) nextTab = player[layer].prevTab
if (player.navTab === "none" && (tmp[layer]?.row == "side" || tmp[layer].row == "otherside")) nextTab = player.lastSafeTab
if (tmp[layer].leftTab) showNavTab(nextTab, layer)
else showTab(nextTab, layer)
}
function layOver(obj1, obj2) {
for (let x in obj2) {
if (obj2[x] instanceof Decimal) obj1[x] = new Decimal(obj2[x])
else if (obj2[x] instanceof Object) layOver(obj1[x], obj2[x]);
else obj1[x] = obj2[x];
}
}
function prestigeNotify(layer) {
if (layers[layer].prestigeNotify) return layers[layer].prestigeNotify()
if (isPlainObject(tmp[layer].tabFormat)) {
for (subtab in tmp[layer].tabFormat){
if (subtabResetNotify(layer, 'mainTabs', subtab))
return true
}
}
for (family in tmp[layer].microtabs) {
for (subtab in tmp[layer].microtabs[family]){
if (subtabResetNotify(layer, family, subtab))
return true
}
}
if (tmp[layer].autoPrestige || tmp[layer].passiveGeneration) return false
else if (tmp[layer].type == "static") return tmp[layer].canReset
else if (tmp[layer].type == "normal") return (tmp[layer].canReset && (tmp[layer].resetGain.gte(player[layer].points.div(10))))
else return false
}
function notifyLayer(name) {
if (player.tab == name || !layerunlocked(name)) return
player.notify[name] = 1
}
function subtabShouldNotify(layer, family, id) {
let subtab = {}
if (family == "mainTabs") subtab = tmp[layer].tabFormat[id]
else subtab = tmp[layer].microtabs[family][id]
if (!subtab.unlocked) return false
if (subtab.embedLayer) return tmp[subtab.embedLayer].notify
else return subtab.shouldNotify
}
function subtabResetNotify(layer, family, id) {
let subtab = {}
if (family == "mainTabs") subtab = tmp[layer].tabFormat[id]
else subtab = tmp[layer].microtabs[family][id]
if (subtab.embedLayer) return tmp[subtab.embedLayer].prestigeNotify
else return subtab.prestigeNotify
}
function nodeShown(layer) {
return layerShown(layer)
}
function layerunlocked(layer) {
if (tmp[layer] && tmp[layer].type == "none") return (player[layer].unlocked)
return LAYERS.includes(layer) && (player[layer].unlocked || (tmp[layer].canReset && tmp[layer].layerShown))
}
function keepGoing() {
player.keepGoing = true;
needCanvasUpdate = true;
}
function toNumber(x) {
if (x.mag !== undefined) return x.toNumber()
if (x + 0 !== x) return parseFloat(x)
return x
}
function updateMilestones(layer) {
if (tmp[layer].deactivated) return
for (id in layers[layer].milestones) {
if (!(hasMilestone(layer, id)) && layers[layer].milestones[id].done()) {
player[layer].milestones.push(id)
if (layers[layer].milestones[id].onComplete) layers[layer].milestones[id].onComplete()
if (tmp[layer].milestonePopups || tmp[layer].milestonePopups === undefined) doPopup("milestone", tmp[layer].milestones[id].requirementDescription, "Milestone Gotten!", 3, tmp[layer].color);
player[layer].lastMilestone = id
}
}
}
function updateAchievements(layer) {
if (tmp[layer].deactivated) return
for (id in layers[layer].achievements) {
if (isPlainObject(layers[layer].achievements[id]) && !(hasAchievement(layer, id)) && layers[layer].achievements[id].done()) {
player[layer].achievements.push(id)
if (layers[layer].achievements[id].onComplete) layers[layer].achievements[id].onComplete()
if (tmp[layer].achievementPopups || tmp[layer].achievementPopups === undefined) doPopup("achievement", tmp[layer].achievements[id].name, "Achievement Gotten!", 3, tmp[layer].color);
}
}
}
function addTime(diff, layer) {
let data = player
let time = data.timePlayed
if (layer) {
data = data[layer]
time = data.time
}
//I am not that good to perfectly fix that leak. ~ DB Aarex
if (time + 0 !== time) {
console.log("Memory leak detected. Trying to fix...")
time = toNumber(time)
if (isNaN(time) || time == 0) {
console.log("Couldn't fix! Resetting...")
time = layer ? player.timePlayed : 0
if (!layer) player.timePlayedReset = true
}
}
time += toNumber(diff)
if (layer) data.time = time
else data.timePlayed = time
}
shiftDown = false
ctrlDown = false
document.onkeydown = function (e) {
if (player === undefined) return;
shiftDown = e.shiftKey
ctrlDown = e.ctrlKey
if (tmp.gameEnded && !player.keepGoing) return;
let key = e.key
if (ctrlDown) key = "ctrl+" + key
if (onFocused) return
if (ctrlDown && hotkeys[key]) e.preventDefault()
if (hotkeys[key]) {
let k = hotkeys[key]
if (player[k.layer].unlocked && tmp[k.layer].hotkeys[k.id].unlocked)
k.onPress()
}
}
document.onkeyup = function (e) {
shiftDown = e.shiftKey
ctrlDown = e.ctrlKey
}
var onFocused = false
function focused(x) {
onFocused = x
}
function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
};
function isPlainObject(obj) {
return (!!obj) && (obj.constructor === Object)
}
document.title = modInfo.name
// Converts a string value to whatever it's supposed to be
function toValue(value, oldValue) {
if (oldValue instanceof Decimal) {
value = new Decimal (value)
if (checkDecimalNaN(value)) return decimalZero
return value
}
if (!isNaN(oldValue))
return parseFloat(value) || 0
return value
}
// Variables that must be defined to display popups
var activePopups = [];
var popupID = 0;
// Function to show popups
function doPopup(type = "none", text = "This is a test popup.", title = "", timer = 3, color = "") {
switch (type) {
case "achievement":
popupTitle = "Achievement Unlocked!";
popupType = "achievement-popup"
break;
case "challenge":
popupTitle = "Challenge Complete";
popupType = "challenge-popup"
break;
default:
popupTitle = "Something Happened?";
popupType = "default-popup"
break;
}
if (title != "") popupTitle = title;
popupMessage = text;
popupTimer = timer;
activePopups.push({ "time": popupTimer, "type": popupType, "title": popupTitle, "message": (popupMessage + "\n"), "id": popupID, "color": color })
popupID++;
}
//Function to reduce time on active popups
function adjustPopupTime(diff) {
for (popup in activePopups) {
activePopups[popup].time -= diff;
if (activePopups[popup]["time"] < 0) {
activePopups.splice(popup, 1); // Remove popup when time hits 0
}
}
}
function run(func, target, args = null) {
if (isFunction(func)) {
let bound = func.bind(target)
return bound(args)
}
else
return func;
}
function gridRun(layer, func, data, id) {
if (isFunction(layers[layer].grid[func])) {
let bound = layers[layer].grid[func].bind(layers[layer].grid)
return bound(data, id)
}
else
return layers[layer].grid[func];
}

111
js/utils/NumberFormating.js Normal file
View file

@ -0,0 +1,111 @@
function exponentialFormat(num, precision, mantissa = true) {
let e = num.log10().floor()
let m = num.div(Decimal.pow(10, e))
if (m.toStringWithDecimalPlaces(precision) == 10) {
m = decimalOne
e = e.add(1)
}
e = (e.gte(1e9) ? format(e, 3) : (e.gte(10000) ? commaFormat(e, 0) : e.toStringWithDecimalPlaces(0)))
if (mantissa)
return m.toStringWithDecimalPlaces(precision) + "e" + e
else return "e" + e
}
function commaFormat(num, precision) {
if (num === null || num === undefined) return "NaN"
if (num.mag < 0.001) return (0).toFixed(precision)
let init = num.toStringWithDecimalPlaces(precision)
let portions = init.split(".")
portions[0] = portions[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
if (portions.length == 1) return portions[0]
return portions[0] + "." + portions[1]
}
function regularFormat(num, precision) {
if (num === null || num === undefined) return "NaN"
if (num.mag < 0.0001) return (0).toFixed(precision)
if (num.mag < 0.1 && precision !==0) precision = Math.max(precision, 4)
return num.toStringWithDecimalPlaces(precision)
}
function fixValue(x, y = 0) {
return x || new Decimal(y)
}
function sumValues(x) {
x = Object.values(x)
if (!x[0]) return decimalZero
return x.reduce((a, b) => Decimal.add(a, b))
}
function format(decimal, precision = 2, small) {
small = small || modInfo.allowSmall
decimal = new Decimal(decimal)
if (isNaN(decimal.sign) || isNaN(decimal.layer) || isNaN(decimal.mag)) {
player.hasNaN = true;
return "NaN"
}
if (decimal.sign < 0) return "-" + format(decimal.neg(), precision, small)
if (decimal.mag == Number.POSITIVE_INFINITY) return "Infinity"
if (decimal.gte("eeee1000")) {
var slog = decimal.slog()
if (slog.gte(1e6)) return "F" + format(slog.floor())
else return Decimal.pow(10, slog.sub(slog.floor())).toStringWithDecimalPlaces(3) + "F" + commaFormat(slog.floor(), 0)
}
else if (decimal.gte("1e1000000")) return exponentialFormat(decimal, 0, false)
else if (decimal.gte("1e10000")) return exponentialFormat(decimal, 0)
else if (decimal.gte(1e9)) return exponentialFormat(decimal, precision)
else if (decimal.gte(1e3)) return commaFormat(decimal, 0)
else if (decimal.gte(0.0001) || !small) return regularFormat(decimal, precision)
else if (decimal.eq(0)) return (0).toFixed(precision)
decimal = invertOOM(decimal)
let val = ""
if (decimal.lt("1e1000")){
val = exponentialFormat(decimal, precision)
return val.replace(/([^(?:e|F)]*)$/, '-$1')
}
else
return format(decimal, precision) + "⁻¹"
}
function formatWhole(decimal) {
decimal = new Decimal(decimal)
if (decimal.gte(1e9)) return format(decimal, 2)
if (decimal.lte(0.99) && !decimal.eq(0)) return format(decimal, 2)
return format(decimal, 0)
}
function formatTime(s) {
if (s < 60) return format(s) + "s"
else if (s < 3600) return formatWhole(Math.floor(s / 60)) + "m " + format(s % 60) + "s"
else if (s < 86400) return formatWhole(Math.floor(s / 3600)) + "h " + formatWhole(Math.floor(s / 60) % 60) + "m " + format(s % 60) + "s"
else if (s < 31536000) return formatWhole(Math.floor(s / 86400) % 365) + "d " + formatWhole(Math.floor(s / 3600) % 24) + "h " + formatWhole(Math.floor(s / 60) % 60) + "m " + format(s % 60) + "s"
else return formatWhole(Math.floor(s / 31536000)) + "y " + formatWhole(Math.floor(s / 86400) % 365) + "d " + formatWhole(Math.floor(s / 3600) % 24) + "h " + formatWhole(Math.floor(s / 60) % 60) + "m " + format(s % 60) + "s"
}
function toPlaces(x, precision, maxAccepted) {
x = new Decimal(x)
let result = x.toStringWithDecimalPlaces(precision)
if (new Decimal(result).gte(maxAccepted)) {
result = new Decimal(maxAccepted - Math.pow(0.1, precision)).toStringWithDecimalPlaces(precision)
}
return result
}
// Will also display very small numbers
function formatSmall(x, precision=2) {
return format(x, precision, true)
}
function invertOOM(x){
let e = x.log10().ceil()
let m = x.div(Decimal.pow(10, e))
e = e.neg()
x = new Decimal(10).pow(e).times(m)
return x
}

75
js/utils/easyAccess.js Normal file
View file

@ -0,0 +1,75 @@
function hasUpgrade(layer, id) {
return ((player[layer].upgrades.includes(toNumber(id)) || player[layer].upgrades.includes(id.toString())) && !tmp[layer].deactivated)
}
function hasMilestone(layer, id) {
return ((player[layer].milestones.includes(toNumber(id)) || player[layer].milestones.includes(id.toString())) && !tmp[layer].deactivated)
}
function hasAchievement(layer, id) {
return ((player[layer].achievements.includes(toNumber(id)) || player[layer].achievements.includes(id.toString())) && !tmp[layer].deactivated)
}
function hasChallenge(layer, id) {
return ((player[layer].challenges[id]) && !tmp[layer].deactivated)
}
function maxedChallenge(layer, id) {
return ((player[layer].challenges[id] >= tmp[layer].challenges[id].completionLimit) && !tmp[layer].deactivated)
}
function challengeCompletions(layer, id) {
return (player[layer].challenges[id])
}
function getBuyableAmount(layer, id) {
return (player[layer].buyables[id])
}
function setBuyableAmount(layer, id, amt) {
player[layer].buyables[id] = amt
}
function addBuyables(layer, id, amt) {
player[layer].buyables[id] = player[layer].buyables[id].add(amt)
}
function getClickableState(layer, id) {
return (player[layer].clickables[id])
}
function setClickableState(layer, id, state) {
player[layer].clickables[id] = state
}
function getGridData(layer, id) {
return (player[layer].grid[id])
}
function setGridData(layer, id, data) {
player[layer].grid[id] = data
}
function upgradeEffect(layer, id) {
return (tmp[layer].upgrades[id].effect)
}
function challengeEffect(layer, id) {
return (tmp[layer].challenges[id].rewardEffect)
}
function buyableEffect(layer, id) {
return (tmp[layer].buyables[id].effect)
}
function clickableEffect(layer, id) {
return (tmp[layer].clickables[id].effect)
}
function achievementEffect(layer, id) {
return (tmp[layer].achievements[id].effect)
}
function gridEffect(layer, id) {
return (gridRun(layer, 'getEffect', player[layer].grid[id], id))
}

78
js/utils/options.js Normal file
View file

@ -0,0 +1,78 @@
// ************ Options ************
let options = {}
function getStartOptions() {
return {
autosave: true,
msDisplay: "always",
theme: "default",
hqTree: false,
offlineProd: true,
hideChallenges: false,
showStory: true,
forceOneTab: false,
oldStyle: false,
tooltipForcing: true,
}
}
function toggleOpt(name) {
if (name == "oldStyle" && styleCooldown > 0)
return;
options[name] = !options[name];
if (name == "hqTree")
changeTreeQuality();
if (name == "oldStyle")
updateStyle();
}
var styleCooldown = 0;
function updateStyle() {
styleCooldown = 1;
let css = document.getElementById("styleStuff");
css.href = options.oldStyle ? "oldStyle.css" : "style.css";
needCanvasUpdate = true;
}
function changeTreeQuality() {
var on = options.hqTree;
document.body.style.setProperty('--hqProperty1', on ? "2px solid" : "4px solid");
document.body.style.setProperty('--hqProperty2a', on ? "-4px -4px 4px rgba(0, 0, 0, 0.25) inset" : "-4px -4px 4px rgba(0, 0, 0, 0) inset");
document.body.style.setProperty('--hqProperty2b', on ? "0px 0px 20px var(--background)" : "");
document.body.style.setProperty('--hqProperty3', on ? "2px 2px 4px rgba(0, 0, 0, 0.25)" : "none");
}
function toggleAuto(toggle) {
Vue.set(player[toggle[0]], [toggle[1]], !player[toggle[0]][toggle[1]]);
needCanvasUpdate=true
}
const MS_DISPLAYS = ["ALL", "LAST, AUTO, INCOMPLETE", "AUTOMATION, INCOMPLETE", "INCOMPLETE", "NONE"];
const MS_SETTINGS = ["always", "last", "automation", "incomplete", "never"];
function adjustMSDisp() {
options.msDisplay = MS_SETTINGS[(MS_SETTINGS.indexOf(options.msDisplay) + 1) % 5];
}
function milestoneShown(layer, id) {
complete = player[layer].milestones.includes(id);
auto = layers[layer].milestones[id].toggles;
switch (options.msDisplay) {
case "always":
return true;
break;
case "last":
return (auto) || !complete || player[layer].lastMilestone === id;
break;
case "automation":
return (auto) || !complete;
break;
case "incomplete":
return !complete;
break;
case "never":
return false;
break;
}
return false;
}

322
js/utils/save.js Normal file
View file

@ -0,0 +1,322 @@
// ************ Save stuff ************
function save(force) {
NaNcheck(player)
if (NaNalert && !force) return
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(player)))));
localStorage.setItem(modInfo.id+"_options", btoa(unescape(encodeURIComponent(JSON.stringify(options)))));
}
function startPlayerBase() {
return {
tab: layoutInfo.startTab,
navTab: (layoutInfo.showTree ? layoutInfo.startNavTab : "none"),
time: Date.now(),
notify: {},
versionType: modInfo.id,
version: VERSION.num,
beta: VERSION.beta,
timePlayed: 0,
keepGoing: false,
hasNaN: false,
points: modInfo.initialStartPoints,
subtabs: {},
lastSafeTab: (readData(layoutInfo.showTree) ? "none" : layoutInfo.startTab)
};
}
function getStartPlayer() {
playerdata = startPlayerBase();
if (addedPlayerData) {
extradata = addedPlayerData();
for (thing in extradata)
playerdata[thing] = extradata[thing];
}
playerdata.infoboxes = {};
for (layer in layers) {
playerdata[layer] = getStartLayerData(layer);
if (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)) {
playerdata.subtabs[layer] = {};
playerdata.subtabs[layer].mainTabs = Object.keys(layers[layer].tabFormat)[0];
}
if (layers[layer].microtabs) {
if (playerdata.subtabs[layer] == undefined)
playerdata.subtabs[layer] = {};
for (item in layers[layer].microtabs)
playerdata.subtabs[layer][item] = Object.keys(layers[layer].microtabs[item])[0];
}
if (layers[layer].infoboxes) {
if (playerdata.infoboxes[layer] == undefined)
playerdata.infoboxes[layer] = {};
for (item in layers[layer].infoboxes)
playerdata.infoboxes[layer][item] = false;
}
}
return playerdata;
}
function getStartLayerData(layer) {
layerdata = {};
if (layers[layer].startData)
layerdata = layers[layer].startData();
if (layerdata.unlocked === undefined)
layerdata.unlocked = true;
if (layerdata.total === undefined)
layerdata.total = decimalZero;
if (layerdata.best === undefined)
layerdata.best = decimalZero;
if (layerdata.resetTime === undefined)
layerdata.resetTime = 0;
if (layerdata.forceTooltip === undefined)
layerdata.forceTooltip = false;
layerdata.buyables = getStartBuyables(layer);
if (layerdata.noRespecConfirm === undefined) layerdata.noRespecConfirm = false
if (layerdata.clickables == undefined)
layerdata.clickables = getStartClickables(layer);
layerdata.spentOnBuyables = decimalZero;
layerdata.upgrades = [];
layerdata.milestones = [];
layerdata.lastMilestone = null;
layerdata.achievements = [];
layerdata.challenges = getStartChallenges(layer);
layerdata.grid = getStartGrid(layer);
layerdata.prevTab = ""
return layerdata;
}
function getStartBuyables(layer) {
let data = {};
if (layers[layer].buyables) {
for (id in layers[layer].buyables)
if (isPlainObject(layers[layer].buyables[id]))
data[id] = decimalZero;
}
return data;
}
function getStartClickables(layer) {
let data = {};
if (layers[layer].clickables) {
for (id in layers[layer].clickables)
if (isPlainObject(layers[layer].clickables[id]))
data[id] = "";
}
return data;
}
function getStartChallenges(layer) {
let data = {};
if (layers[layer].challenges) {
for (id in layers[layer].challenges)
if (isPlainObject(layers[layer].challenges[id]))
data[id] = 0;
}
return data;
}
function getStartGrid(layer) {
let data = {};
if (! layers[layer].grid) return data
if (layers[layer].grid.maxRows === undefined) layers[layer].grid.maxRows=layers[layer].grid.rows
if (layers[layer].grid.maxCols === undefined) layers[layer].grid.maxCols=layers[layer].grid.cols
for (let y = 1; y <= layers[layer].grid.maxRows; y++) {
for (let x = 1; x <= layers[layer].grid.maxCols; x++) {
data[100*y + x] = layers[layer].grid.getStartData(100*y + x)
}
}
return data;
}
function fixSave() {
defaultData = getStartPlayer();
fixData(defaultData, player);
for (layer in layers) {
if (player[layer].best !== undefined)
player[layer].best = new Decimal(player[layer].best);
if (player[layer].total !== undefined)
player[layer].total = new Decimal(player[layer].total);
if (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)) {
if (!Object.keys(layers[layer].tabFormat).includes(player.subtabs[layer].mainTabs))
player.subtabs[layer].mainTabs = Object.keys(layers[layer].tabFormat)[0];
}
if (layers[layer].microtabs) {
for (item in layers[layer].microtabs)
if (!Object.keys(layers[layer].microtabs[item]).includes(player.subtabs[layer][item]))
player.subtabs[layer][item] = Object.keys(layers[layer].microtabs[item])[0];
}
}
}
function fixData(defaultData, newData) {
for (item in defaultData) {
if (defaultData[item] == null) {
if (newData[item] === undefined)
newData[item] = null;
}
else if (Array.isArray(defaultData[item])) {
if (newData[item] === undefined)
newData[item] = defaultData[item];
else
fixData(defaultData[item], newData[item]);
}
else if (defaultData[item] instanceof Decimal) { // Convert to Decimal
if (newData[item] === undefined)
newData[item] = defaultData[item];
else
newData[item] = new Decimal(newData[item]);
}
else if ((!!defaultData[item]) && (typeof defaultData[item] === "object")) {
if (newData[item] === undefined || (typeof defaultData[item] !== "object"))
newData[item] = defaultData[item];
else
fixData(defaultData[item], newData[item]);
}
else {
if (newData[item] === undefined)
newData[item] = defaultData[item];
}
}
}
function load() {
let get = localStorage.getItem(modInfo.id);
if (get === null || get === undefined) {
player = getStartPlayer();
options = getStartOptions();
}
else {
player = Object.assign(getStartPlayer(), JSON.parse(decodeURIComponent(escape(atob(get)))));
fixSave();
loadOptions();
}
if (options.offlineProd) {
if (player.offTime === undefined)
player.offTime = { remain: 0 };
player.offTime.remain += (Date.now() - player.time) / 1000;
}
player.time = Date.now();
versionCheck();
changeTheme();
changeTreeQuality();
updateLayers();
setupModInfo();
setupTemp();
updateTemp();
updateTemp();
updateTabFormats()
loadVue();
}
function loadOptions() {
let get2 = localStorage.getItem(modInfo.id+"_options");
if (get2)
options = Object.assign(getStartOptions(), JSON.parse(decodeURIComponent(escape(atob(get2)))));
else
options = getStartOptions()
if (themes.indexOf(options.theme) < 0) theme = "default"
fixData(options, getStartOptions())
}
function setupModInfo() {
modInfo.changelog = changelog;
modInfo.winText = winText ? winText : `Congratulations! You have reached the end and beaten this game, but for now...`;
}
function fixNaNs() {
NaNcheck(player);
}
function NaNcheck(data) {
for (item in data) {
if (data[item] == null) {
}
else if (Array.isArray(data[item])) {
NaNcheck(data[item]);
}
else if (data[item] !== data[item] || checkDecimalNaN(data[item])) {
if (!NaNalert) {
clearInterval(interval);
NaNalert = true;
alert("Invalid value found in player, named '" + item + "'. Please let the creator of this mod know! You can refresh the page, and you will be un-NaNed.")
return
}
}
else if (data[item] instanceof Decimal) {
}
else if ((!!data[item]) && (data[item].constructor === Object)) {
NaNcheck(data[item]);
}
}
}
function exportSave() {
//if (NaNalert) return
let str = btoa(JSON.stringify(player));
const el = document.createElement("textarea");
el.value = str;
document.body.appendChild(el);
el.select();
el.setSelectionRange(0, 99999);
document.execCommand("copy");
document.body.removeChild(el);
}
function importSave(imported = undefined, forced = false) {
if (imported === undefined)
imported = prompt("Paste your save here");
try {
tempPlr = Object.assign(getStartPlayer(), JSON.parse(atob(imported)));
if (tempPlr.versionType != modInfo.id && !forced && !confirm("This save appears to be for a different mod! Are you sure you want to import?")) // Wrong save (use "Forced" to force it to accept.)
return;
player = tempPlr;
player.versionType = modInfo.id;
fixSave();
versionCheck();
NaNcheck(save)
save();
window.location.reload();
} catch (e) {
return;
}
}
function versionCheck() {
let setVersion = true;
if (player.versionType === undefined || player.version === undefined) {
player.versionType = modInfo.id;
player.version = 0;
}
if (setVersion) {
if (player.versionType == modInfo.id && VERSION.num > player.version) {
player.keepGoing = false;
if (fixOldSave)
fixOldSave(player.version);
}
player.versionType = getStartPlayer().versionType;
player.version = VERSION.num;
player.beta = VERSION.beta;
}
}
var saveInterval = setInterval(function () {
if (player === undefined)
return;
if (tmp.gameEnded && !player.keepGoing)
return;
if (options.autosave)
save();
}, 5000);
window.onbeforeunload = () => {
if (player.autosave) {
save();
}
};

51
js/utils/themes.js Normal file
View file

@ -0,0 +1,51 @@
// ************ Themes ************
var themes = ["default", "aqua"]
var colors = {
default: {
1: "#ffffff",//Branch color 1
2: "#bfbfbf",//Branch color 2
3: "#7f7f7f",//Branch color 3
color: "#dfdfdf",
points: "#ffffff",
locked: "#bf8f8f",
background: "#0f0f0f",
background_tooltip: "rgba(0, 0, 0, 0.75)",
},
aqua: {
1: "#bfdfff",
2: "#8fa7bf",
3: "#5f6f7f",
color: "#bfdfff",
points: "#dfefff",
locked: "#c4a7b3",
background: "#001f3f",
background_tooltip: "rgba(0, 15, 31, 0.75)",
},
}
function changeTheme() {
colors_theme = colors[options.theme || "default"];
document.body.style.setProperty('--background', colors_theme["background"]);
document.body.style.setProperty('--background_tooltip', colors_theme["background_tooltip"]);
document.body.style.setProperty('--color', colors_theme["color"]);
document.body.style.setProperty('--points', colors_theme["points"]);
document.body.style.setProperty("--locked", colors_theme["locked"]);
}
function getThemeName() {
return options.theme? options.theme : "default";
}
function switchTheme() {
let index = themes.indexOf(options.theme)
if (options.theme === null || index >= themes.length-1 || index < 0) {
options.theme = themes[0];
}
else {
index ++;
options.theme = themes[index];
options.theme = themes[1];
}
changeTheme();
resizeCanvas();
}

BIN
options_wheel.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
remove.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
resources/genericParticle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB