{"version":3,"sources":["webpack:///./src/components/layout/XPOverlay.vue?fe58","webpack:///src/components/layout/XPOverlay.vue","webpack:///./src/components/layout/XPOverlay.vue?b6d4","webpack:///./src/components/layout/XPOverlay.vue","webpack:///./src/components/layout/XPOverlay.vue?bafd"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","directives","name","rawName","value","expression","staticClass","on","hide","_v","_s","currentLevel","ref","_f","xpGained","staticRenderFns","sounds","levelUp","getLevel","xp","nextLevel","getLevelProgress","currentLevelXp","nextLevelXp","intl","Intl","NumberFormat","minimumFractionDigits","maximumFractionDigits","components","data","show","currentAnimation","queue","$bus","$on","onReceive","methods","startXp","oldXp","endXp","startLevel","endLevel","$nextTick","length","console","log","anims","generateAnimations","processQueue","animEndXp","Math","min","push","generateAnimation","isLevelUp","startLevelXp","startProgress","endProgress","anim","autoplay","duration","easing","add","targets","translateY","translateX","begin","play","complete","animation","remove","$el","removeAttribute","finished","shift","pause","component","VSpacer"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,aAAa,CAACE,MAAM,CAAC,KAAO,aAAa,CAACF,EAAG,MAAM,CAACG,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,MAAOV,EAAQ,KAAEW,WAAW,SAASC,YAAY,+BAA+BC,GAAG,CAAC,MAAQb,EAAIc,OAAO,CAACV,EAAG,MAAM,CAACQ,YAAY,iDAAiD,CAACR,EAAG,OAAO,CAACQ,YAAY,gBAAgB,CAACZ,EAAIe,GAAG,OAAOf,EAAIgB,GAAGhB,EAAIiB,iBAAiBb,EAAG,OAAO,CAACQ,YAAY,8BAA8B,CAACZ,EAAIe,GAAG,MAAMX,EAAG,OAAO,CAACc,IAAI,WAAWlB,EAAIe,GAAG,UAAUX,EAAG,YAAYA,EAAG,OAAO,CAACQ,YAAY,8BAA8B,CAACZ,EAAIe,GAAG,IAAIf,EAAIgB,GAAGhB,EAAImB,GAAG,cAAPnB,CAAsBA,EAAIoB,WAAW,SAAS,GAAGhB,EAAG,MAAM,CAACc,IAAI,QAAQN,YAAY,yBACvtBS,EAAkB,G,4DCqBtB,MAAMC,EAAS,CACbC,QAAS,OAAX,OAAW,CAAX,yBAGMC,EAAWC,IACf,MAAMC,EAAY,EAApB,uBACE,QAAuB,IAAfA,EAAmBA,EAAY,EAAzC,gBAGMC,EAAmB,CAACF,EAAIG,EAAgBC,KAAiBJ,EAAKG,IAAmBC,EAAcD,GAE/FE,EAAO,IAAIC,KAAKC,aAAa,QAAS,CAC1CC,sBAAuB,EACvBC,sBAAuB,IAGzB,OACEC,WAAY,GACZC,KAAM,KAAM,CACVC,MAAM,EACNC,iBAAkB,KAClBrB,aAAc,EACdG,SAAU,EACVmB,MAAO,KAET,UACEtC,KAAKuC,KAAKC,IAAI,UAAWxC,KAAKyC,YAEhCC,QAAS,CACP,iBAAgB,MAApB,SAEW1C,KAAKoC,OACRpC,KAAKsC,MAAQ,IAGf,MAAMK,EAAUC,EACVC,EAAQD,EAAQpB,EAChBsB,EAAavB,EAASoB,GACtBI,EAAWxB,EAASsB,GAG1B,GAAIC,IAAe,EAAzB,cACQ,OAGF9C,KAAKoC,MAAO,QACNpC,KAAKgD,YAEXhD,KAAKmB,SAAWK,EAEXxB,KAAKsC,MAAMW,SACdjD,KAAKgB,aAAe8B,GAGtBI,QAAQC,IAAI,sBAAsBR,YAAkBG,aAAmBD,YAAgBE,MAEvF,MAAMK,EAAQpD,KAAKqD,mBAAmBV,EAASE,GAG3C7C,KAAKsC,MAAMW,OACbjD,KAAKsC,MAAQ,IAAItC,KAAKsC,SAAUc,IAIlCpD,KAAKsC,MAAQc,EACbpD,KAAKsD,iBAEP,mBAAmBX,EAASE,EAAOO,EAAQ,IAA/C,MACM,MAAM3B,EAAYF,EAASoB,GAAW,EAChCf,EAAZ,2EAEY2B,EAAYC,KAAKC,IAAIZ,EAAOjB,GAIlC,OAHAwB,EAAMM,KAAK1D,KAAK2D,kBAAkBhB,EAASY,EAAWV,GAASjB,IAG3DiB,EAAQjB,EACH5B,KAAKqD,mBAAmBzB,EAAaiB,EAAOO,GAG9CA,GAET,kBAAkBT,EAASE,EAAOe,GAAtC,QACM,MAAM,OAAZ,sBAEYd,EAAavB,EAASoB,GACtBkB,EAAZ,2EACYjC,EAAZ,6EAEYkC,EAAgBpC,EAAiBiB,EAASkB,EAAcjC,GACxDmC,EAAcrC,EAAiBmB,EAAOgB,EAAcjC,GAEpDoC,EAAO,EAAnB,eACQC,UAAU,EACVC,SAAU,IACVC,OAAQ,kBA8CV,OA3CAH,EACN,KACQ,QAAR,CAAU,GAAV,GACQ,GAAR,EACQ,MAAR,EACQ,MAAR,KACU,KAAV,mBAEQ,OAAR,EAAU,iBACA,MAAV,aAAY,GAAZ,KACA,IACY,EAAZ,0BAIA,KACQ,QAAR,EACQ,OAAR,OACA,GAEUJ,GACFI,EAAKI,IAAI,CACPC,QAAS,oBACTC,WAAY,CACtB,CAAY,MAAZ,EAAY,SAAZ,GACA,CAAY,OAAZ,GAAY,SAAZ,KACA,CAAY,MAAZ,EAAY,SAAZ,MAEUC,WAAY,CAAC,OAAQ,QACrBL,SAAU,IACVC,OAAQ,cACRK,MAAO,KACLnD,EAAOC,QAAQmD,OACfzE,KAAKgB,aAAeO,EAASsB,IAE/B6B,SAAUC,IACRA,EAAUC,OAAO,qBACjB5E,KAAK6E,IAAIC,gBAAgB,WAGrC,SAGad,GAET,qBACE,IAAKhE,KAAKsC,MAAMW,OAGd,aAFM,OAAd,OAAc,CAAd,UACQjD,KAAKoC,MAAO,GAId,MAAO4B,GAAQhE,KAAKsC,MACpBtC,KAAKqC,iBAAmB2B,EACxBA,EAAKS,aAECT,EAAKe,SACX/E,KAAKsC,MAAM0C,QAEXhF,KAAKsD,gBAEP,OACMtD,KAAKqC,kBACPrC,KAAKqC,iBAAiB4C,QAGxBjF,KAAKsC,MAAQ,GACbtC,KAAKoC,MAAO,KC1Lib,I,yDCQ/b8C,EAAY,eACd,EACApF,EACAsB,GACA,EACA,KACA,WACA,MAIa,aAAA8D,EAAiB,QAKhC,IAAkBA,EAAW,CAACC,UAAA,Q,oCCxB9B,yBAAynB,EAAG,G","file":"js/chunk-3843cf4a.50212311.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{\"name\":\"t-xp-bar\"}},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.show),expression:\"show\"}],staticClass:\"xp-bar-container bg-ui-panel\",on:{\"click\":_vm.hide}},[_c('div',{staticClass:\"pos-relative z2 d-flex align-center py-1 px-2\"},[_c('span',{staticClass:\"text-h6 mr-2\"},[_vm._v(\"Lvl \"+_vm._s(_vm.currentLevel))]),_c('span',{staticClass:\"text-body-1 green200--text\"},[_vm._v(\" (\"),_c('span',{ref:\"xpText\"}),_vm._v(\"xp) \")]),_c('v-spacer'),_c('span',{staticClass:\"text-body-2 green500--text\"},[_vm._v(\"+\"+_vm._s(_vm._f(\"toLocaleInt\")(_vm.xpGained))+\"xp\")])],1),_c('div',{ref:\"xpBar\",staticClass:\"progress-bar z1\"})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <transition name=\"t-xp-bar\">\n    <div v-show=\"show\" class=\"xp-bar-container bg-ui-panel\" @click=\"hide\">\n      <div class=\"pos-relative z2 d-flex align-center py-1 px-2\">\n        <span class=\"text-h6 mr-2\">Lvl {{ currentLevel }}</span>\n        <span class=\"text-body-1 green200--text\">\n          (<span ref=\"xpText\" />xp)\n        </span>\n        <v-spacer />\n        <span class=\"text-body-2 green500--text\">+{{ xpGained | toLocaleInt }}xp</span>\n      </div>\n      <div ref=\"xpBar\" class=\"progress-bar z1\" />\n    </div>\n  </transition>\n</template>\n\n<script>\nimport anime from 'animejs/lib/anime.es'\nimport { LEVELS } from '@/utils/constants'\nimport { sleep } from '@/utils'\nimport { registerSound } from '@/modules/sound'\n\nconst sounds = {\n  levelUp: registerSound('level_up', { volume: 0.4 }),\n}\n\nconst getLevel = xp => {\n  const nextLevel = LEVELS.findIndex(lvl => lvl > xp)\n  return (nextLevel !== -1 ? nextLevel : LEVELS.length) - 1\n}\n\nconst getLevelProgress = (xp, currentLevelXp, nextLevelXp) => (xp - currentLevelXp) / (nextLevelXp - currentLevelXp)\n\nconst intl = new Intl.NumberFormat('en-US', {\n  minimumFractionDigits: 0,\n  maximumFractionDigits: 0,\n})\n\nexport default {\n  components: {},\n  data: () => ({\n    show: false,\n    currentAnimation: null,\n    currentLevel: 0,\n    xpGained: 0,\n    queue: [],\n  }),\n  created() {\n    this.$bus.$on('user.xp', this.onReceive)\n  },\n  methods: {\n    async onReceive({ oldXp, xp }) {\n      // clean up queue if not active\n      if (!this.show) {\n        this.queue = []\n      }\n\n      const startXp = oldXp\n      const endXp = oldXp + xp\n      const startLevel = getLevel(startXp)\n      const endLevel = getLevel(endXp)\n\n      // skip if max level\n      if (startLevel === LEVELS.length - 1) {\n        return\n      }\n\n      this.show = true\n      await this.$nextTick()\n\n      this.xpGained = xp\n\n      if (!this.queue.length) {\n        this.currentLevel = startLevel\n      }\n\n      console.log(`User is going from ${startXp}xp (lvl ${startLevel}) --> ${endXp}xp (lvl ${endLevel})`)\n\n      const anims = this.generateAnimations(startXp, endXp)\n\n      // if already running\n      if (this.queue.length) {\n        this.queue = [...this.queue, ...anims]\n        return\n      }\n\n      this.queue = anims\n      this.processQueue()\n    },\n    generateAnimations(startXp, endXp, anims = []) {\n      const nextLevel = getLevel(startXp) + 1\n      const nextLevelXp = LEVELS?.[nextLevel] ?? 0\n\n      const animEndXp = Math.min(endXp, nextLevelXp)\n      anims.push(this.generateAnimation(startXp, animEndXp, endXp >= nextLevelXp))\n\n      // we go agane\n      if (endXp > nextLevelXp) {\n        return this.generateAnimations(nextLevelXp, endXp, anims)\n      }\n\n      return anims\n    },\n    generateAnimation(startXp, endXp, isLevelUp) {\n      const { xpText, xpBar } = this.$refs\n\n      const startLevel = getLevel(startXp)\n      const startLevelXp = LEVELS?.[startLevel] ?? 0\n      const nextLevelXp = LEVELS?.[startLevel + 1] ?? 0\n\n      const startProgress = getLevelProgress(startXp, startLevelXp, nextLevelXp)\n      const endProgress = getLevelProgress(endXp, startLevelXp, nextLevelXp)\n\n      const anim = anime.timeline({\n        autoplay: false,\n        duration: 3e3,\n        easing: 'easeInOutQuad',\n      })\n\n      anim\n        .add({\n          targets: { xp: startXp },\n          xp: endXp,\n          round: 1,\n          begin: () => {\n            this.currentLevel = getLevel(startXp)\n          },\n          update: ({ animations }) => {\n            const { currentValue } = animations[0]\n            if (xpText) {\n              xpText.innerText = intl.format(currentValue)\n            }\n          },\n        })\n        .add({\n          targets: xpBar,\n          scaleX: [startProgress, endProgress],\n        }, 0)\n\n      if (isLevelUp) {\n        anim.add({\n          targets: '.xp-bar-container',\n          translateY: [\n            { value: 0, duration: 0 },\n            { value: -20, duration: 200 },\n            { value: 0, duration: 200 },\n          ],\n          translateX: ['-50%', '-50%'],\n          duration: 500,\n          easing: 'easeOutBack',\n          begin: () => {\n            sounds.levelUp.play()\n            this.currentLevel = getLevel(endXp)\n          },\n          complete: animation => {\n            animation.remove('.xp-bar-container')\n            this.$el.removeAttribute('style')\n          },\n\n        }, '-=200')\n      }\n\n      return anim\n    },\n    async processQueue() {\n      if (!this.queue.length) {\n        await sleep(300)\n        this.show = false\n        return\n      }\n\n      const [anim] = this.queue\n      this.currentAnimation = anim\n      anim.play()\n\n      await anim.finished\n      this.queue.shift()\n\n      this.processQueue()\n    },\n    hide() {\n      if (this.currentAnimation) {\n        this.currentAnimation.pause()\n      }\n\n      this.queue = []\n      this.show = false\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.xp-bar-container {\n  position: fixed;\n  z-index: 999;\n  bottom: 20px;\n  left: 50%;\n  width: 20%;\n  min-width: 300px;\n  max-width: 400px;\n  transition: transform 0.5s cubic-bezier(0, 1.2, 0.5, 1.3);\n  transform: translateX(-50%);\n}\n\n.progress-bar {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(green(500), 0.2);\n  transform-origin: center left;\n}\n\n.t-xp-bar {\n  &-enter,\n  &-leave-to {\n    transform: translateY(150%) translateX(-50%);\n  }\n\n  &-enter-to {\n    transform: translateY(0) translateX(-50%);\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./XPOverlay.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./XPOverlay.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./XPOverlay.vue?vue&type=template&id=030e1297&scoped=true&\"\nimport script from \"./XPOverlay.vue?vue&type=script&lang=js&\"\nexport * from \"./XPOverlay.vue?vue&type=script&lang=js&\"\nimport style0 from \"./XPOverlay.vue?vue&type=style&index=0&id=030e1297&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"030e1297\",\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VSpacer } from 'vuetify/lib/components/VGrid';\ninstallComponents(component, {VSpacer})\n","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./XPOverlay.vue?vue&type=style&index=0&id=030e1297&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./XPOverlay.vue?vue&type=style&index=0&id=030e1297&lang=scss&scoped=true&\""],"sourceRoot":""}