App.vue 7.5 KB
Newer Older
L
LeoKu 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<template>
  <main class="main">
    <Container>
      <div class="content-warpper">
        <div class="content-view">
          <Header />

          <div class="playground">
            <div class="avatar-wrapper">
              <VueColorAvatar
                ref="colorAvatarRef"
                :option="avatarOption"
                :size="280"
                :style="{
                  transform: `rotateY(${flipped ? -180 : 0}deg)`,
                }"
              />
            </div>

L
LeoKu 已提交
20
            <ActionBar @action="handleAction" />
L
LeoKu 已提交
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

            <div class="action-group">
              <button class="action-randomize" @click="handleGenerate">
                {{ t('action.randomize') }}
              </button>
              <button
                class="action-download"
                :disabled="downloading"
                @click="handleDownload"
              >
                {{
                  downloading
                    ? `${t('action.downloading')}...`
                    : t('action.download')
                }}
              </button>
            </div>
          </div>

          <Footer />

          <CodeModal :visible="codeVisible" @close="codeVisible = false" />

          <DownloadModal
            :visible="downloadModalVisible"
            :image-url="imageDataURL"
            @close=";(downloadModalVisible = false), (imageDataURL = '')"
          />
        </div>

L
LeoKu 已提交
51
        <ConfettiCanvas />
L
LeoKu 已提交
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

        <div class="gradient-bg">
          <div class="gradient-top"></div>
          <div class="gradient-bottom"></div>
        </div>
      </div>
    </Container>

    <Sider>
      <Configurator />
    </Sider>
  </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

import ActionBar from '@/components/ActionBar.vue'
import CodeModal from '@/components/CodeModal.vue'
import Configurator from '@/components/Configurator.vue'
import DownloadModal from '@/components/DownloadModal.vue'
L
LeoKu 已提交
74 75 76
import VueColorAvatar, {
  type VueColorAvatarRef,
} from '@/components/VueColorAvatar.vue'
L
LeoKu 已提交
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
import { ActionType } from '@/enums'
import { useAvatarOption } from '@/hooks'
import Container from '@/layouts/Container.vue'
import Footer from '@/layouts/Footer.vue'
import Header from '@/layouts/Header.vue'
import Sider from '@/layouts/Sider.vue'
import { useStore } from '@/store'
import { REDO, UNDO } from '@/store/mutation-type'
import {
  getRandomAvatarOption,
  getSpecialAvatarOption,
  showConfetti,
} from '@/utils'
import {
  DOWNLOAD_DELAY,
  NOT_COMPATIBLE_AGENTS,
  TRIGGER_PROBABILITY,
} from '@/utils/constant'
L
LeoKu 已提交
95
import { recordEvent } from '@/utils/ga'
L
LeoKu 已提交
96

L
LeoKu 已提交
97
import ConfettiCanvas from './components/ConfettiCanvas.vue'
L
LeoKu 已提交
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

const store = useStore()

const [avatarOption, setAvatarOption] = useAvatarOption()

const { t } = useI18n()

const colorAvatarRef = ref<VueColorAvatarRef>()

function handleGenerate() {
  if (Math.random() <= TRIGGER_PROBABILITY) {
    let colorfulOption = getSpecialAvatarOption()
    while (
      JSON.stringify(colorfulOption) === JSON.stringify(avatarOption.value)
    ) {
      colorfulOption = getSpecialAvatarOption()
    }
L
LeoKu 已提交
115
    colorfulOption.wrapperShape = avatarOption.value.wrapperShape
L
LeoKu 已提交
116 117 118 119 120 121
    setAvatarOption(colorfulOption)
    showConfetti()
  } else {
    const randomOption = getRandomAvatarOption(avatarOption.value)
    setAvatarOption(randomOption)
  }
L
LeoKu 已提交
122 123 124 125

  recordEvent('click_randomize', {
    event_category: 'click',
  })
L
LeoKu 已提交
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
}

const downloadModalVisible = ref(false)
const downloading = ref(false)
const imageDataURL = ref('')

async function handleDownload() {
  try {
    downloading.value = true
    const avatarEle = colorAvatarRef.value?.avatarRef

    const userAgent = window.navigator.userAgent.toLowerCase()
    const notCompatible = NOT_COMPATIBLE_AGENTS.some(
      (agent) => userAgent.indexOf(agent) !== -1
    )

    if (avatarEle) {
      const html2canvas = (await import('html2canvas')).default
      const canvas = await html2canvas(avatarEle, {
        backgroundColor: null,
      })
      const dataURL = canvas.toDataURL()

      if (notCompatible) {
        imageDataURL.value = dataURL
        downloadModalVisible.value = true
      } else {
        const trigger = document.createElement('a')
        trigger.href = dataURL
        trigger.download = 'vue-color-avatar.png'
        trigger.click()
      }
    }
L
LeoKu 已提交
159 160 161 162

    recordEvent('click_download', {
      event_category: 'click',
    })
L
LeoKu 已提交
163 164 165 166 167 168 169 170 171 172 173 174 175 176
  } finally {
    setTimeout(() => {
      downloading.value = false
    }, DOWNLOAD_DELAY)
  }
}

const flipped = ref(false)
const codeVisible = ref(false)

function handleAction(actionType: ActionType) {
  switch (actionType) {
    case ActionType.Undo:
      store.commit(UNDO)
L
LeoKu 已提交
177 178 179 180
      recordEvent('action_undo', {
        event_category: 'action',
        event_label: 'Undo',
      })
L
LeoKu 已提交
181 182 183 184
      break

    case ActionType.Redo:
      store.commit(REDO)
L
LeoKu 已提交
185 186 187 188
      recordEvent('action_redo', {
        event_category: 'action',
        event_label: 'Redo',
      })
L
LeoKu 已提交
189 190 191 192
      break

    case ActionType.Flip:
      flipped.value = !flipped.value
L
LeoKu 已提交
193 194 195 196
      recordEvent('action_flip_avatar', {
        event_category: 'action',
        event_label: 'Flip Avatar',
      })
L
LeoKu 已提交
197 198 199 200
      break

    case ActionType.Code:
      codeVisible.value = !codeVisible.value
L
LeoKu 已提交
201 202 203
      recordEvent('action_view_code', {
        event_category: 'action',
        event_label: 'View Avatar Option Code',
L
LeoKu 已提交
204
      })
L
LeoKu 已提交
205 206 207 208 209 210
      break
  }
}
</script>

<style lang="scss" scoped>
211 212
@use 'src/styles/var';

L
LeoKu 已提交
213 214 215 216
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
217 218
  color: var.$color-text;
  background-color: var.$color-page-bg;
L
LeoKu 已提交
219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247

  .content-warpper {
    height: 100%;
    transform: scale(1);

    .content-view {
      position: relative;
      z-index: 110;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
    }
  }
}

.playground {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;

  .avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

248
    @media screen and (max-width: var.$screen-sm) {
L
LeoKu 已提交
249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264
      transform: scale(0.85);
    }
  }

  .action-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;

    .action-randomize,
    .action-download {
      min-width: 6rem;
      height: 2.5rem;
      margin: 0 1rem;
      padding: 0 1rem;
265
      color: var.$color-text;
L
LeoKu 已提交
266
      font-weight: bold;
267
      background: var.$color-gray;
L
LeoKu 已提交
268 269 270 271 272 273
      border-radius: 0.6rem;
      cursor: pointer;
      transition: color 0.2s;
      user-select: none;

      &:hover {
274
        color: lighten(var.$color-text, 10);
L
LeoKu 已提交
275 276
      }

L
LeoKu 已提交
277 278
      &:disabled,
      &[disabled] {
279
        color: rgba(var.$color-text, 0.5);
L
LeoKu 已提交
280 281 282 283 284 285
        cursor: default;
      }
    }
  }
}

L
LeoKu 已提交
286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309
@supports (filter: blur(4rem)) or (-webkit-filter: blur(4rem)) or
  (-moz-filter: blur(4rem)) {
  .gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    @mixin gradient-style($color) {
      position: absolute;
      width: 100vh;
      height: 100vh;
      background-image: radial-gradient(
        rgba($color, 0.8) 20%,
        rgba($color, 0.6) 40%,
        rgba($color, 0.4) 60%,
        rgba($color, 0.2) 80%,
        transparent 100%
      );
      border-radius: 50%;
      opacity: 0.2;
      filter: blur(4rem);
    }
L
LeoKu 已提交
310

L
LeoKu 已提交
311
    .gradient-top {
312
      @include gradient-style(var.$color-secondary);
L
LeoKu 已提交
313

L
LeoKu 已提交
314 315 316
      top: -50%;
      right: -20%;
    }
L
LeoKu 已提交
317

L
LeoKu 已提交
318
    .gradient-bottom {
319
      @include gradient-style(var.$color-accent);
L
LeoKu 已提交
320

L
LeoKu 已提交
321 322 323
      bottom: -50%;
      left: -20%;
    }
L
LeoKu 已提交
324 325 326
  }
}
</style>