2020-08-19 02:50:24 +00:00
var app ;
function loadVue ( ) {
2020-10-07 20:41:45 +00:00
// data = a function returning the content (actually HTML)
2020-10-05 01:09:34 +00:00
Vue . component ( 'display-text' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-07 20:41:45 +00:00
< span v - html = "readData(data)" > < / s p a n >
2020-10-05 01:09:34 +00:00
`
} )
2020-10-03 23:50:03 +00:00
2020-10-05 01:09:34 +00:00
// data = a function returning html content, with some limited functionality
Vue . component ( 'raw-html' , {
props : [ 'layer' , 'data' ] ,
template : `
< span v - html = "readData(data)" > < / s p a n >
`
} )
2020-10-04 21:14:13 +00:00
2020-10-05 01:09:34 +00:00
// Blank space, data = optional height in px or pair with width and height in px
Vue . component ( 'blank' , {
props : [ 'layer' , 'data' ] ,
template : `
< div >
< div v - if = "!data" v - bind : style = "{'width': '8px', 'height': '17px'}" > < / d i v >
< div v - else - if = "Array.isArray(data)" v - bind : style = "{'width': data[0], 'height': data[1]}" > < / d i v >
< div v - else v - bind : style = "{'width': '8px', 'height': 'data'}" > < br > < / d i v >
< / d i v >
`
} )
// Displays an image, data is the URL
Vue . component ( 'display-image' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-07 20:41:45 +00:00
< img v - bind : src = "readData(data)" v - bind : alt = "readData(data)" >
2020-10-05 01:09:34 +00:00
`
} )
2020-10-04 21:14:13 +00:00
2020-10-03 23:50:03 +00:00
// data = an array of Components to be displayed in a row
Vue . component ( 'row' , {
props : [ 'layer' , 'data' ] ,
template : `
< div class = "upgTable" >
< div class = "upgRow" >
< div v - for = "item in data" >
2020-10-07 20:41:45 +00:00
< div v - if = "!Array.isArray(item)" v - bind : is = "item" : layer = "layer" v - bind : style = "tmp.componentStyles[layer][item]" > < / d i v >
< div v - else - if = "item.length==3" v - bind : style = "[tmp.componentStyles[layer][item], (item[2] ? item[2] : {})]" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" > < / d i v >
< div v - else - if = "item.length==2" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" v - bind : style = "tmp.componentStyles[layer][item]" > < / d i v >
2020-10-03 23:50:03 +00:00
< / d i v >
< / d i v >
< / d i v >
`
} )
2020-10-05 01:09:34 +00:00
// data = an array of Components to be displayed in a column
Vue . component ( 'column' , {
props : [ 'layer' , 'data' ] ,
template : `
< div class = "upgTable" >
< div class = "upgCol" >
< div v - for = "item in data" >
2020-10-07 20:41:45 +00:00
< div v - if = "!Array.isArray(item)" v - bind : is = "item" : layer = "layer" v - bind : style = "tmp.componentStyles[layer][item]" > < / d i v >
< div v - else - if = "item.length==3" v - bind : style = "[tmp.componentStyles[layer][item], (item[2] ? item[2] : {})]" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" > < / d i v >
< div v - else - if = "item.length==2" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" v - bind : style = "tmp.componentStyles[layer][item]" > < / d i v >
2020-10-03 23:50:03 +00:00
< / d i v >
< / d i v >
2020-10-05 01:09:34 +00:00
< / d i v >
`
} )
// Data = width in px, by default fills the full area
Vue . component ( 'h-line' , {
props : [ 'layer' , 'data' ] ,
template : `
< hr v - bind : style = "data ? {'width': data} : {}" class = "hl" >
2020-10-03 23:50:03 +00:00
`
} )
2020-10-05 01:09:34 +00:00
// Data = height in px, by default is bad
Vue . component ( 'v-line' , {
props : [ 'layer' , 'data' ] ,
template : `
< div v - bind : style = "data ? {'height': data} : {}" class = "vl2" > < / d i v >
`
} )
2020-09-28 01:00:10 +00:00
Vue . component ( 'challs' , {
props : [ 'layer' ] ,
template : `
< div v - if = "layers[layer].challs" class = "upgTable" >
< div v - for = "row in layers[layer].challs.rows" class = "upgRow" >
< div v - for = "col in layers[layer].challs.cols" >
2020-10-07 20:41:45 +00:00
< chall : layer = "layer" : data = "row*10+col" v - bind : style = "tmp.componentStyles[layer].chall" > < / c h a l l >
2020-09-28 01:00:10 +00:00
< / d i v >
< / d i v >
< / d i v >
`
} )
2020-10-05 21:11:15 +00:00
// data = id
Vue . component ( 'chall' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-07 20:41:45 +00:00
< div v - if = "layers[layer].challs && tmp.challs[layer][data].unl && !(player.hideChalls && hasChall(layer, [data]))" v - bind : class = "{hChall: true, done: player[layer].challs.includes(data), canComplete: tmp.challActive[layer][data]&&!player[layer].challs.includes(data)&&canCompleteChall(layer, data)}" >
< br > < h3 v - html = "tmp.challs[layer][data].name" > < / h 3 > < b r > < b r >
< button v - bind : class = "{ longUpg: true, can: true, [layer]: true }" v - bind : style = "{'background-color': tmp.layerColor[layer]}" v - on : click = "startChall(layer, data)" > { { player [ layer ] . active == ( data ) ? ( canCompleteChall ( layer , data ) ? "Finish" : "Exit Early" ) : ( player [ layer ] . challs . includes ( data ) ? "Completed" : "Start" ) } } < / b u t t o n > < b r > < b r >
< span v - html = "tmp.challs[layer][data].desc" > < / s p a n > < b r >
Goal : { { format ( tmp . challs [ layer ] [ data ] . goal ) } } { { layers [ layer ] . challs [ data ] . currencyDisplayName ? layers [ layer ] . challs [ data ] . currencyDisplayName : "points" } } < br >
Reward : < span v - html = "tmp.challs[layer][data].reward" > < / s p a n > < b r >
< span v - if = "tmp.challs[layer][data].effect!==undefined" > Currently : < span v - html = "(tmp.challs[layer][data].effectDisplay) ? (tmp.challs[layer][data].effectDisplay) : format(tmp.challs[layer][data].effect)" > < / s p a n > < / s p a n >
2020-10-05 21:11:15 +00:00
< / d i v >
`
} )
2020-09-28 01:00:10 +00:00
Vue . component ( 'upgrades' , {
props : [ 'layer' ] ,
template : `
< div v - if = "layers[layer].upgrades" class = "upgTable" >
< div v - for = "row in layers[layer].upgrades.rows" class = "upgRow" >
< div v - for = "col in layers[layer].upgrades.cols" class = "upgAlign" >
2020-10-07 20:41:45 +00:00
< upgrade : layer = "layer" : data = "row*10+col" v - bind : style = "tmp.componentStyles[layer].upgrade" > < / u p g r a d e >
2020-09-28 01:00:10 +00:00
< / d i v >
< / d i v >
2020-10-01 00:25:14 +00:00
< br >
2020-09-28 01:00:10 +00:00
< / d i v >
`
} )
2020-10-05 21:11:15 +00:00
// data = id
Vue . component ( 'upgrade' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-07 20:41:45 +00:00
< button v - if = "layers[layer].upgrades && tmp.upgrades[layer][data].unl" v - on : click = "buyUpg(layer, data)" v - bind : class = "{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(data), locked: (!(canAffordUpg(layer, data))&&!player[layer].upgrades.includes(data)), can: (canAffordUpg(layer, data)&&!player[layer].upgrades.includes(data))}"
v - bind : style = "[((!hasUpg(layer, data) && canAffordUpg(layer, data)) ? {'background-color': tmp.layerColor[layer]} : {}), tmp.upgrades[layer][data].style]" >
< span v - if = "tmp.upgrades[layer][data].title" > < h3 v - html = "tmp.upgrades[layer][data].title" > < / h 3 > < b r > < / s p a n >
< span v - html = "tmp.upgrades[layer][data].desc" > < / s p a n >
< span v - if = "tmp.upgrades[layer][data].effect" > < br > Currently : < span v - html = "(tmp.upgrades[layer][data].effectDisplay) ? (tmp.upgrades[layer][data].effectDisplay) : format(tmp.upgrades[layer][data].effect)" > < / s p a n > < / s p a n >
< br > < br > Cost : { { formatWhole ( tmp . upgrades [ layer ] [ data ] . cost ) } } { { ( layers [ layer ] . upgrades [ data ] . currencyDisplayName ? layers [ layer ] . upgrades [ data ] . currencyDisplayName : layers [ layer ] . resource ) } }
< / b u t t o n >
2020-10-05 21:11:15 +00:00
`
} )
2020-09-28 01:00:10 +00:00
Vue . component ( 'milestones' , {
props : [ 'layer' ] ,
template : `
< div v - if = "layers[layer].milestones" >
< table >
< tr v - for = "id in Object.keys(layers[layer].milestones)" >
2020-10-07 20:41:45 +00:00
< milestone : layer = "layer" : data = "id" v - bind : style = "tmp.componentStyles[layer].milestone" > < / m i l e s t o n e >
2020-09-28 01:00:10 +00:00
< / t r >
< / t a b l e >
2020-10-01 00:25:14 +00:00
< br >
2020-09-28 01:00:10 +00:00
< / d i v >
`
} )
2020-10-05 21:11:15 +00:00
// data = id
Vue . component ( 'milestone' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-07 20:41:45 +00:00
< td v - if = "layers[layer].milestones && milestoneShown(layer, data)" v - bind : style = "[(layers[layer].milestones[data].unl && !tmp.milestones[layer][data].unl) ? {'visibility': 'hidden'} : {}, tmp.milestones[layer][data].style]" v - bind : class = "{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}" >
< h3 v - html = "tmp.milestones[layer][data].requirementDesc" > < / h 3 > < b r >
< span v - html = "tmp.milestones[layer][data].effectDesc" > < / s p a n > < b r >
< span v - if = "(layers[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v - for = "toggle in layers[layer].milestones[data].toggles" > < toggle : layer = "layer" : data = "toggle" v - bind : style = "tmp.componentStyles[layer].toggle" > < / t o g g l e > & n b s p ; < / s p a n > < / t d > < / t r >
2020-10-05 21:11:15 +00:00
`
} )
2020-09-28 01:00:10 +00:00
Vue . component ( 'toggle' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-03 20:47:56 +00:00
< button class = "smallUpg can" v - bind : style = "{'background-color': tmp.layerColor[data[0]]}" v - on : click = "toggleAuto(data)" > { { player [ data [ 0 ] ] [ data [ 1 ] ] ? "ON" : "OFF" } } < / b u t t o n >
2020-09-28 01:00:10 +00:00
`
} )
2020-09-29 22:31:38 +00:00
// data = function to return the text describing the reset before the amount gained (optional)
2020-09-28 01:00:10 +00:00
Vue . component ( 'prestige-button' , {
2020-09-29 22:31:38 +00:00
props : [ 'layer' , 'data' ] ,
2020-09-28 01:00:10 +00:00
template : `
2020-09-29 22:31:38 +00:00
< span >
2020-10-07 20:41:45 +00:00
< button v - if = "layers[layer].type=='normal'" v - bind : class = "{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }"
v - bind : style = "[tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v - on : click = "doReset(layer)" > < span v - if = "player[layer].points.lt(1e3)" > { { data ? data ( ) : "Reset for " } } < / s p a n > + < b > { { f o r m a t W h o l e ( t m p . r e s e t G a i n [ l a y e r ] ) } } < / b > { { l a y e r s [ l a y e r ] . r e s o u r c e } } < s p a n v - i f = " t m p . r e s e t G a i n [ l a y e r ] . l t ( 1 0 0 ) & & p l a y e r [ l a y e r ] . p o i n t s . l t ( 1 e 3 ) " > < b r > < b r > N e x t a t { { ( l a y e r s [ l a y e r ] . r e s C e i l ? f o r m a t W h o l e ( t m p . n e x t A t [ l a y e r ] ) : f o r m a t ( t m p . n e x t A t [ l a y e r ] ) ) } } { { l a y e r s [ l a y e r ] . b a s e R e s o u r c e } } < / s p a n > < / b u t t o n >
< button v - if = "layers[layer].type=='static'" v - bind : class = "{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }"
v - bind : style = "[tmp.layerAmt[layer].gte(tmp.nextAt[layer]) ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v - on : click = "doReset(layer)" > < span v - if = "player[layer].points.lt(10)" > { { data ? data ( ) : "Reset for " } } < / s p a n > + < b > { { f o r m a t W h o l e ( t m p . r e s e t G a i n [ l a y e r ] ) } } < / b > { { l a y e r s [ l a y e r ] . r e s o u r c e } } < b r > < b r > < s p a n v - i f = " p l a y e r [ l a y e r ] . p o i n t s . l t ( 1 0 ) " > { { ( t m p . l a y e r A m t [ l a y e r ] . g t e ( t m p . n e x t A t [ l a y e r ] ) & & l a y e r s [ l a y e r ] . c a n B u y M a x & & l a y e r s [ l a y e r ] . c a n B u y M a x ( ) ) ? " N e x t " : " R e q " } } : { { f o r m a t W h o l e ( t m p . l a y e r A m t [ l a y e r ] ) } } / < / s p a n > { { ( l a y e r s [ l a y e r ] . r e s C e i l ? f o r m a t W h o l e ( t m p . n e x t A t D i s p [ l a y e r ] ) : f o r m a t ( t m p . n e x t A t D i s p [ l a y e r ] ) ) } } { { l a y e r s [ l a y e r ] . b a s e R e s o u r c e } } < / b u t t o n >
< button v - if = "layers[layer].type=='custom'" v - bind : class = "{ [layer]: true, reset: true, locked: !tmp.canReset[layer], can: tmp.canReset[layer] }"
v - bind : style = "[tmp.canReset[layer] ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v - on : click = "doReset(layer)" v - html = "tmp.prestigeButtonText[layer]" > < / b u t t o n >
< / s p a n >
2020-09-28 01:00:10 +00:00
`
2020-10-07 00:09:54 +00:00
2020-09-28 01:00:10 +00:00
} )
2020-09-29 22:31:38 +00:00
// Displays the main resource for the layer
Vue . component ( 'main-display' , {
props : [ 'layer' ] ,
2020-09-28 01:00:10 +00:00
template : `
2020-10-03 19:45:47 +00:00
< div > < span v - if = "player[layer].points.lt('1e1000')" > You have < / s p a n > < h 2 v - b i n d : s t y l e = " { ' c o l o r ' : t m p . l a y e r C o l o r [ l a y e r ] , ' t e x t - s h a d o w ' : ' 0 p x 0 p x 1 0 p x ' + t m p . l a y e r C o l o r [ l a y e r ] } " > { { f o r m a t W h o l e ( p l a y e r [ l a y e r ] . p o i n t s ) } } < / h 2 > { { l a y e r s [ l a y e r ] . r e s o u r c e } } < s p a n v - i f = " l a y e r s [ l a y e r ] . e f f e c t D e s c r i p t i o n " > , { { t m p . e f f e c t D e s c r i p t i o n [ l a y e r ] } } < / s p a n > < b r > < b r > < / s p a n >
2020-09-28 01:00:10 +00:00
`
} )
2020-10-01 00:25:14 +00:00
// data = button size, in px
Vue . component ( 'buyables' , {
props : [ 'layer' , 'data' ] ,
template : `
< div v - if = "layers[layer].buyables" class = "upgTable" >
2020-10-03 19:45:47 +00:00
< button v - if = "layers[layer].buyables.respec" v - on : click = "respecBuyables(layer)" v - bind : class = "{ longUpg: true, can: player[layer].unl, locked: !player[layer].unl }" > { { layers [ layer ] . buyables . respecText ? tmp . buyables [ layer ] . respecText : "Respec" } } < / b u t t o n > < b r >
2020-10-01 00:25:14 +00:00
< div v - for = "row in layers[layer].buyables.rows" class = "upgRow" >
< div v - for = "col in layers[layer].buyables.cols" class = "upgAlign" v - bind : style = "{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : '200px'),}" >
2020-10-07 20:41:45 +00:00
< buyable : layer = "layer" : data = "row*10+col" : size = "data" v - bind : style = "tmp.componentStyles[layer].buyable" > < / b u y a b l e >
2020-10-01 00:25:14 +00:00
< / d i v >
< br >
< / d i v >
< / d i v >
`
} )
// data = id of buyable
Vue . component ( 'buyable' , {
props : [ 'layer' , 'data' , 'size' ] ,
template : `
2020-10-07 20:41:45 +00:00
< button
v - if = "layers[layer].buyables && tmp.buyables[layer][data].unl"
v - bind : class = "{ buyable: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
v - bind : style = "[tmp.buyables[layer][data].canAfford ? {'background-color': tmp.layerColor[layer]} : {}, {'height': (size ? size : 'inherit'), 'width': (size ? size : '200px')}, tmp.buyables[layer][data].style]"
v - on : click = "buyBuyable(layer, data)" >
< span v - if = "layers[layer].buyables[data].title" > < h2 v - html = "tmp.buyables[layer][data].title" > < / h 2 > < b r > < / s p a n >
< span v - bind : style = "{'white-space': 'pre-line'}" v - html = "tmp.buyables[layer][data].display" > < / s p a n >
< / b u t t o n >
2020-10-01 00:25:14 +00:00
`
} )
2020-10-07 03:11:36 +00:00
// data = button size, in px
Vue . component ( 'microtabs' , {
props : [ 'layer' , 'data' ] ,
computed : {
2020-10-07 04:57:41 +00:00
currentTab ( ) { return player . subtabs [ layer ] [ data ] }
2020-10-07 03:11:36 +00:00
} ,
template : `
2020-10-07 04:57:41 +00:00
< div v - if = "layers[layer].microtabs" : style = "{'border-style': 'solid'}" >
2020-10-07 03:11:36 +00:00
< div class = "upgTable" >
2020-10-07 20:41:45 +00:00
< tab - buttons : layer = "layer" : data = "layers[layer].microtabs[data]" : name = "data" v - bind : style = "tmp.componentStyles[layer]['tab-buttons']" > < / t a b - b u t t o n s >
2020-10-07 03:11:36 +00:00
< / d i v >
2020-10-07 20:41:45 +00:00
< column v - bind : style = "tmp.microtabs[layer][data][player.subtabs[layer][data]].style" : layer = "layer" : data = "layers[layer].microtabs[data][player.subtabs[layer][data]].content" > < / c o l u m n >
2020-10-07 03:11:36 +00:00
< / d i v >
`
} )
// NOT FOR USE IN STANDARD TAB FORMATTING
Vue . component ( 'tab-buttons' , {
props : [ 'layer' , 'data' , 'name' ] ,
template : `
< div class = "upgRow" >
< div v - for = "tab in Object.keys(data)" >
2020-10-07 20:41:45 +00:00
< button v - if = "!data[tab].unl || data[tab].unl()" class = "tabButton" v - bind : style = "[{'border-color': tmp.layerColor[layer]}, tmp.componentStyles[layer]['tab-button'], tmp.microtabs[layer][name][tab].buttonStyle]" v - on : click = "player.subtabs[layer][name] = tab" > { { tab } } < / b u t t o n >
2020-10-07 03:11:36 +00:00
< / d i v >
< / d i v >
`
} )
2020-10-07 20:41:45 +00:00
Vue . component ( 'layer-node' , {
props : [ 'layer' , 'abb' ] ,
template : `
< button v - if = "nodeShown(layer)"
v - bind : id = "layer"
v - on : click = " function ( ) {
showTab ( layer )
} "
v - bind : tooltip = "
player [ layer ] . unl ? ( layers [ layer ] . tooltip ? tmp . tooltips [ layer ] : formatWhole ( player [ layer ] . points ) + ' ' + layers [ layer ] . resource )
: ( layers [ layer ] . tooltipLocked ? tmp . tooltipsLocked [ layer ] : 'Reach ' + formatWhole ( tmp . layerReqs [ layer ] ) + ' ' + layers [ layer ] . baseResource + ' to unlock (You have ' + formatWhole ( tmp . layerAmt [ layer ] ) + ' ' + layers [ layer ] . baseResource + ')' )
"
v - bind : class = " {
treeNode : true ,
[ layer ] : true ,
hidden : ! tmp . layerShown [ layer ] ,
locked : ! player [ layer ] . unl && ! tmp . layerAmt [ layer ] . gte ( tmp . layerReqs [ layer ] ) ,
notify : tmp . notify [ layer ] ,
can : layerUnl ( layer ) ,
} "
v - bind : style = " [ layerUnl ( layer ) ? {
'background-color' : tmp . layerColor [ layer ] ,
} : { } , tmp . nodeStyle [ layer ] ] " >
{ { abb } }
< / b u t t o n >
`
} )
2020-10-07 03:11:36 +00:00
2020-08-19 02:50:24 +00:00
app = new Vue ( {
2020-09-11 02:15:05 +00:00
el : "#app" ,
data : {
player ,
tmp ,
Decimal ,
format ,
formatWhole ,
formatTime ,
focused ,
2020-09-14 19:26:10 +00:00
getThemeName ,
2020-09-11 02:15:05 +00:00
layerUnl ,
doReset ,
buyUpg ,
2020-09-14 02:41:42 +00:00
startChall ,
2020-09-11 02:15:05 +00:00
milestoneShown ,
keepGoing ,
2020-09-14 19:26:10 +00:00
VERSION ,
ENDGAME ,
2020-10-01 01:30:50 +00:00
LAYERS ,
hotkeys
2020-09-11 02:15:05 +00:00
} ,
2020-08-19 02:50:24 +00:00
} )
}
