diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js
index bdcb271..94003c7 100644
--- a/js/Demo/demoLayers.js
+++ b/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 weird dinosaur 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 weird dinosaur and I'll give you " + formatWhole(tmp[this.layer].resetGain) + " 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: " + 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 ""}],
@@ -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
-addNode("g", {
- row: "h",
- branches: ["c"],
- layerShown: true,
+ 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 weird dinosaur 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 weird dinosaur and I'll give you " + formatWhole(tmp[this.layer].resetGain) + " 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: " + 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 "ghost" layer which offsets f in the tree
-addNode("h", {
- row: "g",
- branches: ["g"],
- layerShown: true,
-
-},
+// 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",
+ ]
+ },
)
-
diff --git a/js/Demo/demoTree.js b/js/Demo/demoTree.js
new file mode 100644
index 0000000..f759d44
--- /dev/null
+++ b/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)}
+},
+)
diff --git a/js/v.js b/js/v.js
index 917a258..261d673 100644
--- a/js/v.js
+++ b/js/v.js
@@ -414,14 +414,14 @@ function loadVue() {
`
diff --git a/style.css b/style.css
index a91ddee..bf43998 100644
--- a/style.css
+++ b/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;