refactor

packages/frontend/src/components/MkPlusOneEffect.vue

@@ -1,72 +0,0 @@
-<template>
-<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
-	<span class="text" :class="{ up }">
-		<MkReactionIcon class="icon" :reaction="reaction"/>
-	</span>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
-import MkReactionIcon from '@/components/MkReactionIcon.vue';
-
-const props = withDefaults(defineProps<{
-	reaction: string;
-	x: number;
-	y: number;
-}>(), {
-});
-
-const emit = defineEmits<{
-	(ev: 'end'): void;
-}>();
-
-let up = $ref(false);
-const zIndex = os.claimZIndex('veryLow');
-const angle = (90 - (Math.random() * 180)) + 'deg';
-
-onMounted(() => {
-	window.setTimeout(() => {
-		up = true;
-	}, 10);
-
-	window.setTimeout(() => {
-		emit('end');
-	}, 1100);
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	pointer-events: none;
-	position: fixed;
-	width: 128px;
-	height: 128px;
-
-	&:global {
-		> .text {
-			display: block;
-			height: 1em;
-			text-align: center;
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			margin: auto;
-			color: var(--accent);
-			font-size: 18px;
-			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) rotateZ(v-bind(angle));
-			}
-		}
-	}
-}
-</style>