88 lines
2.2 KiB
Vue
88 lines
2.2 KiB
Vue
<template>
|
|
<div ref="emote" @click.stop.prevent="run" class="emote-container">
|
|
<div :class="classes" />
|
|
<div :class="classes" />
|
|
<div :class="classes" />
|
|
<div :class="classes" />
|
|
<div :class="classes" />
|
|
<div :class="classes" />
|
|
<div :class="classes" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.emote-container {
|
|
width: 25%;
|
|
height: 10%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
.emote {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100%;
|
|
color: #fff;
|
|
transform: scale(0.7);
|
|
text-align: center;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Component, Ref, Vue, Prop } from 'vue-property-decorator'
|
|
|
|
@Component({ name: 'neko-emote' })
|
|
export default class extends Vue {
|
|
@Prop({
|
|
required: true,
|
|
})
|
|
id!: string
|
|
|
|
@Ref('emote') container!: HTMLElement
|
|
|
|
get emote() {
|
|
return this.$accessor.chat.emotes[this.id]
|
|
}
|
|
|
|
private classes: string[] = []
|
|
|
|
mounted() {
|
|
const range = 50
|
|
let count = 0
|
|
let finish: Array<Promise<any>> = []
|
|
|
|
this.classes = ['emote', this.emote.type]
|
|
|
|
for (let child of this.container.children) {
|
|
const ele = child as HTMLElement
|
|
ele.style['left'] = `${count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0)}%`
|
|
ele.style['opacity'] = `0`
|
|
|
|
const animation = this.$anime({
|
|
targets: child,
|
|
keyframes: [
|
|
{ left: `${count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0)}%`, opacity: 1 },
|
|
{ left: `${count % 2 ? this.$anime.random(-range, 0) : this.$anime.random(0, range)}%`, opacity: 0.5 },
|
|
{ left: `${count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0)}%`, opacity: 0 },
|
|
],
|
|
elasticity: 600,
|
|
rotate: this.$anime.random(-35, 35),
|
|
top: `${this.$anime.random(-200, -600)}%`,
|
|
duration: this.$anime.random(1000, 2000),
|
|
easing: 'easeInOutQuad',
|
|
})
|
|
|
|
count++
|
|
finish.push(animation.finished)
|
|
}
|
|
|
|
Promise.all(finish).then(() => {
|
|
this.$emit('done', this.id)
|
|
this.$accessor.chat.delEmote(this.id)
|
|
})
|
|
}
|
|
}
|
|
</script>
|