{"version":3,"file":"CfLGj6rc.js","sources":["../../../../skeleton/components/button/arrows.vue","../../../../skeleton/components/group/games.vue"],"sourcesContent":["<template>\n  <div class=\"arrows\">\n    <button\n      :key=\"'prev'\"\n      class=\"btn-prev\"\n      :disabled=\"props.prevDisabled\"\n      data-action=\"prev\"\n      @click=\"clickNavigation('prev')\"\n    >\n      <atomic-icon id=\"arrow_expand-close\" />\n    </button>\n\n    <button\n      :key=\"'next'\"\n      class=\"btn-next\"\n      :disabled=\"props.nextDisabled\"\n      data-action=\"next\"\n      @click=\"clickNavigation('next')\"\n    >\n      <atomic-icon id=\"arrow_expand-close\" />\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  const props = defineProps({\n    prevDisabled: {\n      type: Boolean,\n      default: true,\n    },\n    nextDisabled: {\n      type: Boolean,\n      default: false,\n    },\n  });\n  const emit = defineEmits(['clickAction']);\n  const clickNavigation = (direction: string): void => {\n    if ((direction === 'next' && props.nextDisabled) || (direction === 'prev' && props.prevDisabled)) return;\n    emit('clickAction', direction);\n  };\n</script>\n\n<style src=\"~/assets/styles/components/button/arrows.scss\" lang=\"scss\" />\n","<template>\n  <div v-if=\"showBlock\" class=\"group-games\">\n    <atomic-icon v-if=\"titleIcon && !props.subTitle\" :id=\"titleIcon\" />\n\n    <div v-if=\"props.subTitle\" class=\"titles\">\n      <h2 class=\"title\">\n        {{ gameCategoriesObj[props.category.identity]?.label || props.category.name || props.category.identity }}\n      </h2>\n      <h4 class=\"sub-title\">\n        {{\n          getContent(globalComponentsContent, defaultLocaleGlobalComponentsContent, 'cardsGroup.recommendedSubtitle')\n        }}\n      </h4>\n    </div>\n\n    <h2 v-else class=\"title\">\n      {{ gameCategoriesObj[props.category.identity]?.label || props.category.name || props.category.identity }}\n    </h2>\n\n    <button-base v-if=\"props.showAllBtn\" class=\"btn-show-all\" type=\"ghost\" size=\"sm\" @click=\"openGames\">\n      {{ getContent(globalComponentsContent, defaultLocaleGlobalComponentsContent, 'cardsGroup.moreButton') }}\n      {{ pageMeta?.totalRows }}\n    </button-base>\n\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=\"items\"\n      :class=\"{ 'disabled-scroll-block': !games.length }\"\n      @scroll=\"scrollHandler\"\n    >\n      <template v-if=\"games.length\">\n        <card-base v-for=\"(game, gameIndex) in games\" :key=\"gameIndex\" :game-info=\"game\" />\n      </template>\n\n      <template v-else>\n        <Skeletor v-for=\"n in 9\" :key=\"n\" class=\"card-base\" as=\"div\" />\n      </template>\n\n      <div ref=\"loadMore\" class=\"load-more\" @inview=\"moreGames\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import type { IGame, IPaginationMeta } from '@skeleton/core/types';\n  import { storeToRefs } from 'pinia';\n  import { Skeletor } from 'vue-skeletor';\n\n  const props = defineProps({\n    category: {\n      type: Object,\n      required: true,\n    },\n    subTitle: {\n      type: Boolean,\n      required: false,\n    },\n    showAllBtn: {\n      type: Boolean,\n      default: false,\n    },\n    showArrows: {\n      type: Boolean,\n      default: true,\n    },\n  });\n\n  const globalStore = useGlobalStore();\n  const { globalComponentsContent, defaultLocaleGlobalComponentsContent, gameCategoriesObj } = globalStore;\n  const { headerCountry } = storeToRefs(globalStore);\n  const { getContent } = useProjectMethods();\n  const titleIcon = gameCategoriesObj[props.category.identity]?.icon;\n\n  const scrollContainer = ref();\n  const prevDisabled = ref<boolean>(true);\n  const nextDisabled = ref<boolean>(true);\n  const showArrowButtons = ref<boolean>(props.showArrows);\n  const games = ref<IGame[]>([]);\n  const pageMeta = ref<IPaginationMeta>();\n  const { getFilteredGames } = useCoreGamesApi();\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 + 20 &&\n      scrollWidth > scrollLeft + offsetWidth - 20 &&\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 defaultRequestParams = {\n    collectionId: props.category.id,\n    perPage: 18,\n    countries: headerCountry.value ? [headerCountry.value] : undefined,\n    sortBy: 'default',\n    sortOrder: 'asc',\n  };\n\n  const moreGames = async (): Promise<void> => {\n    if (pageMeta.value?.page === pageMeta.value?.totalPages) return;\n\n    const gamesResponse = await getFilteredGames({\n      ...defaultRequestParams,\n      page: pageMeta.value ? pageMeta.value.page + 1 : 1,\n    });\n    games.value = games.value.concat(gamesResponse.data);\n    pageMeta.value = gamesResponse.meta;\n  };\n\n  const loadMore = ref();\n  const { initObserver } = useProjectMethods();\n  const observerLoadMore = ref();\n\n  const emit = defineEmits(['initialLoad']);\n  const showBlock = ref<boolean>(true);\n  onMounted(async () => {\n    observerLoadMore.value = initObserver({\n      settings: { root: scrollContainer.value, rootMargin: '90%', threshold: 0 },\n    });\n    observerLoadMore.value.observe(loadMore.value);\n\n    const gamesResponse = await getFilteredGames(defaultRequestParams);\n    if (!gamesResponse.data.length) return (showBlock.value = false);\n    games.value = gamesResponse.data;\n    pageMeta.value = gamesResponse.meta;\n    await nextTick();\n\n    emit('initialLoad');\n\n    if (props.showArrows) {\n      scrollHandler();\n      showArrowButtons.value = props.showArrows && (!prevDisabled.value || !nextDisabled.value);\n    }\n  });\n\n  onBeforeUnmount(() => {\n    if (loadMore.value && observerLoadMore.value) {\n      observerLoadMore.value.unobserve(loadMore.value);\n    }\n  });\n\n  const { localizePath } = useProjectMethods();\n  const openGames = (): void => {\n    const router = useRouter();\n    router.push(localizePath(`/categories/${props.category.identity}`));\n  };\n</script>\n\n<style src=\"~/assets/styles/components/group/games.scss\" lang=\"scss\" />\n"],"names":["props","__props","emit","__emit","clickNavigation","direction","globalStore","useGlobalStore","globalComponentsContent","defaultLocaleGlobalComponentsContent","gameCategoriesObj","headerCountry","storeToRefs","getContent","useProjectMethods","titleIcon","_a","scrollContainer","ref","prevDisabled","nextDisabled","showArrowButtons","games","pageMeta","getFilteredGames","useCoreGamesApi","scrollHandler","scrollLeft","offsetWidth","scrollWidth","_b","clickAction","widthToEnd","scrollLeftValue","scrollRightValue","defaultRequestParams","moreGames","gamesResponse","loadMore","initObserver","observerLoadMore","showBlock","onMounted","nextTick","onBeforeUnmount","localizePath","openGames","useRouter"],"mappings":"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"}