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

Upgrade trees!

Browse source
This commit is contained in:
Harley White 2021-06-03 13:02:47 -04:00
parent e7b0af397d
commit 7e364cb9af
5 changed files with 39 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
js/Demo/demoLayers.js
View file

@ -109,6 +109,7 @@ addLayer("c", {
description: "Gain 1 Point every second.",
cost: new Decimal(1),
unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
branches: [12]
},
12: {
description: "Point generation is faster based on your unspent Lollipops.",
@ -353,7 +354,8 @@ addLayer("c", {
["raw-html", function() {return "<h1> C O N F I R M E D </h1>"}], "blank",
["microtabs", "stuff", {'width': '600px', 'height': '350px', 'background-color': 'brown', 'border-style': 'solid'}],
["display-text", "Adjust how many points H gives you!"],
["slider", ["otherThingy", 1, 30]],
["slider", ["otherThingy", 1, 30]], "blank", ["upgrade-tree", [[11],
[12, 22, 22, 11]]]
]
}

18
js/components.js
View file

@ -172,7 +172,7 @@ function loadVue() {
Vue.component('upgrade', {
props: ['layer', 'data'],
template: `
<button v-if="tmp[layer].upgrades && tmp[layer].upgrades[data]!== undefined && tmp[layer].upgrades[data].unlocked" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: hasUpgrade(layer, data), locked: (!(canAffordUpgrade(layer, data))&&!hasUpgrade(layer, data)), can: (canAffordUpgrade(layer, data)&&!hasUpgrade(layer, data))}"
<button v-if="tmp[layer].upgrades && tmp[layer].upgrades[data]!== undefined && tmp[layer].upgrades[data].unlocked" :id='"upgrade-" + layer + "-" + data' v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: hasUpgrade(layer, data), locked: (!(canAffordUpgrade(layer, data))&&!hasUpgrade(layer, data)), can: (canAffordUpgrade(layer, data)&&!hasUpgrade(layer, data))}"
v-bind:style="[((!hasUpgrade(layer, data) && canAffordUpgrade(layer, data)) ? {'background-color': tmp[layer].color} : {}), tmp[layer].upgrades[data].style]">
<span v-if="layers[layer].upgrades[data].fullDisplay" v-html="run(layers[layer].upgrades[data].fullDisplay, layers[layer].upgrades[data])"></span>
<span v-else>
@ -506,6 +506,22 @@ function loadVue() {
`
})
// Data is an array with the structure of the tree
Vue.component('upgrade-tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `<div>
<span class="upgRow" v-for="(row, r) in data"><table>
<span v-for="id in row" style = "{width: 0px; height: 0px;}" v-if="tmp[layer].upgrades[id]!== undefined && tmp[layer].upgrades[id].unlocked" class="upgAlign">
<upgrade :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles.upgrade" class = "treeThing"></upgrade>
</span>
<tr><table><button class="treeNode hidden"></button></table></tr>
</span></div>
`
})
// Updates the value in player[layer][data]
Vue.component('text-input', {
props: ['layer', 'data'],

16
js/technical/canvas.js
View file

@ -45,10 +45,19 @@ function drawTree() {
drawTreeBranch(layer, tmp[layer].branches[branch])
}
}
for(id in layers[layer].upgrades) {
if (tmp[layer].upgrades[id].branches) {
for (branch in tmp[layer].upgrades[id].branches)
{
drawTreeBranch(id, tmp[layer].upgrades[id].branches[branch], "upgrade-" + layer + "-")
}
}
}
}
}
function drawTreeBranch(num1, data) { // taken from Antimatter Dimensions & adjusted slightly
function drawTreeBranch(num1, data, prefix) { // taken from Antimatter Dimensions & adjusted slightly
let num2 = data
let color_id = 1
if (Array.isArray(data)){
@ -58,7 +67,10 @@ function drawTreeBranch(num1, data) { // taken from Antimatter Dimensions & adju
if(typeof(color_id) == "number")
color_id = colors_theme[color_id]
if (prefix) {
num1 = prefix + num1
num2 = prefix + num2
}
if (document.getElementById(num1) == null || document.getElementById(num2) == null)
return

1
js/utils.js
View file

@ -85,6 +85,7 @@ function buyUpg(layer, id) {
player[layer].upgrades.push(id);
if (upg.onPurchase != undefined)
run(upg.onPurchase, upg)
needCanvasUpdate = true
}
function buyMaxBuyable(layer, id) {

5
style.css
View file

@ -94,9 +94,12 @@ h1, h2, h3, b, input {
color: rgba(0, 0, 0, 0.5);
text-shadow: var(--hqProperty3);
padding: 0;
margin: 0 10px 0 10px;
}
.treeThing {
margin: 0 10px 0 10px;
vertical-align: middle;
}
.smallNode {
height: 60px;