@ecored-sena/base-kit 0.0.1

package/plugin/components/DialogoActividad.vue

@@ -0,0 +1,274 @@
+<template lang="pug">
+.dialogo
+  .dialogo__header.px-3.px-lg-4.py-2.py-lg-3
+    .mb-1
+      slot(name="nombre-actividad") Arrastrar y soltar
+    .h3.mb-0 
+      slot(name="titulo-actividad") Titulo de actividad - Completa la conversación
+  .px-2.py-3.p-lg-4
+    .row.g-0
+      .col-md-8.dialogo__chat(:ref="`chat-${uid}`")
+        .row.g-0.flex-nowrap.dialogo__chat__item.mb-3(v-for="(line, lineIdx) in dialogoComputed")
+          .col-auto.dialogo__chat__item__person
+            img(:src="line.personaje.img")
+            span.text-small(v-html="line.personaje.nombre")
+          .col.dialogo__chat__item__message__container
+            .dialogo__chat__item__message
+              .row.g-0.align-items-center.dialogo__chat__item__message__bubble.dialogo__chat__item__message__bubble--tail
+                .col.dialogo__chat__item__message__text.me-2
+                  .dialogo__chat__item__message__text__eng.h5.mb-0
+                    template(v-for="(phrase, phraseIdx) in line.textoIng")
+                      .d-inline.dialogo__chat__item__message__text__drop(
+                        v-if="phrase === '*'"
+                        @drop.prevent="onDrop(line.id)" 
+                        @dragenter.prevent="onDragEnter(line.id)"
+                        @dragleave.prevent="onDragLeave()"
+                        @dragover.prevent
+                        :key="`phrase-${line.id}-${phraseIdx}`"
+                        :ref="`phrase-${line.id}`"
+                        :class="{'is-active': dropId === line.id}"
+                      )
+                        span.dialogo__chat__item__message__text__drop__response(
+                          v-if="answers[line.id]"
+                          v-html="answers[line.id].palabra"
+                        )
+                        span.dialogo__chat__item__message__text__drop__default(v-else)
+                      span(v-else :key="`phrase-${line.id}-${phraseIdx}`" v-html="phrase")
+                  .dialogo__chat__item__message__text__esp.text-small(
+                    v-if="translations.includes(line.id)"
+                  )
+                    hr.my-2
+                    template(v-for="phrase in line.textoEsp")
+                      .d-inline.dialogo__chat__item__message__text__drop(
+                        v-if="phrase === '*'"
+                      )
+                        span.dialogo__chat__item__message__text__drop__default
+                      span(v-else v-html="phrase")
+                .col-auto.dialogo__chat__item__message__audio
+                  Audio(
+                    :audio="line.audio"
+                    @audio-hover="mostrarIndicadorAudio = false"
+                  )
+              .d-flex.justify-content-end.me-3
+                button.dialogo__chat__item__message__translate-btn.text-small(
+                  @click="toggleTranslate(line.id)"
+                ) Ver traducción
+          .col-1
+      .col-12.d-md-none
+        hr.mb-3.mt-4
+      .col.dialogo__words
+        .dialogo__words__content
+          .dialogo__words__content__explanation 
+            slot(name="descripcion-actividad") Arrastra y suelta las palabras en la conversación
+          .dialogo__words__content__words__container.mt-md-3.mb-3.mb-md-0(v-if="wordsToShow.length")
+            template(v-if="touchScreen")
+              .h5.dialogo__words__word(
+                v-for="word in wordsToShow"
+                :key="`word-${word.id}`"
+                :ref="`word-${word.id}`"
+                @touchstart.prevent="onTouchStart(word.id)" 
+                @touchmove.prevent="onTouchMove($event,word.id)"
+                @touchend.prevent="onTouchEnd($event,word.id)"
+                @touchcancel.prevent="onTouchCancel($event,word.id)"
+                :class="{'grabbing': word.id === dragId}"
+                v-html="word.palabra"
+              )
+            template(v-else)
+              .h5.dialogo__words__word(
+                v-for="word in wordsToShow"
+                :key="`word-${word.id}`"
+                @dragstart="onStartDrag(word.id)"
+                @dragend="onEndDrag()"
+                draggable
+                :class="{'grabbing': word.id === dragId}"
+                v-html="word.palabra"
+              )
+        .dialogo__words__footer
+          .dialogo__score.mt-3(v-if="score")
+            .dialogo__score.p-3.approved(v-if="score === 'approved'")
+              .row.align-items-center
+                .col-2
+                  .dialogo__score__icon
+                    img(src="@/assets/template/green-check.svg")
+                .col
+                  slot.dialogo__score__text.h5.mb-0(name="feedback-correcto") ¡Muy bien!
+
+            .dialogo__score.px-3.py-2.disapproved(v-if="score === 'disapproved'")
+              .row.align-items-center
+                .col-2
+                  .dialogo__score__icon
+                    img(src="@/assets/template/red-x.svg")
+                .col
+                  slot.dialogo__score__text.h5.mb-0(name="feedback-incorrecto") Incorrecto
+
+          .dialogo__words__footer__actions.text-end.mt-3(
+            v-if="Object.values(answers).length === words.length"
+          )
+            button(v-if="score === null" @click="onCheck") Comprobar
+            button(v-else-if="score === 'disapproved'" @click="reset") Prueba otra vez
+
+</template>
+
+<script>
+import Audio from './Audio.vue'
+import dialogoMixins from './dialogoMixins'
+export default {
+  name: 'DialogoActividad',
+  components: {
+    Audio,
+  },
+  mixins: [dialogoMixins],
+  props: {
+    dialogo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data: () => ({
+    uid: Math.floor(Math.random() * 10 ** 10),
+    touchScreen: false,
+    dragId: null,
+    dropId: null,
+    answers: {},
+    translations: [],
+    score: null,
+  }),
+  computed: {
+    dialogoComputed() {
+      return this.dialogoMerge(this.dialogo, true)
+    },
+    words() {
+      return this.shuffle(
+        this.dialogoComputed
+          .map(line => ({ palabra: line.palabra, id: line.id }))
+          .filter(line => line.palabra),
+      )
+    },
+    answerWordsIds() {
+      return Object.values(this.answers).map(answer => answer.dragId)
+    },
+    wordsToShow() {
+      return this.words.filter(word => !this.answerWordsIds.includes(word.id))
+    },
+  },
+  created() {
+    this.touchScreen = 'ontouchstart' in document.documentElement
+  },
+  methods: {
+    // DRAG EVENTS
+    onStartDrag(dragId) {
+      this.dragId = dragId
+    },
+    onEndDrag() {
+      this.dragId = null
+    },
+    onDrop(dropId) {
+      if (!this.dragId) return
+      this.$set(this.answers, dropId, {
+        dragId: this.dragId,
+        dropId: dropId,
+        palabra: this.words.find(wordObj => wordObj.id === this.dragId).palabra,
+      })
+      this.dropId = null
+    },
+    onDragEnter(dropId) {
+      this.dropId = dropId
+    },
+    onDragLeave() {
+      this.dropId = null
+    },
+    // TOUCH EVENTS
+    onTouchStart(dragId) {
+      const dragElm = this.$refs[`word-${dragId}`][0]
+      dragElm.classList.add('touch-drag')
+    },
+    onTouchMove(event, dragId) {
+      const dragElm = this.$refs[`word-${dragId}`][0]
+      const dragElmRect = dragElm.getBoundingClientRect()
+      const touch = event.touches[0]
+      dragElm.style.top = `${touch.clientY - dragElmRect.height / 2}px`
+      dragElm.style.left = `${touch.clientX - dragElmRect.width / 2}px`
+    },
+    onTouchEnd(event, dragId) {
+      if (event.changedTouches.length > 1) {
+        this.resetDragElm(dragId)
+        return
+      }
+      const contElm = this.$refs[`chat-${this.uid}`]
+      const contElmRect = contElm.getBoundingClientRect()
+      const touch = event.changedTouches[0]
+      const isInsideContX =
+        touch.clientX > contElmRect.x &&
+        touch.clientX < contElmRect.x + contElmRect.width
+      const isInsideContY =
+        touch.clientY > contElmRect.y &&
+        touch.clientY < contElmRect.y + contElmRect.height
+
+      if (!isInsideContX || !isInsideContY) {
+        this.resetDragElm(dragId)
+        return
+      }
+
+      let dropId
+      const isTouching = this.words.some(wordObj => {
+        const drop = this.$refs[`phrase-${wordObj.id}`][0]
+        const dropRect = drop.getBoundingClientRect()
+        const extraDrop = 25
+        const isInsideX =
+          touch.clientX > dropRect.x - extraDrop &&
+          touch.clientX < dropRect.x + dropRect.width + extraDrop
+        const isInsideY =
+          touch.clientY > dropRect.y - extraDrop &&
+          touch.clientY < dropRect.y + dropRect.height + extraDrop
+
+        if (isInsideX && isInsideY) {
+          dropId = wordObj.id
+        }
+        return isInsideX && isInsideY
+      })
+      if (isTouching) {
+        this.$set(this.answers, dropId, {
+          dragId: dragId,
+          dropId: dropId,
+          palabra: this.words.find(wordObj => wordObj.id === dragId).palabra,
+        })
+      }
+      this.resetDragElm(dragId)
+    },
+    onTouchCancel(dragId) {
+      this.resetDragElm(dragId)
+    },
+    resetDragElm(id) {
+      const dragElm = this.$refs[`word-${id}`][0]
+      dragElm.classList.remove('touch-drag')
+    },
+    // HELPERS
+    toggleTranslate(id) {
+      if (this.translations.includes(id)) {
+        this.translations = this.translations.filter(tId => tId !== id)
+      } else {
+        this.translations.push(id)
+      }
+    },
+    onCheck() {
+      const finalCheck = Object.values(this.answers).every(
+        answer => answer.dragId === answer.dropId,
+      )
+      this.score = finalCheck ? 'approved' : 'disapproved'
+    },
+    reset() {
+      this.answers = {}
+      this.score = null
+    },
+    shuffle(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1))
+        ;[array[i], array[j]] = [array[j], array[i]]
+      }
+      return array
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/DialogoBurbuja.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+.row.g-0.flex-nowrap.dialogo__chat__item
+  .col-auto.dialogo__chat__item__person(
+    v-if='dialogoItem.personaje && dialogoItem.personaje.img && dialogoItem.personaje.nombre'
+  )
+    img(:src='dialogoItem.personaje.img')
+    span.text-small(v-html='dialogoItem.personaje.nombre')
+  .col.dialogo__chat__item__message__container
+    .dialogo__chat__item__message
+      .row.g-0.align-items-center.dialogo__chat__item__message__bubble(
+        :class='{ "dialogo__chat__item__message__bubble--tail": dialogoItem.personaje && dialogoItem.personaje.img && dialogoItem.personaje.nombre }'
+      )
+        .col.dialogo__chat__item__message__text
+          .dialogo__chat__item__message__text__eng.h5.mb-0
+            div(v-html='dialogoItem.textoIng')
+          .dialogo__chat__item__message__text__esp.text-small(
+            v-if="showTranslation"
+          )
+            hr.my-2
+            div(v-html='dialogoItem.textoEsp')
+        .col-auto.dialogo__chat__item__message__audio.ms-2(v-if='dialogoItem.audio')
+          Audio(:audio='dialogoItem.audio')
+      .d-flex.justify-content-end.me-3
+        button.dialogo__chat__item__message__translate-btn.text-small(
+          @click='showTranslation = !showTranslation'
+        ) {{ showTranslation ? "Ocultar" : "Ver" }} traducción
+  .col-1
+
+</template>
+
+<script>
+export default {
+  name: 'DialogoBurbuja',
+  props: {
+    dialogoItem: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data: () => ({
+    showTranslation: false,
+  }),
+}
+</script>
+
+<style lang="sass" scoped></style>

package/plugin/components/DialogoChat.vue

@@ -0,0 +1,88 @@
+<template lang="pug">
+.dialogoChat.p-5
+  .row.justify-content-center.align-items-center.g-0
+    .col-md-12
+      .row.g-0.flex-nowrap.dialogoChat__chat__item.mb-3(v-for="(line, lineIdx) in dialogoComputed")
+        .col-auto.dialogoChat__chat__item__person
+          img(:src="line.personaje.img")
+          span.text-small(v-html="line.personaje.nombre")
+        .col.dialogoChat__chat__item__message__container
+          .dialogoChat__chat__item__message
+            .row.g-0.align-items-center.dialogoChat__chat__item__message__bubble
+              .col.dialogoChat__chat__item__message__text.me-2
+                .dialogoChat__chat__item__message__text__eng.h5.mb-0
+                  template(v-for="(phrase, phraseIdx) in line.textoIng")
+                    .d-inline.dialogoChat__chat__item__message__text__drop(
+                      v-if="phrase === '*'"
+                    )
+                      span.dialogoChat__chat__item__message__text__drop__response(
+                        v-if="answers[line.id]"
+                        v-html="answers[line.id].palabra"
+                      )
+                      span.dialogoChat__chat__item__message__text__drop__default(v-else)
+                    span(v-else :key="`phrase-${line.id}-${phraseIdx}`" v-html="phrase")
+                .dialogoChat__chat__item__message__text__esp.text-small(
+                  v-if="translations.includes(line.id)"
+                )
+              .col-auto.dialogoChat__chat__item__message__audio
+                Audio(
+                  :audio="line.audio"
+                  @audio-hover="mostrarIndicadorAudio = false"
+                  )
+
+      
+</template>
+
+<script>
+import Audio from './Audio.vue'
+
+const dialogo = {
+  type: Object,
+  default: () => ({}),
+}
+
+export default {
+  name: 'Chat',
+  components: {
+    Audio,
+  },
+  props: {
+    dialogo,
+  },
+  data: () => ({
+    uid: Math.floor(Math.random() * 10 ** 10),
+    touchScreen: false,
+    dragId: null,
+    dropId: null,
+    answers: {},
+    translations: [],
+    score: null,
+  }),
+  computed: {
+    dialogoComputed() {
+      if (!this.dialogo.dialogo) return []
+      return this.dialogo.dialogo.map((line, idx) => ({
+        ...line,
+        id: this.uid + idx + 1,
+        textoIng: this.splitPhrase(line.textoIng),
+        personaje: this.dialogo.personajes.find(
+          personaje => personaje.nombre === line.personaje,
+        ),
+      }))
+    },
+  },
+
+  methods: {
+    // HELPERS
+    splitPhrase(phrase) {
+      return phrase
+        .replace(/^\s+|\s+$/g, '&nbsp;')
+        .replace('***', '___*___')
+        .split('___')
+        .filter(Boolean)
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/Footer.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+footer.container.footer.tarjeta.p-3.px-sm-5.py-sm-4(:class="[allRound && 'footer__all-round']")
+  .row.align-items-center.justify-content-center
+    .col-auto.mb-2.mb-sm-0
+      img(src="@/assets/bullets/cc.svg")
+    .col-12.col-sm
+      p.mb-0.text-small Este material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial y las obras derivadas tienen que estar bajo los mismos términos de la licencia que el trabajo original.
+
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    allRound: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    versiones() {
+      return {
+        base: this.$package.version,
+        pkg: this.$package.dependencies['ecored-base-pkg'],
+      }
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.footer
+  background-color: $color-sistema-d
+  border-bottom-right-radius: 0 !important
+  border-bottom-left-radius:  0 !important
+  &__all-round
+    border-bottom-right-radius: 20px !important
+    border-bottom-left-radius:  20px !important
+  p
+    color: $color-sistema-b
+    line-height: 1.2em
+</style>

package/plugin/components/GlobalComponents.js

@@ -0,0 +1,39 @@
+export { default as AsideMenu } from './plantilla/AsideMenu.vue'
+export { default as Header } from './plantilla/Header.vue'
+export { default as BarraAvance } from './plantilla/BarraAvance.vue'
+export { default as BannerInterno } from './plantilla/BannerInterno.vue'
+export { default as Accesibilidad } from './plantilla/Accesibilidad.vue'
+export { default as AccordionRED } from './AccordionRED.vue'
+export { default as TimeLineRED } from './TimeLineRED.vue'
+export { default as CarouselRED } from './CarouselRED.vue'
+export { default as Separador } from './Separador.vue'
+export { default as Footer } from './Footer.vue'
+export { default as BannerHero } from './BannerHero.vue'
+export { default as Inicio } from './Inicio.vue'
+export { default as ScrollHorizontal } from './ScrollHorizontal.vue'
+export { default as TabsC } from './TabsC.vue'
+export { default as TabsB } from './TabsB.vue'
+export { default as TabsA } from './TabsA.vue'
+export { default as CarouselCard } from './CarouselCard.vue'
+export { default as AcordionA } from './AcordionA.vue'
+export { default as ImagenInfografica } from './ImagenInfografica.vue'
+export { default as ImagenInfograficaB } from './ImagenInfograficaB.vue'
+export { default as Audio } from './Audio.vue'
+export { default as TarjetaAudio } from './TarjetaAudio.vue'
+export { default as SlyderA } from './SlyderA.vue'
+export { default as PasosA } from './PasosA.vue'
+export { default as PasosB } from './PasosB.vue'
+export { default as LineaTiempoA } from './LineaTiempoA.vue'
+export { default as LineaTiempoB } from './LineaTiempoB.vue'
+export { default as LineaTiempoC } from './LineaTiempoC.vue'
+export { default as LineaTiempoD } from './LineaTiempoD.vue'
+export { default as LineaTiempoE } from './LineaTiempoE.vue'
+export { default as SlyderF } from './SlyderF.vue'
+export { default as SlyderB } from './SlyderB.vue'
+export { default as SlyderC } from './SlyderC.vue'
+export { default as SlyderD } from './SlyderD.vue'
+export { default as SlyderE } from './SlyderE.vue'
+export { default as ModalA } from './ModalA.vue'
+export { default as Dialogo } from './Dialogo.vue'
+export { default as DialogoActividad } from './DialogoActividad.vue'
+export { default as DialogoBurbuja } from './DialogoBurbuja.vue'

package/plugin/components/Glosario.vue

@@ -0,0 +1,100 @@
+<template lang="pug">
+.curso-main-container.glosario
+  BannerInterno(icono="fas fa-atlas" titulo="Glosario")
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5.mb-5
+    .glosario__letra-item.mb-2(v-for="letra in orderedData" :key="'letra-'+letra.letra")
+      .glosario__letra-item__letra.me-4
+        .glosario__letra-item__letra__icono
+          span {{letra.letra}}
+      .glosario__letra-item__texto
+        p.mb-3(v-for="termino in letra.terminos")
+          strong
+            i.lista-ul__vineta
+          strong(v-html="termino.terminoHtml || termino.termino") 
+          strong : 
+          span(v-html="termino.significado")
+</template>
+
+<script>
+import plantillaMixins from './plantillaMixins'
+export default {
+  name: 'Glosario',
+  mixins: [plantillaMixins],
+  computed: {
+    glosarioData() {
+      return this.$config.glosario
+    },
+    orderedData() {
+      const newGlosarioData = [...this.glosarioData]
+      newGlosarioData.forEach(element => {
+        element.significado =
+          element.significado.charAt(0).toLowerCase() +
+          element.significado.slice(1)
+      })
+
+      const sortedData = [...newGlosarioData].reduce((r, e) => {
+        const letra = this.quitarAcentos(e.termino.toLowerCase())[0]
+        if (!r[letra]) r[letra] = { letra, terminos: [e] }
+        else r[letra].terminos.push(e)
+        return r
+      }, {})
+
+      const soloLetras = Object.keys(sortedData).sort()
+      const newSortedData = []
+
+      soloLetras.forEach(element => {
+        const letraObj = sortedData[element]
+        let terminos = letraObj.terminos
+
+        if (terminos.length > 1) {
+          const terminosOrdenados = []
+          const soloTerminos = letraObj.terminos
+            .map(termObj => termObj.termino)
+            .sort((a, b) => {
+              const an = this.quitarAcentos(a).toLowerCase()
+              const bn = this.quitarAcentos(b).toLowerCase()
+              if (an < bn) return -1
+              if (bn < an) return 1
+              return 0
+            })
+          soloTerminos.forEach(term => {
+            terminosOrdenados.push(
+              terminos.find(termino => termino.termino === term),
+            )
+          })
+          terminos = terminosOrdenados
+        }
+        newSortedData.push({
+          letra: letraObj.letra.toUpperCase(),
+          terminos: terminos,
+        })
+      })
+      return newSortedData
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.glosario
+  &__letra-item
+    display: flex
+    &__texto
+      padding-top: 5px
+    &__letra
+      &__icono
+        width: 32px
+        height: 32px
+        position: relative
+        line-height: 1em
+        border-radius: 50%
+        background-color: $color-sistema-d
+
+        span
+          position: absolute
+          left: 50%
+          top: 50%
+          transform: translate(-50%,-50%)
+          font-size: 1.1em
+          font-weight: $base-black-font-weight
+</style>

package/plugin/components/ImagenInfografica.vue

@@ -0,0 +1,100 @@
+<template lang="pug">
+.img-infografica
+  .img-infografica__img(:ref="'img-ref-'+mainId")
+    slot(name="imagen")
+  .img-infografica__content(v-if="elements.length")
+    .img-infografica__item(
+        v-for="(item, index) in elements"
+        :key="'img-infografica-btn-'+item.id"
+        :style="[{top: item.y},{left: item.x}]"
+        @mouseover="selected = item.id"
+        @mouseleave="selected = 0"
+      )
+      .img-infografica__item__dot
+      .img-infografica__item__numero(v-if="item.hasOwnProperty('numero')") {{item.numero}}
+    .img-infografica__card(
+      v-for="item in elements"
+      :key="'img-infografica-card-'+item.id"
+      :ref="'card-ref-'+item.id"
+      :style="getCardCords(item.id)"
+      :class="{'img-infografica__card--selected' : selected === item.id}"
+      @mouseover="selected = item.id"
+      @mouseleave="selected = 0"
+      v-child="item.elm"
+    )
+    .img-infografica__indicador(
+      v-if="firstElement && showIndicator"
+      :style="[{top: firstElement.y},{left: firstElement.x}]"
+    )
+      .indicador--hover
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'ImagenInfografica',
+  mixins: [componentSlotMixins],
+  data: () => ({
+    firstSelection: false,
+    showIndicator: true,
+  }),
+  computed: {
+    firstElement() {
+      return this.elements.length && this.elements[0]
+    },
+  },
+  watch: {
+    selected() {
+      if (this.showIndicator) {
+        this.showIndicator = false
+      }
+    },
+  },
+  methods: {
+    getCardCords(cardId) {
+      const ref = 'card-ref-' + cardId
+      if (!(ref in this.$refs)) {
+        return [{ top: 0 }, { left: 0 }]
+      }
+
+      const currentCard = this.elements.find(card => card.id === cardId)
+      const imgElement = this.$refs['img-ref-' + this.mainId]
+      const imgObj = {
+        w: imgElement.clientWidth,
+        h: imgElement.clientHeight,
+      }
+      const cardElement = this.$refs[ref][0]
+      const cardObj = {
+        x: parseInt(currentCard.x, 10),
+        y: parseInt(currentCard.y, 10),
+        w: cardElement.clientWidth,
+        h: cardElement.clientHeight,
+      }
+
+      const cardPosY = (cardObj.y / 100) * imgObj.h
+      const cardPosX = (cardObj.x / 100) * imgObj.w
+
+      const finalObj = []
+
+      if (cardPosY + cardObj.h > imgObj.h) {
+        finalObj.push({ bottom: 0 })
+      } else {
+        finalObj.push({ top: currentCard.y })
+      }
+
+      if (cardPosX + cardObj.w > imgObj.w) {
+        finalObj.push({ right: 0 })
+      } else {
+        finalObj.push({ left: currentCard.x })
+      }
+
+      return finalObj
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>