mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-22 00:21:32 +00:00
Added overriding layout and tree.jses
This commit is contained in:
Acamaeda
parent
b780160a4c
commit
eebc05db1f
5 changed files with 207 additions and 179 deletions
|
|
@ -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;">
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
},
|
||||
)
|
||||
|
||||
midsection: [
|
||||
"blank", ['display-image', 'https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390'],
|
||||
["display-text", "Bork bork!"]
|
||||
],
|
||||
|
||||
// A "ghost" layer which offsets f in the tree
|
||||
addNode("g", {
|
||||
row: "h",
|
||||
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 "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",
|
||||
]
|
||||
},
|
||||
)
|
||||
|
||||
|
|
|
|||
41
js/Demo/demoTree.js
Normal file
41
js/Demo/demoTree.js
Normal file
|
|
@ -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)}
|
||||
},
|
||||
)
|
||||
10
js/v.js
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) ? {
|
||||
'background-color': tmp[layer].color,
|
||||
} : {}, tmp[layer].nodeStyle]">
|
||||
v-bind:style="[tmp[layer].canClick ? {'background-color': tmp[layer].color} : {}, tmp[layer].nodeStyle]">
|
||||
{{abb}}
|
||||
</button>
|
||||
`
|
||||
|
|
|
|||
16
style.css
16
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue