The Ultimate Guide to the Internal Code of TMT

Made by TheMKeyHolder!

technical/break_eternity.js

You probably don’t want to touch this. At all! But if you do:

Switching number library

Replace the code with the code of another library, and add Decimal = OmegaNum (or whatever numlib you use) to the end. You also want to change the formatting if you need numbers this high.

Changing BE functions

Don’t do this. Why would you do this? If you REALLY want to do this, search for the function Decimal.prototype.<insert function here!> and then edit it. Note that this will break if you do not know what you are doing.

Make it work with normal operators!

Sadly, this is not possible. JS simply does not have operator overloading, so this won’t work.

technical/canvas.js

This is the thing that makes the lines on the tree display. If you want to edit this, you may want to know how the JS canvas works.

Change the color or width of the tree branches

Change the color

On line 59, change color_id to a CSS color, a CSS gradient, or a pattern. A color is just a “#abcdef”, a CSS color name, or a few other things. For gradients and patterns, the internet has resources for those (this is not a JS tutorial!)

Change the width

To change the width of the branches, simply set the width value on line 64 to the amount of pixels wide it should be.

Change where the branches are going

This makes me think that you’re probably not making a tree if you want to do this, but:
On lines 78-81, the x and y coordinates of the start and end are there. You can change how they are calculated, or even set them to a fixed value. If you would like to make the tree drawing different rather than the individual branches, go to drawTree and drawComponentBranches in the file and edit them. There are many things you could be oding with this, so it’s not like I can exactly tell you what to do for this.

technical/displays.js

This is where the “displays” are calculated. (before being put into temp, of course.)
Do not touch anything outside of these things! Don’t fuck up the width or OOM/s counter please.

Change prestige button text/Add custom layer type (part ?)

NOTE: If you want to change INDIVIDUAL ones, use the built-in feature documented in the docs! (layer-features.md)
Go to the prestigeButtonText function.
This is for if you want to change the defaults. You can set specific values for each type for each if-statement (you can turn this into a switch!) or you can throw in a totally different function to calculate it. It doesn’t really matter. This also is a part of making a custom layer type.

Change default layer/node style.

Go to the constructNodeStyle function.
Don’t do this if you only want to change the image or color, or an individual layer style. Instead, use the style or image functions in each layer.
If you want to change the default, you can push things to the “style” array, such as size and things. (you can also edit the CSS for this)

Change challenge style.

Go to the challengeStyle function.
There is zero reason to do this other than trolling the player. Note that this isn’t actually changing the style, but rather what the player sees the challenge as. It can either be canComplete, done, or locked. You can also for some reason add some other class, but that’s probably not what you were looking for.

Change challenge button text.

Go to the challengeButtonText function.
Once again, this is just for trolling. Just change what the things return.

Change default achievement style.

Go to the achievementStyle function.
Once again, trolling unless you’re trying to edit the size, etc.
Add whatever CSS attributes you want to this using an object and pushing it to the “style” array.

Change default bar style.

I guess just change each of the four directions in the bar style function or throw logic out and make your own code? I don’t know why you would try doing this anyways.
You can also change the transition duration.

Change how tabFormat works.

If you are trying to add a custom thing, just go to components.js
If you are trying to change how the WHOLE THING works, go right ahead. There’s nothing stopping you, but I honestly have no idea what you would like to change.

technical/layerSupport.js

This is where the layer functionality comes from.

Change default layer glow.

Simply go to line 7 (const defaultGlow = <color>) and change it!

Override layerShown

Just change the layerShown function (why are you doing this anyways?)

Add some default hotkeys

NOTE: This is more for people who want to make their own TMT “plugins”.
Simply change the updateHotkeys function and manually add some of your own hotkeys through the hotkeys object!

Add layer sections/change how the tree works.

Add some new types on lines 37-39 and then add things in updateLayers to account for those. setupLayers should also account for this when setting where the layer goes.

Add new auto-assigned properties

Go into setupLayer and follow the examples in the code, and for each, let’s say achievement, run layers[layer].achievements[thing].propertyname = propertyvalue

Add default layer properties

Go into the section of lines 180-193 and add your own default props.

Change default tabFormat

This doesn’t seem like a very necessary thing to do? But anyways, go into addLayer and change the “format” object to what you want using the code you want.

Hide stuff in info/options/changelog

Go into the last lines of layerSupport.js and you will see that these layers actually work like normal ones! You can add upgrades, buyables, clickables, etc. (but why would you do this?). If you want to put things into the options menu or the info itself, head into systemComponents.js.

technical/loader.js

This is the script that loads in external files. Don’t touch this unless you’re doing something really wacky probably

Load in file based on localStorage

Simply use the code in the file already inside of the for loop, and change that to the different urls (decided based on localStorage of course)

Load in random files

Just use that code but attach it to an if(Math.random()...).

technical/particleSystem.js

Where particles are made and loaded!
I don’t see why you would want to change this, but:

Change particle opacity

Change the getOpacity function to whatever you want! It will return the opacity as a number between 0 and 1.

Change particle style

Go to constructParticleStyle and change the style object that it returns to add or modify attributes.

technical/systemComponents.js

Where the “system” components are stored. Probably shouldn’t be touched except in rare cases
There really isn’t any other specific things, but if you know Vue you can change how ecah of the components work and look.

Adding custom options

You can add options in the option-tab component by adding buttons (and actual functionality of course, check the options.js section).

Adding custom info

Simply add HTML to the info-tab component.

technical/temp.js

This is where all of the “front-end” things happen!

Add custom temp value

In the updateTemp and setupTemp functions, you can add a special “global” temp value or a special “layer” temp value, by copy-pasting the exitsing code and changing the property and the value.

Skip computing for a layer

Put a “return” at the beginning of an updateTemp and make it conditional (or not, if you want all frozen layers???)
This is used in Flame Tree to save computation time

Disable NaN checks

If you, for some reason, do not want an NaN check to occur ever, simply change line 178 in checkDecimalNaN to return false;.

utils/NumberFormatting.js

This is where all the format code is.
90% of these functions are not to be touched.

Format larger time units

Extend the formatTime function and add new units if you wish (basically by copy-pasting and changing stuff.)

Change notation

Simply edit the format function and make it return whatever you want the final reslt to be.

utils/easyAccess.js

The place where all of the “shortcuts” are.
If you would like to add your own, simply follow how the previous examples worked. A 3-line function with 1 line of code.

utils/options.js

Where all of the options code is.

Make a custom option (cont.)

Add your own function if you would like to make something in this file, otherwise, simply add it to the getStartOptions and reference it elsewhere!

utils/save.js

Saving works because of this file.

Change default layer data

In the function getStartLayerData, you can add things.

Modify offline progress

In the load function, there should be a part about offline progress. You can modify this in whatever way you want in order to get the offline progress that your mod requires.

Run code upon load

In the load function, simply add things to the end of the function (or at some other point if it has to be earlier than setup things)

utils/themes.js

Theme settings.

Create custom themes

Edit the themes object and add as many as you would like!

components.js

Where each of the Vue components are.

Add custom tabFormat thing

Each component already is a part of tabFormat! Simply add a component and you have a custom thing. The component is supplied with the layer of the tabFormat.
This does require Vue knowledge, however.

Put upgrades/buyables/etc. in component.

Each of these are already a component, so you can just use something like <buyable layer="p" id="11"></buyable> to display prestige buyable with id 11.

Give challenge/infobox/etc. an onclick.

Just add an onclick attribute or the Vue equivalent in order to make it so when you click a challenge or an infobox, it does something.

Add new Vue variables

You probably don’t need to do this (unless you’re editing index.html, but still), but simply add it at the end of the file.

game.js

Where a lot of the resetting, etc. code is.

Change default prestige formulae

getResetGain & getNextAt can be modified globally as well. Change these to whatever you want them to be.

Change how softcaps work

Modify the softcap function, and change the sqrt to a log, or anything you would like.

Have something happen on all resets.

Modify the global doReset function and possibly add something at the end.

Manually add things in the main game loop.

gameLoop function can be modified easily to have things happen. Just add the code you want to run in, and it will be run.

Speed up or slow down time

Multiply, or modify in some way, the diff variable at the beginning of the gameLoop in order to make time run faster.

Make canvas update faster

This is what you want if you have some fast moving layer, just change the 500 in the last line to a 50 or whatever amount of millisecond time you want. You can also manually force a canvas update by setting needCanvasUpdate to true.

tree.js

Normally not a system file, because not many use the tree customization feature, but still has one thing not known to everyone.

Have content in tree tab

You can modify the tabFormat of the tree-tab at the end and actually add upgrades, etc. or just use a layer proxy.

utils.js

Utility file. Not meant to be modified, but there is a special thing in there that may be important

Manually do a popup

The doPopup function does that for you already, and you can put whatever you want in there.

index.html

Normally NEVER meant to be modified, as you can now add additional scripts, but there are still some things one may like to do.

Display “other” layers in certain places

OTHER_LAYERS contains layers that have a displayRow that is not a number or “side”. These include the option/changelog/info layers, but you can choose to display all of the “otherside” layers using Vue by adding a section and copying the “side” layer code and using OTHER_LAYERS['otherside'].

Other

Dynamically generate a layer

Sadly, this is not possible (or at least we have not found a way to get Vue to cooperate.) If you found a way to do this, please let us know!
If your question was not on that list and you thought it needed internal editing, ask it in this Modding Help topic.

9 Likes

There’s hacky way of adding layer after game loads. The anwser is to load the game again! But to do so you need to revert document.body to it’s original state.
Code looks like this
game.js

...
var ticking = false

var lateAddLayer = function (layerName, layerData) {
    layersNeededToLoad.push([layerName, layerData])
}

var lateDeleteLayer = function (layerID) {
    layersNeededToDelete.push(layerID)
}

var reloadVue = function () {
    save()
    document.body.innerHTML = indexCopy
    save()
    load()
}

var layersNeededToLoad = []
var layersNeededToDelete = []


var interval = setInterval(function() {
    if (player===undefined||tmp===undefined) return;
    if (ticking) return;
    if (tmp.gameEnded&&!player.keepGoing) return;
    ticking = true


    for (const layer of layersNeededToLoad) {
        addLayer(layer[0], layer[1])
        reloadVue()
    }

    for (const layer of layersNeededToDelete) {
        delete player[layer]
        delete tmp[layer]
        delete layers[layer]
        LAYERS = LAYERS.filter(e => e != layer)
        reloadVue()
    }

    layersNeededToLoad = []
    layersNeededToDelete = []

... 

anywhere else

var indexCopy = `
<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">... 
6 Likes