mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-24 17:31:50 +00:00
Added Sell buttons for buyables
This commit is contained in:
Acamaeda
parent
4588cf24dc
commit
9352a12219
6 changed files with 59 additions and 17 deletions
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
- Moved most of the code users will want to edit to mod.js.
|
||||
- Added getStartPoints()
|
||||
- Added "sell one" and "sell all" buttons for buyables.
|
||||
- Fixed issues with version number
|
||||
|
||||
### v2.0.5 - 10/16/20
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ Buyables should be formatted like this:
|
|||
// Having this function makes a respec button appear
|
||||
respecText:// **optional**, text that appears on the respec button
|
||||
showRespecButton(){} //**optional**, a function determining whether or not to show the button. Defaults to true if absent.
|
||||
sellOneText, sellAllText:// **optional**, text that appears on the "sell one" and "sell all" buttons respectively (if you are using them)
|
||||
11: {
|
||||
display() {return "Blah"},
|
||||
etc
|
||||
|
|
@ -55,3 +56,14 @@ Features:
|
|||
|
||||
- id: **Assigned automagically**. It's the "key" which the buyable was stored under, for convenient access.
|
||||
The buyable in the example's id is 11.
|
||||
|
||||
Sell One/Sell All:
|
||||
|
||||
Including a sellOne or sellAll function will cause an additional button to appear beneath the buyable.
|
||||
They are functionally identical, but "sell one" appears above "sell all". You can also use them for other things.
|
||||
|
||||
sellOne/sellAll(): **optional**, Called when the button is pressed. The standard use would be to decrease/reset the amount of the buyable,
|
||||
And possibly return some currency to the player.
|
||||
|
||||
canSellOne/canSellAll(): **optional**, booleans determining whether or not to show the buttons. If "canSellOne/All" is absent but
|
||||
"sellOne/All" is present, the appropriate button will always show.
|
||||
|
|
@ -48,11 +48,16 @@ These are the existing components, but you can create more in v.js:
|
|||
|
||||
- microtabs: Display a set of subtabs for an area. The argument is the name of the set of microtabs in the "microtabs" feature.
|
||||
|
||||
- upgrade, milestone, chall, buyable, clickable, achievement: An individual upgrade, challenge, etc. The argument is the id.
|
||||
This can be used if you want to have upgrades split up across multiple subtabs, for example.
|
||||
|
||||
- bar: Display a bar. The argument is the id of the bar to display.
|
||||
|
||||
- toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, [layer, id]
|
||||
|
||||
|
||||
The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.
|
||||
|
||||
- upgrade, milestone, chall, buyable, clickable, achievement: An individual upgrade, challenge, etc. The argument is the id.
|
||||
This can be used if you want to have upgrades split up across multiple subtabs, for example.
|
||||
|
||||
- respec-button, master-button: The respec and master buttons for buyables and clickables, respectively.
|
||||
|
||||
- sell-one, sell-all: The "sell one" and "sell all" for buyables, respectively. The argument is the id of the buyable.
|
||||
|
|
@ -176,7 +176,13 @@ addLayer("c", {
|
|||
player[this.layer].spentOnBuyables = player[this.layer].spentOnBuyables.add(cost) // This is a built-in system that you can use for respeccing but it only works with a single Decimal value
|
||||
},
|
||||
buyMax() {}, // You'll have to handle this yourself if you want
|
||||
style: {'height':'222px'}
|
||||
style: {'height':'222px'},
|
||||
sellOne() {
|
||||
let amount = getBuyableAmount(this.layer, this.id)
|
||||
if (amount.lte(0)) return // Only sell one if there is at least one
|
||||
setBuyableAmount(this.layer, this.id, amount.sub(1))
|
||||
player[this.layer].points = player[this.layer].points.add(this.cost())
|
||||
},
|
||||
},
|
||||
},
|
||||
doReset(resettingLayer){ // Triggers when this layer is being reset, along with the layer doing the resetting. Not triggered by lower layers resetting, but is by layers on the same row.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ var tmp = {}
|
|||
// Tmp will not call these
|
||||
var activeFunctions = [
|
||||
"startData", "onPrestige", "doReset", "update", "automate",
|
||||
"buy", "buyMax", "respec", "onComplete", "onPurchase", "onPress", "onClick", "masterButtonPress"
|
||||
"buy", "buyMax", "respec", "onComplete", "onPurchase", "onPress", "onClick", "masterButtonPress",
|
||||
"sellOne", "sellAll",
|
||||
]
|
||||
|
||||
var noCall = doNotCallTheseFunctionsEveryTick
|
||||
|
|
|
|||
37
js/v.js
37
js/v.js
|
|
@ -202,7 +202,7 @@ function loadVue() {
|
|||
<respec-button v-if="tmp[layer].buyables.respec && !(layers[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" :layer = "layer" v-bind:style="[{'margin-bottom': '12px'}, tmp[layer].componentStyles['respec-button']]"></respec-button>
|
||||
<div v-for="row in tmp[layer].buyables.rows" class="upgRow">
|
||||
<div v-for="col in tmp[layer].buyables.cols"><div v-if="layers[layer].buyables[row*10+col]!== undefined && tmp[layer].buyables[row*10+col].unlocked" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : 'inherit'),}">
|
||||
<buyable :layer = "layer" :data = "row*10+col" :size = "data" v-bind:style="tmp[layer].componentStyles.buyable"></buyable>
|
||||
<buyable :layer = "layer" :data = "row*10+col" :size = "data"></buyable>
|
||||
</div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -214,21 +214,24 @@ function loadVue() {
|
|||
Vue.component('buyable', {
|
||||
props: ['layer', 'data', 'size'],
|
||||
template: `
|
||||
<button
|
||||
v-if="layers[layer].buyables && layers[layer].buyables[data]!== undefined && tmp[layer].buyables[data].unlocked"
|
||||
v-bind:class="{ buyable: true, can: tmp[layer].buyables[data].canAfford, locked: !tmp[layer].buyables[data].canAfford}"
|
||||
v-bind:style="[tmp[layer].buyables[data].canAfford ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].buyables[data].style]"
|
||||
<div v-if="layers[layer].buyables && layers[layer].buyables[data]!== undefined && tmp[layer].buyables[data].unlocked" style="display: grid">
|
||||
<button v-bind:class="{ buyable: true, can: tmp[layer].buyables[data].canAfford, locked: !tmp[layer].buyables[data].canAfford}"
|
||||
v-bind:style="[tmp[layer].buyables[data].canAfford ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].componentStyles.buyable, tmp[layer].buyables[data].style]"
|
||||
v-on:click="buyBuyable(layer, data)">
|
||||
<span v-if= "tmp[layer].buyables[data].title"><h2 v-html="tmp[layer].buyables[data].title"></h2><br></span>
|
||||
<span v-bind:style="{'white-space': 'pre-line'}" v-html="tmp[layer].buyables[data].display"></span>
|
||||
</button>
|
||||
<span v-if= "tmp[layer].buyables[data].title"><h2 v-html="tmp[layer].buyables[data].title"></h2><br></span>
|
||||
<span v-bind:style="{'white-space': 'pre-line'}" v-html="tmp[layer].buyables[data].display"></span>
|
||||
</button>
|
||||
<br v-if="(layers[layer].buyables[data].sellOne !== undefined && !(layers[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)) || (layers[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false))">
|
||||
<sell-one :layer="layer" :data="data" v-bind:style="layers[layer].componentStyles['sell-one']" v-if="(layers[layer].buyables[data].sellOne)&& !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)"></sell-one>
|
||||
<sell-all :layer="layer" :data="data" v-bind:style="layers[layer].componentStyles['sell-all']" v-if="(layers[layer].buyables[data].sellAll)&& !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)"></sell-all>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
Vue.component('respec-button', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<button v-if="layers[layer].buyables && tmp[layer].buyables.respec && !(layers[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" v-on:click="respecBuyables(layer)" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.respecText ? tmp[layer].buyables.respecText : "Respec"}}</button><br>
|
||||
<button v-if="layers[layer].buyables && tmp[layer].buyables.respec && !(layers[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" v-on:click="respecBuyables(layer)" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.respecText ? tmp[layer].buyables.respecText : "Respec"}}</button>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -266,7 +269,7 @@ function loadVue() {
|
|||
Vue.component('master-button', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<button v-if="tmp[layer].clickables && tmp[layer].clickables.masterButtonPress && !(layers[layer].clickables.showMasterButton !== undefined && tmp[layer].clickables.showMasterButton == false)" v-on:click="layers[layer].clickables.masterButtonPress()" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].clickables.masterButtonText ? tmp[layer].clickables.masterButtonText : "Click me!"}}</button><br>
|
||||
<button v-if="tmp[layer].clickables && tmp[layer].clickables.masterButtonPress && !(layers[layer].clickables.showMasterButton !== undefined && tmp[layer].clickables.showMasterButton == false)" v-on:click="layers[layer].clickables.masterButtonPress()" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].clickables.masterButtonText ? tmp[layer].clickables.masterButtonText : "Click me!"}}</button>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -334,6 +337,20 @@ function loadVue() {
|
|||
})
|
||||
|
||||
|
||||
// These are for buyables, data is the id of the corresponding buyable
|
||||
Vue.component('sell-one', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<button v-if="layers[layer].buyables && layers[layer].buyables[data].sellOne && !(layers[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)" v-on:click="layers[layer].buyables[data].sellOne()" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.sellOneText ? tmp[layer].buyables.sellOneText : "Sell One"}}</button>
|
||||
`
|
||||
})
|
||||
Vue.component('sell-all', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<button v-if="layers[layer].buyables && layers[layer].buyables[data].sellAll && !(layers[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)" v-on:click="layers[layer].buyables[data].sellAll()" v-bind:class="{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }">{{tmp[layer].buyables.sellAllText ? tmp[layer].buyables.sellAllText : "Sell All"}}</button>
|
||||
`
|
||||
})
|
||||
|
||||
// NOT FOR USE IN STANDARD TAB FORMATTING
|
||||
Vue.component('tab-buttons', {
|
||||
props: ['layer', 'data', 'name'],
|
||||
|
|
|
|||
Loading…
Reference in a new issue