{"version":3,"file":"ImageMapCity.8aed6c93.js","sources":["../../../../components/ImageMap/ImageMapCity/ImageMapCity.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { storeToRefs } from 'pinia'\n  import { GameDistrictId } from '~/model/GameDistrict/GameDistrict'\n  import useGameDistrict from '~/composables/GameDistrict/GameDistrict'\n  import useRouteRecord from '~/composables/RouteRecord/RouteRecord'\n  import { GameCityId } from '~/model/GameCity/GameCity'\n  import { useLocaleStore } from '~/store/Locale'\n  import { useGameContentStore } from '~/store/GameContent'\n  import useImageMap, { UseImageMapProps } from '~/composables/ImageMap/ImageMap'\n  import { ref } from '#imports'\n  import { Rect } from '~/composables/Segment/Segment'\n  import { UseBemProps } from '~/composables/Bem/BemFacetOptions'\n  import useBem from '~/composables/Bem/Bem'\n  import { useGameStateStore } from '~/store/GameState'\n  import { GameLocationId } from '~/model/GameLocation/GameLocation'\n  import { RouteRecordId } from '~/model/RouteRecord/RouteRecord'\n  import useTranslation from '~/composables/Translation/Translation'\n  import useGameCinemaRoom from '~/composables/GameCinemaRoom/GameCinemaRoom'\n\n  interface Props extends UseBemProps, UseImageMapProps {\n    facets?: Array<string>\n    cityId: GameCityId\n    width: number\n    height: number\n  }\n\n  const localeStore = useLocaleStore()\n  const gameContentStore = useGameContentStore()\n  const gameStateStore = useGameStateStore()\n\n  const svgRootEl = ref<SVGSVGElement | null>(null)\n  const svgBgRectEl = ref<SVGRectElement | null>(null)\n  const svgCinemaLinkEl = ref<SVGAElement | null>(null)\n  const svgDistrictLinkEls = ref<Array<SVGAElement>>([])\n\n  const props = defineProps<Props>()\n  const { localeId } = storeToRefs(localeStore)\n  const { districtList } = storeToRefs(gameContentStore)\n  const { unlockedDistrictList } = storeToRefs(gameStateStore)\n  const { t } = useTranslation()\n  const { bemAdd } = useBem('c-image-map-city', props, {})\n  const { activeAreaId, rootStyles, segmentIdxList, viewBox, onAreaEnter, onAreaLeave } =\n    useImageMap<Props, GameLocationId>(props, { svgRootEl, svgBgRectEl })\n  const { resolveRoute, toRoute } = useRouteRecord()\n  const { getList, selectDistrict, toGameDistrict } = useGameDistrict()\n  const { toGameCinemaRoom } = useGameCinemaRoom()\n\n  const isCinemaHovered = ref<boolean>(false)\n\n  const cinemaPathClasses = computed<Array<string>>(() => {\n    return [\n      bemAdd(isCinemaHovered.value ? 'is-visible' : '', 'path', 's-image-map'),\n      bemAdd('was-visited', 'path', 's-image-map'),\n    ]\n  })\n\n  const getDistrictPathClasses = (targetId: GameDistrictId) => {\n    const id = activeAreaId.value as GameDistrictId\n    const isActive = id === targetId\n    const isUnlocked = unlockedDistrictList.value.has(id)\n\n    return [\n      bemAdd(isActive ? 'is-visible' : '', 'path', 's-image-map'),\n      bemAdd(isUnlocked ? 'was-visited' : '', 'path', 's-image-map'),\n    ]\n  }\n\n  const getDistrictHref = (targetId: GameDistrictId) => {\n    const { fullPath } = resolveRoute(toGameDistrict(targetId))\n    return fullPath\n  }\n\n  const getCinemaHref = () => {\n    const { fullPath } = resolveRoute(toGameCinemaRoom())\n    return fullPath\n  }\n\n  const onAreaClick = (e: PointerEvent, targetId: GameDistrictId) => {\n    e.preventDefault()\n    selectDistrict(targetId)\n  }\n\n  const onCinemaClick = (e: PointerEvent) => {\n    e.preventDefault()\n    navigateTo(toGameCinemaRoom())\n  }\n\n  watch(\n    districtList,\n    () => {\n      districtList.value.forEach(({ id }) => (segmentIdxList[id as string] = null))\n    },\n    { immediate: true },\n  )\n</script>\n\n<template>\n  <div :style=\"rootStyles\" class=\"c-image-map-city s-image-map u-debug--col\">\n    <ResponsiveShell\n      :outer-height=\"height\"\n      :outer-width=\"width\"\n      class=\"s-image-map__shell\"\n      inner-height=\"100%\"\n      inner-width=\"100%\"\n    >\n      <ul class=\"c-image-map-city__label-list u-reset\">\n        <li\n          v-for=\"({ id, name }, districtIdx) in districtList\"\n          :key=\"id\"\n          class=\"c-image-map-city__label-entry\"\n        >\n          <ImageMapTooltip\n            v-if=\"svgDistrictLinkEls[districtIdx]\"\n            v-model:segment-idx-value=\"segmentIdxList[id]\"\n            :bg-el=\"svgBgRectEl\"\n            :is-visible=\"activeAreaId === id\"\n            :link-el=\"svgDistrictLinkEls[districtIdx]\"\n            :svg-el=\"svgRootEl\"\n            :was-visited=\"unlockedDistrictList.has(id)\"\n          >\n            <span class=\"c-image-map-city__label-content\">\n              {{ name }}\n            </span>\n          </ImageMapTooltip>\n        </li>\n        <li class=\"c-image-map-city__label-entry\">\n          <ImageMapTooltip\n            v-if=\"svgCinemaLinkEl\"\n            v-model:segment-idx-value=\"segmentIdxList['__cinema__']\"\n            :bg-el=\"svgBgRectEl\"\n            :is-visible=\"isCinemaHovered\"\n            :link-el=\"svgCinemaLinkEl\"\n            :svg-el=\"svgRootEl\"\n            :was-visited=\"true\"\n          >\n            <span class=\"c-image-map-city__label-content\">\n              {{ t('navigation-game.cinema') }}\n            </span>\n          </ImageMapTooltip>\n        </li>\n      </ul>\n    </ResponsiveShell>\n    <svg\n      v-if=\"districtList\"\n      ref=\"svgRootEl\"\n      :viewBox=\"viewBox\"\n      class=\"s-image-map__svg\"\n      preserveAspectRatio=\"xMidYMid\"\n      xlink:xlink=\"http://www.w3.org/1999/xlink\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect\n        ref=\"svgBgRectEl\"\n        :height=\"height\"\n        :width=\"width\"\n        class=\"s-image-map__bg-rect\"\n        x=\"0\"\n        y=\"0\"\n      />\n      <a\n        v-for=\"({ id, coordinates }, districtIdx) in districtList\"\n        :key=\"id\"\n        ref=\"svgDistrictLinkEls\"\n        :data-district-area-idx=\"districtIdx\"\n        :data-district-id=\"id\"\n        :xlink:href=\"getDistrictHref(id)\"\n        class=\"s-image-map__link u-reset\"\n        @click=\"onAreaClick($event, id)\"\n        @mouseenter=\"onAreaEnter(id)\"\n        @mouseleave=\"onAreaLeave(id)\"\n      >\n        <path\n          :class=\"getDistrictPathClasses(id)\"\n          :d=\"coordinates\"\n          class=\"s-image-map__path\"\n          fill=\"transparent\"\n        />\n      </a>\n      <a ref=\"svgCinemaLinkEl\" :xlink:href=\"getCinemaHref()\" class=\"s-image-map__link u-reset\">\n        <path\n          :class=\"cinemaPathClasses\"\n          class=\"s-image-map__path\"\n          d=\"M734.3,447.3c-2-7.3-5.3-13.9-9.7-19.9c-0.7-1-1.3-2-1.5-3.2c-0.3-1.7-1.2-3.2-1.8-4.8c-0.6-1.4-1.8-1.9-3.2-1.7   c-0.5,0-0.9,0.2-1.5,0.4c-0.9-1.2-1.8-2.3-2.7-3.3c-0.5-0.6-1.1-1.2-1.8-1.5c-0.9-0.5-1.8-0.9-2.3-1.9c0.2-1.6,0.5-3.2,0.6-4.8   c0.6-10-3.1-18.1-11.1-24.1c-1.4-1-2.9-1.8-4.5-2.6c-11.7-6.1-23.4-12.3-35.2-18.4c-11.8-6.2-23.6-12.4-35.4-18.6   c-10-5.2-21.6-1.8-27.1,8c-0.4,0.7-0.8,1.4-1.2,2.1c-3.6,6.7-7.2,13.5-10.8,20.2c-0.5,0.9-1,1.7-1.6,2.7c-1.2-0.3-2.2-0.7-3.3-0.7   c-1.2,0-2.2,0.9-2.9,1.6c-1.1-0.3-2-0.5-2.8-0.8c-1.5-0.6-2.6-0.2-3.4,1c-0.4,0.6-1,1-1.6,1.3c-0.9,0.4-1.7,1-2.6,1.6   c-0.7-1.1-1.8-1.6-3.1-1.4c-1.3,0.2-2.5,0.7-3.6,1.1c-0.6-0.7-1.1-1.4-1.7-1.9c-2.5-1.9-6-0.5-6.5,2.7c-0.3,1.7,0.2,3,1.7,3.9   c0.2,0.1,0.2,0.5,0.3,0.8c-0.8,0.2-1.5,0.3-2.2,0.4c-0.5-0.8-0.9-1.5-1.3-2.1c-0.3-0.4-0.7-0.8-1.1-0.9c-1.7-0.7-4.4,0.1-5.3,1.8   c-0.6,1.1-1.1,2.3-1.6,3.6c-0.3,0.9-0.9,1.4-1.9,1.3c0.7-2,0.5-4.2,0.4-6.2c-0.1-1.9-1-2.9-2.4-2.9c-1.9,0-2.9,0.9-3.1,3   c-0.1,0.9,0,1.8,0,2.7c-0.2,1.9,0.3,3.4,3,4.3c-1.6,0.7-2.4,1.1-3.2,1.4c-5.3,2.1-10.4,4.5-15.4,7.3c-9.7,5.3-18.6,11.6-26.4,19.6   c-6.3,6.4-11.4,13.5-14.9,21.8c-4.1,9.7-5.4,19.8-3.5,30.2c1.4,7.4,4.3,14.2,8.3,20.5c4.1,6.5,9.2,12.2,15,17.2   c3.1,2.7,6.3,5.2,9.5,7.5c0.1,0,0.1,0,0.1-0.1c1.9,0.8,3.7,2.1,5.5,3.2c0.1,0.2,0.2,0.5,0.3,0.7c0.7,0.5,1.5,0.9,2.2,1.3   c0-0.1,0.1-0.1,0.1-0.2c0.4-0.7,0.2-1.7,0.3-2.7c-1.9-1.5-3.7-3.1-5.6-4.4c-1.1-0.8-1.6-1.8-1.2-3.3c1.1-0.9,2.6-1.3,4-1.8   c1.7-0.7,3.3-1.4,4.3-3.2c0.4-0.7,1.1-1.2,1.8-2c0-1.1,0-2.3,0-3.5c0-1.1,0.1-2.2,0.4-3.3c0.4-1.3,0.3-2.8,0.4-4.3   c0.8-0.9,1.9-1.4,3.1-1.9c0.3,0.4,0.6,0.7,0.6,1.1c0.3,2.2,0.5,4.4,0.8,6.6c1-0.2,1.4-1,1.6-1.7c0.7-1.9,1.3-3.8,2-5.9   c-0.5-0.3-1-0.7-1.6-1.1c-0.3-0.2-0.8-0.3-1.1-0.5c-0.7-0.4-0.7-1.8,0-2.1c2.6-1,4.2-3.5,6.9-4.3c1-0.3,1.8-1.3,2.8-2   c1.6,1.5,3.4,2.5,5.4,3.3c0.3,0.1,0.6,0.3,0.8,0.5c1,1.1,2.1,1.9,3.4,2.5c0.9,0.4,0.9,1.7,0.1,2.2c-0.8,0.5-2,0.6-2.6,1.8   c1.2,3.2,2.5,6.4,3.8,9.8c0.7,0.4,1.4,0.7,2.1,1.1c2.2,1.2,4.2,2.6,5.5,4.7c0.6,0.9,1.4,1.4,2.4,1.8c1.8,0.7,3.6,1.5,5.1,2.1   c0.7,1.6,0.3,2.5-0.8,3.4c-1.6,1.2-3.2,2.5-4.8,3.8c-1.9,1.5-2.9,3.3-2.8,5.8c0.1,2.1,0,4.3,0,6.2c2,1.7,9.8,6.6,15.4,9.6   c1.1-0.6,2.3-1.2,3.8-2c1.2,0.7,2.4,1.4,3.4,2c0.4,0.8,0.6,1.6,0.7,2.3c0.3,0,0.7,0.1,1,0.1c0-0.5,0.1-0.9,0.5-1.3   c0.9-0.8,0.3-2,1-3.1c0.7-0.4,1.5-0.9,2.5-1.5c2.1,1.3,4.2,2.6,6.2,3.8c0.5,1.1,0.3,2.3,0.7,3.3c2.1,0.2,4.3,0.3,6.4,0.4   c9.2,0.5,18.3,0.3,27.5-0.4c12.8-1.1,25.4-3.3,37.8-6.9c14-4.1,27.2-9.8,39.4-17.7c7.3-4.7,14-10.2,19.9-16.6   c5.3-5.8,9.6-12.1,12.7-19.3C736.5,470.7,737.5,459.1,734.3,447.3z\"\n          fill=\"transparent\"\n          @click=\"onCinemaClick($event)\"\n          @mouseenter=\"isCinemaHovered = true\"\n          @mouseleave=\"isCinemaHovered = false\"\n        />\n      </a>\n    </svg>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n  .c-image-map-city__label-content {\n    white-space: nowrap;\n  }\n</style>\n"],"names":["localeStore","useLocaleStore","gameContentStore","useGameContentStore","gameStateStore","useGameStateStore","svgRootEl","ref","svgBgRectEl","svgCinemaLinkEl","svgDistrictLinkEls","storeToRefs","districtList","unlockedDistrictList","t","useTranslation","bemAdd","useBem","props","activeAreaId","rootStyles","segmentIdxList","viewBox","onAreaEnter","onAreaLeave","useImageMap","resolveRoute","toRoute","useRouteRecord","getList","selectDistrict","toGameDistrict","useGameDistrict","toGameCinemaRoom","useGameCinemaRoom","isCinemaHovered","cinemaPathClasses","computed","getDistrictPathClasses","targetId","id","isActive","isUnlocked","getDistrictHref","fullPath","getCinemaHref","onAreaClick","e","onCinemaClick","navigateTo","watch"],"mappings":"8rCA0BEA,EAAAC,KACAC,EAAAC,KACAC,EAAAC,KAEAC,EAAAC,EAAA,IAAA,EACAC,EAAAD,EAAA,IAAA,EACAE,EAAAF,EAAA,IAAA,EACAG,EAAAH,EAAA,CAAA,CAAA,EAGAI,EAAAX,CAAA,EACA,KAAA,CAAA,aAAAY,CAAA,EAAAD,EAAAT,CAAA,EACA,CAAA,qBAAAW,CAAA,EAAAF,EAAAP,CAAA,EACA,CAAA,EAAAU,GAAAC,KACA,CAAA,OAAAC,CAAA,EAAAC,GAAA,mBAAAC,EAAA,CAAA,CAAA,EACA,CAAA,aAAAC,EAAA,WAAAC,EAAA,eAAAC,EAAA,QAAAC,EAAA,YAAAC,EAAA,YAAAC,CAAA,EAAAC,GAAAP,EAAA,CAAA,UAAAZ,EAAA,YAAAE,CAAA,CAAA,EAEA,CAAA,aAAAkB,EAAA,QAAAC,EAAA,EAAAC,GAAA,EACA,CAAA,QAAAC,GAAA,eAAAC,EAAA,eAAAC,CAAA,EAAAC,GAAA,EACA,CAAA,iBAAAC,GAAAC,KAEAC,EAAA5B,EAAA,EAAA,EAEA6B,EAAAC,GAAA,IACE,CAAOrB,EAAAmB,EAAA,MAAA,aAAA,GAAA,OAAA,aAAA,EACkEnB,EAAA,cAAA,OAAA,aAAA,CAC5B,CAC7C,EAGFsB,EAAAC,GAAA,CACE,MAAAC,EAAArB,EAAA,MACAsB,EAAAD,IAAAD,EACAG,EAAA7B,EAAA,MAAA,IAAA2B,CAAA,EAEA,MAAA,CAAOxB,EAAAyB,EAAA,aAAA,GAAA,OAAA,aAAA,EACqDzB,EAAA0B,EAAA,cAAA,GAAA,OAAA,aAAA,CACG,CAC/D,EAGFC,EAAAJ,GAAA,CACE,KAAA,CAAA,SAAAK,CAAA,EAAAlB,EAAAK,EAAAQ,CAAA,CAAA,EACA,OAAAK,CAAO,EAGTC,EAAA,IAAA,CACE,KAAA,CAAA,SAAAD,CAAA,EAAAlB,EAAAO,EAAA,CAAA,EACA,OAAAW,CAAO,EAGTE,EAAA,CAAAC,EAAAR,IAAA,CACEQ,EAAA,eAAA,EACAjB,EAAAS,CAAA,CAAuB,EAGzBS,EAAAD,GAAA,CACEA,EAAA,eAAA,EACAE,GAAAhB,EAAA,CAAA,CAA6B,EAG/B,OAAAiB,GAAAtC,EACE,IAAA,CAEEA,EAAA,MAAA,QAAA,CAAA,CAAA,GAAA4B,CAAA,IAAAnB,EAAAmB,GAAA,IAAA,CAA4E,EAC9E,CAAA,UAAA,EAAA,CACkB"}