Fix clickables

src/components/features/Buyable.vue

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

src/components/features/Clickable.vue

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

src/components/features/Clickables.vue

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

src/components/features/DefaultUpgradeDisplay.vue

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

src/components/features/MasterButton.vue

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

src/components/system/Tabs.vue

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

src/data/layers/aca/f.js

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

src/store/layers.js

@@ -283,8 +283,17 @@ 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) {