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,
},
});
}