Added side layers.

index.html

@@ -111,6 +111,9 @@
 				<br>
 				<span v-if="canGenPoints()"  class="overlayThing">({{format(getPointGen())}}/sec)</span>
 			</div>
+			<div class="sideLayers" >
+				<div v-for="node in OTHER_LAYERS['side']"><layer-node :layer='node.layer' :abb='layers[node.layer].symbol' :size="'small'"></layer-node></div>
+			</div>
 		</div>
 
 

js/layerSupport.js

@@ -24,6 +24,7 @@ function updateHotkeys()
 
 var ROW_LAYERS = {}
 var TREE_LAYERS = {}
+var OTHER_LAYERS = {}
 
 function updateLayers(){
     LAYERS = Object.keys(layers);
@@ -104,11 +105,14 @@ function updateLayers(){
 
         row = layers[layer].row
         if(!ROW_LAYERS[row]) ROW_LAYERS[row] = {}
-        if(!TREE_LAYERS[row]) TREE_LAYERS[row] = []
+        if(!TREE_LAYERS[row] && !isNaN(row)) TREE_LAYERS[row] = []
+        if(!OTHER_LAYERS[row] && isNaN(row)) OTHER_LAYERS[row] = []
+
         ROW_LAYERS[row][layer]=layer;
         let position = (layers[layer].position !== undefined ? layers[layer].position : layer)
-        TREE_LAYERS[row].push({layer: layer, position: position})
+        
-
+        if (!isNaN(row)) TREE_LAYERS[row].push({layer: layer, position: position})
+        else OTHER_LAYERS[row].push({layer: layer, position: position})
         
     }
     for (row in TREE_LAYERS) {

js/layers.js

@@ -342,112 +342,255 @@ addLayer("c", {
 
 // 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:() => true,
+    gainMult() {
+        return new Decimal(1)
+    },
+    gainExp() {
+        return new Decimal(1)
+    },
+    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;
+            }},
+        },
+    },
+
+}, 
+)
+
+
+// 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:() => true,
+    gainMult() {
+        return new Decimal(1)
+    },
+    gainExp() {
+        return new Decimal(1)
+    },
+    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;
+            }},
+        },
+    },
+
+}, 
+)
+
+
+// This layer is mostly minimal but it uses a custom prestige type and a clickable
+addLayer("a", {
         startData() { return {
-            unlocked: false,
+            unlocked: true,
 			points: new Decimal(0),
-            boop: false,
-            clickables: {[11]: "Start"} // Optional default Clickable state
         }},
-        color:() => "#FE0102",
+        color: "yellow",
-        requires() {return new Decimal(10)}, 
+        requires: new Decimal (1), 
-        resource: "farm points", 
+        resource: "idk", 
         baseResource: "candies", 
         baseAmount() {return player.points},
-        type: "custom", // A "Custom" type which is effectively static
+        type: "normal", // A "Custom" type which is effectively static
         exponent: 0.5,
-        base: 3,
-        roundUpCost: true,
-        canBuyMax:() => true,
         gainMult() {
             return new Decimal(1)
         },
         gainExp() {
             return new Decimal(1)
         },
-        row: 1,
+        row: "side",
         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.
+        tooltipUnlocked() { // Optional, tooltip displays when the layer is locked
-
+            return ("YEETS")
-        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;
-                }},
-            },
         },
 
     }, 

js/v.js

@@ -305,7 +305,7 @@ function loadVue() {
 	})
 
 	Vue.component('layer-node', {
-		props: ['layer', 'abb'],
+		props: ['layer', 'abb', 'size'],
 		template: `
 		<button v-if="nodeShown(layer)"
 			v-bind:id="layer"
@@ -317,7 +317,8 @@ function loadVue() {
 				: (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 + ')')
 			"
 			v-bind:class="{
-				treeNode: true,
+				treeNode: size != 'small',
+				smallNode: size == 'small',
 				[layer]: true,
 				hidden: !tmp[layer].layerShown,
 				locked: !player[layer].unlocked && !tmp[layer].baseAmount.gte(tmp[layer].requires),

style.css

@@ -74,6 +74,20 @@ h1, h2, h3, b, input {
 	text-shadow: var(--hqProperty3);
 }
 
+.smallNode {
+	height: 60px;
+	width: 60px;
+	border: var(--hqProperty1);
+	border-color: rgba(255, 255, 255, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.125);
+	border-radius: 50%;
+	box-shadow: var(--hqProperty2a), var(--hqProperty2b);
+	font-size: 30px;
+	font-family: "Lucida Console", "Courier New", monospace;
+	color: rgba(0, 0, 0, 0.5);
+	text-shadow: var(--hqProperty3);
+}
+
+
 .locked {
 	background-color: #bf8f8f;
 	cursor: not-allowed;
@@ -532,4 +546,11 @@ ul {
 .overlayThing {
 	pointer-events:auto;
 	background-color: var(--background);
+}
+
+.sideLayers {
+	pointer-events:auto;
+	position: absolute;
+	right: 35px;
+	top: 55px;
 }