{"version":3,"sources":["webpack:///./node_modules/core-js/modules/es.array.find.js","webpack:///./src/views/Introduction.vue?9563","webpack:///./src/components/ActorDraggable.vue?31ff","webpack:///./src/views/Introduction.vue?0d87","webpack:///./src/components/ActorDraggable.vue?afa0","webpack:///src/components/ActorDraggable.vue","webpack:///./src/components/ActorDraggable.vue?6361","webpack:///./src/components/ActorDraggable.vue","webpack:///src/views/Introduction.vue","webpack:///./src/views/Introduction.vue?b3ce","webpack:///./src/views/Introduction.vue"],"names":["$","$find","find","addToUnscopables","arrayMethodUsesToLength","FIND","SKIPS_HOLES","USES_TO_LENGTH","Array","target","proto","forced","callbackfn","this","arguments","length","undefined","render","_vm","_h","$createElement","_c","_self","staticClass","_l","$t","actor","index","key","class","actorPressed","id","activeActor","actorsDropped","includes","attrs","label","icon","on","$event","setActiveActor","popupOpened","closePopup","_v","_s","domProps","buttons","staticRenderFns","$emit","component"],"mappings":"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","file":"js/chunk-1da1d13e.b24ccefb.js","sourcesContent":["'use strict';\nvar $ = require('../internals/export');\nvar $find = require('../internals/array-iteration').find;\nvar addToUnscopables = require('../internals/add-to-unscopables');\nvar arrayMethodUsesToLength = require('../internals/array-method-uses-to-length');\n\nvar FIND = 'find';\nvar SKIPS_HOLES = true;\n\nvar USES_TO_LENGTH = arrayMethodUsesToLength(FIND);\n\n// Shouldn't skip holes\nif (FIND in []) Array(1)[FIND](function () { SKIPS_HOLES = false; });\n\n// `Array.prototype.find` method\n// https://tc39.github.io/ecma262/#sec-array.prototype.find\n$({ target: 'Array', proto: true, forced: SKIPS_HOLES || !USES_TO_LENGTH }, {\n  find: function find(callbackfn /* , that = undefined */) {\n    return $find(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);\n  }\n});\n\n// https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables(FIND);\n","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Introduction.vue?vue&type=style&index=0&lang=scss&\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ActorDraggable.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"view-intro\"},[_c('div',{staticClass:\"introduction\"},[_c('aside',{staticClass:\"introduction__aside\"},[_c('div',{staticClass:\"draggables\"},_vm._l((_vm.$t('actors')),function(actor,index){return _c('div',{key:index,staticClass:\"draggable__item\"},[_c('ActorDraggable',{class:{\n              'pressed': _vm.actorPressed === actor.id,\n              'active': _vm.activeActor === actor.id,\n              'dropped': _vm.actorsDropped.includes(actor.id)\n            },attrs:{\"label\":actor.label,\"target\":actor.id,\"icon\":actor.icon},on:{\"click\":function($event){return _vm.setActiveActor(actor)}}})],1)}),0)]),_c('section',{staticClass:\"introduction__section\"},[_c('div',{staticClass:\"slots\"},[_c('div',{staticClass:\"slots__boxes\"},_vm._l((_vm.actorsShuffled),function(actor){return _c('div',{key:actor.id,staticClass:\"slots__box area\",attrs:{\"data-id\":actor.id}},[_c('Icons',{attrs:{\"icon\":actor.icon}})],1)}),0),_c('div',{staticClass:\"slots__description\",class:{ 'opened': _vm.popupOpened }},[_c('button',{staticClass:\"close\",on:{\"click\":_vm.closePopup}},[_c('Icons',{attrs:{\"icon\":\"close\"}})],1),(_vm.activeActor !== null)?_c('p',[_vm._v(_vm._s(_vm.$t((\"actors[\" + _vm.activeActor + \"].description\"))))]):_c('p',{domProps:{\"innerHTML\":_vm._s(_vm.$t('introduction'))}})])])]),_c('Nav',{attrs:{\"buttons\":_vm.buttons}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:\"draggable draggable--actor\",attrs:{\"data-target\":_vm.target}},[_c('div',{staticClass:\"draggable__infos\",on:{\"click\":function($event){return _vm.$emit('click')}}},[_c('span',[_vm._v(\"?\")])]),_c('div',{staticClass:\"draggable__icon\"},[_c('Icons',{attrs:{\"icon\":_vm.icon}})],1),_c('div',{staticClass:\"draggable__label\"},[_c('span',[_vm._v(_vm._s(_vm.label))])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <button class=\"draggable draggable--actor\" :data-target=\"target\">\n    <div class=\"draggable__infos\" @click=\"$emit('click')\">\n      <span>?</span>\n    </div>\n    <div class=\"draggable__icon\">\n      <Icons :icon=\"icon\"/>\n    </div>\n    <div class=\"draggable__label\">\n      <span>{{ label }}</span>\n    </div>\n  </button>\n</template>\n\n<script>\n  import Icons from '@/components/partials/Icons'\n\n  export default {\n    name: 'ActorDraggable',\n    components: {\n      Icons\n    },\n    props: {\n      label: {\n        type: String,\n        required: true\n      },\n      icon: {\n        type: String,\n        required: true\n      },\n      target: {\n        type: Number,\n        required: true\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .draggable--actor {\n    position: relative;\n    text-align: center;\n\n    .draggable {\n      &__infos {\n        position: absolute;\n        top: 0px;\n        right: 5px;\n        transform: scale(0, 0);\n        transition: transform 0.3s $easeInOutExpo;\n\n        font-size: 20px;\n        font-weight: 700;\n\n        cursor: pointer;\n        z-index: 2;\n\n        &::before {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 30px;\n          height: 30px;\n          transform: translate(-50%, -50%);\n          border-radius: 100%;\n          transition: background-color 0.3s $easeInOutExpo;\n\n          background-color: $red;\n\n          z-index: 1;\n        }\n\n        span {\n          position: relative;\n          transition: color 0.3s $easeInOutExpo;\n\n          color: $white;\n\n          z-index: 2;\n        }\n      }\n      &__icon {\n        position: relative;\n        display: block;\n        width: 90px;\n        height: 90px;\n        margin: 0 auto;\n        transition: color 0.3s $easeInOutExpo;\n\n        color: $red;\n\n        &::before {\n          content: '';\n          @include fullcover;\n          border-radius: 100%;\n          transition: transform 0.3s $easeInOutExpo, background-color 0.3s $easeInOutExpo;\n\n          background-color: $white;\n        }\n\n        .icon {\n          display: block;\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          transition: transform 0.3s $easeInOutExpo;\n\n          font-size: 50px;\n        }\n\n        svg {\n          display: block;\n        }\n      }\n      &__label {\n        position: absolute;\n        bottom: -35px;\n        left: 50%;\n        width: 200px;\n        transform: translateX(-50%);\n        transition: transform 0.3s $easeInOutExpo;\n\n        text-transform: uppercase;\n        color: $dark-gray;\n        font-weight: 600;\n        font-size: 18px;\n\n        span {\n          position: relative;\n          padding: 2px 5px;\n          transition: color 0.3s $easeInOutExpo;\n\n          &::before {\n            content: '';\n            @include fullcover;\n            transform: scaleX(0);\n            transform-origin: 100% 0;\n            transition: transform 0.5s $easeInOutExpo;\n\n            background-color: $white;\n\n            z-index: -1;\n          }\n        }\n      }\n    }\n    &.pressed {\n      .draggable {\n        &__label {\n          transform: translate(-50%, -5px) scale(0.8, 0.8);\n        }\n        &__icon {\n          &::before {\n            transform: scale(0.9, 0.9);\n          }\n          .icon {\n            transform: translate(-50%, -50%) scale(0.7, 0.7);\n          }\n        }\n      }\n    }\n    &.dropped {\n      .draggable {\n        &__infos {\n          transform: scale(1, 1);\n        }\n        &__icon {\n          color: $blue;\n        }\n      }\n    }\n    &.active {\n      .draggable {\n        &__infos {\n          transform: scale(1, 1);\n\n          span {\n            color: $red;\n          }\n          &::before {\n            background-color: $white;\n          }\n        }\n        &__label {\n          span {\n            color: $red;\n\n            &::before {\n              transform-origin: 0 0;\n              transform: scaleX(1);\n            }\n          }\n        }\n        &__icon {\n          color: $blue;\n        }\n      }\n    }\n\n    @include mq($and: '(orientation: landscape)', $until: desktop) {\n      .draggable {\n        &__label {\n          bottom: -25px;\n\n          font-size: 14px;\n        }\n        &__icon {\n          width: 65px;\n          height: 65px;\n\n          .icon {\n            font-size: 35px;\n          }\n        }\n      }\n    }\n\n    @include mq($and: '(max-height: 350px)') {\n      .draggable {\n        &__infos {\n          top: -5px;\n          right: 0px;\n\n          &::before {\n            width: 25px;\n            height: 25px;\n          }\n        }\n        &__label {\n          bottom: -20px;\n\n          font-size: 12px;\n        }\n        &__icon {\n          width: 45px;\n          height: 45px;\n\n          .icon {\n            font-size: 25px;\n          }\n        }\n      }\n    }\n  }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ActorDraggable.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ActorDraggable.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ActorDraggable.vue?vue&type=template&id=60e3a511&\"\nimport script from \"./ActorDraggable.vue?vue&type=script&lang=js&\"\nexport * from \"./ActorDraggable.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ActorDraggable.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div class=\"view-intro\">\n    <div class=\"introduction\">\n      <aside class=\"introduction__aside\">\n        <div class=\"draggables\">\n          <div class=\"draggable__item\" v-for=\"(actor, index) in $t('actors')\" :key=\"index\">\n            <ActorDraggable\n              :label=\"actor.label\"\n              :target=\"actor.id\"\n              :icon=\"actor.icon\"\n              :class=\"{\n                'pressed': actorPressed === actor.id,\n                'active': activeActor === actor.id,\n                'dropped': actorsDropped.includes(actor.id)\n              }\"\n              @click=\"setActiveActor(actor)\"\n            />\n          </div>\n        </div>\n      </aside>\n      <section class=\"introduction__section\">\n        <div class=\"slots\">\n          <div class=\"slots__boxes\">\n            <div\n              class=\"slots__box area\"\n              v-for=\"actor in actorsShuffled\"\n              :key=\"actor.id\"\n              :data-id=\"actor.id\"\n            >\n              <Icons :icon=\"actor.icon\"/>\n            </div>\n          </div>\n          <div class=\"slots__description\" :class=\"{ 'opened': popupOpened }\">\n            <button class=\"close\" @click=\"closePopup\">\n              <Icons icon=\"close\"/>\n            </button>\n            <p v-if=\"activeActor !== null\">{{ $t(`actors[${activeActor}].description`)}}</p>\n            <p v-else v-html=\"$t('introduction')\"></p>\n          </div>\n        </div>\n      </section>\n      <Nav :buttons=\"buttons\"/>\n    </div>\n  </div>\n</template>\n\n<script>\n  import Nav from '@/components/partials/Nav'\n  import Icons from '@/components/partials/Icons'\n  import ActorDraggable from '@/components/ActorDraggable'\n  import Mixin from '@/mixins'\n\n  import gsap from 'gsap'\n  import Draggable from 'gsap/Draggable'\n  gsap.registerPlugin(Draggable)\n\n  const THRESHOLD = '30%'\n  let draggables = null\n  let areas = null\n  let boxes = null\n  let raf = null\n  let timeout = null\n\n  export default {\n    name: 'Introduction',\n    components: {\n      Nav,\n      Icons,\n      ActorDraggable\n    },\n    mixins: [Mixin],\n    data() {\n      return {\n        buttons: [{\n          label: this.$t(\"next\"),\n          to: 'game'\n        }],\n        actorPressed: null,\n        activeActor: null,\n        popupOpened: false,\n        actorsDropped: []\n      }\n    },\n    methods: {\n      setActiveActor(actor) {\n        this.activeActor = actor.id\n        this.openPopup()\n        this.playVocal(actor.sound)\n      },\n      openPopup() {\n        this.popupOpened = true\n      },\n      closePopup() {\n        this.stopVocals()\n        this.activeActor = null\n        this.popupOpened = false\n      },\n      initDraggables() {\n        const _this = this\n\n        draggables.forEach((elm, index) => {\n          Draggable.create(elm, {\n            bounds: document.getElementsByClassName('introduction'),\n            throwProps: false,\n            edgeResistance: 1,\n            allowContextMenu: true,\n            onPress: function() {\n              _this.actorPressed = index\n            },\n            onRelease: function() {\n              _this.actorPressed = -1\n            },\n            onDrag: function() {\n              let i = boxes.length;\n\n              while (--i > -1) {\n                if (this.hitTest(boxes[i], THRESHOLD)) {\n                  boxes[i].classList.add('highlight')\n                } else {\n                  boxes[i].classList.remove('highlight')\n                }\n              }\n            },\n            onDragEnd: function() {\n              const targetID = this.target.dataset.target\n              let elmIndex = null\n\n              const hit = boxes.some((elm, i) => {\n                const elementID = elm.dataset.id\n\n                if (this.hitTest(elm, THRESHOLD)) {\n                  elmIndex = i\n                  if (elementID === targetID) return true\n                }\n              })\n\n              if (hit) {\n                const box = boxes[elmIndex]\n                const areaBounds = box.getBoundingClientRect()\n                const targetBounds = this.target.getBoundingClientRect()\n                const diffX = areaBounds.left - targetBounds.left\n                const diffY = areaBounds.top - targetBounds.top\n\n                this.disable()\n                _this.playFx('drop')\n\n                gsap.to(this.target, {\n                  x: `+=${diffX}`,\n                  y: `+=${diffY - 1}`,\n                  duration: 0.3,\n                  ease: 'power3.out',\n                  onComplete: () => {\n                    _this.actorsDropped.splice(1, 0, index)\n                    gsap.set(this.target, {\n                      clearProps: 'zIndex'\n                    })\n                  }\n                })\n\n                boxes.splice(elmIndex, 1)\n              } else {\n                if (elmIndex !== null) {\n                  _this.playFx('error')\n                  boxes[elmIndex].classList.remove('highlight')\n                }\n\n                gsap.to(this.target, {\n                  x: 0,\n                  y: 0,\n                  duration: 0.5,\n                  ease: 'power3.out'\n                })\n              }\n            }\n          })\n        })\n      },\n      onResize() {\n        if (this.actorsDropped.length > 0) {\n          if (raf) window.cancelAnimationFrame(raf)\n          raf = window.requestAnimationFrame(() => {\n            this.actorsDropped.forEach(id => {\n              const draggable = draggables[id]\n              const areaLinked = areas.find(area => area.dataset.id == id)\n              const areaBounds = areaLinked.getBoundingClientRect()\n              const actorBounds = draggable.getBoundingClientRect()\n              const diffX = areaBounds.left - actorBounds.left\n              const diffY = areaBounds.top - actorBounds.top\n\n              gsap.set(draggable, {\n                x: `+=${diffX}`,\n                y: `+=${diffY - 1}`,\n              })\n            })\n          })\n        }\n      }\n    },\n    computed: {\n      actorsShuffled() {\n        const actors = Array.from(this.$t('actors'))\n        return this.shuffle(actors)\n      }\n    },\n    mounted() {\n      draggables = Array.from(document.getElementsByClassName('draggable--actor'))\n      areas = Array.from(document.getElementsByClassName('area'))\n      boxes = Object.assign([], areas)\n\n      timeout = setTimeout(() => {\n        this.openPopup()\n        this.playVocal('intro')\n        this.initDraggables()\n      }, 1500)\n\n      window.addEventListener('resize', this.onResize)\n    },\n    beforeDestroy() {\n      window.removeEventListener('resize', this.onResize)\n      clearTimeout(timeout)\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .view-intro {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    flex: 1 1 auto;\n    overflow: hidden;\n\n    background-color: $gray;\n\n    .nav {\n      .button__label {\n        font-size: 12px;\n      }\n    }\n\n    .introduction {\n      display: flex;\n      align-items: center;\n      height: 100%;\n\n      &__aside {\n        position: relative;\n        flex: 0 0 auto;\n        width: 350px;\n        margin-left: 20px;\n\n        text-align: center;\n\n        z-index: 2;\n      }\n      &__section {\n        position: relative;\n        flex: 1 1 auto;\n      }\n    }\n\n    .draggable {\n      margin-bottom: 60px;\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    .slots {\n      position: relative;\n      max-width: 600px;\n      margin: 0 auto;\n\n      &__boxes {\n        position: relative;\n        height: 350px;\n        margin-left: auto;\n        margin-right: auto;\n        margin-bottom: 80px;\n      }\n      &__box {\n        position: absolute;\n        width: 90px;\n        height: 90px;\n        border-radius: 100%;\n        transition: background-color 0.3s $easeInOutExpo;\n\n        background-color: $red;\n\n        &:first-child {\n          top: 0;\n          left: 0;\n        }\n        &:nth-child(2) {\n          top: 0;\n          right: 0;\n        }\n        &:nth-child(3) {\n          right: 0;\n          bottom: 0;\n        }\n        &:nth-child(4) {\n          bottom: 0;\n          left: 0;\n        }\n\n        .icon {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n\n          font-size: 50px;\n          color: rgba(#570C17, 0.5);\n        }\n\n        svg {\n          display: block;\n        }\n\n        &.highlight {\n          background-color: $white;\n        }\n      }\n      &__description {\n        position: absolute;\n        top: 100%;\n        left: 50%;\n        padding-top: 40px;\n        transform: translateX(-50%);\n        max-width: 750px;\n        min-width: 600px;\n\n        color: $white;\n        font-size: 16px;\n        text-align: center;\n        line-height: 1.3;\n\n        .close {\n          display: none;\n        }\n      }\n    }\n\n    // Queries\n    @include mq($and: '(max-height: 800px)') {\n      .introduction {\n        &__aside {\n          min-width: auto;\n          width: 300px;\n        }\n        &__description {\n          font-size: 15px;\n        }\n      }\n\n      .draggables {\n        display: flex;\n        flex-wrap: wrap;\n\n        .draggable__item {\n          flex: 1 1 auto;\n          width: 50%;\n        }\n      }\n\n      .slots {\n        &__boxes {\n          height: 270px;\n        }\n      }\n    }\n\n    @include mq($until: wide) {\n      .slots {\n        max-width: 500px;\n      }\n    }\n\n    @include mq($and: '(orientation: landscape)', $until: desktop) {\n      .introduction {\n        padding-left: 10px;\n        padding-right: 10px;\n        padding-bottom: 0;\n\n        &__aside {\n          width: 260px;\n          margin-left: 0;\n        }\n      }\n\n      .draggable {\n        margin-bottom: 40px;\n      }\n\n      .slots {\n        max-width: 250px;\n\n        &__boxes {\n          height: 190px;\n          margin: 0 auto;\n        }\n        &__box {\n          width: 65px;\n          height: 65px;\n\n          .icon {\n            font-size: 35px;\n          }\n        }\n        &__description {\n          position: fixed;\n          top: 30px;\n          right: 30px;\n          bottom: 30px;\n          left: -9999px;\n          padding: 30px;\n          max-width: 100%;\n          min-width: auto;\n          transform: scale(0, 0);\n          opacity: 0;\n          transition: left 0s 0.31s, transform 0.3s 0s $easeInOutExpo, opacity 0.3s 0s $easeInOutExpo;\n\n          background-color: $red;\n\n          z-index: 60;\n\n          .close {\n            display: block;\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            padding: 0;\n\n            font-size: 40px;\n\n            .icon {\n              display: block;\n            }\n            svg {\n              display: block;\n              fill: none;\n            }\n          }\n\n          p {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 100%;\n            margin: 0;\n            padding: 30px;\n          }\n\n          &.opened {\n            transition: left 0s 0s, transform 0.3s 0.01s $easeInOutExpo, opacity 0.3s 0.01s $easeInOutExpo;\n            left: 30px;\n            opacity: 1;\n            transform: scale(1, 1);\n          }\n        }\n      }\n    }\n\n    @include mq($and: '(max-height: 350px)') {\n      .slots {\n        &__boxes {\n          height: 150px;\n          margin: 0 auto;\n        }\n        &__box {\n          width: 45px;\n          height: 45px;\n\n          .icon {\n            font-size: 25px;\n          }\n        }\n      }\n    }\n  }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Introduction.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Introduction.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Introduction.vue?vue&type=template&id=d88bce76&\"\nimport script from \"./Introduction.vue?vue&type=script&lang=js&\"\nexport * from \"./Introduction.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Introduction.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}