mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-27 18:41:57 +00:00
Added leftTab and related features
This commit is contained in:
Harley White
parent
7a287042cd
commit
1a96d7d226
14 changed files with 64 additions and 26 deletions
|
|
@ -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.
|
||||
- Fixed the infobox not appearing in default tabFormat.
|
||||
- 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
|
||||
- Fixed some things in the tree tab not being clickable.
|
||||
|
|
|
|||
|
|
@ -67,8 +67,8 @@
|
|||
<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')"
|
||||
class="other-back overlayThing" onclick="goBack()">←</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>
|
||||
|
|
|
|||
|
|
@ -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.)
|
||||
|
||||
- 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.
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
## Custom Prestige type
|
||||
|
|
|
|||
|
|
@ -62,4 +62,4 @@ Refresh the page again, and it should work! You are gaining 2 points per second!
|
|||
|
||||
## Upgraded upgrades
|
||||
|
||||
To be continued...
|
||||
Now that you know how to make an upgrade, let's
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
|
||||
</head>
|
||||
|
||||
|
||||
<body onload="load()" onmousemove="updateMouse(event)">
|
||||
<div id="app">
|
||||
<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" >
|
||||
{{VERSION.withoutName}}</div>
|
||||
<button
|
||||
v-if="player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside')"
|
||||
class="other-back overlayThing" onclick="goBack()">←</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>
|
||||
|
|
|
|||
|
|
@ -384,6 +384,15 @@ addLayer("c", {
|
|||
|
||||
// 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),
|
||||
|
|
|
|||
|
|
@ -45,5 +45,8 @@ addNode("h", {
|
|||
)
|
||||
|
||||
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,
|
||||
|
||||
})
|
||||
|
|
@ -498,7 +498,7 @@ function loadVue() {
|
|||
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' :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>
|
||||
<tr><table><button class="treeNode hidden"></button></table></tr>
|
||||
</span></div>
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ function rowReset(row, layer) {
|
|||
}
|
||||
|
||||
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) {
|
||||
if (player[layer][keep[thing]] !== undefined)
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ function updateWidth() {
|
|||
|
||||
var splitScreen = screenWidth >= 1024
|
||||
if (player.forceOneTab) splitScreen = false
|
||||
if (player.navTab == "none") splitScreen = true
|
||||
tmp.other.screenWidth = screenWidth
|
||||
tmp.other.screenHeight = window.innerHeight
|
||||
|
||||
|
|
|
|||
|
|
@ -13,13 +13,20 @@ var systemComponents = {
|
|||
},
|
||||
|
||||
'tree-node': {
|
||||
props: ['layer', 'abb', 'size'],
|
||||
props: ['layer', 'abb', 'size', 'prev'],
|
||||
template: `
|
||||
<button v-if="nodeShown(layer)"
|
||||
v-bind:id="layer"
|
||||
v-on:click="function() {
|
||||
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])}
|
||||
}"
|
||||
|
||||
|
|
@ -36,7 +43,7 @@ var systemComponents = {
|
|||
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].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,
|
||||
}"
|
||||
v-bind:style="constructNodeStyle(layer)">
|
||||
|
|
@ -60,7 +67,7 @@ var systemComponents = {
|
|||
'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 : {}]">
|
||||
<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="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>
|
||||
|
|
|
|||
|
|
@ -16,5 +16,7 @@ addNode("blank", {
|
|||
|
||||
|
||||
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
33
js/utils.js
|
|
@ -137,37 +137,47 @@ function inChallenge(layer, id) {
|
|||
// ************ Misc ************
|
||||
|
||||
var onTreeTab = true
|
||||
function showTab(name) {
|
||||
|
||||
function showTab(name, prev) {
|
||||
if (LAYERS.includes(name) && !layerunlocked(name)) return
|
||||
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]
|
||||
}
|
||||
var toTreeTab = name == "none"
|
||||
player.tab = name
|
||||
if (player.navTab == "none" && (tmp[name].row !== "side") && (tmp[name].row !== "otherside")) player.lastSafeTab = name
|
||||
delete player.notify[name]
|
||||
if (tmp[name] && (tmp[name].row !== "side") && (tmp[name].row !== "otherside")) player.lastSafeTab = name
|
||||
updateTabFormats()
|
||||
needCanvasUpdate = true
|
||||
document.activeElement.blur()
|
||||
|
||||
}
|
||||
|
||||
function showNavTab(name) {
|
||||
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})
|
||||
|
||||
var toTreeTab = name == "tree"
|
||||
if (tmp[name] && tmp[name].previousTab !== undefined) prev = tmp[name].previousTab
|
||||
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.notify[name] = false
|
||||
updateTabFormats()
|
||||
needCanvasUpdate = true
|
||||
}
|
||||
|
||||
|
||||
function goBack() {
|
||||
if (player.navTab !== "none") showTab("none")
|
||||
else showTab(player.lastSafeTab)
|
||||
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 == "side")) nextTab = player.lastSafeTab
|
||||
|
||||
if (tmp[layer].leftTab) showNavTab(nextTab, layer)
|
||||
else showTab(nextTab, layer)
|
||||
|
||||
}
|
||||
|
||||
function layOver(obj1, obj2) {
|
||||
|
|
@ -239,7 +249,6 @@ function layerunlocked(layer) {
|
|||
function keepGoing() {
|
||||
player.keepGoing = true;
|
||||
needCanvasUpdate = true;
|
||||
goBack()
|
||||
}
|
||||
|
||||
function toNumber(x) {
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ function getStartLayerData(layer) {
|
|||
layerdata.achievements = [];
|
||||
layerdata.challenges = getStartChallenges(layer);
|
||||
layerdata.grid = getStartGrid(layer);
|
||||
layerdata.prevTab = ""
|
||||
|
||||
return layerdata;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue