{"version":3,"file":"main.8bb53378.js","sources":["../../src/assets/images/hot.png","../../src/assets/images/sauce.png","../../src/components/Cutscenes.vue","../../src/components/NftItemDemo.vue","../../src/view/Nft.vue","../../src/main.ts"],"sourcesContent":["export default \"__VITE_ASSET__7b11807c__\"","export default \"__VITE_ASSET__302ddbfc__\"","\n<template>\n    <div class=\"cutscenes-mask\">\n        <div class=\"cutscenes\">\n            <div class=\"title-box title-box-m\">\n                <div\n                    class=\"title title-m\"\n                    v-for=\"i in array\"\n                    v-bind:key=\"i\"\n                >\n                    <p\n                        class=\"item item-m\"\n                    >\n                        <!-- HOT -->\n                        <img v-bind:src=\"ImgHot\" alt=\"\">\n                    </p>\n                </div>\n            </div>\n            <div class=\"title-box\">\n                <div\n                    class=\"title title-s\"\n                    v-for=\"i in array\"\n                    v-bind:key=\"i\"\n                >\n                    <p class=\"item item-s\">\n                        <!-- SAUCE -->\n                        <img v-bind:src=\"ImgSauce\" alt=\"\">\n\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { defineProps } from 'vue';\nimport ImgHot from '@/assets/images/hot.png';\nimport ImgSauce from '@/assets/images/sauce.png';\nconst array = [1, 2, 3, 4, 5, ];\nconst props = defineProps({\n  isShow: {\n    type: Boolean,\n    default: () => false,\n  },\n});\n\n</script>\n\n<style lang=\"scss\">\n@import '~@/scss/foundation/config';\n$bg: #008d5b;\n$text1: #ff0000;\n$text2: #fdfefe;\n$text-delay: 500ms;\n\n@mixin bounceration-down($name, $start, $end, $pos) {\n    @keyframes bounceration-down-#{$name} {\n        0% {\n            transform: translateY(-130%);\n        }\n        #{$start}% {\n            transform: translateY($pos);\n            // opacity: 1;\n        }\n        #{$end}% {\n            transform: translateY($pos);\n            // opacity: 1;\n        }\n        100% {\n            transform: translateY(-130%);\n            // opacity: 0;\n        }\n    }\n}\n@mixin bounceration-up($name, $start, $end, $pos) {\n    @keyframes bounceration-up-#{$name} {\n        0% {\n            transform: translateY(100%);\n        }\n        #{$start}% {\n            transform: translateY($pos);\n            // opacity: 1;\n        }\n        #{$end}% {\n            transform: translateY($pos);\n            // opacity: 1;\n        }\n        100% {\n            transform: translateY(100%);\n            // opacity: 0;\n        }\n    }\n}\n@include bounceration-down(1, 40, 90, 0%);\n@include bounceration-down(2, 50, 85, -20%);\n@include bounceration-down(3, 60, 80, -25%);\n@include bounceration-down(4, 70, 75, -45%);\n@include bounceration-down(5, 80, 85, -85%);\n// @include bounceration-down(5, 30, 50, 100%);\n@include bounceration-up(1, 40, 90, 0%);\n@include bounceration-up(2, 50, 85, 20%);\n@include bounceration-up(3, 60, 80, 35%);\n@include bounceration-up(4, 70, 75, 48%);\n@include bounceration-up(5, 75, 85, 75%);\n@keyframes expand-y-in {\n    0% {\n        height: 0;\n        opacity: .1;\n    }\n    20% {\n        height: 10%;\n        opacity: .8;\n    }\n    30% {\n        height: 100%;\n        opacity: 1;\n    }\n\n    90% {\n        height: 100%;\n        opacity: 1;\n    }\n    100% {\n        height: 0;\n        opacity: .1;\n    }\n}\n\n.cutscenes {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: $bg;\n    top: 50%;\n    transform: translateY(-50%);\n    animation: expand-y-in 1900ms ease;\n    height: 0;\n    opacity: 0;\n    .title-box {\n        position: relative;\n        overflow: hidden;\n        height: 50%;\n    }\n    .title {\n        position: relative;\n        width: 100%;\n        height: 25%;\n        overflow: hidden;\n    }\n    .item {\n        // background: $bg;\n        font-weight: bold;\n        padding: 1% 0;\n        line-height: .7;\n        position: absolute;\n        width: 100%;\n        animation-delay: $text-delay!important;\n\n        img {\n            width: 70%;\n        }\n    }\n\n    .item-m {\n        font-size: 10.3rem;\n        color: $text1;\n        bottom: 0;\n        transform: translateY(100%);\n    }\n    .title {\n        margin: 3px 0;\n    }\n    .title.title-m:nth-of-type(1) {\n        height: 20%;\n        & > .item-m {\n            animation: bounceration-up-5 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-m:nth-of-type(2) {\n        height: 16%;\n        & > .item-m {\n            animation: bounceration-up-4 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-m:nth-of-type(3) {\n        height: 18%;\n        .item-m {\n            animation: bounceration-up-3 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-m:nth-of-type(4) {\n        height: 20%;\n        .item-m {\n            animation: bounceration-up-2 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-m:nth-of-type(5) {\n        height: 22%;\n        .item-m {\n            // transform: translateY(70%);\n            animation: bounceration-up-1 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n\n    .item-s {\n        font-size: 6rem;\n        color: $text2;\n        transform: translateY(-130%);\n    }\n    .title.title-s:nth-of-type(1) {\n        // animation: bounceration-down-5 1200ms ease-out;\n        height: 28%;\n        & > .item-s {\n            // transform: translateY(-80%);\n            animation: bounceration-down-1 1200ms ease-out;\n        }\n    }\n    .title.title-s:nth-of-type(2) {\n        height: 17%;\n        & > .item-s {\n            animation: bounceration-down-2 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-s:nth-of-type(3) {\n        height: 13%;\n        .item-s {\n            animation: bounceration-down-3 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-s:nth-of-type(4) {\n        height: 14%;\n        .item-s {\n            animation: bounceration-down-4 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-s:nth-of-type(5) {\n        height: 10%;\n        .item-s {\n            animation: bounceration-down-5 1200ms ease-out;\n            // animation-delay: .2s;\n        }\n    }\n    .title.title-s {\n        // position: absolute;\n        // transform: translateY(-100%);\n        // top: 0;\n    }\n}\n\n  .cutscenes-mask {\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 99;\n    text-align: center;\n    transition: all 1.618s;\n    &.loading {\n     display: flex;\n\n    }\n\n    &.loaded {\n      opacity: 0;\n      visibility: hidden;\n    }\n\n    .box {\n      display: inline-block;\n      vertical-align: middle;\n\n      .logo-img {\n        width: 100px;\n        display: inline-block;\n        animation: rotate-animation 3s linear infinite;\n\n      }\n\n      .progress {\n        margin-top: 1rem;\n        font-size: 2rem;\n        // color: #C13BEB;\n      }\n      .link > a{\n        font-size: 1.4rem;\n        color: #db7df8;\n      }\n    }\n\n  }\n\n</style>\n","<template>\n    <div class=\"nft-item nft-show\">\n        <div\n            id=\"nft-image-box\"\n            class=\"nft-image-box\"\n            v-bind:style=\"style\"\n        >\n            <Cutscenes v-if=\"cutscenesState.isShow\" />\n            <Loading v-bind:isShow=\"!isLoaded\" />\n            <NftMask v-if=\"isLoaded && !isPlaying\" v-on:click=\"toggleStart\" />\n            <div\n                class=\"nft-image\"\n                v-bind:class=\"nftImageBgClass\"\n                v-on:click=\"toggleStart\"\n            >\n                <template\n                    v-for=\"(list, xi) of GifImageList\"\n                    v-bind:key=\"xi\"\n                >\n                    <div\n                        v-for=\"(item, idx) of list\"\n                        v-bind:key=\"`${xi}-${idx}`\"\n                        v-bind:class=\"[`jsgif-box-${xi}-${idx}`, item.isShow ? 'show' : '']\"\n                        class=\"jsgif-box\"\n                    >\n                        <img\n                            class=\"jsgif\"\n                            v-bind:class=\"[`jsgif-${xi}-${idx}`]\"\n                        >\n                    </div>\n                </template>\n                <div class=\"cover-frame\" />\n            </div>\n\n            <div class=\"nft-control\">\n                <!-- <button\n                    v-for=\"item in synthMapDisplay\"\n                    v-bind:key=\"item.idx\"\n                    v-bind:class=\"{'active': currentIdx === item.idx}\"\n                    v-on:click=\"playSynth(item.idx)\"\n                >\n                    {{ item.name }}\n                </button>\n                <h3>Build with EMs can be scaled down</h3> -->\n                <ul class=\"Nav Nav_Small MainNav\">\n                    <!--  MainNav-Button_LeftOfActive -->\n                    <li\n                        v-for=\"item in synthMapDisplay\"\n                        v-bind:key=\"item.idx\"\n                        v-bind:class=\"{'MainNav-Button_Active': currentIdx === item.idx}\"\n                        class=\"MainNav-Button\"\n                        v-on:click=\"playSynth(item.idx)\"\n                    >\n                        <a href=\"#\">{{ item.name }}</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import Libgif from 'libgif';\n    import {\n        reactive,\n        onMounted,\n        onUnmounted,\n        computed,\n        ref,\n        watch,\n        nextTick,\n    } from 'vue';\n\n    import Cutscenes from '@/components/Cutscenes.vue';\n    import Loading from '@/components/Loading.vue';\n    import NftMask from '@/components/NftMask.vue';\n    import { getGifList, GifDisplayType } from '@/composable/useGifList';\n    import { GlobalStore } from '@/store/GlobalStore';\n    import { throttle } from '@/utils/debounce';\n    import { useMdd } from '@/utils/useMdd';\n\n    const GifImageList = reactive(getGifList());\n    const { screenSize } = GlobalStore;\n    const gifSelector = '.jsgif';\n\n    const MAX_SIZE = 500;\n    const MIN_SIZE = 300;\n    const isFirstPlay = true;\n    const isGifLoaded = computed(() => GifImageList[0].every(item => item.isLoaded) && GifImageList[1].every(item => item.isLoaded));\n    // const isGifImgLoaded = computed(() => GifImageList.slice(0, 4).every(list => list.every(item => item.isImgLoaded)));\n    // watch(isGifImgLoaded, (newVal) => {\n    //     console.log('isGifImgLoaded', newVal);\n    //     if (newVal) {\n    //         initGifs(gifSelector);\n    //     }\n    // }, { immediate: true });\n    const currentGifAxis = computed(() => {\n        for (let xi = 0; xi < GifImageList.length; xi++) {\n            const list = GifImageList[xi];\n            for (let index = 0; index < list.length; index++) {\n                const item = list[index];\n                if (item.isShow) {\n                    return [xi, index];\n                }\n            }\n        }\n        return [0, 0];\n    });\n    const gifCtrls: any[][] = [];\n\n    const {\n        beatEvent,\n        stageEvent,\n        playEvent,\n        isLoaded: isMddLoaded,\n        toggleStart,\n        playSynth,\n        currentIdx,\n        isPlaying,\n        keyMap,\n    } = useMdd();\n    const cutscenesState = reactive({\n        isFirst: true,\n        isShow: false,\n        timeoutId: 0,\n    });\n    const isLoaded = computed(() => isMddLoaded.value && isGifLoaded.value);\n    watch([isMddLoaded,\n           isGifLoaded], (news) => {\n               console.log('news', news);\n           });\n\n    const beatColor = ref('#008d5b');\n    function randomColorFromArray(): string {\n        const arr = ['#751c1c', '#2e397c', '#447230', '#72461a', '#56177a', '#d63a3a', '#566cd8', '#85d65f', '#d37f2a', '#a754dd'];\n        return arr[Math.floor(Math.random() * arr.length)];\n    }\n    const style = computed(() => ({\n        '--beat-color': '#d37f2a', // beatColor.value,\n    }));\n    beatEvent.addHandler(() => {\n        // const color = Math.floor(Math.random() * 16777215).toString(16);\n        // beatColor.value = `#${color}`;\n        beatColor.value = randomColorFromArray();\n        // console.log(beatColor.value);\n    });\n    playEvent.addHandler((evt: any) => {\n        console.log(evt.detail);\n        changeGif(evt.detail);\n        beatColor.value = randomColorFromArray();\n    });\n\n    const synthMapDisplay = computed(() => {\n        const arr: any = [];\n        Object.entries(keyMap).forEach((val) => {\n            val[1].forEach((v) => {\n                arr.push({\n                    key: val[0],\n                    idx: Number(v.n) - 1,\n                    keyCode: v.k,\n                    name: v.name,\n                });\n            });\n        });\n        return arr;\n    });\n    watch(isPlaying, (newVal) => {\n        const [x, y] = currentGifAxis.value;\n        const gif = gifCtrls[x][y];\n        newVal ? gif?.play() : gif?.pause();\n    });\n\n    const resizeNft = throttle(_resizeNft, 500);\n    onMounted(() => {\n        initGifs(gifSelector).then(() => {\n\n        });\n        resizeNft();\n\n        window.addEventListener('resize', resizeNft);\n        window.addEventListener('load', resizeNft);\n    });\n\n    onUnmounted(() => {\n        window.removeEventListener('resize', resizeNft);\n        window.removeEventListener('load', resizeNft);\n    });\n    //   0:30 ~ 0:32\n    //   1:04 ~ 1:06\n    //   1:20 ~ 1:22\n    const currentStage = ref(0);\n    stageEvent.addHandler((evt: any) => {\n        const stage = Number(evt.detail);\n        currentStage.value = stage;\n        const [x, y] = currentGifAxis.value;\n\n        changeCutscenes();\n        setTimeout(() => {\n            changeGif(y, currentStage.value);\n        }, 500);\n        console.log('stage', stage);\n    });\n\n    // function toggleGif() {\n    //     const [x, y] = currentGifAxis.value;\n    //     console.log('toggleGif', isFirstPlay, x, y, isPlaying.value);\n    //     const gif = gifCtrls[x][y];\n    //     isPlaying.value ? gif?.play() : gif?.pause();\n    //     // for (let index = 0; index < gifImages.value.length; index++) {\n    //     //     isPlaying.value ? gifCtrls[index]?.play() : gifCtrls[index]?.pause();\n    //     //     const gif = gifImages.value[index];\n    //     //     gif.isShow = idx === index;\n    //     // }\n    // }\n    const nftImageBgClass = ref('nft-image-bg-1');\n    function changeGif(synthType: number, stageId: number = currentStage.value) {\n        console.log(isFirstPlay, 'changeGif', GifImageList, synthType, stageId, GifImageList[stageId][synthType].isShow);\n        nftImageBgClass.value = `nft-image-bg-${synthType + 1}`;\n        const [x, y] = currentGifAxis.value;\n        if (stageId === x && synthType === y) {\n            return;\n        }\n        GifImageList[stageId][synthType].isShow = true;\n        const gif = gifCtrls[stageId][synthType];\n        isPlaying.value ? gif?.play() : gif?.pause();\n        GifImageList[x][y].isShow = false;\n        gifCtrls[x][y]?.pause();\n    }\n\n    function changeCutscenes() {\n        clearTimeout(cutscenesState.timeoutId);\n        if (cutscenesState.isFirst) {\n            cutscenesState.isFirst = false;\n            return;\n        }\n        cutscenesState.isShow = true;\n        screenSize.timeoutId = setTimeout(() => {\n            cutscenesState.isShow = false;\n        }, 2200);\n    }\n\n    function _resizeNft() {\n        const { width, height } = screenSize.value;\n        const size = Math.max(Math.min(width, height, MAX_SIZE), MIN_SIZE);\n        const nftBox = document.getElementById('nft-image-box');\n        if (nftBox) {\n            nftBox.style.width = `${size}px`;\n            nftBox.style.maxWidth = `${size}px`;\n            nftBox.style.height = `${size}px`;\n            nftBox.style.maxHeight = `${size}px`;\n            nftBox.style.minHeight = `${size}px`;\n        }\n    }\n\n    function getNftBoxSize() {\n        const nftBox = document.getElementById('nft-image-box');\n        if (nftBox) {\n            const { width, height } = nftBox.getBoundingClientRect();\n            return { width, height };\n        }\n        return { width: MAX_SIZE, height: MAX_SIZE };\n    }\n\n    async function initGifs(selector: string) {\n        for (let xi = 0; xi < GifImageList.length; xi++) {\n            const list = GifImageList[xi];\n            if (xi >= 2) {\n                const ctrls = [];\n                for (let index = 0; index < list.length; index++) {\n                    const item = list[index];\n                    // eslint-disable-next-line no-await-in-loop\n                    ctrls.push(await parseGif(`${selector}-${xi}-${index}`, item));\n                }\n                gifCtrls.push(ctrls);\n            } else {\n                const temp = list.map((item, index) => parseGif(`${selector}-${xi}-${index}`, item));\n                // eslint-disable-next-line no-await-in-loop\n                gifCtrls.push(await Promise.all(temp));\n            }\n        }\n        console.log(gifCtrls);\n    }\n\n    function parseGif(selector: string, item: GifDisplayType) {\n        return new Promise((resolve, reject) => {\n            item.imgLoadPromise.then(() => {\n                try {\n                    const element = document.querySelector(selector);\n                    const supergif = new Libgif({\n                        gif: element,\n                        progressbar_height: 0,\n                        auto_play: false,\n                    });\n                    supergif.isShow = false;\n                    supergif.load_url(item.url, () => {\n                        console.log('load_url', item.url);\n                        item.isLoaded = true;\n                        resolve(supergif);\n                    });\n                } catch (error) {\n                    reject(error);\n                }\n            }).catch(error => reject(error));\n        });\n    }\n\n</script>\n\n<style lang=\"scss\">\n  @import '@/scss/foundation/config';;\n  // .section-studio {}\n  .nft-control {\n    z-index: 5;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n\n    display: flex;\n    flex-direction:row;\n  justify-content: space-between;\n\n     button {\n       cursor: pointer;\n      //  margin: 0 10px;\n     }\n\n       button {\n        //  color: white;\n         color: rgb(150, 150, 150);\n         display: inline-block;\n         padding: .1rem;\n         padding-top: .3rem;\n         flex: 1 1 0;\n         position: relative;\n         text-align: center;\n         font-size: 1.28em;\n         background: rgba(0, 0, 0, 0.1);\n         border-top: 3px solid rgba(255, 255, 255, 0.6);\n\n        //  border: 2px solid white;\n         transition: all 0.32s ease-in-out;\n\n         &:not(:first-of-type) {\n          //  border-left: 1px solid rgba(255,255,255,0.3);\n         }\n\n         &:hover {\n           color: white;\n            background: rgba(0, 0, 0, 0.2);\n         }\n       }\n\n       button span {\n         display: inline-block;\n\n         width: 100%;\n         height: 100%;\n\n         padding: 1ex;\n\n         color: white;\n\n         transition: color 0.32s ease-in-out;\n       }\n\n      //  button:hover,\n       button:focus,\n       button.active {\n         color: var(--beat-color);\n         background-color: rgba(255, 255, 255, 0.3);\n          // border-color: rgba(254, 114, 126, 0.9);\n          border-color: var(--beat-color);\n        //  box-shadow: 0 0 12px rgba(28, 28, 28, 0.48);\n       }\n       button:nth-of-type(1) {\n         button {\n           color: rgb(150, 150, 150);\n\n           &:hover {\n             color: rgb(0, 183, 250);\n             background: rgba(0, 0, 0, 0.2);\n           }\n         }\n\n         button:focus,\n         button.active {\n           color: rgb(255, 255, 255);\n           background-color: rgba(0, 123, 255, 0.3);\n           border-color: rgba(114, 205, 254, 0.9);\n         }\n       }\n  }\n\n  .nft-item {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n    max-width: 500px;\n    max-height: 500px;\n    // position: relative;\n    margin: 0 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .nft-image-box {\n      width: 100%;\n      min-height: 300px;\n      max-height: 500px;\n      position: relative;\n      transition: background-color 106ms ease-in;\n      background: radial-gradient(circle, rgba(0,0,0,0.39539565826330536) 0%, rgba(255,255,255,.3) 0%, rgba(0,0,0,0.3) 100%);\n      background-color: var(--beat-color);\n\n      .nft-image {\n        z-index: 1;\n        // padding: 1rem;\n        background-size: cover;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        &-bg-1 {\n          background: url('@/assets/images/bg-1.png') no-repeat center center;\n        }\n        &-bg-2 {\n          background: url('@/assets/images/bg-2.png') no-repeat center center;\n        }\n        &-bg-3 {\n          background: url('@/assets/images/bg-3.png') no-repeat center center;\n        }\n        &-bg-4 {\n          // background: url('@/assets/images/bg-4.png') no-repeat center center;\n        }\n        .jsgif-box {\n          visibility: hidden;\n          &.show {\n            visibility: initial;\n          }\n        }\n        .jsgif {\n          position: absolute;\n          top: 0;\n          left:0;\n          width: 100%;\n          height: 100%;\n          canvas {\n            width: 100%;\n            height: 100%;\n          }\n\n        }\n        .cover-frame {\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          top: 0;\n          left: 0;\n          background: url('@/assets/images/frame.png') no-repeat center center;\n          background-size: cover;\n          z-index: 2;\n        }\n\n      }\n\n      .nft-cover {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: auto;\n      }\n\n    }\n\n  }\n\n@media only screen and (max-width: 460px) {\n.nft-item .nft-image-box .rec-item {\n    width: 185px;\n    height: 63px;\n    .rectext {\n      font-size: 40px;\n    }\n    .recdot {\n          width: 26px;\n    height: 26px;\n    margin-right: 11px;\n    margin-top: -3px;\n    }\n}\n}\n@media only screen and (max-width: 410px) {\n  .nft-item .nft-image-box .rec-item {\n      width: 167px;\n      height: 57px;\n      .rectext {\n        font-size: 35px;\n      }\n      .recdot {\n            width: 23px;\n      height: 23px;\n      margin-right: 10px;\n      margin-top: -3px;\n      }\n  }\n}\n\nimg.gif {\n  visibility: hidden;\n}\n\n.gifcontrol {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n\n  &:after {\n    transition: background 0.25s ease-in-out;\n    position: absolute;\n    content: \"\";\n    display: block;\n    left: calc(50% - 25px);\n    top: calc(50% - 25px);\n  }\n\n  &.loading {\n    background: rgba(255, 255, 255, 0.75);\n    &:after {\n      background: #FF9900;\n      width: 50px;\n      height: 50px;\n      border-radius: 50px;\n    }\n  }\n\n  &.playing {\n    /* Only show the 'stop' button on hover */\n    &:after {\n      opacity: 0;\n      transition: opacity 0.25s ease-in-out;\n      border-left: 20px solid #FF9900;\n      border-right: 20px solid #FF9900;\n      width: 50px;\n      height: 50px;\n      box-sizing: border-box;\n    }\n    &:hover:after {\n      opacity: 1;\n    }\n  }\n\n  &.paused {\n    background: rgba(255, 255, 255, 0.5);\n    &:after {\n      width: 0;\n      height: 0;\n      border-style: solid;\n      border-width: 25px 0 25px 50px;\n      border-color: transparent transparent transparent #ff9900;\n    }\n  }\n\n  transition: background 0.25s ease-in-out;\n  z-index: 100;\n\n}\n\n@keyframes bling-bg {\n  0% {\n    background: rgb(255, 255, 80);\n  }\n  25% {\n    background: rgb(75, 250, 125);\n  }\n  50% {\n    background: rgb(63, 137, 255);\n  }\n  75% {\n    background: rgb(181, 67, 246);\n  }\n}\n\n.bling-bg {\n  background: rgba(255, 255, 255, 0.5);\n  animation: bling-bg 968ms ease-in-out infinite alternate;\n}\n</style>\n","<template>\n    <div\n        translate=\"no\"\n        class=\"app\"\n        v-bind:class=\"[isMobile ? 'mobile' : 'desktop']\"\n    >\n        <div class=\"section-studio\">\n            <NftItemDemo />\n        </div>\n        <IconsNft />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import IconsNft from '@/components/Icon/IconsNft.vue';\n    import NftItemDemo from '@/components/NftItemDemo.vue';\n    import { GlobalStore } from '@/store/GlobalStore';\n\n    const { isMobile } = GlobalStore;\n</script>\n\n<style lang=\"scss\">\n    @import \"~@/scss/reset.scss\";\n    @import '~@/scss/global-animation.scss';\n    @import \"@/scss/global.scss\";\n    @import '@/scss/global-rwd.scss';\n\n    html, body, .app {\n        overflow: hidden;\n        padding: 0;\n        margin: 0;\n        .rectext,\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n            // font-family: \"BlackOpsOne\", Roboto, \"Browallia New\", sans-serif;\n        }\n\n    }\n    .app {\n        .section-studio {\n            overflow: hidden;\n            width: 100vw;\n            height: 100vh;\n            position: relative;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n    }\n</style>\n","import { createApp } from 'vue';\n// import VueFreezeframe from 'vue-freezeframe';\nimport App from './view/Nft.vue';\n\nconst app = createApp(App);\n// app.use(VueFreezeframe);\napp.mount('#app');\n"],"names":["ImgHot","ImgSauce","array","GifImageList","reactive","getGifList","screenSize","GlobalStore","gifSelector","MAX_SIZE","MIN_SIZE","isFirstPlay","isGifLoaded","computed","item","currentGifAxis","xi","list","index","gifCtrls","beatEvent","stageEvent","playEvent","isMddLoaded","toggleStart","playSynth","currentIdx","isPlaying","keyMap","useMdd","cutscenesState","isLoaded","watch","news","beatColor","ref","randomColorFromArray","arr","style","evt","changeGif","synthMapDisplay","val","v","newVal","x","y","gif","resizeNft","throttle","_resizeNft","onMounted","initGifs","onUnmounted","currentStage","stage","changeCutscenes","nftImageBgClass","synthType","stageId","_a","width","height","size","nftBox","selector","ctrls","parseGif","temp","resolve","reject","element","supergif","Libgif","error","isMobile","app","createApp","App"],"mappings":"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"}