{"version":3,"file":"6EewKbNK.js","sources":["../../../../skeleton/components/group/games-adaptive.vue"],"sourcesContent":["<template>\n  <div v-if=\"isShowSkeletonLoading || games?.length\" class=\"group-games-adaptive\">\n    <client-only>\n      <skeleton-preloader-group-games v-if=\"isShowSkeletonLoading\" :is-mobile=\"isMobile\" />\n    </client-only>\n\n    <template v-if=\"games?.length\">\n      <div :class=\"['group-games-adaptive__list', { 'group-games-adaptive__list_is-mobile': isMobile }]\">\n        <atomic-cat-heading :icon=\"titleIcon\">\n          {{ title }}\n        </atomic-cat-heading>\n\n        <span v-if=\"showAllBtn\" class=\"group-games-adaptive__btn-show-all\" @click=\"openGames\">\n          {{ getContent(globalComponentsContent, defaultLocaleGlobalComponentsContent, 'cardsGroup.moreButton') }}\n        </span>\n\n        <list-grid v-if=\"isMobile\" class=\"group-games-adaptive__mobile-list\" :items=\"games\" :meta=\"pageMeta\" />\n\n        <template v-else>\n          <button-arrows\n            v-if=\"showArrowButtons\"\n            :prev-disabled=\"prevDisabled\"\n            :next-disabled=\"nextDisabled\"\n            @click-action=\"clickAction\"\n          />\n\n          <div\n            ref=\"scrollContainer\"\n            class=\"group-games-adaptive__items\"\n            :class=\"{ 'disabled-scroll-block': !games.length }\"\n            @scroll=\"scrollHandler\"\n          >\n            <card-base v-for=\"(game, gameIndex) in games\" :key=\"gameIndex\" :game-info=\"game\" />\n\n            <div ref=\"loadMore\" class=\"group-games-adaptive__load-more\" @inview=\"moreGames\" />\n          </div>\n        </template>\n      </div>\n    </template>\n  </div>\n</template>\n<script setup lang=\"ts\">\n  import { watchDebounced } from '@vueuse/core';\n\n  import { urlFormat } from '@skeleton/utils/routerUtils';\n\n  import type { ICollection, IGame, IGamesRequest, IPaginationMeta } from '@skeleton/core/types';\n\n  interface IProps {\n    category?: ICollection;\n    subTitle?: boolean;\n    showAllBtn?: boolean;\n    maxItems?: number;\n    searchValue?: string;\n    showArrows?: boolean;\n  }\n\n  const props = withDefaults(defineProps<IProps>(), {\n    maxItems: 9,\n    searchValue: '',\n    showArrows: true,\n  });\n\n  const isShowSkeletonLoading = ref(true);\n\n  const globalStore = useGlobalStore();\n  const { globalComponentsContent, defaultLocaleGlobalComponentsContent, gameCategoriesObj, headerCountry } =\n    storeToRefs(globalStore);\n  const deviceStore = useDeviceStore();\n  const { isMobile } = storeToRefs(deviceStore);\n  const { getContent } = useProjectMethods();\n  const { getGames } = useGameCollectionStoreStore();\n\n  const games = ref<IGame[]>([]);\n  const pageMeta = ref<IPaginationMeta>();\n\n  const defaultRequestParams = computed<IGamesRequest>(() => ({\n    collectionId: props.category?.id,\n    perPage: props.maxItems,\n    countries: headerCountry.value ? [headerCountry.value] : undefined,\n    sortBy: 'default',\n    sortOrder: 'asc',\n    category: props.category?.identity,\n    name: props.searchValue.length ? props.searchValue : undefined,\n  }));\n\n  const OFFSET_MARGIN = 20;\n\n  const titleIcon = computed(() =>\n    props.category?.identity ? gameCategoriesObj.value[props.category?.identity?.toLowerCase()]?.icon : ''\n  );\n\n  const title = computed(() =>\n    props.category\n      ? gameCategoriesObj.value[props.category.identity]?.label || props.category.name || props.category.identity\n      : ''\n  );\n\n  const scrollHandler = (): void => {\n    if (!scrollContainer.value) return;\n    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer.value;\n    prevDisabled.value = scrollLeft === 0;\n    nextDisabled.value =\n      scrollWidth < scrollLeft + offsetWidth + OFFSET_MARGIN &&\n      scrollWidth > scrollLeft + offsetWidth - OFFSET_MARGIN &&\n      pageMeta.value?.page === pageMeta.value?.totalPages;\n  };\n\n  const clickAction = (direction: string): void => {\n    const { offsetWidth, scrollWidth, scrollLeft } = scrollContainer.value;\n    const widthToEnd = scrollWidth - (scrollLeft + offsetWidth);\n    const scrollLeftValue = widthToEnd < offsetWidth ? widthToEnd : offsetWidth;\n    const scrollRightValue = scrollLeft < offsetWidth ? scrollLeft : offsetWidth;\n    scrollContainer.value.scrollBy({\n      left: direction === 'next' ? scrollLeftValue : -scrollRightValue,\n      behavior: 'smooth',\n    });\n  };\n\n  const loadGames = async () => {\n    const data = await getGames(defaultRequestParams.value);\n    games.value = data.games;\n    pageMeta.value = data.pageMeta;\n    isShowSkeletonLoading.value = false;\n  };\n\n  const emit = defineEmits(['initialLoad']);\n  const observerLoadMore = ref();\n  const { initObserver, localizePath } = useProjectMethods();\n  const scrollContainer = ref();\n  const loadMore = ref();\n  const prevDisabled = ref(true);\n  const nextDisabled = ref(true);\n  const showArrowButtons = ref<boolean>(props.showArrows);\n\n  const moreGames = async (): Promise<void> => {\n    if (pageMeta.value?.page === pageMeta.value?.totalPages) return;\n\n    const gamesResponse = await getGames({\n      ...defaultRequestParams.value,\n      page: pageMeta.value ? pageMeta.value.page + 1 : 1,\n    });\n\n    games.value = games.value.concat(gamesResponse.games);\n    pageMeta.value = gamesResponse.pageMeta;\n  };\n\n  const initializeObserver = async () => {\n    observerLoadMore.value = initObserver({\n      settings: { root: scrollContainer.value, rootMargin: '90%', threshold: 0 },\n    });\n\n    try {\n      if (games?.value?.length && loadMore.value) {\n        observerLoadMore.value.observe(loadMore.value);\n      }\n    } catch (error) {\n      console.error('Error initializing observer:', error);\n    }\n\n    await nextTick();\n    emit('initialLoad');\n\n    if (props.showArrows) {\n      scrollHandler();\n      showArrowButtons.value = props.showArrows && (!prevDisabled.value || !nextDisabled.value);\n    }\n  };\n\n  watch(\n    () => props.category,\n    async category => {\n      if (!category) return;\n      await loadGames();\n      await initializeObserver();\n    },\n    { immediate: true }\n  );\n\n  onMounted(async () => {\n    if (props.category) {\n      await initializeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    if (loadMore.value && observerLoadMore.value) {\n      observerLoadMore.value.unobserve(loadMore.value);\n    }\n  });\n\n  const openGames = async (): Promise<void> => {\n    if (props.category?.identity) {\n      await navigateTo({\n        path: localizePath(`/games/${urlFormat(props.category.identity)}`),\n      });\n    }\n  };\n\n  watchDebounced(() => props.searchValue, loadGames, { debounce: 500, maxWait: 1000 });\n</script>\n\n<style src=\"~/assets/styles/components/group/games-adaptive.scss\" lang=\"scss\" />\n"],"names":["OFFSET_MARGIN","props","__props","isShowSkeletonLoading","ref","globalStore","useGlobalStore","globalComponentsContent","defaultLocaleGlobalComponentsContent","gameCategoriesObj","headerCountry","storeToRefs","deviceStore","useDeviceStore","isMobile","getContent","useProjectMethods","getGames","useGameCollectionStoreStore","games","pageMeta","defaultRequestParams","computed","_a","_b","titleIcon","_d","_c","title","scrollHandler","scrollContainer","scrollLeft","offsetWidth","scrollWidth","prevDisabled","nextDisabled","clickAction","direction","widthToEnd","scrollLeftValue","scrollRightValue","loadGames","data","emit","__emit","observerLoadMore","initObserver","localizePath","loadMore","showArrowButtons","moreGames","gamesResponse","initializeObserver","error","nextTick","watch","category","onMounted","onBeforeUnmount","openGames","navigateTo","urlFormat","watchDebounced"],"mappings":"qiBAsFQA,EAAgB,mOA7BtB,MAAMC,EAAQC,EAMRC,EAAwBC,EAAI,EAAI,EAEhCC,EAAcC,GAAe,EAC7B,CAAE,wBAAAC,EAAyB,qCAAAC,EAAsC,kBAAAC,EAAmB,cAAAC,CAAc,EACtGC,EAAYN,CAAW,EACnBO,EAAcC,GAAe,EAC7B,CAAE,SAAAC,CAAA,EAAaH,EAAYC,CAAW,EACtC,CAAE,WAAAG,CAAW,EAAIC,EAAkB,EACnC,CAAE,SAAAC,CAAS,EAAIC,GAA4B,EAE3CC,EAAQf,EAAa,EAAE,EACvBgB,EAAWhB,EAAqB,EAEhCiB,EAAuBC,EAAwB,IAAO,SAAA,OAC1D,cAAcC,EAAAtB,EAAM,WAAN,YAAAsB,EAAgB,GAC9B,QAAStB,EAAM,SACf,UAAWS,EAAc,MAAQ,CAACA,EAAc,KAAK,EAAI,OACzD,OAAQ,UACR,UAAW,MACX,UAAUc,EAAAvB,EAAM,WAAN,YAAAuB,EAAgB,SAC1B,KAAMvB,EAAM,YAAY,OAASA,EAAM,YAAc,MAAA,EACrD,EAIIwB,EAAYH,EAAS,IAAA,aACzB,OAAAC,EAAAtB,EAAM,WAAN,MAAAsB,EAAgB,UAAWG,EAAAjB,EAAkB,OAAMkB,GAAAH,EAAAvB,EAAM,WAAN,YAAAuB,EAAgB,WAAhB,YAAAG,EAA0B,aAAa,IAA/D,YAAAD,EAAkE,KAAO,GACtG,EAEME,EAAQN,EAAS,IACrB,OAAA,OAAArB,EAAM,WACFsB,EAAAd,EAAkB,MAAMR,EAAM,SAAS,QAAQ,IAA/C,YAAAsB,EAAkD,QAAStB,EAAM,SAAS,MAAQA,EAAM,SAAS,SACjG,GACN,EAEM4B,EAAgB,IAAY,SAC5B,GAAA,CAACC,EAAgB,MAAO,OAC5B,KAAM,CAAE,WAAAC,EAAY,YAAAC,EAAa,YAAAC,GAAgBH,EAAgB,MACjEI,EAAa,MAAQH,IAAe,EACpCI,EAAa,MACXF,EAAcF,EAAaC,EAAchC,GACzCiC,EAAcF,EAAaC,EAAchC,KACzCuB,EAAAH,EAAS,QAAT,YAAAG,EAAgB,UAASC,EAAAJ,EAAS,QAAT,YAAAI,EAAgB,WAC7C,EAEMY,EAAeC,GAA4B,CAC/C,KAAM,CAAE,YAAAL,EAAa,YAAAC,EAAa,WAAAF,GAAeD,EAAgB,MAC3DQ,EAAaL,GAAeF,EAAaC,GACzCO,EAAkBD,EAAaN,EAAcM,EAAaN,EAC1DQ,EAAmBT,EAAaC,EAAcD,EAAaC,EACjEF,EAAgB,MAAM,SAAS,CAC7B,KAAMO,IAAc,OAASE,EAAkB,CAACC,EAChD,SAAU,QAAA,CACX,CACH,EAEMC,EAAY,SAAY,CAC5B,MAAMC,EAAO,MAAMzB,EAASI,EAAqB,KAAK,EACtDF,EAAM,MAAQuB,EAAK,MACnBtB,EAAS,MAAQsB,EAAK,SACtBvC,EAAsB,MAAQ,EAChC,EAEMwC,EAAOC,EACPC,EAAmBzC,EAAI,EACvB,CAAE,aAAA0C,GAAc,aAAAC,EAAa,EAAI/B,EAAkB,EACnDc,EAAkB1B,EAAI,EACtB4C,EAAW5C,EAAI,EACf8B,EAAe9B,EAAI,EAAI,EACvB+B,EAAe/B,EAAI,EAAI,EACvB6C,EAAmB7C,EAAaH,EAAM,UAAU,EAEhDiD,GAAY,SAA2B,SAC3C,KAAI3B,EAAAH,EAAS,QAAT,YAAAG,EAAgB,UAASC,EAAAJ,EAAS,QAAT,YAAAI,EAAgB,YAAY,OAEnD,MAAA2B,EAAgB,MAAMlC,EAAS,CACnC,GAAGI,EAAqB,MACxB,KAAMD,EAAS,MAAQA,EAAS,MAAM,KAAO,EAAI,CAAA,CAClD,EAEDD,EAAM,MAAQA,EAAM,MAAM,OAAOgC,EAAc,KAAK,EACpD/B,EAAS,MAAQ+B,EAAc,QACjC,EAEMC,EAAqB,SAAY,OACrCP,EAAiB,MAAQC,GAAa,CACpC,SAAU,CAAE,KAAMhB,EAAgB,MAAO,WAAY,MAAO,UAAW,CAAE,CAAA,CAC1E,EAEG,GAAA,EACEP,EAAAJ,GAAA,YAAAA,EAAO,QAAP,MAAAI,EAAc,QAAUyB,EAAS,OAClBH,EAAA,MAAM,QAAQG,EAAS,KAAK,QAExCK,EAAO,CACN,QAAA,MAAM,+BAAgCA,CAAK,CAAA,CAGrD,MAAMC,GAAS,EACfX,EAAK,aAAa,EAEd1C,EAAM,aACM4B,EAAA,EACdoB,EAAiB,MAAQhD,EAAM,aAAe,CAACiC,EAAa,OAAS,CAACC,EAAa,OAEvF,EAEAoB,GACE,IAAMtD,EAAM,SACZ,MAAMuD,GAAY,CACXA,IACL,MAAMf,EAAU,EAChB,MAAMW,EAAmB,EAC3B,EACA,CAAE,UAAW,EAAK,CACpB,EAEAK,GAAU,SAAY,CAChBxD,EAAM,UACR,MAAMmD,EAAmB,CAC3B,CACD,EAEDM,GAAgB,IAAM,CAChBV,EAAS,OAASH,EAAiB,OACpBA,EAAA,MAAM,UAAUG,EAAS,KAAK,CACjD,CACD,EAED,MAAMW,GAAY,SAA2B,QACvCpC,EAAAtB,EAAM,WAAN,MAAAsB,EAAgB,UAClB,MAAMqC,GAAW,CACf,KAAMb,GAAa,UAAUc,GAAU5D,EAAM,SAAS,QAAQ,CAAC,EAAE,CAAA,CAClE,CAEL,EAEe,OAAA6D,GAAA,IAAM7D,EAAM,YAAawC,EAAW,CAAE,SAAU,IAAK,QAAS,IAAM"}