Initial commit

2024-03-03 11:53:50 +00:00 · 2024-03-03 11:53:50 +00:00 · 3f8de45f2a
commit 3f8de45f2a
64 changed files with 10011 additions and 0 deletions
--- a/js/technical/break_eternity.js
+++ b/js/technical/break_eternity.js
--- a/js/technical/canvas.js
+++ b/js/technical/canvas.js
@ -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();
+}
--- a/js/technical/displays.js
+++ b/js/technical/displays.js
@ -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))
+		}
+	}
+}
--- a/js/technical/layerSupport.js
+++ b/js/technical/layerSupport.js
@ -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"
+})
--- a/js/technical/loader.js
+++ b/js/technical/loader.js
@ -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"));
+}
+
--- a/js/technical/particleSystem.js
+++ b/js/technical/particleSystem.js
@ -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}
--- a/js/technical/systemComponents.js
+++ b/js/technical/systemComponents.js
@ -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>
+		`
+	}
+
+}
+
--- a/js/technical/temp.js
+++ b/js/technical/temp.js
@ -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)
+}