Added overriding layout and tree.jses

demo.html

@@ -6,6 +6,7 @@
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
 	<script type="text/javascript" src="js/break_eternity.js"></script>
 	<script type="text/javascript" src="js/layerSupport.js"></script>
+	<script type="text/javascript" src="js/demo/demoTree.js"></script>
 	<script type="text/javascript" src="js/demo/demoLayers.js"></script>
 	<script type="text/javascript" src="js/demo/demoMod.js"></script>
 	<script type="text/javascript" src="js/temp.js"></script>
@@ -153,7 +154,7 @@
 				<span v-if="canGenPoints()"  class="overlayThing">({{format(getPointGen())}}/sec)</span>
 				<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
 			</div>
-			<tree :data="TREE_LAYERS"></tree>
+			<tree :data="(treeLayout ? treeLayout : TREE_LAYERS)"></tree>
 		</div>
 		<div v-for="layer in LAYERS" >
 			<div v-if="player.navTab == 'none'" id="fakeHead" style="visibility: hidden;">

js/Demo/demoLayers.js

@@ -1,157 +1,6 @@
-
 var testTree = [["f", "c"],
 ["g", "spook", "h"]]
 
-// This layer is mostly minimal but it uses a custom prestige type and a clickable
-addLayer("f", {
-    startData() { return {
-        unlocked: false,
-        points: new Decimal(0),
-        boop: false,
-        clickables: {[11]: "Start"} // Optional default Clickable state
-    }},
-    color: "#FE0102",
-    requires() {return new Decimal(10)}, 
-    resource: "farm points", 
-    baseResource: "candies", 
-    baseAmount() {return player.points},
-    type: "custom", // A "Custom" type which is effectively static
-    exponent: 0.5,
-    base: 3,
-    roundUpCost: true,
-    canBuyMax() {return hasAchievement('a', 13)},
-
-    row: 1,
-    layerShown() {return true}, 
-    branches: ["c"], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
-
-    tooltipLocked() { // Optional, tooltip displays when the layer is locked
-        return ("This weird farmer dinosaur will only see you if you have at least " + this.requires() + " candies. You only have " + formatWhole(player.points))
-    },
-
-    midsection: [
-        "blank", ['display-image', 'https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390'],
-        ["display-text", "Bork bork!"]
-    ],
-
-    // The following are only currently used for "custom" Prestige type:
-    prestigeButtonText() { //Is secretly HTML
-        if (!this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your candies and lollipops! (At least " + formatWhole(tmp[this.layer].nextAt) + " candies)"
-        if (this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" + formatWhole(tmp[this.layer].resetGain) + "</b> Farm Points in exchange for all of your candies and lollipops! (You'll get another one at " + formatWhole(tmp[layer].nextAtDisp) + " candies)"
-    },
-    getResetGain() {
-        return getResetGain(this.layer, useType = "static")
-    },
-    getNextAt(canMax=false) { //  
-        return getNextAt(this.layer, canMax, useType = "static")
-    },
-    canReset() {
-        return tmp[this.layer].baseAmount.gte(tmp[this.layer].nextAt)
-    },
-    // This is also non minimal, a Clickable!
-    clickables: {
-        rows: 1,
-        cols: 1,
-        masterButtonPress() { // Optional, reset things and give back your currency. Having this function makes a respec button appear
-            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
-        11: {
-            title: "Clicky clicky!", // Optional, displayed at the top in a larger font
-            display() { // 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() { 
-                switch(getClickableState(this.layer, this.id)){
-                    case "Start":
-                        player[this.layer].clickables[this.id] = "A new state!"
-                        break;
-                    case "A new state!":
-                        player[this.layer].clickables[this.id] = "Keep going!"
-                        break;
-                    case "Keep going!":
-                        player[this.layer].clickables[this.id] = "Maybe that's a bit too far..."
-                        break;                        
-                    case "Maybe that's a bit too far...":
-                        player[this.layer].clickables[this.id] = "Borkened..."
-                        break;
-                    default:
-                        player[this.layer].clickables[this.id] = "Start"
-                        break;
-
-                }
-            },
-            style() {
-                switch(getClickableState(this.layer, this.id)){
-                    case "Start":
-                        return {'background-color': 'green'}
-                        break;
-                    case "A new state!":
-                        return {'background-color': 'yellow'}
-                        break;
-                    case "Keep going!":
-                        return {'background-color': 'orange'}
-                        break;                        
-                    case "Maybe that's a bit too far...":
-                        return {'background-color': 'red'}
-                        break;
-                    default:
-                        return {}
-                        break;
-            }},
-        },
-    },
-
-}, 
-)
-
-// A side layer with achievements, with no prestige
-addLayer("a", {
-        startData() { return {
-            unlocked: true,
-			points: new Decimal(0),
-        }},
-        color: "yellow",
-        resource: "achievement power", 
-        row: "side",
-        layerShown() {return true}, 
-        tooltip() { // Optional, tooltip displays when the layer is locked
-            return ("Achievements")
-        },
-        achievements: {
-            rows: 2,
-            cols: 3,
-            11: {
-                name: "Get me!",
-                done() {return true}, // This one is a freebie
-                goalTooltip: "How did this happen?", // Shows when achievement is not completed
-                doneTooltip: "You did it!", // Showed when the achievement is completed
-            },
-            12: {
-                name: "Impossible!",
-                done() {return false},
-                goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
-                doneTooltip: "HOW????", // Showed when the achievement is completed
-            },
-            13: {
-                name: "EIEIO",
-                done() {return player.f.points.gte(1)},
-                tooltip: "Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).", // Showed when the achievement is completed
-                onComplete() {console.log("Bork bork bork!")}
-            },
-        },
-        midsection: [
-            "achievements",
-        ]
-    }, 
-)
-
-
 addLayer("c", {
         layer: "c", // This is assigned automatically, both to the layer and all upgrades, etc. Shown here so you know about it
         name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
@@ -441,7 +290,7 @@ addLayer("c", {
                 buttonStyle() {return  {'color': 'orange'}},
                 shouldNotify: true,
                 content:
-                    [["tree", testTree], "main-display",
+                    ["main-display",
                     "prestige-button", "resource-display",
                     ["blank", "5px"], // Height
                     ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
@@ -480,7 +329,7 @@ addLayer("c", {
                         ["blank", ['0', '50px']], ["bar", "flatBoi"]
                         ]],
                     ]],
-                    "blank", ["display-text", "It's jail because \"bars\"! So funny! Ha ha!"],
+                    "blank", ["display-text", "It's jail because \"bars\"! So funny! Ha ha!"],["tree", testTree], 
                 ],
             },
             illuminati: {
@@ -515,30 +364,153 @@ addLayer("c", {
         resetDescription: "Melt your points into ",
 })
 
-// A "ghost" layer which offsets f in the tree
+
-addNode("spook", {
+
+// This layer is mostly minimal but it uses a custom prestige type and a clickable
+addLayer("f", {
+    startData() { return {
+        unlocked: false,
+        points: new Decimal(0),
+        boop: false,
+        clickables: {[11]: "Start"} // Optional default Clickable state
+    }},
+    color: "#FE0102",
+    requires() {return new Decimal(10)}, 
+    resource: "farm points", 
+    baseResource: "candies", 
+    baseAmount() {return player.points},
+    type: "custom", // A "Custom" type which is effectively static
+    exponent: 0.5,
+    base: 3,
+    roundUpCost: true,
+    canBuyMax() {return hasAchievement('a', 13)},
+
     row: 1,
-    layerShown: "ghost",
+    layerShown() {return true}, 
-}, 
+    branches: ["c"], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
-)
 
+    tooltipLocked() { // Optional, tooltip displays when the layer is locked
+        return ("This weird farmer dinosaur will only see you if you have at least " + this.requires() + " candies. You only have " + formatWhole(player.points))
+    },
 
-// A "ghost" layer which offsets f in the tree
+    midsection: [
-addNode("g", {
+        "blank", ['display-image', 'https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390'],
-    row: "h",
+        ["display-text", "Bork bork!"]
-    branches: ["c"],
+    ],
-    layerShown: true,
+
+    // The following are only currently used for "custom" Prestige type:
+    prestigeButtonText() { //Is secretly HTML
+        if (!this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your candies and lollipops! (At least " + formatWhole(tmp[this.layer].nextAt) + " candies)"
+        if (this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" + formatWhole(tmp[this.layer].resetGain) + "</b> Farm Points in exchange for all of your candies and lollipops! (You'll get another one at " + formatWhole(tmp[layer].nextAtDisp) + " candies)"
+    },
+    getResetGain() {
+        return getResetGain(this.layer, useType = "static")
+    },
+    getNextAt(canMax=false) { //  
+        return getNextAt(this.layer, canMax, useType = "static")
+    },
+    canReset() {
+        return tmp[this.layer].baseAmount.gte(tmp[this.layer].nextAt)
+    },
+    // This is also non minimal, a Clickable!
+    clickables: {
+        rows: 1,
+        cols: 1,
+        masterButtonPress() { // Optional, reset things and give back your currency. Having this function makes a respec button appear
+            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
+        11: {
+            title: "Clicky clicky!", // Optional, displayed at the top in a larger font
+            display() { // 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() { 
+                switch(getClickableState(this.layer, this.id)){
+                    case "Start":
+                        player[this.layer].clickables[this.id] = "A new state!"
+                        break;
+                    case "A new state!":
+                        player[this.layer].clickables[this.id] = "Keep going!"
+                        break;
+                    case "Keep going!":
+                        player[this.layer].clickables[this.id] = "Maybe that's a bit too far..."
+                        break;                        
+                    case "Maybe that's a bit too far...":
+                        player[this.layer].clickables[this.id] = "Borkened..."
+                        break;
+                    default:
+                        player[this.layer].clickables[this.id] = "Start"
+                        break;
+
+                }
+            },
+            style() {
+                switch(getClickableState(this.layer, this.id)){
+                    case "Start":
+                        return {'background-color': 'green'}
+                        break;
+                    case "A new state!":
+                        return {'background-color': 'yellow'}
+                        break;
+                    case "Keep going!":
+                        return {'background-color': 'orange'}
+                        break;                        
+                    case "Maybe that's a bit too far...":
+                        return {'background-color': 'red'}
+                        break;
+                    default:
+                        return {}
+                        break;
+            }},
+        },
+    },
 
 }, 
 )
 
-
+// A side layer with achievements, with no prestige
-// A "ghost" layer which offsets f in the tree
+addLayer("a", {
-addNode("h", {
+        startData() { return {
-    row: "g",
+            unlocked: true,
-    branches: ["g"],
+			points: new Decimal(0),
-    layerShown: true,
+        }},
-
+        color: "yellow",
-}, 
+        resource: "achievement power", 
+        row: "side",
+        layerShown() {return true}, 
+        tooltip() { // Optional, tooltip displays when the layer is locked
+            return ("Achievements")
+        },
+        achievements: {
+            rows: 2,
+            cols: 3,
+            11: {
+                name: "Get me!",
+                done() {return true}, // This one is a freebie
+                goalTooltip: "How did this happen?", // Shows when achievement is not completed
+                doneTooltip: "You did it!", // Showed when the achievement is completed
+            },
+            12: {
+                name: "Impossible!",
+                done() {return false},
+                goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
+                doneTooltip: "HOW????", // Showed when the achievement is completed
+            },
+            13: {
+                name: "EIEIO",
+                done() {return player.f.points.gte(1)},
+                tooltip: "Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).", // Showed when the achievement is completed
+                onComplete() {console.log("Bork bork bork!")}
+            },
+        },
+        midsection: [
+            "achievements",
+        ]
+    }, 
 )
-

js/Demo/demoTree.js

@@ -0,0 +1,41 @@
+// treeLayout will override the default tree's layout if used
+var treeLayout = "";
+/*var treeLayout = [["f", "c"],
+        ["g", "spook", "h"]]
+*/
+
+
+// A "ghost" layer which offsets f in the tree
+addNode("spook", {
+    row: 1,
+    layerShown: "ghost",
+}, 
+)
+
+
+// A "ghost" layer which offsets f in the tree
+addNode("g", {
+    symbol: "TH",
+    branches: ["c"],
+    color: '#6d3678',
+    layerShown: true,
+    canClick() {return player.points.gte(10)},
+    tooltip: "Thanos your points",
+    tooltipLocked: "Thanos your points",
+    onClick() {player.points = player.points.div(2)}
+
+}, 
+)
+
+
+// A "ghost" layer which offsets f in the tree
+addNode("h", {
+    branches: ["g"],
+    layerShown: true,
+    tooltip: "Restore your points to 10",
+    tooltipLocked: "Restore your points to 10",
+
+    canClick() {return player.points.lt(10)},
+    onClick() {player.points = new Decimal(10)}
+}, 
+)

js/v.js

@@ -414,14 +414,14 @@ function loadVue() {
 		<button v-if="nodeShown(layer)"
 			v-bind:id="layer"
 			v-on:click="function() {
-				showTab(layer)
+				layers[layer].onClick()
 			}"
 			v-bind:tooltip="
-				player[layer].unlocked ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
+				tmp[layer].canClick ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
 				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'I am a button!')
 			"
 			v-bind:class="{
-				treeNode: size != 'small',
+				treeButton: size != 'small',
 				smallNode: size == 'small',
 				[layer]: true,
 				ghost: tmp[layer].layerShown == 'ghost',
@@ -430,9 +430,7 @@ function loadVue() {
 				notify: tmp[layer].notify,
 				can: tmp[layer].canClick,
 			}"
-			v-bind:style="[layerunlocked(layer) ? {
+			v-bind:style="[tmp[layer].canClick ? {'background-color': tmp[layer].color} : {}, tmp[layer].nodeStyle]">
-				'background-color': tmp[layer].color,
-			} : {}, tmp[layer].nodeStyle]">
 			{{abb}}
 		</button>
 		`

style.css

@@ -61,6 +61,8 @@ h1, h2, h3, b, input {
 	font-family: "Lucida Console", "Courier New", monospace
 }
 
+
+
 .treeNode {
 	height: 100px;
 	width: 100px;
@@ -74,6 +76,20 @@ h1, h2, h3, b, input {
 	text-shadow: var(--hqProperty3);
 }
 
+
+.treeButton {
+	height: 100px;
+	width: 100px;
+	border: var(--hqProperty1);
+	border-color: rgba(0, 0, 0, 0.125);
+	border-radius: 33%;
+	box-shadow: var(--hqProperty2a), var(--hqProperty2b);
+	font-size: 40px;
+	font-family: "Lucida Console", "Courier New", monospace;
+	color: rgba(0, 0, 0, 0.5);
+	text-shadow: var(--hqProperty3);
+}
+
 .smallNode {
 	height: 60px;
 	width: 60px;