mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-21 16:13:55 +00:00
Added respec confirmation checkbox
Plus more tooltip fixes
This commit is contained in:
parent
87d394ee27
commit
b9a858af56
5 changed files with 14 additions and 8 deletions
|
@ -241,7 +241,10 @@ function loadVue() {
|
||||||
props: ['layer', 'data'],
|
props: ['layer', 'data'],
|
||||||
template: `
|
template: `
|
||||||
<div v-if="tmp[layer].buyables" class="upgTable">
|
<div v-if="tmp[layer].buyables" class="upgTable">
|
||||||
<respec-button v-if="tmp[layer].buyables.respec && !(tmp[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>
|
||||||
|
<div class="tooltipBox"><input type="checkbox" v-model="player[layer].noRespecConfirm" ><tooltip v-bind:text="'Disable respec confirmation'"></tooltip></div>
|
||||||
|
<respec-button v-if="tmp[layer].buyables.respec && !(tmp[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>
|
||||||
<div v-for="row in tmp[layer].buyables.rows" class="upgRow">
|
<div v-for="row in tmp[layer].buyables.rows" class="upgRow">
|
||||||
<div v-for="col in tmp[layer].buyables.cols"><div v-if="tmp[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'),}">
|
<div v-for="col in tmp[layer].buyables.cols"><div v-if="tmp[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"></buyable>
|
<buyable :layer = "layer" :data = "row*10+col" :size = "data"></buyable>
|
||||||
|
@ -274,7 +277,7 @@ function loadVue() {
|
||||||
props: ['layer', 'data'],
|
props: ['layer', 'data'],
|
||||||
template: `
|
template: `
|
||||||
<button v-if="tmp[layer].buyables && tmp[layer].buyables.respec && !(tmp[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>
|
<button v-if="tmp[layer].buyables && tmp[layer].buyables.respec && !(tmp[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>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
|
||||||
// data = button size, in px
|
// data = button size, in px
|
||||||
|
@ -367,7 +370,7 @@ function loadVue() {
|
||||||
|
|
||||||
// data = id
|
// data = id
|
||||||
Vue.component('achievement', {
|
Vue.component('achievement', {
|
||||||
props: ['layer', 'data', 'hover'],
|
props: ['layer', 'data'],
|
||||||
template: `
|
template: `
|
||||||
<div v-if="tmp[layer].achievements && tmp[layer].achievements[data]!== undefined && tmp[layer].achievements[data].unlocked" v-bind:class="{ [layer]: true, achievement: true, tooltipBox:true, locked: !hasAchievement(layer, data), bought: hasAchievement(layer, data)}"
|
<div v-if="tmp[layer].achievements && tmp[layer].achievements[data]!== undefined && tmp[layer].achievements[data].unlocked" v-bind:class="{ [layer]: true, achievement: true, tooltipBox:true, locked: !hasAchievement(layer, data), bought: hasAchievement(layer, data)}"
|
||||||
v-bind:style="tmp[layer].achievements[data].computedStyle">
|
v-bind:style="tmp[layer].achievements[data].computedStyle">
|
||||||
|
@ -410,7 +413,7 @@ function loadVue() {
|
||||||
Vue.component('slider', {
|
Vue.component('slider', {
|
||||||
props: ['layer', 'data'],
|
props: ['layer', 'data'],
|
||||||
template: `
|
template: `
|
||||||
<div class="tooltipBox" @mouseover="hover = true" @mouseleave="hover = false">
|
<div class="tooltipBox">
|
||||||
<tooltip :text="player[layer][data[0]]"></tooltip><input type="range" v-model="player[layer][data[0]]" :min="data[1]" :max="data[2]"></div>
|
<tooltip :text="player[layer][data[0]]"></tooltip><input type="range" v-model="player[layer][data[0]]" :min="data[1]" :max="data[2]"></div>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
|
|
@ -12,9 +12,9 @@ var systemComponents = {
|
||||||
},
|
},
|
||||||
|
|
||||||
'tree-node': {
|
'tree-node': {
|
||||||
props: ['layer', 'abb', 'size', 'hover'],
|
props: ['layer', 'abb', 'size'],
|
||||||
template: `
|
template: `
|
||||||
<button v-if="nodeShown(layer)" @mouseover="hover = true" @mouseleave="hover = false"
|
<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
|
||||||
|
@ -40,7 +40,7 @@ var systemComponents = {
|
||||||
v-bind:style="tmp[layer].computedNodeStyle">
|
v-bind:style="tmp[layer].computedNodeStyle">
|
||||||
<span v-html="(abb !== '' && tmp[layer].image === undefined) ? abb : ' '"></span>
|
<span v-html="(abb !== '' && tmp[layer].image === undefined) ? abb : ' '"></span>
|
||||||
<tooltip
|
<tooltip
|
||||||
v-bind:text="(tmp[layer].tooltip == '') ? false : (tmp[layer].isLayer) ? (
|
:text="(tmp[layer].tooltip == '') ? false : (tmp[layer].isLayer) ? (
|
||||||
player[layer].unlocked ? (tmp[layer].tooltip ? tmp[layer].tooltip : formatWhole(player[layer].points) + ' ' + tmp[layer].resource)
|
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].tooltipLocked ? tmp[layer].tooltipLocked : 'Reach ' + formatWhole(tmp[layer].requires) + ' ' + tmp[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp[layer].baseAmount) + ' ' + tmp[layer].baseResource + ')')
|
||||||
)
|
)
|
||||||
|
@ -170,6 +170,7 @@ var systemComponents = {
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
'tooltip' : {
|
'tooltip' : {
|
||||||
props: ['text'],
|
props: ['text'],
|
||||||
template: `<div class="tooltip" v-html="text"></div>
|
template: `<div class="tooltip" v-html="text"></div>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
function respecBuyables(layer) {
|
function respecBuyables(layer) {
|
||||||
if (!layers[layer].buyables) return
|
if (!layers[layer].buyables) return
|
||||||
if (!layers[layer].buyables.respec) return
|
if (!layers[layer].buyables.respec) return
|
||||||
if (!confirm("Are you sure you want to respec? This will force you to do a \"" + (tmp[layer].name ? tmp[layer].name : layer) + "\" reset as well!")) return
|
if (!player[layer].noRespecConfirm && !confirm("Are you sure you want to respec? This will force you to do a \"" + (tmp[layer].name ? tmp[layer].name : layer) + "\" reset as well!")) return
|
||||||
run(layers[layer].buyables.respec, layers[layer].buyables)
|
run(layers[layer].buyables.respec, layers[layer].buyables)
|
||||||
updateBuyableTemp(layer)
|
updateBuyableTemp(layer)
|
||||||
document.activeElement.blur()
|
document.activeElement.blur()
|
||||||
|
|
|
@ -74,6 +74,7 @@ function getStartLayerData(layer) {
|
||||||
layerdata.forceTooltip = false;
|
layerdata.forceTooltip = false;
|
||||||
|
|
||||||
layerdata.buyables = getStartBuyables(layer);
|
layerdata.buyables = getStartBuyables(layer);
|
||||||
|
if (layerdata.noRespecConfirm === undefined) layerdata.noRespecConfirm = false
|
||||||
if (layerdata.clickables == undefined)
|
if (layerdata.clickables == undefined)
|
||||||
layerdata.clickables = getStartClickables(layer);
|
layerdata.clickables = getStartClickables(layer);
|
||||||
layerdata.spentOnBuyables = new Decimal(0);
|
layerdata.spentOnBuyables = new Decimal(0);
|
||||||
|
|
|
@ -558,6 +558,7 @@ ul {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
|
pointer-events: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
Loading…
Reference in a new issue