1
0
Fork 0
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:
Harley White 2021-04-29 17:49:35 -04:00
parent 87d394ee27
commit b9a858af56
5 changed files with 14 additions and 8 deletions

View file

@ -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>
` `
}) })

View file

@ -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 : '&nbsp;'"></span> <span v-html="(abb !== '' && tmp[layer].image === undefined) ? abb : '&nbsp;'"></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>

View file

@ -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()

View file

@ -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);

View file

@ -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;