incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-21 16:13:55 +00:00
Code Issues Releases Activity Actions

Added side layers.

Browse source
This commit is contained in:
Acamaeda 2020-10-14 19:34:15 -04:00
parent 082fd913f7
commit d784a6c2e4
5 changed files with 270 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

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

10
js/layerSupport.js
View file

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

329
js/layers.js
View file

@ -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",
requires() {return new Decimal(10)},
resource: "farm points",
color: "yellow",
requires: new Decimal (1),
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.
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;
}},
},
tooltipUnlocked() { // Optional, tooltip displays when the layer is locked
return ("YEETS")
},
},

5
js/v.js
View file

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

21
style.css
View file

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