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 2025-05-11 04:21:09 +00:00
Code Issues Releases Activity Actions

Buyable and clickable trees

Browse source
This commit is contained in:
Harley White 2021-06-07 19:40:34 -04:00
parent d015d0177c
commit ff2fc625f7
6 changed files with 45 additions and 10 deletions

21
js/components.js
View file

@ -273,7 +273,7 @@ function loadVue() {
<div v-if="tmp[layer].buyables && tmp[layer].buyables[data]!== undefined && tmp[layer].buyables[data].unlocked" style="display: grid">
<button v-bind:class="{ buyable: true, can: tmp[layer].buyables[data].canBuy, locked: !tmp[layer].buyables[data].canAfford, bought: player[layer].buyables[data].gte(tmp[layer].buyables[data].purchaseLimit)}"
v-bind:style="[tmp[layer].buyables[data].canBuy ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].componentStyles.buyable, tmp[layer].buyables[data].style]"
v-on:click="if(!interval) buyBuyable(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
v-on:click="if(!interval) buyBuyable(layer, data)" :id='"buyable-" + layer + "-" + data' @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
<span v-if= "tmp[layer].buyables[data].title"><h2 v-html="tmp[layer].buyables[data].title"></h2><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].buyables[data].display, layers[layer].buyables[data])"></span>
<node-mark :layer='layer' :data='tmp[layer].buyables[data].marked'></node-mark>
@ -335,7 +335,7 @@ function loadVue() {
v-if="tmp[layer].clickables && tmp[layer].clickables[data]!== undefined && tmp[layer].clickables[data].unlocked"
v-bind:class="{ upg: true, can: tmp[layer].clickables[data].canClick, locked: !tmp[layer].clickables[data].canClick}"
v-bind:style="[tmp[layer].clickables[data].canClick ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].clickables[data].style]"
v-on:click="if(!interval) clickClickable(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
v-on:click="if(!interval) clickClickable(layer, data)" :id='"clickable-" + layer + "-" + data' @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
<span v-if= "tmp[layer].clickables[data].title"><h2 v-html="tmp[layer].clickables[data].title"></h2><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].clickables[data].display, layers[layer].clickables[data])"></span>
<node-mark :layer='layer' :data='tmp[layer].clickables[data].marked'></node-mark>
@ -514,6 +514,23 @@ function loadVue() {
})
// Data is an array with the structure of the tree
Vue.component('buyable-tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `<thing-tree :layer="layer" :data = "data" :type = "'buyable'"></thing-tree>`
})
// Data is an array with the structure of the tree
Vue.component('clickable-tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `<thing-tree :layer="layer" :data = "data" :type = "'clickable'"></thing-tree>`
})
Vue.component('thing-tree', {
props: ['layer', 'data', 'type'],
computed: {

20
js/technical/canvas.js
View file

@ -34,16 +34,24 @@ 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 + "-")
}
drawComponentBranches(layer, tmp[layer].upgrades, "upgrade-")
drawComponentBranches(layer, tmp[layer].buyables, "buyable-")
drawComponentBranches(layer, tmp[layer].clickables, "clickable-")
}
}
function drawComponentBranches(layer, data, prefix) {
for(id in data) {
if (data[id].branches) {
for (branch in data[id].branches)
{
drawTreeBranch(id, data[id].branches[branch], prefix + layer + "-")
}
}
}
}
function drawTreeBranch(num1, data, prefix) { // taken from Antimatter Dimensions & adjusted slightly