forked from profectus/Profectus
Fix clickables
This commit is contained in:
parent
9502430280
commit
b05191a715
8 changed files with 40 additions and 16 deletions
|
@ -90,8 +90,9 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.buyable {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
width: 200px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.buyable-button {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div v-if="clickable.unlocked">
|
||||
<button :class="{ feature: true, [layer || tab.layer]: true, can: clickable.canClick, locked: !clickable.canClick }" :style="style"
|
||||
@click="clickable.click" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start"
|
||||
@touchend="stop" @touchcancel="stop" :disabled="!clickable.canClick">
|
||||
<button :style="style" @click="clickable.click" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start"
|
||||
@touchend="stop" @touchcancel="stop" :disabled="!clickable.canClick"
|
||||
:class="{ feature: true, [layer || tab.layer]: true, clickable: true, can: clickable.canClick, locked: !clickable.canClick }">
|
||||
<div v-if="titleDisplay">
|
||||
<component :is="titleDisplay" />
|
||||
</div>
|
||||
|
@ -21,6 +21,7 @@ export default {
|
|||
name: 'clickable',
|
||||
inject: [ 'tab' ],
|
||||
props: {
|
||||
layer: String,
|
||||
id: [ Number, String ],
|
||||
size: {
|
||||
type: [ Number, String ]
|
||||
|
@ -70,4 +71,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clickable {
|
||||
min-height: 120px;
|
||||
width: 120px;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -26,7 +26,10 @@ export default {
|
|||
props: {
|
||||
layer: String,
|
||||
clickables: Array,
|
||||
showMaster: Boolean,
|
||||
showMaster: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
height: {
|
||||
type: [ Number, String ],
|
||||
default: "inherit"
|
||||
|
@ -37,18 +40,19 @@ export default {
|
|||
return getFiltered(layers[this.layer || this.tab.layer].clickables, this.clickables);
|
||||
},
|
||||
showMasterButton() {
|
||||
if (layers[this.layer || this.tab.layer].clickables.masterButtonPress == undefined) {
|
||||
console.log(layers[this.layer || this.tab.layer].clickables?.masterButtonClick, this.showMaster, layers[this.layer || this.tab.layer].clickables?.showMaster)
|
||||
if (layers[this.layer || this.tab.layer].clickables?.masterButtonClick == undefined) {
|
||||
return false;
|
||||
}
|
||||
if (this.showMaster != undefined) {
|
||||
return this.showMaster;
|
||||
}
|
||||
return layers[this.layer || this.tab.layer].clickables.showMaster;
|
||||
return layers[this.layer || this.tab.layer].clickables?.showMaster;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
respec() {
|
||||
layers[this.layer || this.tab.layer].clickables.masterButtonPress();
|
||||
press() {
|
||||
layers[this.layer || this.tab.layer].clickables.masterButtonClick();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -26,7 +26,7 @@ export default {
|
|||
},
|
||||
title() {
|
||||
if (this.upgrade.title) {
|
||||
return coerceComponent(this.upgrade.title, 'h2');
|
||||
return coerceComponent(this.upgrade.title, 'h3');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<button @click="press" :class="{ longUpg: true, can: unlocked, locked: !unlocked }" :style="style">
|
||||
<button @click="press" :class="{ feature: true, can: unlocked, locked: !unlocked }" :style="style">
|
||||
<component :is="masterButtonDisplay" />
|
||||
</button>
|
||||
</template>
|
||||
|
@ -29,6 +29,9 @@ export default {
|
|||
if (this.display) {
|
||||
return coerceComponent(this.display);
|
||||
}
|
||||
if (layers[this.layer || this.tab.layer].clickables?.masterButtonDisplay) {
|
||||
return coerceComponent(layers[this.layer || this.tab.layer].clickables?.masterButtonDisplay);
|
||||
}
|
||||
return coerceComponent("Click Me!");
|
||||
}
|
||||
},
|
||||
|
|
|
@ -112,5 +112,6 @@ export default {
|
|||
.tab > [data-simplebar] > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper > .simplebar-content {
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -50,21 +50,21 @@ export default {
|
|||
// This is also non minimal, a Clickable!
|
||||
clickables: {
|
||||
|
||||
masterButtonPress() {
|
||||
masterButtonClick() {
|
||||
if (getClickableState(this.layer, 11) == "Borkened...")
|
||||
player[this.layer].clickables[11] = "Start"
|
||||
},
|
||||
masterButtonText() {return (getClickableState(this.layer, 11) == "Borkened...") ? "Fix the clickable!" : "Does nothing"}, // Text on Respec button, optional
|
||||
masterButtonDisplay() {return (getClickableState(this.layer, 11) == "Borkened...") ? "Fix the clickable!" : "Does nothing"}, // Text on Respec button, optional
|
||||
11: {
|
||||
title: "Clicky clicky!", // Optional, displayed at the top in a larger font
|
||||
display() { // Everything else displayed in the buyable button after the title
|
||||
titleDisplay: "Clicky clicky!", // Optional, displayed at the top in a larger font
|
||||
descriptionDisplay() { // Everything else displayed in the buyable button after the title
|
||||
let data = getClickableState(this.layer, this.id)
|
||||
return "Current state:<br>" + data
|
||||
},
|
||||
unlocked() { return player[this.layer].unlocked },
|
||||
canClick() {
|
||||
return getClickableState(this.layer, this.id) !== "Borkened..."},
|
||||
onClick() {
|
||||
click() {
|
||||
switch(getClickableState(this.layer, this.id)){
|
||||
case "Start":
|
||||
player[this.layer].clickables[this.id] = "A new state!"
|
||||
|
|
|
@ -283,9 +283,18 @@ export function addLayer(layer, player = null) {
|
|||
layer.clickables[id].stateSet = function(state) {
|
||||
player[layer.id].clickables[id] = state;
|
||||
}
|
||||
if (layer.clickables[id].click != undefined) {
|
||||
layer.clickables[id].click.forceCached = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (layer.clickables.masterButtonClick != undefined) {
|
||||
layer.clickables.masterButtonClick.forceCached = false;
|
||||
}
|
||||
if (layer.clickables.showMaster == undefined && layer.clickables.masterButtonDisplay != undefined) {
|
||||
layer.clickables.showMaster = true;
|
||||
}
|
||||
}
|
||||
if (layer.milestones) {
|
||||
for (let id in layer.milestones) {
|
||||
if (isPlainObject(layer.milestones[id])) {
|
||||
|
|
Loading…
Reference in a new issue