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: :art:

---
 packages/frontend/src/components/MkPlusOneEffect.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/components/MkPlusOneEffect.vue')

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));
 			}
 		}
 	}
-- 
cgit v1.2.3-freya