incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-27 18:41:57 +00:00
Code Issues Releases Activity Actions

Added leftTab and related features

Browse source
This commit is contained in:
Harley White 2021-05-26 01:44:12 -04:00
parent 7a287042cd
commit 1a96d7d226
14 changed files with 64 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changelog.md
View file

@ -3,6 +3,7 @@
- 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. - 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.
- Fixed the infobox not appearing in default tabFormat. - Fixed the infobox not appearing in default tabFormat.
- Fixed upgrade/buyable layering when they are hovered over. - Fixed upgrade/buyable layering when they are hovered over.
- Added leftTab, which makes a layer use the left tab instead of the right one (good for trees-within-trees and such)
### v2.5.10.2 - 5/24/21 ### v2.5.10.2 - 5/24/21
- Fixed some things in the tree tab not being clickable. - Fixed some things in the tree tab not being clickable.

4
demo.html
View file

@ -67,8 +67,8 @@
<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px" > <div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px" >
{{VERSION.withoutName}}</div> {{VERSION.withoutName}}</div>
<button <button
v-if="player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside')" 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()">←</button> 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" <img id="optionWheel" class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png"
onclick="showTab('options-tab')"></img> 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="info" v-if="player.tab!='info-tab'" class="overlayThing" onclick="showTab('info-tab')"><br>i</div>

6
docs/layer-features.md
View file

@ -104,7 +104,7 @@ You can make almost any value dynamic by using a function in its place, includin
- 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.) - 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. - 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 divide and root the cost of the resource. 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. - directMult(): **optional**. Directly multiplies the resource gain, after exponents and softcaps. For static layers, actually multiplies resource gain instead of reducing the cost.
@ -173,6 +173,10 @@ componentStyles: {
} }
``` ```
- 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 on the layer. You will have to disable effects of buyables, the innate layer effect, and possibly other things yourself. - 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 on the layer. You will have to disable effects of buyables, the innate layer effect, and possibly other things yourself.
## Custom Prestige type ## Custom Prestige type

2
docs/making-a-mod.md
View file

@ -62,4 +62,4 @@ Refresh the page again, and it should work! You are gaining 2 points per second!
## Upgraded upgrades ## Upgraded upgrades
To be continued... Now that you know how to make an upgrade, let's

5
index.html
View file

@ -30,6 +30,7 @@
</head> </head>
<body onload="load()" onmousemove="updateMouse(event)"> <body onload="load()" onmousemove="updateMouse(event)">
<div id="app"> <div id="app">
<canvas id="treeCanvas" class="canvas" v-if="!(gameEnded && !player.keepGoing)"></canvas> <canvas id="treeCanvas" class="canvas" v-if="!(gameEnded && !player.keepGoing)"></canvas>
@ -66,8 +67,8 @@
<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px" > <div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px" >
{{VERSION.withoutName}}</div> {{VERSION.withoutName}}</div>
<button <button
v-if="player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside')" 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()">←</button> 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" <img id="optionWheel" class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png"
onclick="showTab('options-tab')"></img> 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="info" v-if="player.tab!='info-tab'" class="overlayThing" onclick="showTab('info-tab')"><br>i</div>

9
js/Demo/demoLayers.js
View file

@ -384,6 +384,15 @@ addLayer("c", {
// This layer is mostly minimal but it uses a custom prestige type and a clickable // This layer is mostly minimal but it uses a custom prestige type and a clickable
addLayer("f", { addLayer("f", {
infoboxes:{
coolInfo: {
title: "Lore",
titleStyle: {'color': '#FE0000'},
body: "DEEP LORE!",
bodyStyle: {'background-color': "#0000EE"}
}
},
startData() { return { startData() { return {
unlocked: false, unlocked: false,
points: new Decimal(0), points: new Decimal(0),

5
js/Demo/demoTree.js
View file

@ -45,5 +45,8 @@ addNode("h", {
) )
addLayer("tree-tab", { addLayer("tree-tab", {
tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]] tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]],
previousTab: "",
leftTab: true,
}) })

2
js/components.js
View file

@ -498,7 +498,7 @@ function loadVue() {
template: `<div> template: `<div>
<span class="upgRow" v-for="(row, r) in data"><table> <span class="upgRow" v-for="(row, r) in data"><table>
<span v-for="(node, id) in row" style = "{width: 0px}"> <span v-for="(node, id) in row" style = "{width: 0px}">
<tree-node :layer='node' :abb='tmp[node].symbol' :key="key + '-' + r + '-' + id"></tree-node> <tree-node :layer='node' :prev='layer' :abb='tmp[node].symbol' :key="key + '-' + r + '-' + id"></tree-node>
</span> </span>
<tr><table><button class="treeNode hidden"></button></table></tr> <tr><table><button class="treeNode hidden"></button></table></tr>
</span></div> </span></div>

2
js/game.js
View file

@ -139,7 +139,7 @@ function rowReset(row, layer) {
} }
function layerDataReset(layer, keep = []) { function layerDataReset(layer, keep = []) {
let storedData = {unlocked: player[layer].unlocked, forceTooltip: player[layer].forceTooltip, noRespecConfirm: player[layer].noRespecConfirm} // Always keep these 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) { for (thing in keep) {
if (player[layer][keep[thing]] !== undefined) if (player[layer][keep[thing]] !== undefined)

1
js/technical/displays.js
View file

@ -55,6 +55,7 @@ function updateWidth() {
var splitScreen = screenWidth >= 1024 var splitScreen = screenWidth >= 1024
if (player.forceOneTab) splitScreen = false if (player.forceOneTab) splitScreen = false
if (player.navTab == "none") splitScreen = true
tmp.other.screenWidth = screenWidth tmp.other.screenWidth = screenWidth
tmp.other.screenHeight = window.innerHeight tmp.other.screenHeight = window.innerHeight

15
js/technical/systemComponents.js
View file

@ -13,13 +13,20 @@ var systemComponents = {
}, },
'tree-node': { 'tree-node': {
props: ['layer', 'abb', 'size'], props: ['layer', 'abb', 'size', 'prev'],
template: ` template: `
<button v-if="nodeShown(layer)" <button v-if="nodeShown(layer)"
v-bind:id="layer" v-bind:id="layer"
v-on:click="function() { v-on:click="function() {
if (shiftDown) player[layer].forceTooltip = !player[layer].forceTooltip if (shiftDown) player[layer].forceTooltip = !player[layer].forceTooltip
else if(tmp[layer].isLayer) {showTab(layer)} 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])} else {run(layers[layer].onClick, layers[layer])}
}" }"
@ -36,7 +43,7 @@ var systemComponents = {
locked: tmp[layer].isLayer ? !(player[layer].unlocked || tmp[layer].canReset) : !(tmp[layer].canClick), locked: tmp[layer].isLayer ? !(player[layer].unlocked || tmp[layer].canReset) : !(tmp[layer].canClick),
notify: tmp[layer].notify && player[layer].unlocked, notify: tmp[layer].notify && player[layer].unlocked,
resetNotify: tmp[layer].prestigeNotify, resetNotify: tmp[layer].prestigeNotify,
can: ((player[layer].unlocked || tmp[layer].isLayer) && tmp[layer].isLayer) || (!tmp[layer].isLayer && tmp[layer].canClick), can: ((player[layer].unlocked || tmp[layer].canReset) && tmp[layer].isLayer) || (!tmp[layer].isLayer && tmp[layer].canClick),
front: !tmp.scrolled, front: !tmp.scrolled,
}" }"
v-bind:style="constructNodeStyle(layer)"> v-bind:style="constructNodeStyle(layer)">
@ -60,7 +67,7 @@ var systemComponents = {
'layer-tab': { 'layer-tab': {
props: ['layer', 'back', 'spacing', 'embedded'], 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 : {}]"> 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 : {}]">
<div v-if="back"><button v-bind:class="back == 'big' ? 'other-back' : 'back'" v-on:click="goBack()">←</button></div> <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="!tmp[layer].tabFormat">
<div v-if="spacing" v-bind:style="{'height': spacing}" :key="this.$vnode.key + '-spacing'"></div> <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> <infobox v-if="tmp[layer].infoboxes" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]":key="this.$vnode.key + '-info'"></infobox>

4
js/tree.js
View file

@ -16,5 +16,7 @@ addNode("blank", {
addLayer("tree-tab", { addLayer("tree-tab", {
tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]] tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]],
previousTab: "",
leftTab: true,
}) })

33
js/utils.js
View file

@ -137,37 +137,47 @@ function inChallenge(layer, id) {
// ************ Misc ************ // ************ Misc ************
var onTreeTab = true var onTreeTab = true
function showTab(name) {
function showTab(name, prev) {
if (LAYERS.includes(name) && !layerunlocked(name)) return if (LAYERS.includes(name) && !layerunlocked(name)) return
if (player.tab !== name) clearParticles(function(p) {return p.layer === player.tab}) if (player.tab !== name) clearParticles(function(p) {return p.layer === player.tab})
if (player.tab === name && isPlainObject(tmp[name].tabFormat)) { if (tmp[name] && player.tab === name && isPlainObject(tmp[name].tabFormat)) {
player.subtabs[name].mainTabs = Object.keys(layers[name].tabFormat)[0] player.subtabs[name].mainTabs = Object.keys(layers[name].tabFormat)[0]
} }
var toTreeTab = name == "none" var toTreeTab = name == "none"
player.tab = name player.tab = name
if (player.navTab == "none" && (tmp[name].row !== "side") && (tmp[name].row !== "otherside")) player.lastSafeTab = name if (tmp[name] && (tmp[name].row !== "side") && (tmp[name].row !== "otherside")) player.lastSafeTab = name
delete player.notify[name]
updateTabFormats() updateTabFormats()
needCanvasUpdate = true needCanvasUpdate = true
document.activeElement.blur() document.activeElement.blur()
} }
function showNavTab(name) { function showNavTab(name, prev) {
console.log(prev)
if (LAYERS.includes(name) && !layerunlocked(name)) return if (LAYERS.includes(name) && !layerunlocked(name)) return
if (player.navTab !== name) clearParticles(function(p) {return p.layer === player.navTab}) 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" var toTreeTab = name == "tree-tab"
console.log(name + prev)
if (!tmp[prev]?.leftTab == !tmp[name]?.leftTab) player[name].prevTab = prev
else if (player[name])
player[name].prevTab = ""
player.navTab = name player.navTab = name
player.notify[name] = false
updateTabFormats() updateTabFormats()
needCanvasUpdate = true needCanvasUpdate = true
} }
function goBack() { function goBack(layer) {
if (player.navTab !== "none") showTab("none") let nextTab = "none"
else showTab(player.lastSafeTab)
if (player[layer].prevTab) nextTab = player[layer].prevTab
if (player.navTab !== "none" && (tmp[layer]?.row == "side" || tmp[layer].row == "side")) nextTab = player.lastSafeTab
if (tmp[layer].leftTab) showNavTab(nextTab, layer)
else showTab(nextTab, layer)
} }
function layOver(obj1, obj2) { function layOver(obj1, obj2) {
@ -239,7 +249,6 @@ function layerunlocked(layer) {
function keepGoing() { function keepGoing() {
player.keepGoing = true; player.keepGoing = true;
needCanvasUpdate = true; needCanvasUpdate = true;
goBack()
} }
function toNumber(x) { function toNumber(x) {

1
js/utils/save.js
View file

@ -87,6 +87,7 @@ function getStartLayerData(layer) {
layerdata.achievements = []; layerdata.achievements = [];
layerdata.challenges = getStartChallenges(layer); layerdata.challenges = getStartChallenges(layer);
layerdata.grid = getStartGrid(layer); layerdata.grid = getStartGrid(layer);
layerdata.prevTab = ""
return layerdata; return layerdata;
} }