{"version":3,"file":"index.7ac7345d.js","sources":["../../src/components/home/home-scene-2d.vue"],"sourcesContent":["<template lang=\"pug\">\n\ntransition(name=\"fade\" appear)\n  .home-scene.full(\n    bg=\"black\"\n    overflow=\"hidden\"\n  )\n\n    .full.overflow-hidden\n\n      .hub-bg.full(ref=\"refBg\")\n        //- art(\n        //-   :ref=\"(el) => refBgImg = el\"\n        //-   :src=\"IMAGE.scene_bg\"\n        //- )\n        img.bg-img(\n          ref=\"refBgImg\"\n          :src=\"IMAGE.scene_bg\"\n          draggable=\"false\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        )\n        //- img.glow1(\n        //-   src=\"@/assets/images/pages/home/scene/glow.png\"\n        //-   v-glow\n        //- )\n        //- img.glow2(\n        //-   src=\"@/assets/images/pages/home/scene/glow.png\"\n        //-   v-glow\n        //- )\n        img.ground(\n          ref=\"refGround\"\n          :src=\"IMAGE.scene_ground\"\n          draggable=\"false\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        )\n\n\n      .scene.full(\n        ref=\"refSceneUnder\"\n        :style=\"sceneStyle\"\n      )\n        img.swallow2(\n          ref=\"refSwallow2\"\n          :src=\"IMAGE.scene_swallow\"\n          @click=\"onSwallowClick\"\n          draggable=\"false\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        )\n\n        \n\n    .banner-container.full(ref=\"refBannerContainer\")\n      banner(\n        ref=\"refBanner\"\n        :scroll=\"false\"\n      )\n        .banner-title(ref=\"refBannerTitle\") {{ t('splash.title') }}\n\n\n    splash(:show=\"showPage.splash\")\n    hub(:show=\"showPage.hub\")\n\n\n    .full.overflow-hidden.pointer-events-none\n      .scene.full(\n        ref=\"refSceneOver\"\n        :style=\"sceneStyle\"        \n      )\n        img.father(\n          ref=\"refFather\"\n          :src=\"IMAGE.scene_father\"\n          draggable=\"false\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        )\n        img.son(\n          ref=\"refSon\"\n          :src=\"IMAGE.scene_son\"\n          draggable=\"false\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        )\n        img.mom(\n          ref=\"refMom\"\n          :src=\"IMAGE.scene_mom\"\n          draggable=\"false\"\n          aria-hidden=\"true\"\n          alt=\"\"\n        )\n        img.swallow1(\n          ref=\"refSwallow1\"\n          :src=\"IMAGE.scene_swallow\"\n          draggable=\"false\"\n          aria-hidden=\"true\"\n          alt=\"\"\n          @click=\"onSwallowClick\"\n        )\n\n\n\n\n    //- tp-spritesheet(\n    //-   name=\"lanternparticles\"\n    //-   :frames=\"90\"\n    //- )\n\n    //- tp-spritesheet(\n    //-   name=\"buttonparticles\"\n    //-   :frames=\"90\"\n    //- )\n\n    \n    //- transition(name=\"fade\")\n    //-   .foot(\n    //-     v-if=\"showPage.splash || showPage.hub\"\n    //-     text=\"sm\"\n    //-     flex=\"~ row\"\n    //-     justify=\"center\"\n    //-   )\n    //-     p {{ t('copyright') }}\n    //-     .btn-terms(\n    //-       v-if=\"appStore.home != 'loading'\"\n    //-       @click=\"appStore.setShowTerms(true)\"\n    //-     ) {{ t('terms') }}\n\n\n    //- .full.pointer-events-none\n    //-   tp-spritesheet.snow(\n    //-     name=\"snowparticles\"\n    //-     :frames=\"90\"\n    //-   )\n    snow\n\n\n</template>\n\n<script setup lang=\"ts\">\n// import HubIntro from './hub-intro.vue'\nimport { useBrowserStore } from '@/stores/browser'\nimport { useAppStore } from '@/stores/app'\nimport { useLoadingStore } from '@/stores/loading'\nimport gsap from 'gsap'\nimport {watchPostEffect} from 'vue'\nimport AudioService from '@/services/AudioService'\nimport Assets from '@/services/MultiAssetService'\nimport {IMAGE, AUDIO} from '@/config/manifest'\nimport {randomIntRange} from '@/helpers/MathUtils'\nimport {cover, contain} from 'intrinsic-scale'\nimport { useElementSize } from '@vueuse/core'\n\n\nconst loading = useLoadingStore()\nconst appStore = useAppStore()\nconst browser = useBrowserStore()\n\nconst { t } = useI18n()\nconst props = defineProps({})\nconst emits = defineEmits([])\n\n\n// PIXEL RATIO\nconst rendererRef = ref()\nwatchEffect(()=> {\n  if (!rendererRef.value) return\n  let ratio = appStore.pixelRatio || 1\n  rendererRef.value.three.renderer.setSize(\n    browser.windowWidth * ratio, \n    browser.windowHeight * ratio\n  )\n})\n\n\n// ************************************************************\n//\n// PAGE\n//\n// ************************************************************\n\nconst showPage = reactive({\n  loading: true,\n  splash: false,\n  hub: false,\n})\n\nconst setShowPage = function (val) {\n  showPage.loading = false\n  showPage.splash = false\n  showPage.hub = false\n  showPage[val] = true\n}\n\n\n\n// ************************************************************\n//\n// ANIMATION\n//\n// ************************************************************\nconst refBg = ref()\nconst refBgImg = ref()\nconst refSceneUnder = ref()\nconst refSceneOver = ref()\nconst refSwallow2 = ref()\nconst refGround = ref()\nconst refFather = ref()\nconst refBannerContainer = ref()\nconst refBanner = ref()\nconst refBannerTitle = ref()\nconst refSon = ref()\nconst refMom = ref()\nconst refSwallow1 = ref()\n\nlet {height: bgHeight} = useElementSize(refBgImg)\n\nconst amountY = computed(()=> {\n  return bgHeight.value - browser.windowHeight\n})\n\nconst hasReset = ref(false)\nconst reset = function () {\n  hasReset.value = true\n  let eles = [refBg.value, refSceneUnder.value, refSceneOver.value]\n  gsap.set(eles, {y: amountY.value * 1 - browser.fontSize * 9})\n}\n\n\nconst gotoLoading = function() {\n  // console.log('Scene.gotoLoading')\n\n  setShowPage('loading')\n\n  let sceneEles = [refBg.value, refSceneUnder.value, refSceneOver.value]\n  gsap.set(sceneEles, {y: amountY.value * 1 - browser.fontSize * 9})\n}\n\nconst gotoSplash = function() {\n  // console.log('Scene.gotoSplash')\n\n  setShowPage(null)\n\n  reset()\n\n  let tl = new gsap.timeline({\n    onComplete: ()=> {\n      setShowPage('splash')\n    }\n  })\n  \n  tl.add('start')\n\n  let sceneEles = [refBg.value, refSceneUnder.value, refSceneOver.value]\n  tl.set(sceneEles, {y: amountY.value * 1 - browser.fontSize * 9})\n  tl.to(sceneEles, {y: 0, duration: 3, ease: 'power2.inOut'}, 'start')\n  tl.to(refSwallow2.value, {y: 0, duration: 3, ease: 'power2.inOut'}, 'start')\n  tl.to(refFather.value, {y: 0, duration: 3, ease: 'power2.inOut'}, 'start')\n  tl.to(refBannerContainer.value, {y: 0, duration: 3, ease: 'power2.inOut'}, 'start')\n  tl.to(refSon.value, {y: 0, duration: 3, ease: 'power2.inOut'}, 'start')\n  tl.to(refMom.value, {y: 0, duration: 3, ease: 'power2.inOut'}, 'start')\n  tl.to(refSwallow1.value, {y: 0, duration: 3, ease: 'power2.inOut'}, 'start')\n}\n\nconst gotoHub = function() {\n\n  // console.log('Scene.gotoHub')\n\n  setShowPage(null)\n\n  \n\n  let sceneEles = [refBg.value, refSceneUnder.value, refSceneOver.value]\n  let tl = new gsap.timeline({\n    onComplete: ()=> {\n      setShowPage('hub')\n    }\n  })\n  tl.add('start')\n\n  if (!hasReset.value) tl.set(sceneEles, {y: amountY.value * 1 - browser.fontSize * 9})\n  tl.to([refBg.value, refSceneUnder.value], {y: 0, scale: 1 / 0.6, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refSceneOver.value, {y: 0, scale: 1 / 0.6, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refBannerContainer.value, {y: 0, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refBanner.value.$el, {y: 0, scale: 1, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refBannerTitle.value, {opacity: 0, duration: 1.5, ease: 'power1.inOut'}, 'start')\n\n  tl.to(refSon.value, {x: '15%', y: '16%', scale: 0.65, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refMom.value, {x: '-14%', y: '6%', scale: 0.62, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refFather.value, {x: '-16%', y: '4%', scale: 0.65, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refSwallow1.value, {x: '27%', y: '70%', scale: 0.6, duration: 1.5, ease: 'power1.inOut'}, 'start')\n  tl.to(refSwallow2.value, {x: '50%', duration: 1.5, ease: 'power1.inOut'}, 'start')\n}\n\n\nwatchPostEffect(()=> {\n  switch (appStore.home) {\n    case 'loading':\n      gotoLoading()\n      break\n    case 'splash':\n      gotoSplash()\n      break\n    case 'hub':\n      gotoHub()\n      break\n  }\n})\n\n\n\nconst onSwallowClick = async function () {\n  await AudioService.start()\n  let num = randomIntRange(0, 4)\n  console.log('onSwallowClick', num, AUDIO)\n  Assets.getAsset(AUDIO[`VO${num}`]).play()\n}\n\n</script>\n\n<script lang=\"ts\">\nexport default {\n  mounted() {\n    // window.HomeScene = this\n  },\n}\n\nlet sceneStyle = computed(()=> {\n\n  let {width, height, x, y} = contain(\n    browser.windowWidth,\n    browser.windowHeight,\n    375,\n    748,\n  )\n\n  return {\n    width: `${width}px`,\n    height: `${height}px`,\n  }\n})\n</script>\n\n<style lang=\"sass\" scoped>\n\n\n\n// *******************************************************\n//\n// SCENE\n//\n// *******************************************************\n\n.hub-bg\n  transform: translateY(calc(100vh - 9rem))\n\n  .bg-img\n    width: 100%\n    bottom: -9rem\n\n  \n  .ground\n    bottom: 0rem\n    left: 0\n    width: 100%\n    max-height: 23rem\n    // min-height: 23rem\n    // height: 21.5rem\n\n    @media screen and ( min-height: 700px )\n      min-height: 23.5rem\n\n\n    \n\n  \n\nimg, .art::v-deep(img)\n  position: absolute\n  max-width: none\n  max-height: none\n\n\n.scene\n  transform: translateY(calc(100vh - 9rem))\n  pointer-events: none\n  margin: auto\n  left: 0\n  right: 0\n  top: 0\n  bottom: 0\n\n\n    \n\n  .father\n    bottom: -4rem\n    right: -4rem\n    width: 17rem\n    transform: translateY(10%)\n\n\n  .son\n    bottom: 1rem\n    left: -23rem\n    width: 41rem\n    transform: translateY(30%)\n\n  \n  .mom\n    bottom: 0rem\n    right: -19rem\n    width: 41rem\n    transform: translateY(20%)\n\n  .swallow1\n    bottom: 56rem\n    left: 0\n    width: 11rem\n    transform: translateY(200%)\n    pointer-events: all\n    \n  .swallow2\n    bottom: 40rem\n    right: 0\n    width: 7rem\n    transform: translateY(200%) scaleX(-1) rotate(-24deg) \n    pointer-events: all\n\n  // .glow1\n  //   bottom: 30rem\n  //   width: 30vw\n  //   left: 5vw\n  //   pointer-events: none\n\n  // .glow2\n  //   bottom: 30vw\n  //   width: 56vw\n  //   right: 8vw\n  //   pointer-events: none\n\n\n.banner-container\n  transform: translateY(calc(100vh + 25%))\n  pointer-events: none\n  text-align: center\n\n  .banner\n    display: inline-block\n    margin: 0 auto\n    left: 0\n    right: 0\n    transform: translate(0%, -5rem) scale(0.61)\n    // transform: translate(0%, calc(-5rem - var(--safe-area-inset-bottom))) scale(0.61)\n    // transform: translate(0%, calc(-5rem - env(safe-area-inset-bottom))) scale(0.61)\n\n    .banner-title\n      height: calc(100% + 5rem)\n      font-weight: 400\n      margin: 0 auto\n      @apply font-traditional\n      text-transform: uppercase\n      writing-mode: vertical-rl\n      white-space: nowrap\n\n      // font-size: 20vh\n      // transform: translateY(-7.6%)\n      // letter-spacing: -0.6em\n\n      font-size: 12vh\n      transform: translateY(-1.5%)\n      letter-spacing: -0.05em\n      \n      background: linear-gradient(#FFECCA, #E8BA6F)\n      -webkit-background-clip: text\n      background-clip: text\n      -webkit-text-fill-color: transparent\n      text-fill-color: transparent\n      text-orientation: upright\n      \n\n      // .ios &\n      //   letter-spacing: -0.05em\n\n      // .locale-en &\n      //   font-size: 5.5rem\n      //   white-space: pre-line\n      //   line-height: 1\n      //   transform: translateY(-4%)\n\n  \n\n\n\n\n\n\n\n// *******************************************************\n//\n// MISC\n//\n// *******************************************************\n\n\n.snow\n  width: 100%\n  top: 50%\n  position: absolute\n  transform: translateY(-50%)\n</style>"],"names":[],"mappings":"kkwBAuUA"}