From b8248bdd656ebc16021b096a77536815d36dc92e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 7 Jan 2023 17:37:30 +0900
Subject: [PATCH] :art:
---
packages/frontend/src/components/MkPlusOneEffect.vue | 10 ++++++++--
.../src/components/MkReactionsViewer.reaction.vue | 2 +-
2 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/packages/frontend/src/components/MkPlusOneEffect.vue b/packages/frontend/src/components/MkPlusOneEffect.vue
index 5c85d2b3e5..3e4f2059fd 100644
--- a/packages/frontend/src/components/MkPlusOneEffect.vue
+++ b/packages/frontend/src/components/MkPlusOneEffect.vue
@@ -1,14 +1,18 @@
<template>
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
- <span class="text" :class="{ up }">+1</span>
+ <span class="text" :class="{ up }">
+ <XReactionIcon class="icon" :reaction="reaction"/>
+ </span>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as os from '@/os';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
const props = withDefaults(defineProps<{
+ reaction: string;
x: number;
y: number;
}>(), {
@@ -20,6 +24,7 @@ const emit = defineEmits<{
let up = $ref(false);
const zIndex = os.claimZIndex('veryLow');
+const angle = (90 - (Math.random() * 180)) + 'deg';
onMounted(() => {
window.setTimeout(() => {
@@ -55,10 +60,11 @@ onMounted(() => {
font-weight: bold;
transform: translateY(-30px);
transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
+ will-change: opacity, transform;
&.up {
opacity: 0;
- transform: translateY(-50px);
+ transform: translateY(-50px) rotateZ(v-bind(angle));
}
}
}
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index e0e1262550..e63192a629 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -61,7 +61,7 @@ const anime = () => {
const rect = buttonRef.value.getBoundingClientRect();
const x = rect.left + (buttonRef.value.offsetWidth / 2);
const y = rect.top + (buttonRef.value.offsetHeight / 2);
- os.popup(MkPlusOneEffect, { x, y }, {}, 'end');
+ os.popup(MkPlusOneEffect, { reaction: props.reaction, x, y }, {}, 'end');
};
watch(() => props.count, (newCount, oldCount) => {