mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-21 16:13:55 +00:00
The rest of 1.3.1
This commit is contained in:
Acamaeda
parent
d6eeb9b50b
commit
d0e657bc5b
15 changed files with 287 additions and 142 deletions
10
changelog.md
10
changelog.md
|
|
@ -1,5 +1,15 @@
|
|||
#The Modding Tree changelog:
|
||||
|
||||
|
||||
##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.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
This is a very minimal layer with minimal features. Most things will require additional features.
|
||||
If you're curious about "() =>", it's a weird notation that lets you use either a value or function in the same slot,
|
||||
and treats it like a function. If you're using an actual function there, you can replace it with the normal notation.
|
||||
and treats it like a function. You can use it to make actual functions, but it breaks things then.
|
||||
|
||||
```js
|
||||
p: {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ Features:
|
|||
for having x of this buyable. Can return a value or an object containing multiple values.
|
||||
|
||||
- display(): A function returning everything that should be displayed on the rebuyable after the title, likely
|
||||
including the description, amount bought, cost, and current effect.
|
||||
including the description, amount bought, cost, and current effect. Can use basic HTML.
|
||||
|
||||
- unl(): A function returning a bool to determine if the buyable is visible or not.
|
||||
|
||||
|
|
@ -43,6 +43,8 @@ Features:
|
|||
|
||||
- buyMax(): **optional**, A function that implements buying as many of the buyable as possible.
|
||||
|
||||
- style(): **Optional**, A function returning a CSS object, which affects this buyable.
|
||||
|
||||
- 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 id for this buyable.
|
||||
|
|
@ -24,16 +24,16 @@ Challenges are stored in the following format:
|
|||
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
|
||||
- name: Name of the challenge, can be a string or a function. Can use basic HTML.
|
||||
|
||||
- desc: 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.
|
||||
It can also be a function that returns updating text. Can use basic HTML.
|
||||
|
||||
- reward: 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.
|
||||
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 reward.
|
||||
Can return a value or an object containing multiple values.
|
||||
Can return a value or an object containing multiple values. Can use basic HTML.
|
||||
|
||||
- effectDisplay(effects): **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.
|
||||
|
|
@ -54,6 +54,7 @@ By default, challenges use basic Points for the goal. You can change that using
|
|||
- currencyLayer: **optional**, the internal name of the layer that currency is stored in.
|
||||
If it's part of a layer, omit.
|
||||
|
||||
- style(): **Optional**, A function returning a CSS object, which affects this challenge.
|
||||
|
||||
- layer: **Assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
|
||||
|
||||
|
|
|
|||
|
|
@ -51,13 +51,7 @@ Key:
|
|||
],
|
||||
```
|
||||
|
||||
- branches: **optional**, determines what lines should appear on the tree when this layer is visible.
|
||||
An array of pairs consisting of a layer name and a number from 1 to 3.
|
||||
A branch will appear connecting this layer to the correspodnding layer, with the color based on the number.
|
||||
You should add the branch value to the layer that is unlocked second.
|
||||
|
||||
- style: A CSS object containing any CSS that should affect this layer's whole tab.
|
||||
Can also be a function returning a dynamic CSS object.
|
||||
- style(): A function returning a CSS object containing any CSS that should affect this layer's whole tab.
|
||||
|
||||
- tabFormat: Use this if you want to add extra things to your tab or change the layout.
|
||||
|
||||
|
|
@ -81,7 +75,6 @@ Key:
|
|||
[Explanations are in a separate file.](subtabs-and-microtabs.md)
|
||||
|
||||
|
||||
(subtabs-and-microtabs.md):
|
||||
# Prestige formula features
|
||||
|
||||
- baseResource: The name of the resource that determines how much of the main currency you gain on reset.
|
||||
|
|
@ -115,6 +108,19 @@ Key:
|
|||
Can be used to have secondary resource gain on prestige, or to recalculate things or whatnot.
|
||||
|
||||
|
||||
# Tree/node features
|
||||
|
||||
- branches: **optional**, determines what lines should appear on the tree when this layer is visible.
|
||||
An array of pairs consisting of a layer name and a number from 1 to 3.
|
||||
A branch will appear connecting this layer to the correspodnding layer, with the color based on the number.
|
||||
You should add the branch value to the layer that is unlocked second.
|
||||
|
||||
- nodeStyle(): **optional**, a function returning a CSS object, 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.
|
||||
|
||||
|
||||
# Other features
|
||||
|
||||
- doReset(resettingLayer): **optional**, is triggered when a layer on a row greater than or equal to this one does a reset.
|
||||
|
|
@ -147,6 +153,16 @@ Key:
|
|||
- should_notify: **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.
|
||||
|
||||
- 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: {
|
||||
"chall"() {return {'height': '200px'}},
|
||||
"prestige-button"() {return {'color': '#AA66AA'}},
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
# Custom Prestige type only
|
||||
(No effect otherwise)
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@ You can use hasMilestone(layer, id) to determine if the player has a given miles
|
|||
Milestone features:
|
||||
|
||||
- requirementDesc: A string describing the requirement for unlocking this milestone. Suggestion: Use a "total".
|
||||
It can also be a function that returns updating text.
|
||||
It can also be a function that returns updating text. Can use basic HTML.
|
||||
|
||||
- effectDesc: 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.
|
||||
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 has been fulfilled.
|
||||
|
||||
|
|
@ -31,6 +31,10 @@ Milestone features:
|
|||
|
||||
**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**, A function returning a CSS object, which affects this milestone.
|
||||
|
||||
- unl(): A function returning a boolean to determine if the milestone should be shown. If absent, it is always shown.
|
||||
|
||||
- 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 id for this milestone.
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ Normal subtabs and microtab subtabs both use the same features:
|
|||
|
||||
- content: The tab layout code for the subtab, in [the tab layout format](custom-tab-layouts.md)
|
||||
|
||||
- style: **Optional**, A CSS object or function returning a CSS object, which affects the CSS when in that subtab.
|
||||
- style(: **Optional**, A function returning a CSS object, which affects the CSS when in that subtab.
|
||||
|
||||
- buttonStyle: **Optional**, A CSS object or function returning that CSS object, which affects the appearance of the button for that subtab.
|
||||
- buttonStyle(): **Optional**, A function returning a CSS object, which affects the appearance of the button for that subtab.
|
||||
|
||||
- unl(): **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.)
|
||||
|
|
@ -26,16 +26,16 @@ Each upgrade should have an id where the first digit is the row and the second d
|
|||
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.
|
||||
It can also be a function that returns updating text. Can use basic HTML.
|
||||
|
||||
- desc: 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.
|
||||
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(effects): **optional**, A function that returns a display of the current effects of the upgrade with
|
||||
formatting. Default behavior is to just display the a number appropriately formatted.
|
||||
formatting. Default behavior is to just display the a number appropriately formatted. Can use basic HTML.
|
||||
|
||||
- cost: A Decimal for the cost of the upgrade. By default, upgrades cost the main prestige currency for the layer.
|
||||
|
||||
|
|
@ -50,6 +50,8 @@ By default, upgrades use the main prestige currency for the layer. You can inclu
|
|||
- currencyLayer: **optional**, the internal name of the layer that currency is stored in.
|
||||
If it's not in a layer (like Points), omit.
|
||||
|
||||
- style(): **Optional**, A function returning a CSS object, which affects this upgrade.
|
||||
|
||||
- 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 id for this upgrade.
|
||||
24
index.html
24
index.html
|
|
@ -49,6 +49,16 @@
|
|||
</div>
|
||||
<div v-if="player.tab=='changelog'" class="col right">
|
||||
<button class="back" onclick="showTab('tree')">←</button><br>
|
||||
<h3>v1.3.1</h3>
|
||||
<ul>
|
||||
<li>Added custom CSS and tooltips for Layer Nodes.</li>
|
||||
<li>Added custom CSS for upgrades, buyables, milestones, and challenges, both individually and layer-wide.</li>
|
||||
<li>You can now use HTML in most display text!</li>
|
||||
<li>You can now make milestones unlockable and not display immediately.</li>
|
||||
<li>Fixed importing saves, and issue with upgrades not appearing, and probably more.</li>
|
||||
<li>Optional "name" layer feature, used in confirmation messages.</li>
|
||||
<li></li>
|
||||
</ul><br>
|
||||
<h3>v1.3: Tabception... ception!</h3>
|
||||
<ul>
|
||||
<li>Added subtabs! And also a Micro-tab component to let you make smaller subtab-esque areas anywhere.</li>
|
||||
|
|
@ -149,16 +159,16 @@
|
|||
<div v-if="player.tab==layer" v-bind:class="'col right'" v-bind:style="tmp.style[layer] ? tmp.style[layer] : {}">
|
||||
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
|
||||
<div v-if="!layers[layer].tabFormat">
|
||||
<main-display :layer="layer"></main-display>
|
||||
<prestige-button :layer="layer"></prestige-button>
|
||||
<main-display v-bind:style="tmp.componentStyles[layer]['main-display']" :layer="layer"></main-display>
|
||||
<prestige-button v-bind:style="tmp.componentStyles[layer]['prestige-button']" :layer="layer"></prestige-button>
|
||||
<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
|
||||
<br><br>
|
||||
<span v-if="player[layer].best != undefined">Your best {{layers[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
|
||||
<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{layers[layer].resource}}<br></span>
|
||||
<milestones :layer="layer"></milestones>
|
||||
<buyables :layer="layer"></buyables>
|
||||
<upgrades :layer="layer"></upgrades>
|
||||
<challs :layer="layer"></challs>
|
||||
<milestones v-bind:style="tmp.componentStyles[layer].milestones" :layer="layer"></milestones>
|
||||
<buyables v-bind:style="tmp.componentStyles[layer].buyables" :layer="layer"></buyables>
|
||||
<upgrades v-bind:style="tmp.componentStyles[layer]['upgrades']" :layer="layer"></upgrades>
|
||||
<challs v-bind:style="tmp.componentStyles[layer]['challs']" :layer="layer"></challs>
|
||||
<br><br>
|
||||
</div>
|
||||
<div v-if="layers[layer].tabFormat">
|
||||
|
|
@ -167,7 +177,7 @@
|
|||
</div>
|
||||
<div v-else v-bind:style="[{'margin-top': '-50px'}, readData(layers[layer].tabFormat[player.subtabs[layer].mainTabs].style)]">
|
||||
<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">
|
||||
<tab-buttons :layer="layer" :data="layers[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
|
||||
<tab-buttons v-bind:style="tmp.componentStyles[layer]['tab-buttons']" :layer="layer" :data="layers[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
|
||||
</div>
|
||||
<column :layer="layer" :data="layers[layer].tabFormat[player.subtabs[layer].mainTabs].content"></column>
|
||||
</div>
|
||||
|
|
|
|||
23
js/game.js
23
js/game.js
|
|
@ -5,7 +5,7 @@ var NaNalert = false;
|
|||
var gameEnded = false;
|
||||
|
||||
let VERSION = {
|
||||
num: "1.3",
|
||||
num: "1.3.1",
|
||||
name: "Tabception... ception!"
|
||||
}
|
||||
|
||||
|
|
@ -231,21 +231,21 @@ function respecBuyables(layer) {
|
|||
}
|
||||
|
||||
function canAffordUpg(layer, id) {
|
||||
upg = layers[layer].upgrades[id]
|
||||
cost = tmp.upgrades[layer][id].cost
|
||||
let upg = layers[layer].upgrades[id]
|
||||
let cost = tmp.upgrades[layer][id].cost
|
||||
return canAffordPurchase(layer, upg, cost)
|
||||
}
|
||||
|
||||
function hasUpg(layer, id){
|
||||
return (player[layer].upgrades.includes(toNumber(id)))
|
||||
return (player[layer].upgrades.includes(toNumber(id)) || player[layer].upgrades.includes(id.toString()))
|
||||
}
|
||||
|
||||
function hasMilestone(layer, id){
|
||||
return (player[layer].milestones.includes(toNumber(id)) || player[layer].milestones.includes(id))
|
||||
return (player[layer].milestones.includes(toNumber(id)) || player[layer].milestones.includes(id.toString()))
|
||||
}
|
||||
|
||||
function hasChall(layer, id){
|
||||
return (player[layer].challs.includes(toNumber(id)))
|
||||
return (player[layer].challs.includes(toNumber(id)) || player[layer].challs.includes(id.toString()))
|
||||
}
|
||||
|
||||
function upgEffect(layer, id){
|
||||
|
|
@ -280,8 +280,8 @@ function buyUpg(layer, id) {
|
|||
if (!player[layer].unl) return
|
||||
if (!layers[layer].upgrades[id].unl()) return
|
||||
if (player[layer].upgrades.includes(id)) return
|
||||
upg = layers[layer].upgrades[id]
|
||||
cost = tmp.upgrades[layer][id].cost
|
||||
let upg = layers[layer].upgrades[id]
|
||||
let cost = tmp.upgrades[layer][id].cost
|
||||
|
||||
if (upg.currencyInternalName){
|
||||
let name = upg.currencyInternalName
|
||||
|
|
@ -329,14 +329,17 @@ function resetRow(row) {
|
|||
}
|
||||
|
||||
function startChall(layer, x) {
|
||||
let enter = false
|
||||
if (!player[layer].unl) return
|
||||
if (player[layer].active == x) {
|
||||
completeChall(layer, x)
|
||||
delete player[layer].active
|
||||
} else {
|
||||
player[layer].active = x
|
||||
}
|
||||
enter = true
|
||||
}
|
||||
doReset(layer, true)
|
||||
if(enter) player[layer].active = x
|
||||
|
||||
updateChallTemp(layer)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,6 +64,9 @@ function updateLayers(){
|
|||
}
|
||||
}
|
||||
|
||||
if(!layers[layer].componentStyles) layers[layer].componentStyles = {}
|
||||
|
||||
|
||||
row = layers[layer].row
|
||||
if(!ROW_LAYERS[row]) ROW_LAYERS[row] = {}
|
||||
ROW_LAYERS[row][layer]=layer;
|
||||
|
|
|
|||
61
js/layers.js
61
js/layers.js
|
|
@ -41,16 +41,22 @@ addLayer("c", {
|
|||
},
|
||||
milestones: {
|
||||
0: {requirementDesc:() => "3 Lollipops",
|
||||
done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
|
||||
effectDesc:() => "Makes this green",
|
||||
done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
|
||||
effectDesc:() => "Unlock the next milestone",
|
||||
},
|
||||
1: {requirementDesc:() => "4 Lollipops",
|
||||
done() {return player[this.layer].best.gte(4)},
|
||||
effectDesc:() => "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"]],
|
||||
}
|
||||
unl() {return hasMilestone(this.layer, 0)},
|
||||
done() {return player[this.layer].best.gte(4)},
|
||||
effectDesc:() => "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'
|
||||
}},
|
||||
|
||||
},
|
||||
},
|
||||
challs: {
|
||||
rows: 1,
|
||||
|
|
@ -94,7 +100,7 @@ addLayer("c", {
|
|||
effectDisplay(fx) { return format(fx)+"x" }, // Add formatting to the effect
|
||||
},
|
||||
13: {
|
||||
desc:() => "Unlock a secret subtab and make this layer act if you unlocked it first.",
|
||||
desc:() => "Unlock a <b>secret subtab</b> and make this layer act if you unlocked it first.",
|
||||
cost:() => new Decimal(69),
|
||||
currencyDisplayName: "candies", // Use if using a nonstandard currency
|
||||
currencyInternalName: "points", // Use if using a nonstandard currency
|
||||
|
|
@ -102,7 +108,17 @@ addLayer("c", {
|
|||
unl() { return (hasUpg(this.layer, 12))},
|
||||
onPurchase() { // This function triggers when the upgrade is purchased
|
||||
player[this.layer].order = 0
|
||||
}
|
||||
},
|
||||
style() {
|
||||
if (hasUpg(this.layer, this.id)) return {
|
||||
'background-color': '#1111dd'
|
||||
}
|
||||
else if (!canAffordUpg(this.layer, this.id)) {
|
||||
return {
|
||||
'background-color': '#dd1111'
|
||||
}
|
||||
} // Otherwise use the default
|
||||
},
|
||||
},
|
||||
},
|
||||
buyables: {
|
||||
|
|
@ -193,7 +209,7 @@ addLayer("c", {
|
|||
// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
|
||||
tabFormat: {
|
||||
"main tab": {
|
||||
buttonStyle: {'color': 'orange'},
|
||||
buttonStyle() {return {'color': 'orange'}},
|
||||
content:
|
||||
["main-display",
|
||||
["prestige-button", function() {return "Melt your points into "}],
|
||||
|
|
@ -205,8 +221,8 @@ addLayer("c", {
|
|||
"h-line", "milestones", "blank", "upgrades", "challs"],
|
||||
},
|
||||
thingies: {
|
||||
style: {'background-color': '#222222'},
|
||||
buttonStyle: {'border-color': 'orange'},
|
||||
style() {return {'background-color': '#222222'}},
|
||||
buttonStyle() {return {'border-color': 'orange'}},
|
||||
content:[
|
||||
["buyables", "150px"], "blank",
|
||||
["row", [
|
||||
|
|
@ -230,8 +246,21 @@ addLayer("c", {
|
|||
|
||||
},
|
||||
style() {return {
|
||||
// 'background-color': '#3325CC'
|
||||
'background-color': '#3325CC'
|
||||
}},
|
||||
nodeStyle() {return { // Style on the layer node
|
||||
'color': '#3325CC',
|
||||
'text-decoration': 'underline'
|
||||
}},
|
||||
componentStyles: {
|
||||
"chall"() {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 += "\n" + formatWhole(player[this.layer].buyables[11]) + " Exhancers"
|
||||
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)
|
||||
|
|
@ -265,6 +294,10 @@ addLayer("f", {
|
|||
layerShown() {return true},
|
||||
branches: [["c", 1]], // Each pair corresponds to a line added to the tree when this node is unlocked. The letter is the other end of the line, and the number affects the color, 1 is default
|
||||
|
||||
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() + " candies. You only have " + formatWhole(player.points))
|
||||
},
|
||||
|
||||
// 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 candies and lollipops! (At least " + formatWhole(tmp.nextAt[layer]) + " candies)"
|
||||
|
|
|
|||
79
js/temp.js
79
js/temp.js
|
|
@ -37,6 +37,39 @@ function updateTemp() {
|
|||
}
|
||||
}
|
||||
|
||||
if (!tmp.microtabs) tmp.microtabs = {}
|
||||
for (layer in layers) {
|
||||
if (!tmp.microtabs[layer]) tmp.microtabs[layer] = {}
|
||||
if (layers[layer].microtabs) {
|
||||
if(layers[layer].microtabs !== undefined){
|
||||
updateMicrotabTemp(layer)
|
||||
}
|
||||
}
|
||||
if(layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)){
|
||||
let data2 = layers[layer].tabFormat
|
||||
let set = "mainTabs"
|
||||
if (!tmp.microtabs[layer][set]) tmp.microtabs[layer][set] = {}
|
||||
for (tab in data2) {
|
||||
if (!tmp.microtabs[layer][set][tab])
|
||||
tmp.microtabs[layer][set][tab] = {}
|
||||
if(data2[tab].style)
|
||||
tmp.microtabs[layer][set][tab].style = data2[tab].style()
|
||||
if(data2[tab].buttonStyle)
|
||||
tmp.microtabs[layer][set][tab].buttonStyle = data2[tab].buttonStyle()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (!tmp.componentStyles) tmp.componentStyles = {}
|
||||
for (layer in layers) if (layers[layer].componentStyles) {
|
||||
if(layers[layer].componentStyles !== undefined){
|
||||
tmp.componentStyles[layer] = {}
|
||||
for (item in layers[layer].componentStyles)
|
||||
tmp.componentStyles[layer][item] = layers[layer].componentStyles[item]()
|
||||
}
|
||||
}
|
||||
|
||||
if (!tmp.gainMults) tmp.gainMults = {}
|
||||
if (!tmp.gainExp) tmp.gainExp = {}
|
||||
if (!tmp.resetGain) tmp.resetGain = {}
|
||||
|
|
@ -46,10 +79,13 @@ function updateTemp() {
|
|||
if (!tmp.layerShown) tmp.layerShown = {}
|
||||
if (!tmp.effectDescription) tmp.effectDescription = {}
|
||||
if (!tmp.style) tmp.style = {}
|
||||
if (!tmp.nodeStyle) tmp.nodeStyle = {}
|
||||
if (!tmp.notify) tmp.notify = {}
|
||||
if (!tmp.nextAtDisp) tmp.nextAtDisp = {}
|
||||
if (!tmp.prestigeButtonText) tmp.prestigeButtonText = {}
|
||||
if (!tmp.canReset) tmp.canReset = {}
|
||||
if (!tmp.tooltips) tmp.tooltips = {}
|
||||
if (!tmp.tooltipsLocked) tmp.tooltipsLocked = {}
|
||||
|
||||
for (layer in layers) {
|
||||
if (layers[layer].color) tmp.layerColor[layer] = layers[layer].color()
|
||||
|
|
@ -65,7 +101,9 @@ function updateTemp() {
|
|||
if (layers[layer].effectDescription) tmp.effectDescription[layer] = layers[layer].effectDescription()
|
||||
if (layers[layer].canReset) tmp.canReset[layer] = layers[layer].canReset()
|
||||
if (layers[layer].prestigeButtonText) tmp.prestigeButtonText[layer] = layers[layer].prestigeButtonText()
|
||||
|
||||
if (layers[layer].tooltip) tmp.tooltips[layer] = layers[layer].tooltip()
|
||||
if (layers[layer].tooltipLocked) tmp.tooltipsLocked[layer] = layers[layer].tooltipLocked()
|
||||
if (layers[layer].nodeStyle) tmp.nodeStyle[layer] = layers[layer].nodeStyle()
|
||||
}
|
||||
|
||||
tmp.pointGen = getPointGen()
|
||||
|
|
@ -86,6 +124,10 @@ function updateChallTemp(layer) {
|
|||
for (let col = 1; col <= data2.cols; col++) {
|
||||
let id = row * 10 + col
|
||||
tmp.challs[layer][id] = {}
|
||||
|
||||
if (customActive ? data2.active(id) : player[layer].active == id) data[id] = 1
|
||||
else delete data[id]
|
||||
|
||||
tmp.challs[layer][id].unl = data2[id].unl()
|
||||
if(data2[id].name) tmp.challs[layer][id].name = data2[id].name()
|
||||
if(data2[id].desc) tmp.challs[layer][id].desc = data2[id].desc()
|
||||
|
|
@ -93,10 +135,7 @@ function updateChallTemp(layer) {
|
|||
if(data2[id].effect) tmp.challs[layer][id].effect = data2[id].effect()
|
||||
if(data2[id].effectDisplay) tmp.challs[layer][id].effectDisplay = data2[id].effectDisplay(tmp.challs[layer][id].effect)
|
||||
tmp.challs[layer][id].goal = data2[id].goal()
|
||||
|
||||
|
||||
if (customActive ? data2.active(id) : player[layer].active == id) data[id] = 1
|
||||
else delete data[id]
|
||||
if(data2[id].style) tmp.challs[layer][id].style = data2[id].style()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -111,12 +150,14 @@ function updateUpgradeTemp(layer) {
|
|||
let id = row * 10 + col
|
||||
tmp.upgrades[layer][id] = {}
|
||||
tmp.upgrades[layer][id].unl = data2[id].unl()
|
||||
if(data2[id].title) tmp.upgrades[layer][id].title = data2[id].title()
|
||||
if(data2[id].effect) tmp.upgrades[layer][id].effect = data2[id].effect()
|
||||
tmp.upgrades[layer][id].cost = data2[id].cost()
|
||||
if(data2[id].effectDisplay) tmp.upgrades[layer][id].effectDisplay = data2[id].effectDisplay(tmp.upgrades[layer][id].effect)
|
||||
if(data2[id].desc) tmp.upgrades[layer][id].desc = data2[id].desc()
|
||||
if(data2[id].title) tmp.upgrades[layer][id].title = data2[id].title()
|
||||
|
||||
if(data2[id].style) tmp.upgrades[layer][id].style = data2[id].style()
|
||||
|
||||
tmp.upgrades[layer][id].cost = data2[id].cost()
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -129,9 +170,12 @@ function updateMilestoneTemp(layer) {
|
|||
let data2 = layers[layer].milestones
|
||||
for (id in data2) {
|
||||
tmp.milestones[layer][id] = {}
|
||||
if(data2[id].unl) tmp.milestones[layer][id].unl = data2[id].unl()
|
||||
tmp.milestones[layer][id].done = data2[id].done()
|
||||
if(data2[id].requirementDesc) tmp.milestones[layer][id].requirementDesc = data2[id].requirementDesc()
|
||||
if(data2[id].effectDesc) tmp.milestones[layer][id].effectDesc = data2[id].effectDesc()
|
||||
if(data2[id].effectDesc) tmp.milestones[layer][id].effectDesc = data2[id].effectDesc()
|
||||
if(data2[id].style) tmp.milestones[layer][id].style = data2[id].style()
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,6 +195,25 @@ function updateBuyableTemp(layer) {
|
|||
tmp.buyables[layer][id].canAfford = data2[id].canAfford()
|
||||
if(data2[id].title) tmp.buyables[layer][id].title = data2[id].title()
|
||||
if(data2[id].display) tmp.buyables[layer][id].display = data2[id].display()
|
||||
if(data2[id].style) tmp.buyables[layer][id].style = data2[id].style()
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateMicrotabTemp(layer) {
|
||||
if (layers[layer] === undefined) return
|
||||
let data2 = layers[layer].microtabs
|
||||
for (set in data2) {
|
||||
if (!tmp.microtabs[layer][set]) tmp.microtabs[layer][set] = {}
|
||||
for (tab in data2[set]) {
|
||||
if (!tmp.microtabs[layer][set][tab])
|
||||
tmp.microtabs[layer][set][tab] = {}
|
||||
if(data2[set][tab].style)
|
||||
tmp.microtabs[layer][set][tab].style = data2[set][tab].style()
|
||||
if(data2[set][tab].buttonStyle)
|
||||
tmp.microtabs[layer][set][tab].buttonStyle = data2[set][tab].buttonStyle()
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
154
js/v.js
154
js/v.js
|
|
@ -1,39 +1,11 @@
|
|||
var app;
|
||||
|
||||
function loadVue() {
|
||||
Vue.component('layer-node', {
|
||||
props: ['layer', 'abb'],
|
||||
template: `
|
||||
<button v-if="nodeShown(layer)"
|
||||
v-bind:id="layer"
|
||||
v-on:click="function() {
|
||||
showTab(layer)
|
||||
}"
|
||||
v-bind:tooltip="
|
||||
player[layer].unl ? formatWhole(player[layer].points) + ' ' + layers[layer].resource
|
||||
: 'Reach ' + formatWhole(tmp.layerReqs[layer]) + ' ' + layers[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp.layerAmt[layer]) + ' ' + layers[layer].baseResource + ')'
|
||||
"
|
||||
v-bind:class="{
|
||||
treeNode: true,
|
||||
[layer]: true,
|
||||
hidden: !tmp.layerShown[layer],
|
||||
locked: !player[layer].unl && !tmp.layerAmt[layer].gte(tmp.layerReqs[layer]),
|
||||
notify: tmp.notify[layer],
|
||||
can: layerUnl(layer),
|
||||
}"
|
||||
v-bind:style="{
|
||||
'background-color': tmp.layerColor[layer],
|
||||
}">
|
||||
{{abb}}
|
||||
</button>
|
||||
`
|
||||
})
|
||||
|
||||
// data = a function returning the content
|
||||
// data = a function returning the content (actually HTML)
|
||||
Vue.component('display-text', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<span>{{readData(data)}}</span>
|
||||
<span v-html="readData(data)"></span>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -61,7 +33,7 @@ function loadVue() {
|
|||
Vue.component('display-image', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<span><img v-bind:src= "readData(data)" v-bind:alt= "readData(data)"></span>
|
||||
<img v-bind:src= "readData(data)" v-bind:alt= "readData(data)">
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -72,9 +44,9 @@ function loadVue() {
|
|||
<div class="upgTable">
|
||||
<div class="upgRow">
|
||||
<div v-for="item in data">
|
||||
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
|
||||
<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
|
||||
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
|
||||
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp.componentStyles[layer][item]"></div>
|
||||
<div v-else-if="item.length==3" v-bind:style="[tmp.componentStyles[layer][item], (item[2] ? item[2] : {})]" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
|
||||
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" v-bind:style="tmp.componentStyles[layer][item]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,9 +60,9 @@ function loadVue() {
|
|||
<div class="upgTable">
|
||||
<div class="upgCol">
|
||||
<div v-for="item in data">
|
||||
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
|
||||
<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
|
||||
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
|
||||
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp.componentStyles[layer][item]"></div>
|
||||
<div v-else-if="item.length==3" v-bind:style="[tmp.componentStyles[layer][item], (item[2] ? item[2] : {})]" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
|
||||
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" v-bind:style="tmp.componentStyles[layer][item]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,7 +92,7 @@ function loadVue() {
|
|||
<div v-if="layers[layer].challs" class="upgTable">
|
||||
<div v-for="row in layers[layer].challs.rows" class="upgRow">
|
||||
<div v-for="col in layers[layer].challs.cols">
|
||||
<chall :layer = "layer" :data = "row*10+col"></chall>
|
||||
<chall :layer = "layer" :data = "row*10+col" v-bind:style="tmp.componentStyles[layer].chall"></chall>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,15 +103,13 @@ function loadVue() {
|
|||
Vue.component('chall', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<div v-if="layers[layer].challs">
|
||||
<div v-if="tmp.challs[layer][data].unl && !(player.hideChalls && hasChall(layer, [data]))" v-bind:class="{hChall: true, done: player[layer].challs.includes(data), canComplete: tmp.challActive[layer][data]&&!player[layer].challs.includes(data)&&canCompleteChall(layer, data)}">
|
||||
<br><h3>{{tmp.challs[layer][data].name}}</h3><br><br>
|
||||
<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="startChall(layer, data)">{{player[layer].active==(data)?(canCompleteChall(layer, data)?"Finish":"Exit Early"):(player[layer].challs.includes(data)?"Completed":"Start")}}</button><br><br>
|
||||
{{tmp.challs[layer][data].desc}}<br>
|
||||
Goal: {{format(tmp.challs[layer][data].goal)}} {{layers[layer].challs[data].currencyDisplayName ? layers[layer].challs[data].currencyDisplayName : "points"}}<br>
|
||||
Reward: {{tmp.challs[layer][data].reward}}<br>
|
||||
<span v-if="tmp.challs[layer][data].effect!==undefined">Currently: {{(tmp.challs[layer][data].effectDisplay) ? (tmp.challs[layer][data].effectDisplay) : format(tmp.challs[layer][data].effect)}}</span>
|
||||
</div>
|
||||
<div v-if="layers[layer].challs && tmp.challs[layer][data].unl && !(player.hideChalls && hasChall(layer, [data]))" v-bind:class="{hChall: true, done: player[layer].challs.includes(data), canComplete: tmp.challActive[layer][data]&&!player[layer].challs.includes(data)&&canCompleteChall(layer, data)}">
|
||||
<br><h3 v-html="tmp.challs[layer][data].name"></h3><br><br>
|
||||
<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="startChall(layer, data)">{{player[layer].active==(data)?(canCompleteChall(layer, data)?"Finish":"Exit Early"):(player[layer].challs.includes(data)?"Completed":"Start")}}</button><br><br>
|
||||
<span v-html="tmp.challs[layer][data].desc"></span><br>
|
||||
Goal: {{format(tmp.challs[layer][data].goal)}} {{layers[layer].challs[data].currencyDisplayName ? layers[layer].challs[data].currencyDisplayName : "points"}}<br>
|
||||
Reward: <span v-html="tmp.challs[layer][data].reward"></span><br>
|
||||
<span v-if="tmp.challs[layer][data].effect!==undefined">Currently: <span v-html="(tmp.challs[layer][data].effectDisplay) ? (tmp.challs[layer][data].effectDisplay) : format(tmp.challs[layer][data].effect)"></span></span>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
|
@ -150,7 +120,7 @@ function loadVue() {
|
|||
<div v-if="layers[layer].upgrades" class="upgTable">
|
||||
<div v-for="row in layers[layer].upgrades.rows" class="upgRow">
|
||||
<div v-for="col in layers[layer].upgrades.cols" class="upgAlign">
|
||||
<upgrade :layer = "layer" :data = "row*10+col"></upgrade>
|
||||
<upgrade :layer = "layer" :data = "row*10+col" v-bind:style="tmp.componentStyles[layer].upgrade"></upgrade>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
|
@ -162,14 +132,13 @@ function loadVue() {
|
|||
Vue.component('upgrade', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<div v-if="layers[layer].challs">
|
||||
<button v-if="tmp.upgrades[layer][data].unl" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(data), locked: (!(canAffordUpg(layer, data))&&!player[layer].upgrades.includes(data)), can: (canAffordUpg(layer, data)&&!player[layer].upgrades.includes(data))}" v-bind:style="{'background-color': tmp.layerColor[layer]}">
|
||||
<span v-if= "tmp.upgrades[layer][data].title"><h3>{{tmp.upgrades[layer][data].title}}</h3><br></span>
|
||||
{{ tmp.upgrades[layer][data].desc }}
|
||||
<span v-if="tmp.upgrades[layer][data].effect"><br>Currently: {{(tmp.upgrades[layer][data].effectDisplay) ? (tmp.upgrades[layer][data].effectDisplay) : format(tmp.upgrades[layer][data].effect)}}</span>
|
||||
<br><br>Cost: {{ formatWhole(tmp.upgrades[layer][data].cost) }} {{(layers[layer].upgrades[data].currencyDisplayName ? layers[layer].upgrades[data].currencyDisplayName : layers[layer].resource)}}
|
||||
</button>
|
||||
</div>
|
||||
<button v-if="layers[layer].upgrades && tmp.upgrades[layer][data].unl" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(data), locked: (!(canAffordUpg(layer, data))&&!player[layer].upgrades.includes(data)), can: (canAffordUpg(layer, data)&&!player[layer].upgrades.includes(data))}"
|
||||
v-bind:style="[((!hasUpg(layer, data) && canAffordUpg(layer, data)) ? {'background-color': tmp.layerColor[layer]} : {}), tmp.upgrades[layer][data].style]">
|
||||
<span v-if= "tmp.upgrades[layer][data].title"><h3 v-html="tmp.upgrades[layer][data].title"></h3><br></span>
|
||||
<span v-html="tmp.upgrades[layer][data].desc"></span>
|
||||
<span v-if="tmp.upgrades[layer][data].effect"><br>Currently: <span v-html="(tmp.upgrades[layer][data].effectDisplay) ? (tmp.upgrades[layer][data].effectDisplay) : format(tmp.upgrades[layer][data].effect)"></span></span>
|
||||
<br><br>Cost: {{ formatWhole(tmp.upgrades[layer][data].cost) }} {{(layers[layer].upgrades[data].currencyDisplayName ? layers[layer].upgrades[data].currencyDisplayName : layers[layer].resource)}}
|
||||
</button>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -179,7 +148,7 @@ function loadVue() {
|
|||
<div v-if="layers[layer].milestones">
|
||||
<table>
|
||||
<tr v-for="id in Object.keys(layers[layer].milestones)">
|
||||
<milestone :layer = "layer" :data = "id"></milestone>
|
||||
<milestone :layer = "layer" :data = "id" v-bind:style="tmp.componentStyles[layer].milestone"></milestone>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
|
|
@ -191,8 +160,10 @@ function loadVue() {
|
|||
Vue.component('milestone', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<td v-if="layers[layer].milestones && milestoneShown(layer, data)" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}"><h3>{{tmp.milestones[layer][data].requirementDesc}}</h3><br>{{tmp.milestones[layer][data].effectDesc}}<br>
|
||||
<span v-if="(layers[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v-for="toggle in layers[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle"></toggle> </span></td></tr>
|
||||
<td v-if="layers[layer].milestones && milestoneShown(layer, data)" v-bind:style="[(layers[layer].milestones[data].unl && !tmp.milestones[layer][data].unl) ? {'visibility': 'hidden'} : {}, tmp.milestones[layer][data].style]" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}">
|
||||
<h3 v-html="tmp.milestones[layer][data].requirementDesc"></h3><br>
|
||||
<span v-html="tmp.milestones[layer][data].effectDesc"></span><br>
|
||||
<span v-if="(layers[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v-for="toggle in layers[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle" v-bind:style="tmp.componentStyles[layer].toggle"></toggle> </span></td></tr>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -208,10 +179,13 @@ function loadVue() {
|
|||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<span>
|
||||
<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
|
||||
<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">{{(tmp.layerAmt[layer].gte(tmp.nextAt[layer])&&layers[layer].canBuyMax && layers[layer].canBuyMax())?"Next":"Req"}}: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAtDisp[layer]) : format(tmp.nextAtDisp[layer]))}} {{ layers[layer].baseResource }}</button>
|
||||
<button v-if="layers[layer].type=='custom'" v-bind:class="{ [layer]: true, reset: true, locked: !tmp.canReset[layer], can: tmp.canReset[layer] }" v-bind:style="{'background-color': tmp.layerColor[layer], 'white-space': 'pre-line' }" v-on:click="doReset(layer)" v-html="tmp.prestigeButtonText[layer]"></button>
|
||||
</span>
|
||||
<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }"
|
||||
v-bind:style="[tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
|
||||
<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }"
|
||||
v-bind:style="[tmp.layerAmt[layer].gte(tmp.nextAt[layer]) ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">{{(tmp.layerAmt[layer].gte(tmp.nextAt[layer])&&layers[layer].canBuyMax && layers[layer].canBuyMax())?"Next":"Req"}}: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAtDisp[layer]) : format(tmp.nextAtDisp[layer]))}} {{ layers[layer].baseResource }}</button>
|
||||
<button v-if="layers[layer].type=='custom'" v-bind:class="{ [layer]: true, reset: true, locked: !tmp.canReset[layer], can: tmp.canReset[layer] }"
|
||||
v-bind:style="[tmp.canReset[layer] ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v-on:click="doReset(layer)" v-html="tmp.prestigeButtonText[layer]"></button>
|
||||
</span>
|
||||
`
|
||||
|
||||
})
|
||||
|
|
@ -232,7 +206,7 @@ function loadVue() {
|
|||
<button v-if="layers[layer].buyables.respec" v-on:click="respecBuyables(layer)" v-bind:class="{ longUpg: true, can: player[layer].unl, locked: !player[layer].unl }">{{layers[layer].buyables.respecText ? tmp.buyables[layer].respecText : "Respec"}}</button><br>
|
||||
<div v-for="row in layers[layer].buyables.rows" class="upgRow">
|
||||
<div v-for="col in layers[layer].buyables.cols" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : '200px'),}">
|
||||
<buyable :layer = "layer" :data = "row*10+col" :size = "data"></buyable>
|
||||
<buyable :layer = "layer" :data = "row*10+col" :size = "data" v-bind:style="tmp.componentStyles[layer].buyable"></buyable>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -244,16 +218,14 @@ function loadVue() {
|
|||
Vue.component('buyable', {
|
||||
props: ['layer', 'data', 'size'],
|
||||
template: `
|
||||
<div v-if="layers[layer].buyables">
|
||||
<button
|
||||
v-if="tmp.buyables[layer][data].unl"
|
||||
v-bind:class="{ buyable: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
|
||||
v-bind:style="{'background-color': tmp.layerColor[layer], 'height': (size ? size : 'inherit'), 'width': (size ? size : '200px')}"
|
||||
v-on:click="buyBuyable(layer, data)">
|
||||
<span v-if= "layers[layer].buyables[data].title"><h2>{{tmp.buyables[layer][data].title}}</h2><br></span>
|
||||
<span v-bind:style="{'white-space': 'pre-line'}">{{tmp.buyables[layer][data].display}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="layers[layer].buyables && tmp.buyables[layer][data].unl"
|
||||
v-bind:class="{ buyable: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
|
||||
v-bind:style="[tmp.buyables[layer][data].canAfford ? {'background-color': tmp.layerColor[layer]} : {}, {'height': (size ? size : 'inherit'), 'width': (size ? size : '200px')}, tmp.buyables[layer][data].style]"
|
||||
v-on:click="buyBuyable(layer, data)">
|
||||
<span v-if= "layers[layer].buyables[data].title"><h2 v-html="tmp.buyables[layer][data].title"></h2><br></span>
|
||||
<span v-bind:style="{'white-space': 'pre-line'}" v-html="tmp.buyables[layer][data].display"></span>
|
||||
</button>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -266,9 +238,9 @@ function loadVue() {
|
|||
template: `
|
||||
<div v-if="layers[layer].microtabs" :style="{'border-style': 'solid'}">
|
||||
<div class="upgTable">
|
||||
<tab-buttons :layer="layer" :data="layers[layer].microtabs[data]" :name="data"></tab-buttons>
|
||||
<tab-buttons :layer="layer" :data="layers[layer].microtabs[data]" :name="data" v-bind:style="tmp.componentStyles[layer]['tab-buttons']"></tab-buttons>
|
||||
</div>
|
||||
<column v-bind:style="readData(layers[layer].microtabs[data][player.subtabs[layer][data]].style)" :layer="layer" :data="layers[layer].microtabs[data][player.subtabs[layer][data]].content"></column>
|
||||
<column v-bind:style="tmp.microtabs[layer][data][player.subtabs[layer][data]].style" :layer="layer" :data="layers[layer].microtabs[data][player.subtabs[layer][data]].content"></column>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
|
@ -280,13 +252,39 @@ function loadVue() {
|
|||
template: `
|
||||
<div class="upgRow">
|
||||
<div v-for="tab in Object.keys(data)">
|
||||
<button v-if="!data[tab].unl || data[tab].unl()" class="tabButton" v-bind:style="[{'border-color': tmp.layerColor[layer]}, readData(data[tab].buttonStyle)]" v-on:click="player.subtabs[layer][name] = tab">{{tab}}</button>
|
||||
<button v-if="!data[tab].unl || data[tab].unl()" class="tabButton" v-bind:style="[{'border-color': tmp.layerColor[layer]}, tmp.componentStyles[layer]['tab-button'], tmp.microtabs[layer][name][tab].buttonStyle]" v-on:click="player.subtabs[layer][name] = tab">{{tab}}</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
|
||||
Vue.component('layer-node', {
|
||||
props: ['layer', 'abb'],
|
||||
template: `
|
||||
<button v-if="nodeShown(layer)"
|
||||
v-bind:id="layer"
|
||||
v-on:click="function() {
|
||||
showTab(layer)
|
||||
}"
|
||||
v-bind:tooltip="
|
||||
player[layer].unl ? (layers[layer].tooltip ? tmp.tooltips[layer] : formatWhole(player[layer].points) + ' ' + layers[layer].resource)
|
||||
: (layers[layer].tooltipLocked ? tmp.tooltipsLocked[layer] : 'Reach ' + formatWhole(tmp.layerReqs[layer]) + ' ' + layers[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp.layerAmt[layer]) + ' ' + layers[layer].baseResource + ')')
|
||||
"
|
||||
v-bind:class="{
|
||||
treeNode: true,
|
||||
[layer]: true,
|
||||
hidden: !tmp.layerShown[layer],
|
||||
locked: !player[layer].unl && !tmp.layerAmt[layer].gte(tmp.layerReqs[layer]),
|
||||
notify: tmp.notify[layer],
|
||||
can: layerUnl(layer),
|
||||
}"
|
||||
v-bind:style="[layerUnl(layer) ? {
|
||||
'background-color': tmp.layerColor[layer],
|
||||
} : {}, tmp.nodeStyle[layer]]">
|
||||
{{abb}}
|
||||
</button>
|
||||
`
|
||||
})
|
||||
|
||||
|
||||
app = new Vue({
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ h1, h2, h3, b, input {
|
|||
}
|
||||
|
||||
.locked {
|
||||
background-color: #bf8f8f !important;
|
||||
background-color: #bf8f8f;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ h1, h2, h3, b, input {
|
|||
.treeNode.notify {
|
||||
transform: scale(1.1, 1.1);
|
||||
border-color: rgba(255, 0, 0, 0.125) rgba(255, 0, 0, 0.25) rgba(255, 0, 0, 0.25) rgba(255, 0, 0, 0.125);
|
||||
box-shadow: var(--hqProperty2a), 0px 0px 20px #ff0000 !important;
|
||||
box-shadow: var(--hqProperty2a), 0px 0px 20px #ff0000;
|
||||
z-index: 3
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +104,7 @@ h1, h2, h3, b, input {
|
|||
}
|
||||
|
||||
.bought {
|
||||
background-color: #77bf5f !important;
|
||||
background-color: #77bf5f;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -425,7 +425,7 @@ ul {
|
|||
|
||||
[tooltip] {
|
||||
position: relative;
|
||||
z-index: 2
|
||||
z-index: 999999 !important
|
||||
}
|
||||
|
||||
[tooltip]:before,
|
||||
|
|
|
|||
Loading…
Reference in a new issue