thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fix clickables

Browse source
This commit is contained in:
thepaperpilot 2021-06-24 22:15:10 -05:00
parent 9502430280
commit b05191a715
8 changed files with 40 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/features/Buyable.vue
View file

@ -90,8 +90,9 @@ export default {
<style scoped>
.buyable {
height: 200px;
min-height: 200px;
width: 200px;
font-size: 10px;
}
.buyable-button {

12
src/components/features/Clickable.vue
View file

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

14
src/components/features/Clickables.vue
View file

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

2
src/components/features/DefaultUpgradeDisplay.vue
View file

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

5
src/components/features/MasterButton.vue
View file

@ -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!");
}
},

1
src/components/system/Tabs.vue
View file

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

10
src/data/layers/aca/f.js
View file

@ -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!"

9
src/store/layers.js
View file

@ -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])) {