var app;
function loadVue() {
// data = a function returning the content (actually HTML)
Vue.component('display-text', {
props: ['layer', 'data'],
template: `
`
})
// data = a function returning the content (actually HTML)
Vue.component('raw-html', {
props: ['layer', 'data'],
template: `
`
})
// Blank space, data = optional height in px or pair with width and height in px
Vue.component('blank', {
props: ['layer', 'data'],
template: `
`
})
// Displays an image, data is the URL
Vue.component('display-image', {
props: ['layer', 'data'],
template: `
`
})
// data = an array of Components to be displayed in a row
Vue.component('row', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `
`
})
// data = an array of Components to be displayed in a column
Vue.component('column', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `
`
})
// Data = width in px, by default fills the full area
Vue.component('h-line', {
props: ['layer', 'data'],
template:`
`
})
// Data = height in px, by default is bad
Vue.component('v-line', {
props: ['layer', 'data'],
template: `
`
})
Vue.component('challenges', {
props: ['layer'],
template: `
`
})
// data = id
Vue.component('challenge', {
props: ['layer', 'data'],
template: `
`
})
// data = id
Vue.component('milestone', {
props: ['layer', 'data'],
template: `
`
})
Vue.component('toggle', {
props: ['layer', 'data'],
template: `
`
})
// data = function to return the text describing the reset before the amount gained (optional)
Vue.component('prestige-button', {
props: ['layer', 'data'],
template: `
`
})
// Displays the main resource for the layer
Vue.component('main-display', {
props: ['layer'],
template: `
You have
{{formatWhole(player[layer].points)}}
{{tmp[layer].resource}},
`
})
// Displays the base resource for the layer, as well as the best and total values for the layer's currency, if tracked
Vue.component('resource-display', {
props: ['layer'],
template: `
You have {{formatWhole(tmp[layer].baseAmount)}} {{tmp[layer].baseResource}} You are gaining {{formatWhole(tmp[layer].resetGain.times(tmp[layer].passiveGeneration))}} {{tmp[layer].resource}} per second
Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}} You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}
`
})
// data = button size, in px
Vue.component('buyables', {
props: ['layer', 'data'],
template: `
`
})
// data = id of buyable
Vue.component('buyable', {
props: ['layer', 'data', 'size'],
template: `
`
})
// data = id
Vue.component('achievement', {
props: ['layer', 'data'],
template: `
`
})
// Data is an array with the structure of the tree
Vue.component('tree', {
props: ['layer', 'data'],
computed: {
key() {return this.$vnode.key}
},
template: `
`
})
// These are for buyables, data is the id of the corresponding buyable
Vue.component('sell-one', {
props: ['layer', 'data'],
template: `
`
})
Vue.component('sell-all', {
props: ['layer', 'data'],
template: `
`
})
// SYSTEM COMPONENTS
Vue.component('tab-buttons', systemComponents['tab-buttons'])
Vue.component('tree-node', systemComponents['tree-node'])
Vue.component('layer-tab', systemComponents['layer-tab'])
Vue.component('overlay-head', systemComponents['overlay-head'])
Vue.component('info-tab', systemComponents['info-tab'])
Vue.component('options-tab', systemComponents['options-tab'])
app = new Vue({
el: "#app",
data: {
player,
tmp,
Decimal,
format,
formatWhole,
formatTime,
focused,
getThemeName,
layerunlocked,
doReset,
buyUpg,
startChallenge,
milestoneShown,
keepGoing,
hasUpgrade,
hasMilestone,
hasAchievement,
hasChallenge,
maxedChallenge,
inChallenge,
canAffordUpgrade,
canCompleteChallenge,
subtabShouldNotify,
subtabResetNotify,
VERSION,
LAYERS,
hotkeys,
activePopups,
},
})
}