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-12 22:28:12 +00:00
< span class = "instant" v - html = "data" > < / s p a n >
2020-10-05 01:09:34 +00:00
`
} )
2020-10-03 23:50:03 +00:00
2020-10-12 22:28:12 +00:00
// data = a function returning the content (actually HTML)
Vue . component ( 'raw-html' , {
props : [ 'layer' , 'data' ] ,
template : `
< span class = "instant" v - html = "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 : `
2020-10-12 22:28:12 +00:00
< div class = "instant" >
< div class = "instant" v - if = "!data" v - bind : style = "{'width': '8px', 'height': '17px'}" > < / d i v >
< div class = "instant" v - else - if = "Array.isArray(data)" v - bind : style = "{'width': data[0], 'height': data[1]}" > < / d i v >
2020-10-23 19:07:27 +00:00
< div class = "instant" v - else v - bind : style = "{'width': '8px', 'height': data}" > < br > < / d i v >
2020-10-05 01:09:34 +00:00
< / d i v >
`
} )
// Displays an image, data is the URL
Vue . component ( 'display-image' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-12 22:28:12 +00:00
< img class = "instant" v - bind : src = "data" v - bind : alt = "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' ] ,
2020-12-10 06:08:23 +00:00
computed : {
key ( ) { return this . $vnode . key }
} ,
2020-10-03 23:50:03 +00:00
template : `
2020-12-10 06:08:23 +00:00
< div class = "upgTable instant" >
2020-10-03 23:50:03 +00:00
< div class = "upgRow" >
2020-12-10 06:08:23 +00:00
< div v - for = "(item, index) in data" >
< div v - if = "!Array.isArray(item)" v - bind : is = "item" : layer = "layer" v - bind : style = "tmp[layer].componentStyles[item]" : key = "key + '-' + index" > < / d i v >
< div v - else - if = "item.length==3" v - bind : style = "[tmp[layer].componentStyles[item[0]], (item[2] ? item[2] : {})]" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" : key = "key + '-' + index" > < / d i v >
< div v - else - if = "item.length==2" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" v - bind : style = "tmp[layer].componentStyles[item[0]]" : key = "key + '-' + index" > < / 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' ] ,
2020-12-10 06:08:23 +00:00
computed : {
key ( ) { return this . $vnode . key }
} ,
2020-10-05 01:09:34 +00:00
template : `
2020-10-26 02:11:57 +00:00
< div class = "upgTable instant" >
2020-10-05 01:09:34 +00:00
< div class = "upgCol" >
2020-12-10 06:08:23 +00:00
< div v - for = "(item, index) in data" >
< div v - if = "!Array.isArray(item)" v - bind : is = "item" : layer = "layer" v - bind : style = "tmp[layer].componentStyles[item]" : key = "key + '-' + index" > < / d i v >
< div v - else - if = "item.length==3" v - bind : style = "[tmp[layer].componentStyles[item[0]], (item[2] ? item[2] : {})]" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" : key = "key + '-' + index" > < / d i v >
< div v - else - if = "item.length==2" v - bind : is = "item[0]" : layer = "layer" : data = "item[1]" v - bind : style = "tmp[layer].componentStyles[item[0]]" : key = "key + '-' + index" > < / 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 >
`
} )
2021-05-12 03:34:55 +00:00
// data [other layer, tabformat for within proxy]
Vue . component ( 'layer-proxy' , {
props : [ 'layer' , 'data' ] ,
computed : {
key ( ) { return this . $vnode . key }
} ,
template : `
< div >
< column : layer = "data[0]" : data = "data[1]" : key = "key + 'col'" > < / c o l u m n >
< / d i v >
`
} )
2020-10-25 22:21:02 +00:00
Vue . component ( 'infobox' , {
2020-10-24 16:40:56 +00:00
props : [ 'layer' , 'data' ] ,
template : `
2020-10-26 06:06:02 +00:00
< div class = "story instant" v - if = "tmp[layer].infoboxes && tmp[layer].infoboxes[data]!== undefined && tmp[layer].infoboxes[data].unlocked" v - bind : style = "[{'border-color': tmp[layer].color, 'border-radius': player.infoboxes[layer][data] ? 0 : '8px'}, tmp[layer].infoboxes[data].style]" >
2020-10-26 02:11:57 +00:00
< button class = "story-title" v - bind : style = "[{'background-color': tmp[layer].color}, tmp[layer].infoboxes[data].titleStyle]"
2020-10-25 22:21:02 +00:00
v - on : click = "player.infoboxes[layer][data] = !player.infoboxes[layer][data]" >
< span class = "story-toggle" > { { player . infoboxes [ layer ] [ data ] ? "+" : "-" } } < / s p a n >
< span v - html = "tmp[layer].infoboxes[data].title ? tmp[layer].infoboxes[data].title : (tmp[layer].name)" > < / s p a n >
2020-10-25 00:06:28 +00:00
< / b u t t o n >
2020-10-26 02:11:57 +00:00
< div v - if = "!player.infoboxes[layer][data]" class = "story-text" v - bind : style = "tmp[layer].infoboxes[data].bodyStyle" >
< span v - html = "tmp[layer].infoboxes[data].body ? tmp[layer].infoboxes[data].body : 'Blah'" > < / s p a n >
2020-10-25 00:06:28 +00:00
< / d i v >
2020-10-24 16:40:56 +00:00
< / d i v >
`
} )
2020-10-05 01:09:34 +00:00
// Data = width in px, by default fills the full area
Vue . component ( 'h-line' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-12 22:28:12 +00:00
< hr class = "instant" 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 : `
2020-10-12 22:28:12 +00:00
< div class = "instant" v - bind : style = "data ? {'height': data} : {}" class = "vl2" > < / d i v >
2020-10-05 01:09:34 +00:00
`
} )
2020-10-13 03:08:19 +00:00
Vue . component ( 'challenges' , {
2020-09-28 01:00:10 +00:00
props : [ 'layer' ] ,
template : `
2020-10-25 01:03:18 +00:00
< div v - if = "tmp[layer].challenges" class = "upgTable" >
2020-10-13 03:08:19 +00:00
< div v - for = "row in tmp[layer].challenges.rows" class = "upgRow" >
< div v - for = "col in tmp[layer].challenges.cols" >
2020-10-25 01:03:18 +00:00
< challenge v - if = "tmp[layer].challenges[row*10+col]!== undefined && tmp[layer].challenges[row*10+col].unlocked" : layer = "layer" : data = "row*10+col" v - bind : style = "tmp[layer].componentStyles.challenge" > < / c h a l l e n g e >
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
2020-10-13 03:08:19 +00:00
Vue . component ( 'challenge' , {
2020-10-05 21:11:15 +00:00
props : [ 'layer' , 'data' ] ,
template : `
2021-05-24 21:13:03 +00:00
< div v - if = "tmp[layer].challenges && tmp[layer].challenges[data]!== undefined && tmp[layer].challenges[data].unlocked && !(player.hideChallenges && maxedChallenge(layer, [data]) && !inChallenge(layer, [data]))"
v - bind : class = "['hChallenge', challengeStyle(layer, data), inChallenge(layer, data) ? 'resetNotify' : '']" v - bind : style = "tmp[layer].challenges[data].style" >
2020-10-13 03:08:19 +00:00
< br > < h3 v - html = "tmp[layer].challenges[data].name" > < / h 3 > < b r > < b r >
2021-05-03 02:39:38 +00:00
< button v - bind : class = "{ longUpg: true, can: true, [layer]: true }" v - bind : style = "{'background-color': tmp[layer].color}" v - on : click = "startChallenge(layer, data)" > { { challengeButtonText ( layer , data ) } } < / b u t t o n > < b r > < b r >
< span v - if = "layers[layer].challenges[data].fullDisplay" v - html = "run(layers[layer].challenges[data].fullDisplay, layers[layer].challenges[data])" > < / s p a n >
2020-11-29 05:40:01 +00:00
< span v - else >
< span v - html = "tmp[layer].challenges[data].challengeDescription" > < / s p a n > < b r >
2021-06-02 20:59:37 +00:00
Goal : < span v - if = "tmp[layer].challenges[data].goalDescription" v - html = "tmp[layer].challenges[data].goalDescription" > < / s p a n > < s p a n v - e l s e > { { f o r m a t ( t m p [ l a y e r ] . c h a l l e n g e s [ d a t a ] . g o a l ) } } { { t m p [ l a y e r ] . c h a l l e n g e s [ d a t a ] . c u r r e n c y D i s p l a y N a m e ? t m p [ l a y e r ] . c h a l l e n g e s [ d a t a ] . c u r r e n c y D i s p l a y N a m e : m o d I n f o . p o i n t s N a m e } } < / s p a n > < b r >
2020-11-29 05:40:01 +00:00
Reward : < span v - html = "tmp[layer].challenges[data].rewardDescription" > < / s p a n > < b r >
2021-05-03 02:39:38 +00:00
< span v - if = "layers[layer].challenges[data].rewardDisplay!==undefined" > Currently : < span v - html = "(tmp[layer].challenges[data].rewardDisplay) ? (run(layers[layer].challenges[data].rewardDisplay, layers[layer].challenges[data])) : format(tmp[layer].challenges[data].rewardEffect)" > < / s p a n > < / s p a n >
2020-11-29 05:40:01 +00:00
< / s p a n >
2021-05-14 19:32:20 +00:00
< node - mark : layer = 'layer' : data = 'tmp[layer].challenges[data].marked' : offset = "10" > < / n o d e - m a r k > < / 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' , {
2020-12-05 19:52:29 +00:00
props : [ 'layer' , 'data' ] ,
2020-09-28 01:00:10 +00:00
template : `
2020-10-25 01:03:18 +00:00
< div v - if = "tmp[layer].upgrades" class = "upgTable" >
2020-12-05 19:52:29 +00:00
< div v - for = "row in (data === undefined ? tmp[layer].upgrades.rows : data)" class = "upgRow" >
2020-10-25 01:03:18 +00:00
< div v - for = "col in tmp[layer].upgrades.cols" > < div v - if = "tmp[layer].upgrades[row*10+col]!== undefined && tmp[layer].upgrades[row*10+col].unlocked" class = "upgAlign" >
2020-10-10 03:16:29 +00:00
< upgrade : layer = "layer" : data = "row*10+col" v - bind : style = "tmp[layer].componentStyles.upgrade" > < / u p g r a d e >
2020-10-11 01:52:27 +00:00
< / d i v > < / d i v >
2020-09-28 01:00:10 +00:00
< / 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-25 01:03:18 +00:00
< 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))}"
2020-10-13 03:08:19 +00:00
v - bind : style = "[((!hasUpgrade(layer, data) && canAffordUpgrade(layer, data)) ? {'background-color': tmp[layer].color} : {}), tmp[layer].upgrades[data].style]" >
2021-05-03 02:39:38 +00:00
< span v - if = "layers[layer].upgrades[data].fullDisplay" v - html = "run(layers[layer].upgrades[data].fullDisplay, layers[layer].upgrades[data])" > < / s p a n >
2020-11-29 21:28:24 +00:00
< span v - else >
< span v - if = "tmp[layer].upgrades[data].title" > < h3 v - html = "tmp[layer].upgrades[data].title" > < / h 3 > < b r > < / s p a n >
< span v - html = "tmp[layer].upgrades[data].description" > < / s p a n >
2021-05-03 02:39:38 +00:00
< span v - if = "layers[layer].upgrades[data].effectDisplay" > < br > Currently : < span v - html = "run(layers[layer].upgrades[data].effectDisplay, layers[layer].upgrades[data])" > < / s p a n > < / s p a n >
2020-11-29 21:28:24 +00:00
< br > < br > Cost : { { formatWhole ( tmp [ layer ] . upgrades [ data ] . cost ) } } { { ( tmp [ layer ] . upgrades [ data ] . currencyDisplayName ? tmp [ layer ] . upgrades [ data ] . currencyDisplayName : tmp [ layer ] . resource ) } }
< / s p a n >
< / 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 : `
2020-10-25 01:03:18 +00:00
< div v - if = "tmp[layer].milestones" >
2020-09-28 01:00:10 +00:00
< table >
2021-05-03 18:50:13 +00:00
< tr v - for = "id in Object.keys(tmp[layer].milestones)" v - if = "tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked && milestoneShown(layer, id)" >
2020-10-10 03:16:29 +00:00
< milestone : layer = "layer" : data = "id" v - bind : style = "tmp[layer].componentStyles.milestone" > < / m i l e s t o n e >
2021-05-03 18:50:13 +00:00
< / t r >
2020-09-28 01:00:10 +00:00
< / 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 : `
2021-05-03 18:50:13 +00:00
< td v - if = "tmp[layer].milestones && tmp[layer].milestones[data]!== undefined && milestoneShown(layer, data) && tmp[layer].milestones[data].unlocked" v - bind : style = "[tmp[layer].milestones[data].style]" v - bind : class = "{milestone: !hasMilestone(layer, data), milestoneDone: hasMilestone(layer, data)}" >
2020-10-13 03:08:19 +00:00
< h3 v - html = "tmp[layer].milestones[data].requirementDescription" > < / h 3 > < b r >
2021-05-03 02:39:38 +00:00
< span v - html = "run(layers[layer].milestones[data].effectDescription, layers[layer].milestones[data])" > < / s p a n > < b r >
2020-10-21 20:14:42 +00:00
< span v - if = "(tmp[layer].milestones[data].toggles)&&(hasMilestone(layer, data))" v - for = "toggle in tmp[layer].milestones[data].toggles" > < toggle : layer = "layer" : data = "toggle" v - bind : style = "tmp[layer].componentStyles.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-10 03:16:29 +00:00
< button class = "smallUpg can" v - bind : style = "{'background-color': tmp[data[0]].color}" 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-10-15 03:09:30 +00:00
< button v - if = "(tmp[layer].type !== 'none')" v - bind : class = "{ [layer]: true, reset: true, locked: !tmp[layer].canReset, can: tmp[layer].canReset}"
2020-10-10 03:16:29 +00:00
v - bind : style = "[tmp[layer].canReset ? {'background-color': tmp[layer].color} : {}, tmp[layer].componentStyles['prestige-button']]"
2021-05-03 01:29:10 +00:00
v - html = "prestigeButtonText(layer)" v - on : click = "doReset(layer)" >
2020-10-10 03:16:29 +00:00
< / b u t t o 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' , {
2021-05-12 02:29:05 +00:00
props : [ 'layer' , 'data' ] ,
2020-09-28 01:00:10 +00:00
template : `
2021-05-12 02:29:05 +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 , ' 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 } " > { { d a t a ? f o r m a t ( p l a y e r [ l a y e r ] . p o i n t s , d a t a ) : 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 > { { t m p [ 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 " > , < s p a n v - h t m l = " r u n ( 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 , l a y e r s [ l a y e r ] ) " > < / s p a n > < / s p a n > < b r > < b r > < / d i v >
2020-09-28 01:00:10 +00:00
`
} )
2020-10-18 00:23:39 +00:00
// 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 : `
< div style = "margin-top: -13px" >
2021-04-07 18:07:22 +00:00
< span v - if = "tmp[layer].baseAmount" > < br > You have { { formatWhole ( tmp [ layer ] . baseAmount ) } } { { tmp [ layer ] . baseResource } } < / s p a n >
2021-06-02 00:12:14 +00:00
< span v - if = "tmp[layer].passiveGeneration" > < br > You are gaining { { format ( tmp [ layer ] . resetGain . times ( tmp [ layer ] . passiveGeneration ) ) } } { { tmp [ layer ] . resource } } per second < / s p a n >
2020-10-18 00:23:39 +00:00
< br > < br >
2020-11-07 22:26:06 +00:00
< span v - if = "tmp[layer].showBest" > Your best { { tmp [ layer ] . resource } } is { { formatWhole ( player [ layer ] . best ) } } < br > < / s p a n >
< span v - if = "tmp[layer].showTotal" > You have made a total of { { formatWhole ( player [ layer ] . total ) } } { { tmp [ layer ] . resource } } < br > < / s p a n >
2020-10-18 00:23:39 +00:00
< / d i v >
`
} )
2020-10-01 00:25:14 +00:00
// data = button size, in px
Vue . component ( 'buyables' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-25 01:03:18 +00:00
< div v - if = "tmp[layer].buyables" class = "upgTable" >
2021-04-30 03:42:17 +00:00
< respec - button v - if = "tmp[layer].buyables.respec && !(tmp[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" : layer = "layer" v - bind : style = "[{'margin-bottom': '12px'}, tmp[layer].componentStyles['respec-button']]" > < / r e s p e c - b u t t o n >
2020-10-10 03:16:29 +00:00
< div v - for = "row in tmp[layer].buyables.rows" class = "upgRow" >
2020-10-25 01:03:18 +00:00
< div v - for = "col in tmp[layer].buyables.cols" > < div v - if = "tmp[layer].buyables[row*10+col]!== undefined && tmp[layer].buyables[row*10+col].unlocked" class = "upgAlign" v - bind : style = "{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : 'inherit'),}" >
2020-10-17 19:50:30 +00:00
< buyable : layer = "layer" : data = "row*10+col" : size = "data" > < / b u y a b l e >
2020-10-11 01:52:27 +00:00
< / d i v > < / d i v >
2020-10-01 00:25:14 +00:00
< br >
< / d i v >
< / d i v >
2020-10-11 01:52:27 +00:00
`
2020-10-01 00:25:14 +00:00
} )
// data = id of buyable
Vue . component ( 'buyable' , {
props : [ 'layer' , 'data' , 'size' ] ,
template : `
2020-10-25 01:03:18 +00:00
< div v - if = "tmp[layer].buyables && tmp[layer].buyables[data]!== undefined && tmp[layer].buyables[data].unlocked" style = "display: grid" >
2021-05-01 02:40:59 +00:00
< 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]"
2021-05-07 04:16:22 +00:00
v - on : click = "buyBuyable(layer, data)" @ mousedown = "start" @ mouseleave = "stop" @ mouseup = "stop" @ touchstart = "start" @ touchend = "stop" @ touchcancel = "stop" >
2020-10-17 19:50:30 +00:00
< span v - if = "tmp[layer].buyables[data].title" > < h2 v - html = "tmp[layer].buyables[data].title" > < / h 2 > < b r > < / s p a n >
2021-05-03 02:39:38 +00:00
< span v - bind : style = "{'white-space': 'pre-line'}" v - html = "run(layers[layer].buyables[data].display, layers[layer].buyables[data])" > < / s p a n >
2021-05-14 19:32:20 +00:00
< node - mark : layer = 'layer' : data = 'tmp[layer].buyables[data].marked' > < / n o d e - m a r k >
2020-10-17 19:50:30 +00:00
< / b u t t o n >
2020-10-25 01:03:18 +00:00
< br v - if = "(tmp[layer].buyables[data].sellOne !== undefined && !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)) || (tmp[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false))" >
< sell - one : layer = "layer" : data = "data" v - bind : style = "tmp[layer].componentStyles['sell-one']" v - if = "(tmp[layer].buyables[data].sellOne)&& !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)" > < / s e l l - o n e >
< sell - all : layer = "layer" : data = "data" v - bind : style = "tmp[layer].componentStyles['sell-all']" v - if = "(tmp[layer].buyables[data].sellAll)&& !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)" > < / s e l l - a l l >
2020-10-17 19:50:30 +00:00
< / d i v >
2021-05-07 04:16:22 +00:00
` ,
data ( ) { return { interval : false , time : 0 , } } ,
methods : {
start ( ) {
if ( ! this . interval ) {
this . interval = setInterval ( ( function ( ) {
if ( this . time >= 5 )
buyBuyable ( this . layer , this . data )
this . time = this . time + 1
} ) . bind ( this ) , 50 ) }
} ,
stop ( ) {
clearInterval ( this . interval )
this . interval = false
this . time = 0
}
} ,
2020-10-01 00:25:14 +00:00
} )
2020-10-16 15:39:39 +00:00
Vue . component ( 'respec-button' , {
props : [ 'layer' , 'data' ] ,
template : `
2021-06-01 18:56:33 +00:00
< div v - if = "tmp[layer].buyables && tmp[layer].buyables.respec && !(tmp[layer].buyables.showRespec !== undefined && tmp[layer].buyables.showRespec == false)" >
2021-04-30 03:42:17 +00:00
< div class = "tooltipBox" > < input type = "checkbox" v - model = "player[layer].noRespecConfirm" > < tooltip v - bind : text = "'Disable respec confirmation'" > < / t o o l t i p > < / d i v >
2021-06-01 18:56:33 +00:00
< button v - on : click = "respecBuyables(layer)" v - bind : class = "{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }" style = "margin-right: 18px" > { { tmp [ layer ] . buyables . respecText ? tmp [ layer ] . buyables . respecText : "Respec" } } < / b u t t o n >
2021-04-30 03:42:17 +00:00
< / d i v >
2021-04-29 21:49:35 +00:00
`
2020-10-16 15:39:39 +00:00
} )
2021-04-30 03:42:17 +00:00
2020-10-11 20:16:36 +00:00
// data = button size, in px
Vue . component ( 'clickables' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-10-25 01:03:18 +00:00
< div v - if = "tmp[layer].clickables" class = "upgTable" >
< master - button v - if = "tmp[layer].clickables.masterButtonPress && !(tmp[layer].clickables.showMasterButton !== undefined && tmp[layer].clickables.showMasterButton == false)" : layer = "layer" v - bind : style = "[{'margin-bottom': '12px'}, tmp[layer].componentStyles['master-button']]" > < / m a s t e r - b u t t o n >
2020-10-11 20:16:36 +00:00
< div v - for = "row in tmp[layer].clickables.rows" class = "upgRow" >
2020-10-25 01:03:18 +00:00
< div v - for = "col in tmp[layer].clickables.cols" > < div v - if = "tmp[layer].clickables[row*10+col]!== undefined && tmp[layer].clickables[row*10+col].unlocked" class = "upgAlign" v - bind : style = "{'margin-left': '7px', 'margin-right': '7px', 'height': (data ? data : 'inherit'),}" >
2020-10-11 20:16:36 +00:00
< clickable : layer = "layer" : data = "row*10+col" : size = "data" v - bind : style = "tmp[layer].componentStyles.clickable" > < / c l i c k a b l e >
< / d i v > < / d i v >
< br >
< / d i v >
< / d i v >
`
} )
// data = id of clickable
Vue . component ( 'clickable' , {
props : [ 'layer' , 'data' , 'size' ] ,
template : `
< button
2020-10-25 01:03:18 +00:00
v - if = "tmp[layer].clickables && tmp[layer].clickables[data]!== undefined && tmp[layer].clickables[data].unlocked"
2020-10-11 20:16:36 +00:00
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]"
2021-05-07 04:16:22 +00:00
v - on : click = "clickClickable(layer, data)" @ mousedown = "start" @ mouseleave = "stop" @ mouseup = "stop" @ touchstart = "start" @ touchend = "stop" @ touchcancel = "stop" >
2020-10-11 20:16:36 +00:00
< span v - if = "tmp[layer].clickables[data].title" > < h2 v - html = "tmp[layer].clickables[data].title" > < / h 2 > < b r > < / s p a n >
2021-05-03 02:39:38 +00:00
< span v - bind : style = "{'white-space': 'pre-line'}" v - html = "run(layers[layer].clickables[data].display, layers[layer].clickables[data])" > < / s p a n >
2021-05-14 19:32:20 +00:00
< node - mark : layer = 'layer' : data = 'tmp[layer].clickables[data].marked' > < / n o d e - m a r k >
2020-10-11 20:16:36 +00:00
< / b u t t o n >
2021-05-07 04:16:22 +00:00
` ,
data ( ) { return { interval : false , time : 0 , } } ,
methods : {
start ( ) {
if ( ! this . interval && layers [ this . layer ] . clickables [ this . data ] . onHold ) {
this . interval = setInterval ( ( function ( ) {
let c = layers [ this . layer ] . clickables [ this . data ]
if ( this . time >= 5 && run ( c . canClick , c ) ) {
run ( c . onHold , c )
}
this . time = this . time + 1
} ) . bind ( this ) , 50 ) }
} ,
stop ( ) {
clearInterval ( this . interval )
this . interval = false
this . time = 0
}
} ,
2020-10-11 20:16:36 +00:00
} )
2020-10-16 15:39:39 +00:00
Vue . component ( 'master-button' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-12-13 02:43:22 +00:00
< button v - if = "tmp[layer].clickables && tmp[layer].clickables.masterButtonPress && !(tmp[layer].clickables.showMasterButton !== undefined && tmp[layer].clickables.showMasterButton == false)"
v - on : click = "run(tmp[layer].clickables.masterButtonPress, tmp[layer].clickables)" v - bind : class = "{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }" > { { tmp [ layer ] . clickables . masterButtonText ? tmp [ layer ] . clickables . masterButtonText : "Click me!" } } < / b u t t o n >
2020-10-16 15:39:39 +00:00
`
} )
2020-10-11 20:16:36 +00:00
2021-05-11 06:27:50 +00:00
// data = button size, in px
Vue . component ( 'grid' , {
props : [ 'layer' , 'data' ] ,
template : `
< div v - if = "tmp[layer].grid" class = "upgTable" >
< div v - for = "row in tmp[layer].grid.rows" class = "upgRow" >
< div v - for = "col in tmp[layer].grid.cols" > < div v - if = "run(layers[layer].grid.getUnlocked, layers[layer].grid, row*100+col)"
class = "upgAlign" v - bind : style = "{'margin': '1px', 'height': 'inherit',}" >
< gridable : layer = "layer" : data = "row*100+col" v - bind : style = "tmp[layer].componentStyles.gridable" > < / g r i d a b l e >
< / d i v > < / d i v >
< br >
< / d i v >
< / d i v >
`
} )
Vue . component ( 'gridable' , {
props : [ 'layer' , 'data' ] ,
template : `
< button
v - if = "tmp[layer].grid && player[layer].grid[data]!== undefined && run(layers[layer].grid.getUnlocked, layers[layer].grid, data)"
v - bind : class = "{ tile: true, can: canClick, locked: !canClick}"
v - bind : style = "[canClick ? {'background-color': tmp[layer].color} : {}, gridRun(layer, 'getStyle', player[this.layer].grid[this.data], this.data)]"
v - on : click = "clickGrid(layer, data)" @ mousedown = "start" @ mouseleave = "stop" @ mouseup = "stop" @ touchstart = "start" @ touchend = "stop" @ touchcancel = "stop" >
< span v - if = "layers[layer].grid.getTitle" > < h3 v - html = "gridRun(this.layer, 'getTitle', player[this.layer].grid[this.data], this.data)" > < / h 3 > < b r > < / s p a n >
< span v - bind : style = "{'white-space': 'pre-line'}" v - html = "gridRun(this.layer, 'getDisplay', player[this.layer].grid[this.data], this.data)" > < / s p a n >
< / b u t t o n >
` ,
data ( ) { return { interval : false , time : 0 , } } ,
computed : {
canClick ( ) {
return gridRun ( this . layer , 'getCanClick' , player [ this . layer ] . grid [ this . data ] , this . data ) }
} ,
methods : {
start ( ) {
if ( ! this . interval && layers [ this . layer ] . grid . onHold ) {
this . interval = setInterval ( ( function ( ) {
if ( this . time >= 5 && gridRun ( this . layer , 'getCanClick' , player [ this . layer ] . grid [ this . data ] , this . data ) ) {
gridRun ( this . layer , 'onHold' , player [ this . layer ] . grid [ this . data ] , this . data ) }
this . time = this . time + 1
} ) . bind ( this ) , 50 ) }
} ,
stop ( ) {
clearInterval ( this . interval )
this . interval = false
this . time = 0
}
} ,
} )
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-25 01:03:18 +00:00
< div v - if = "tmp[layer].microtabs" : style = "{'border-style': 'solid'}" >
2020-11-29 02:25:53 +00:00
< div class = "upgTable instant" >
2020-10-10 03:16:29 +00:00
< tab - buttons : layer = "layer" : data = "tmp[layer].microtabs[data]" : name = "data" v - bind : style = "tmp[layer].componentStyles['tab-buttons']" > < / t a b - b u t t o n s >
2020-10-07 03:11:36 +00:00
< / d i v >
2020-12-05 19:52:29 +00:00
< layer - tab v - if = "tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" : layer = "tmp[layer].microtabs[data][player.subtabs[layer][data]].embedLayer" : embedded = "true" > < / l a y e r - t a b >
2020-10-27 23:25:03 +00:00
2020-10-28 02:04:16 +00:00
< column v - else v - bind : style = "tmp[layer].microtabs[data][player.subtabs[layer][data]].style" : layer = "layer" : data = "tmp[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 >
`
} )
2020-10-12 22:28:12 +00:00
// data = id of the bar
Vue . component ( 'bar' , {
2020-10-09 03:13:15 +00:00
props : [ 'layer' , 'data' ] ,
2021-05-03 02:39:38 +00:00
computed : {
2021-05-09 17:04:44 +00:00
style ( ) { return constructBarStyle ( this . layer , this . data ) }
2021-05-03 02:39:38 +00:00
} ,
2020-10-09 03:13:15 +00:00
template : `
2021-05-09 17:04:44 +00:00
< div v - if = "tmp[layer].bars && tmp[layer].bars[data].unlocked" v - bind : style = "{'position': 'relative'}" > < div v - bind : style = "[tmp[layer].bars[data].style, style.dims, {'display': 'table'}]" >
< div class = "overlayTextContainer barBorder" v - bind : style = "[tmp[layer].bars[data].borderStyle, style.dims]" >
2021-05-03 02:39:38 +00:00
< span class = "overlayText" v - bind : style = "[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v - html = "run(layers[layer].bars[data].display, layers[layer].bars[data])" > < / s p a n >
2020-10-12 22:28:12 +00:00
< / d i v >
2021-05-09 17:04:44 +00:00
< div class = "barBG barBorder" v - bind : style = "[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, style.dims]" >
< div class = "fill" v - bind : style = "[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, style.fillDims]" > < / d i v >
2020-10-16 22:45:44 +00:00
< / d i v >
2020-10-12 22:28:12 +00:00
< / d i v > < / d i v >
2020-10-09 03:13:15 +00:00
`
} )
2020-10-12 22:28:12 +00:00
2020-10-15 01:43:16 +00:00
Vue . component ( 'achievements' , {
props : [ 'layer' ] ,
template : `
2020-10-25 01:03:18 +00:00
< div v - if = "tmp[layer].achievements" class = "upgTable" >
< div v - for = "row in tmp[layer].achievements.rows" class = "upgRow" >
< div v - for = "col in tmp[layer].achievements.cols" > < div v - if = "tmp[layer].achievements[row*10+col]!== undefined && tmp[layer].achievements[row*10+col].unlocked" class = "upgAlign" >
2020-10-15 01:43:16 +00:00
< achievement : layer = "layer" : data = "row*10+col" v - bind : style = "tmp[layer].componentStyles.achievement" > < / a c h i e v e m e n t >
< / d i v > < / d i v >
< / d i v >
< br >
< / d i v >
`
} )
// data = id
Vue . component ( 'achievement' , {
2021-04-29 21:49:35 +00:00
props : [ 'layer' , 'data' ] ,
2020-10-15 01:43:16 +00:00
template : `
2021-04-27 05:30:10 +00:00
< div v - if = "tmp[layer].achievements && tmp[layer].achievements[data]!== undefined && tmp[layer].achievements[data].unlocked" v - bind : class = "{ [layer]: true, achievement: true, tooltipBox:true, locked: !hasAchievement(layer, data), bought: hasAchievement(layer, data)}"
2021-05-03 02:39:38 +00:00
v - bind : style = "achievementStyle(layer, data)" >
2021-04-27 05:30:10 +00:00
< tooltip : text = "
( tmp [ layer ] . achievements [ data ] . tooltip == '' ) ? false : hasAchievement ( layer , data ) ? ( tmp [ layer ] . achievements [ data ] . doneTooltip ? tmp [ layer ] . achievements [ data ] . doneTooltip : ( tmp [ layer ] . achievements [ data ] . tooltip ? tmp [ layer ] . achievements [ data ] . tooltip : 'You did it!' ) )
: ( tmp [ layer ] . achievements [ data ] . goalTooltip ? tmp [ layer ] . achievements [ data ] . goalTooltip : ( tmp [ layer ] . achievements [ data ] . tooltip ? tmp [ layer ] . achievements [ data ] . tooltip : 'LOCKED' ) )
" > < / t o o l t i p >
2020-12-09 06:36:27 +00:00
< span v - if = "tmp[layer].achievements[data].name" > < br > < h3 v - bind : style = "tmp[layer].achievements[data].textStyle" v - html = "tmp[layer].achievements[data].name" > < / h 3 > < b r > < / s p a n >
2020-10-15 01:43:16 +00:00
< / d i v >
`
} )
2020-10-28 02:04:16 +00:00
// Data is an array with the structure of the tree
Vue . component ( 'tree' , {
props : [ 'layer' , 'data' ] ,
2020-12-10 06:08:23 +00:00
computed : {
key ( ) { return this . $vnode . key }
} ,
2020-10-28 02:04:16 +00:00
template : ` <div>
2020-12-17 02:41:31 +00:00
< span class = "upgRow" v - for = "(row, r) in data" > < table >
2020-12-14 03:23:12 +00:00
< span v - for = "(node, id) in row" style = "{width: 0px}" >
2021-05-26 05:44:12 +00:00
< tree - node : layer = 'node' : prev = 'layer' : abb = 'tmp[node].symbol' : key = "key + '-' + r + '-' + id" > < / t r e e - n o d e >
2020-12-14 03:23:12 +00:00
< / s p a n >
2020-10-28 02:04:16 +00:00
< tr > < table > < button class = "treeNode hidden" > < / b u t t o n > < / t a b l e > < / t r >
< / s p a n > < / d i v >
`
} )
2020-10-07 03:11:36 +00:00
2021-04-27 02:43:36 +00:00
// Updates the value in player[layer][data]
Vue . component ( 'text-input' , {
props : [ 'layer' , 'data' ] ,
template : `
< input class = "instant" : id = "'input-' + layer + '-' + data" : value = "player[layer][data].toString()" v - on : focus = "focused(true)" v - on : blur = "focused(false)"
v - on : change = "player[layer][data] = toValue(document.getElementById('input-' + layer + '-' + data).value, player[layer][data])" >
`
} )
2021-04-27 03:16:34 +00:00
// Updates the value in player[layer][data]
Vue . component ( 'slider' , {
props : [ 'layer' , 'data' ] ,
template : `
2021-04-29 21:49:35 +00:00
< div class = "tooltipBox" >
2021-04-27 05:30:10 +00:00
< tooltip : text = "player[layer][data[0]]" > < / t o o l t i p > < i n p u t t y p e = " r a n g e " v - m o d e l = " p l a y e r [ l a y e r ] [ d a t a [ 0 ] ] " : m i n = " d a t a [ 1 ] " : m a x = " d a t a [ 2 ] " > < / d i v >
2021-04-27 03:16:34 +00:00
`
} )
2021-04-27 02:43:36 +00:00
2020-10-17 19:50:30 +00:00
// These are for buyables, data is the id of the corresponding buyable
Vue . component ( 'sell-one' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-12-13 02:43:22 +00:00
< button v - if = "tmp[layer].buyables && tmp[layer].buyables[data].sellOne && !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)" v - on : click = "run(tmp[layer].buyables[data].sellOne, tmp[layer].buyables[data])"
v - bind : class = "{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }" > { { tmp [ layer ] . buyables . sellOneText ? tmp [ layer ] . buyables . sellOneText : "Sell One" } } < / b u t t o n >
2020-10-17 19:50:30 +00:00
`
} )
Vue . component ( 'sell-all' , {
props : [ 'layer' , 'data' ] ,
template : `
2020-12-13 02:43:22 +00:00
< button v - if = "tmp[layer].buyables && tmp[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)" v - on : click = "run(tmp[layer].buyables[data].sellAll, tmp[layer].buyables[data])"
v - bind : class = "{ longUpg: true, can: player[layer].unlocked, locked: !player[layer].unlocked }" > { { tmp [ layer ] . buyables . sellAllText ? tmp [ layer ] . buyables . sellAllText : "Sell All" } } < / b u t t o n >
2020-10-17 19:50:30 +00:00
`
} )
2020-10-30 17:27:23 +00:00
// SYSTEM COMPONENTS
2021-05-12 03:04:59 +00:00
Vue . component ( 'node-mark' , systemComponents [ 'node-mark' ] )
2020-10-30 17:27:23 +00:00
Vue . component ( 'tab-buttons' , systemComponents [ 'tab-buttons' ] )
2020-11-25 07:14:59 +00:00
Vue . component ( 'tree-node' , systemComponents [ 'tree-node' ] )
2020-10-30 17:27:23 +00:00
Vue . component ( 'layer-tab' , systemComponents [ 'layer-tab' ] )
Vue . component ( 'overlay-head' , systemComponents [ 'overlay-head' ] )
2020-10-30 23:40:48 +00:00
Vue . component ( 'info-tab' , systemComponents [ 'info-tab' ] )
Vue . component ( 'options-tab' , systemComponents [ 'options-tab' ] )
2021-04-27 05:26:07 +00:00
Vue . component ( 'tooltip' , systemComponents [ 'tooltip' ] )
2021-05-14 01:40:51 +00:00
Vue . component ( 'particle' , systemComponents [ 'particle' ] )
2020-10-27 23:25:03 +00:00
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 ,
2021-05-13 06:51:18 +00:00
formatSmall ,
2020-09-11 02:15:05 +00:00
focused ,
2020-09-14 19:26:10 +00:00
getThemeName ,
2020-10-13 03:08:19 +00:00
layerunlocked ,
2020-09-11 02:15:05 +00:00
doReset ,
buyUpg ,
2021-05-22 03:22:39 +00:00
buyUpgrade ,
2020-10-13 03:08:19 +00:00
startChallenge ,
2020-09-11 02:15:05 +00:00
milestoneShown ,
keepGoing ,
2020-11-07 21:59:14 +00:00
hasUpgrade ,
hasMilestone ,
hasAchievement ,
hasChallenge ,
maxedChallenge ,
2021-05-22 03:22:39 +00:00
getBuyableAmount ,
getClickableState ,
2020-11-29 22:09:51 +00:00
inChallenge ,
2020-11-07 21:59:14 +00:00
canAffordUpgrade ,
2021-05-01 02:40:59 +00:00
canBuyBuyable ,
2020-11-29 22:09:51 +00:00
canCompleteChallenge ,
2020-11-08 04:34:53 +00:00
subtabShouldNotify ,
subtabResetNotify ,
2021-05-03 02:39:38 +00:00
challengeStyle ,
challengeButtonText ,
2021-05-09 17:04:44 +00:00
constructBarStyle ,
2021-05-14 05:38:17 +00:00
constructParticleStyle ,
2020-09-14 19:26:10 +00:00
VERSION ,
2020-10-01 01:30:50 +00:00
LAYERS ,
2020-12-07 03:56:37 +00:00
hotkeys ,
activePopups ,
2021-05-14 01:40:51 +00:00
particles ,
mouseX ,
mouseY ,
2021-05-15 01:51:49 +00:00
shiftDown ,
ctrlDown ,
2020-09-11 02:15:05 +00:00
} ,
2020-08-19 02:50:24 +00:00
} )
2020-10-09 01:41:50 +00:00
}
