{"version":3,"file":"ListDistrict.f26e2f85.js","sources":["../../../../components/ListDistrict/ListDistrict.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { storeToRefs } from 'pinia'\n  import { GameDistrictId, GameDistrictListContent } from '~/model/GameDistrict/GameDistrict'\n  import useGameDistrict from '~/composables/GameDistrict/GameDistrict'\n  import UiAccordion from '~/components/Ui/UiAccordion/UiAccordion.vue'\n  import ListLocation from '~/components/ListLocation/ListLocation.vue'\n  import ActionUnlockDistrict from '~/components/ActionUnlockDistrict/ActionUnlockDistrict.vue'\n  import useBem from '~/composables/Bem/Bem'\n  import { UseBemProps } from '~/composables/Bem/BemFacetOptions'\n  import { ref, watch } from '#imports'\n  import { GameCityId } from '~/model/GameCity/GameCity'\n  import { useLocaleStore } from '~/store/Locale'\n  import { useGameContentStore } from '~/store/GameContent'\n  import { useGameStateStore } from '~/store/GameState'\n  import { UiIconId, UiIconNameId, UiIconSeriesId, UiIconSizeId } from '~/model/UiIcon/UiIcon'\n  import useTranslation from '~/composables/Translation/Translation'\n  import { GameModeId } from '~/model/GameMode/GameMode'\n\n  // NOTE: Props extension currently not supported\n  // https://vuejs.org/guide/typescript/composition-api.html#typing-component-props\n  interface Props extends UseBemProps {\n    facets?: Array<string>\n    cityId: GameCityId\n  }\n\n  const localeStore = useLocaleStore()\n  const gameStateStore = useGameStateStore()\n\n  const props = defineProps<Props>()\n  const { localeId } = storeToRefs(localeStore)\n  const { activeModeId, selectedDistrictId } = storeToRefs(gameStateStore)\n  const { t } = useTranslation()\n  const { assignPendingData } = useGameContentStore()\n  const { getList, selectDistrict, isUnlocked } = useGameDistrict()\n  const { bemAdd } = useBem('c-list-district', props, {})\n\n  const districtList = ref<Array<GameDistrictListContent> | null>(null)\n  const entryElRefs = ref<Array<HTMLLIElement>>([])\n\n  const isStay = computed<boolean>(() => {\n    return activeModeId.value === GameModeId.Stay\n  })\n\n  const getBtnClasses = (id: GameDistrictId): Array<string> => {\n    return [\n      bemAdd(isUnlocked(id) ? 'is-unlocked' : 'is-locked', 'btn'),\n      bemAdd(selectedDistrictId.value === id ? 'is-open' : 'is-closed', 'btn'),\n    ]\n  }\n\n  const requestSelectDistrict = (targetId: GameDistrictId) => {\n    selectDistrict(selectedDistrictId.value === targetId ? undefined : targetId)\n  }\n\n  const scrollToEntry = (targetId: GameDistrictId) => {\n    const targetEl = entryElRefs.value.find((entryElRef) => {\n      return entryElRef.dataset.districtId === targetId\n    }) as HTMLLIElement\n\n    targetEl.scrollIntoView()\n  }\n\n  const onAccordionChanged = (isOpen: boolean, targetId: GameDistrictId) => {\n    if (isOpen && !isUnlocked(targetId)) {\n      scrollToEntry(targetId)\n    }\n  }\n\n  watch(\n    () => props.cityId,\n    async (newVal) => {\n      if (!newVal) {\n        return\n      }\n\n      const req = await getList(localeId.value, props.cityId)\n      assignPendingData<Array<GameDistrictListContent>>(req, (data) => {\n        districtList.value = data.value\n      })\n    },\n    { immediate: true },\n  )\n</script>\n\n<template>\n  <div class=\"c-list-district u-typography-root\">\n    <ul class=\"u-reset c-list-district__list\">\n      <li\n        v-for=\"{ id, name } in districtList\"\n        :key=\"id\"\n        ref=\"entryElRefs\"\n        :data-district-id=\"id\"\n        class=\"c-list-district__entry\"\n      >\n        <button\n          :class=\"getBtnClasses(id)\"\n          class=\"c-list-district__btn\"\n          @click=\"requestSelectDistrict(id)\"\n        >\n          <span class=\"c-list-district__label\">{{ name }}</span>\n          <UiIcon\n            v-if=\"isUnlocked(id)\"\n            :id=\"UiIconId.IconControlMediumChevronRight\"\n            class=\"c-list-district__icon\"\n            :colorize=\"true\"\n            :size=\"UiIconSizeId.Medium\"\n          />\n          <UiIcon\n            v-if=\"!isUnlocked(id)\"\n            :id=\"UiIconId.IconControlMediumChevronDown\"\n            class=\"c-list-district__icon\"\n            :colorize=\"true\"\n            :size=\"UiIconSizeId.Medium\"\n          />\n        </button>\n\n        <UiAccordion\n          :facets=\"[]\"\n          :open=\"selectedDistrictId === id\"\n          :passive=\"true\"\n          @changed=\"onAccordionChanged($event, id)\"\n        >\n          <template #body>\n            <div class=\"c-list-district__body\">\n              <span>{{ t('list-district.locations') }}:</span>\n\n              <ListLocation :district-id=\"id\" class=\"c-list-district__location-list\" />\n\n              <div class=\"c-list-district__actions\">\n                <ActionUnlockDistrict v-if=\"isStay\" :district-id=\"id\" />\n              </div>\n            </div>\n          </template>\n        </UiAccordion>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n  @use '@nirazul/scss-utils' as utils;\n  @use '/assets/scss/util/transition' as trs;\n  @use '/assets/scss/base/typography/typography' as type;\n  @use '/assets/scss/util/color/color' as col;\n\n  .c-list-district__list {\n    border-bottom: 1px solid col.$brand-cyan;\n  }\n\n  .c-list-district__entry {\n    border-top: 1px solid col.$brand-cyan;\n  }\n\n  .c-list-district__icon {\n    @include trs.common-props;\n    @include utils.is-visible(false, trs.$default-speed);\n    opacity: 0;\n  }\n\n  .c-list-district__btn {\n    @include trs.common-props;\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    padding: 10px 2px 10px 14px;\n    overflow: hidden;\n\n    &.c-list-district__btn--is-locked {\n      color: col.$monochrome-quicksilver;\n\n      @include utils.has-focus {\n        color: col.$monochrome-white;\n\n        .c-list-district__icon {\n          @include utils.is-visible(true, trs.$default-speed, opacity, transform);\n          opacity: 1;\n        }\n      }\n\n      &.c-list-district__btn--is-open {\n        color: col.$monochrome-white;\n\n        .c-list-district__icon {\n          @include utils.is-visible(true, trs.$default-speed, opacity, transform);\n          opacity: 1;\n          transform: rotateX(180deg);\n        }\n      }\n    }\n\n    &.c-list-district__btn--is-unlocked {\n      cursor: pointer;\n      color: col.$variant-cyan-light;\n\n      .c-list-district__icon {\n        @include utils.is-visible(true, trs.$default-speed, opacity, transform);\n        opacity: 1;\n      }\n\n      @include utils.has-focus {\n        color: col.$brand-cyan;\n\n        .c-list-district__icon {\n          transform: translateX(4px);\n        }\n      }\n    }\n  }\n\n  .c-list-district__label {\n    @include type.h3;\n\n    display: block;\n    text-align: left;\n  }\n\n  .c-list-district__body {\n    padding: 0 14px 32px;\n  }\n\n  .c-list-district__location-list {\n    margin: 24px 0 24px;\n  }\n\n  .c-list-district__actions {\n    display: flex;\n    justify-content: center;\n    margin-top: 24px;\n  }\n</style>\n"],"names":["localeStore","useLocaleStore","gameStateStore","useGameStateStore","localeId","storeToRefs","activeModeId","selectedDistrictId","t","useTranslation","assignPendingData","useGameContentStore","getList","selectDistrict","isUnlocked","useGameDistrict","bemAdd","useBem","props","districtList","ref","entryElRefs","isStay","computed","GameModeId","getBtnClasses","id","requestSelectDistrict","targetId","scrollToEntry","entryElRef","onAccordionChanged","isOpen","watch","newVal","req","data"],"mappings":"27BAyBEA,EAAAC,IACAC,EAAAC,IAGA,CAAA,SAAAC,CAAA,EAAAC,EAAAL,CAAA,EACA,CAAA,aAAAM,EAAA,mBAAAC,CAAA,EAAAF,EAAAH,CAAA,EACA,CAAA,EAAAM,GAAAC,IACA,CAAA,kBAAAC,GAAAC,IACA,CAAA,QAAAC,EAAA,eAAAC,EAAA,WAAAC,CAAA,EAAAC,EAAA,EACA,CAAA,OAAAC,CAAA,EAAAC,EAAA,kBAAAC,EAAA,CAAA,CAAA,EAEAC,EAAAC,EAAA,IAAA,EACAC,EAAAD,EAAA,CAAA,CAAA,EAEAE,EAAAC,EAAA,IACEjB,EAAA,QAAAkB,EAAA,IAAyC,EAG3CC,EAAAC,GACE,CAAOV,EAAAF,EAAAY,CAAA,EAAA,cAAA,YAAA,KAAA,EACqDV,EAAAT,EAAA,QAAAmB,EAAA,UAAA,YAAA,KAAA,CACa,EAI3EC,EAAAC,GAAA,CACEf,EAAAN,EAAA,QAAAqB,EAAA,OAAAA,CAAA,CAA2E,EAG7EC,EAAAD,GAAA,CACEP,EAAA,MAAA,KAAAS,GACEA,EAAA,QAAA,aAAAF,CAAyC,EAG3C,eAAA,CAAwB,EAG1BG,EAAA,CAAAC,EAAAJ,IAAA,CACEI,GAAA,CAAAlB,EAAAc,CAAA,GACEC,EAAAD,CAAA,CACF,EAGF,OAAAK,EAAA,IAAAf,EAAA,OACc,MAAAgB,GAAA,CAEV,GAAA,CAAAA,EACE,OAGF,MAAAC,EAAA,MAAAvB,EAAAR,EAAA,MAAAc,EAAA,MAAA,EACAR,EAAAyB,EAAAC,GAAA,CACEjB,EAAA,MAAAiB,EAAA,KAA0B,CAAA,CAC3B,EACH,CAAA,UAAA,EAAA,CACkB"}