{"version":3,"file":"TaskBlockMatch.f640525a.js","sources":["../../../../components/TaskBlock/TaskBlockMatch/TaskBlockMatch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { storeToRefs } from 'pinia'\n  import { Ref } from 'vue'\n  import { isEqual, map, pickBy } from 'lodash-es'\n  import { TaskBlockMatchData, TaskBlockTypeId } from '~/model/TaskBlockData/TaskBlockData'\n  import { UseBemProps } from '~/composables/Bem/BemFacetOptions'\n  import { GameTaskId } from '~/model/GameTask/GameTask'\n  import { useGameTaskStore } from '~/store/GameTask'\n  import useTranslation from '~/composables/Translation/Translation'\n  import useBem from '~/composables/Bem/Bem'\n  import useMarkdown from '~/composables/Markdown/Markdown'\n  import { GameTaskStoreMatchEntry } from '~/model/GameTaskStore/GameTaskStore'\n  import { computed, reactive } from '#imports'\n  import {\n    MatchDraggableEntry,\n    MatchDropZoneEntry,\n    MatchFacet,\n    MatchStoreMatchesDict,\n  } from '~/model/TaskMatch/TaskMatch'\n  import { MatchDraggableFacet } from '~/components/MatchDraggable/MatchDraggableFacet'\n  import { OverlayContentModalFacet } from '~/components/OverlayContent/OverlayContentModal/OverlayContentModalFacet'\n  import { OverlayContentModalAction } from '~/components/OverlayContent/OverlayContentModal/OverlayContentModalAction'\n  import useNotification from '~/composables/Notification/Notification'\n  import useModal from '~/composables/Modal/Modal'\n  import { DropZonePayload } from '~/composables/DropZone/DropZone'\n  import { MatchDropZoneFacet } from '~/components/MatchDropZone/MatchDropZoneFacet'\n\n  interface Props extends TaskBlockMatchData, UseBemProps {\n    facets?: Array<string>\n    taskId: GameTaskId\n    type: TaskBlockTypeId\n    title: string\n    instructions: string\n    titleDraggableItems: string\n    titleDropZoneItems: string\n    draggableItems: Array<MatchDraggableEntry>\n    dropZoneItems: Array<MatchDropZoneEntry>\n  }\n\n  const LOUPE_ID = '__loupe__'\n\n  const gameTaskStore = useGameTaskStore()\n  const gameTaskStoreRefs = storeToRefs(gameTaskStore)\n\n  const props = defineProps<Props>()\n  const { t } = useTranslation()\n  const { openNotification } = useNotification()\n  const { openModal, closeModal } = useModal()\n  const { bemAdd, bemFacets } = useBem('c-task-block-match', props, {})\n  const { parseMarkdown } = useMarkdown()\n  const store = gameTaskStoreRefs[props.taskId] as Ref<GameTaskStoreMatchEntry>\n  const model = reactive<GameTaskStoreMatchEntry>({\n    id: props.taskId,\n    matches: props.draggableItems.reduce((acc, { id }) => {\n      const matches = store.value.matches ?? {}\n      acc[id] = matches[id] ?? ''\n      return acc\n    }, {} as MatchStoreMatchesDict),\n    isCompleted: store.value.isCompleted,\n  })\n  const textOnly = computed<boolean>(() => {\n    return props.draggableItems.every((item) => !!item.text && !item.image)\n  })\n  const imageOnly = computed<boolean>(() => {\n    return props.draggableItems.every((item) => !item.text && !!item.image)\n  })\n  const numSlots = computed<number>(() => {\n    return props.dropZoneItems.reduce(\n      (acc, { solution }) => Math.max(acc, parseSolution(solution).length),\n      0,\n    )\n  })\n  const availableItems = computed<Array<MatchDraggableEntry>>(() => filterMatches(''))\n  const rootClasses = computed<Array<string>>(() => {\n    return [\n      ...bemFacets.value,\n      bemAdd(store.value.isCompleted ? 'is-completed' : ''),\n      bemAdd(store.value.isCompleted ? 'is-completed' : '', '', 's-task-block'),\n      bemAdd(textOnly.value ? MatchFacet.IsTextOnly : ''),\n      bemAdd(imageOnly.value ? MatchFacet.IsImageOnly : ''),\n    ]\n  })\n  const hasAnyImages = computed<boolean>(() => {\n    const hasImagesInDraggableItems = props.draggableItems.some(({ image }) => !!image)\n    const hasImagesInDropzoneItems = props.dropZoneItems.some(({ image }) => !!image)\n\n    return hasImagesInDraggableItems || hasImagesInDropzoneItems\n  })\n  const hasChanges = computed<boolean>(() => {\n    return !isEqual(JSON.parse(JSON.stringify(store.value)), JSON.parse(JSON.stringify(model)))\n  })\n  const matchElFacets = computed<Array<string>>(() => {\n    return [\n      textOnly.value ? MatchFacet.IsTextOnly : '',\n      imageOnly.value ? MatchFacet.IsImageOnly : '',\n    ]\n  })\n\n  const filterMatches = (targetDropZone: string): Array<MatchDraggableEntry> => {\n    const filteredDict: MatchStoreMatchesDict = pickBy(\n      model.matches,\n      (value) => value === targetDropZone,\n    )\n\n    return map(filteredDict, (_, key) => {\n      return props.draggableItems.find(({ id }) => id === key) as MatchDraggableEntry\n    })\n  }\n\n  const parseSolution = (target: string | undefined): Array<string> => {\n    return target ? target.split(',').map((str) => str.trim()) : []\n  }\n\n  const checkSolution = (): boolean => {\n    return props.dropZoneItems.every(({ solution, id }) => {\n      const parsed = parseSolution(solution)\n      return parsed.every((draggableId) => store.value.matches[draggableId] === id)\n    })\n  }\n\n  const onMatch = ({ draggableId, dropZoneId }: DropZonePayload) => {\n    model.matches[draggableId] = dropZoneId\n  }\n\n  const onUnset = (e: DragEvent) => {\n    if (!e.dataTransfer) {\n      throw new Error('No dataTransfer object found!')\n    }\n\n    onMatch({\n      draggableId: e.dataTransfer.getData('id'),\n      dropZoneId: '',\n    })\n  }\n\n  const onRequestSave = () => {\n    store.value.matches = { ...model.matches }\n    store.value.isCompleted = model.isCompleted\n  }\n\n  const onRequestComplete = () => {\n    onRequestSave()\n    const isCorrect = checkSolution()\n\n    if (isCorrect) {\n      model.isCompleted = true\n      onRequestSave()\n      openNotification('overlay-notification-task-complete', 4000)\n    } else {\n      openModal('overlay-info-task-failed', {\n        props: {\n          facets: [OverlayContentModalFacet.Info],\n          actions: <Array<OverlayContentModalAction>>[\n            {\n              callback: closeModal,\n              label: t('overlay-info-task-failed.action-accept.label'),\n              btnFacets: ['primary', 'medium'],\n            },\n          ],\n        },\n      })\n    }\n  }\n</script>\n\n<template>\n  <div :class=\"rootClasses\" class=\"c-task-block-match s-task-block\">\n    <div class=\"s-task-block__box\">\n      <TaskBlockHeader\n        :is-completed=\"store.isCompleted\"\n        :title=\"title\"\n        :type=\"type\"\n        :show-copyright=\"hasAnyImages\"\n      />\n      <div class=\"s-task-block__content u-markdown-root\" v-html=\"parseMarkdown(instructions)\" />\n\n      <div class=\"c-task-block-match__interactions s-task-block__interactions\">\n        <div class=\"c-task-block-match__staging-box\">\n          <h3 class=\"c-task-block-match__box-title\">\n            {{ titleDraggableItems }}\n          </h3>\n\n          <div\n            class=\"c-task-block-match__staging-zone\"\n            @drop=\"onUnset($event)\"\n            @dragover.prevent\n            @dragenter.prevent\n          >\n            <ul class=\"c-task-block-match__draggable-list u-reset\">\n              <li\n                v-for=\"{ id, image, text } in availableItems\"\n                :key=\"id\"\n                class=\"c-task-block-match__draggable-entry\"\n              >\n                <MatchDraggable\n                  :draggable-id=\"id\"\n                  :facets=\"[MatchDraggableFacet.InStagingZone, ...matchElFacets]\"\n                >\n                  <template #content>\n                    <ResponsiveImg\n                      v-if=\"image\"\n                      :resolutions=\"[1]\"\n                      :src=\"image\"\n                      :width=\"320\"\n                      alt=\"\"\n                      class=\"c-task-block-match__image\"\n                    />\n                    <span v-if=\"text\" class=\"c-task-block-match__text\">\n                      {{ text }}\n                    </span>\n                  </template>\n                </MatchDraggable>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div v-if=\"imageOnly\" class=\"c-task-block-match__loupe-box\">\n          <div class=\"c-task-block-match__loupe-explanation\">\n            <h3 class=\"c-task-block-match__box-title\">\n              {{ t('task-block-match.loupe.title') }}\n            </h3>\n            <p class=\"u-reset u-reset--copy-x-small\">\n              {{ t('task-block-match.loupe.description') }}\n            </p>\n          </div>\n          <div class=\"c-task-block-match__drop-zone-list\">\n            <div class=\"c-task-block-match__loupe-drop-zone\">\n              <MatchDropZone\n                :draggable-item-list=\"filterMatches(LOUPE_ID)\"\n                :drop-zone-id=\"LOUPE_ID\"\n                :facets=\"matchElFacets\"\n                :num-slots=\"1\"\n                @match=\"onMatch($event)\"\n              >\n                <template #content=\"{ id, image, text }\">\n                  <MatchDraggable\n                    :draggable-id=\"id\"\n                    :facets=\"[MatchDraggableFacet.InDropZone, ...matchElFacets]\"\n                  >\n                    <template #content>\n                      <ResponsiveImg\n                        v-if=\"image\"\n                        :resolutions=\"[1]\"\n                        :src=\"image\"\n                        :width=\"320\"\n                        alt=\"\"\n                        class=\"c-task-block-match__image\"\n                      />\n                    </template>\n                  </MatchDraggable>\n                </template>\n              </MatchDropZone>\n            </div>\n          </div>\n        </div>\n        <div class=\"c-task-block-match__drop-zone-box\">\n          <h3 class=\"c-task-block-match__box-title\">\n            {{ titleDropZoneItems }}\n          </h3>\n          <ul class=\"c-task-block-match__drop-zone-list u-reset\">\n            <li\n              v-for=\"{ id, title, description, image } in dropZoneItems\"\n              :key=\"id\"\n              class=\"c-task-block-match__drop-zone-entry\"\n            >\n              <MatchDropZone\n                :draggable-item-list=\"filterMatches(id)\"\n                :drop-zone-id=\"id\"\n                :facets=\"[image ? MatchDropZoneFacet.WithImage : '', ...matchElFacets]\"\n                :num-slots=\"numSlots\"\n                @match=\"onMatch($event)\"\n              >\n                <template #title>\n                  <ResponsiveImg\n                    v-if=\"image\"\n                    :resolutions=\"[1]\"\n                    :src=\"image\"\n                    :width=\"100\"\n                    alt=\"\"\n                    class=\"c-task-block-match__drop-zone-image\"\n                  />\n                  <div class=\"c-task-block-match__drop-zone-title\">\n                    <h4>\n                      {{ title }}\n                    </h4>\n                    <p class=\"u-reset u-reset--copy-x-small\" v-if=\"description\">\n                      {{ description }}\n                    </p>\n                  </div>\n                </template>\n                <template #content=\"{ id, image, text }\">\n                  <MatchDraggable\n                    :draggable-id=\"id\"\n                    :facets=\"[MatchDraggableFacet.InDropZone, ...matchElFacets]\"\n                  >\n                    <template #content>\n                      <ResponsiveImg\n                        v-if=\"image\"\n                        :resolutions=\"[1]\"\n                        :src=\"image\"\n                        :width=\"320\"\n                        alt=\"\"\n                        class=\"c-task-block-match__image\"\n                      />\n                      <span v-if=\"text\" class=\"c-task-block-match__text\">\n                        {{ text }}\n                      </span>\n                    </template>\n                  </MatchDraggable>\n                </template>\n              </MatchDropZone>\n            </li>\n          </ul>\n        </div>\n        <div class=\"c-task-block-match__actions-box\">\n          <button\n            :disabled=\"hasChanges ? null : true\"\n            class=\"btn btn--primary btn--medium\"\n            @click=\"onRequestSave\"\n          >\n            {{ t('task-block-match.actions.save') }}\n          </button>\n          <button\n            v-if=\"!store.isCompleted\"\n            :disabled=\"availableItems.length === 0 ? null : true\"\n            class=\"btn btn--primary btn--medium\"\n            @click=\"onRequestComplete\"\n          >\n            {{ t('task-block-match.actions.complete') }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n  @use '/assets/scss/util/color/color' as col;\n  @use '/assets/scss/base/typography/typography' as type;\n\n  .c-task-block-match {\n    position: relative;\n    grid-column: 1 / 13;\n    --c-match-draggable-pointer-events: auto;\n  }\n\n  .c-task-block-match--is-completed {\n    --c-match-draggable-pointer-events: none;\n  }\n\n  // Text\n  .c-task-block-match--is-text-only {\n    .c-task-block-match__interactions {\n      grid-template-areas: 'staging-area drop-zone-area' 'actions-area actions-area';\n      grid-template-columns: 2fr 4fr;\n    }\n\n    .c-task-block-match__draggable-list {\n      grid-template-columns: repeat(1, 1fr);\n    }\n\n    .c-task-block-match__drop-zone-list {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 16px;\n    }\n  }\n\n  // Image\n  .c-task-block-match--is-image-only {\n    .c-task-block-match__interactions {\n      grid-template-areas: 'staging-area loupe-area' 'drop-zone-area drop-zone-area' 'actions-area actions-area';\n      grid-template-columns: 4fr 2fr;\n    }\n\n    .c-task-block-match__draggable-list {\n      grid-template-columns: repeat(4, 1fr);\n    }\n\n    .c-task-block-match__drop-zone-list {\n      grid-template-columns: repeat(6, 1fr);\n      gap: 32px;\n    }\n\n    .c-task-block-match__loupe-drop-zone {\n      grid-column: 1 / 7;\n    }\n  }\n\n  .c-task-block-match__interactions {\n    display: grid;\n    column-gap: 32px;\n    row-gap: 32px;\n  }\n\n  .c-task-block-match__staging-box {\n    position: relative;\n    display: flex;\n    flex-flow: column nowrap;\n    overflow: visible;\n    grid-area: staging-area;\n  }\n\n  .c-task-block-match__staging-zone {\n    flex: 1 0 auto;\n    background: black;\n    padding: 12px;\n    overflow: hidden;\n  }\n\n  .c-task-block-match__drop-zone-box {\n    display: flex;\n    flex-flow: column nowrap;\n    overflow: hidden;\n    grid-area: drop-zone-area;\n  }\n\n  .c-task-block-match__loupe-box {\n    grid-area: loupe-area;\n  }\n\n  .c-task-block-match__box-title {\n    margin-bottom: 12px;\n  }\n\n  .c-task-block-match__draggable-list {\n    display: grid;\n    gap: 12px;\n  }\n\n  .c-task-block-match__draggable-entry {\n    flex: 0 0 50%;\n    overflow: hidden;\n  }\n\n  .c-task-block-match__drop-zone-list {\n    display: grid;\n  }\n\n  .c-task-block-match__drop-zone-entry {\n    display: flex;\n    overflow: hidden;\n  }\n\n  .c-task-block-match__drop-zone-image {\n    flex: 0 0 100px;\n  }\n\n  .c-task-block-match__drop-zone-title {\n    flex: 0 1 100%;\n  }\n\n  .c-task-block-match__loupe-explanation {\n    margin-bottom: 20px;\n  }\n\n  .c-task-block-match__text {\n    @include type.h6;\n  }\n\n  .c-task-block-match__image {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  .c-task-block-match__actions-box {\n    display: flex;\n    justify-content: flex-end;\n    column-gap: 24px;\n    grid-area: actions-area;\n  }\n</style>\n"],"names":["LOUPE_ID","gameTaskStore","useGameTaskStore","gameTaskStoreRefs","storeToRefs","t","useTranslation","openNotification","useNotification","openModal","closeModal","useModal","bemAdd","bemFacets","useBem","props","parseMarkdown","useMarkdown","store","model","reactive","acc","id","matches","_a","_b","textOnly","computed","item","imageOnly","numSlots","solution","parseSolution","availableItems","filterMatches","rootClasses","MatchFacet","hasAnyImages","hasImagesInDraggableItems","image","hasImagesInDropzoneItems","hasChanges","isEqual","matchElFacets","targetDropZone","filteredDict","pickBy","value","map","_","key","target","str","checkSolution","draggableId","onMatch","dropZoneId","onUnset","e","onRequestSave","onRequestComplete","OverlayContentModalFacet"],"mappings":"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"}