リアクションを表示するかどうかを選べるように

packages/frontend/src/pages/reversi/game.board.vue

@@ -142,6 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template #label>{{ i18n.ts.options }}</template>
 			<div class="_gaps_s" style="text-align: left;">
 				<MkSwitch v-model="showBoardLabels">Show labels</MkSwitch>
+				<MkSwitch v-model="showReaction">Show reactions</MkSwitch>
 				<MkSwitch v-model="useAvatarAsStone">useAvatarAsStone</MkSwitch>
 			</div>
 		</MkFolder>
@@ -188,6 +189,7 @@ const props = defineProps<{
 }>();
 
 const showBoardLabels = ref<boolean>(false);
+const showReactions = ref<boolean>(true);
 const useAvatarAsStone = ref<boolean>(true);
 const autoplaying = ref<boolean>(false);
 // eslint-disable-next-line vue/no-setup-props-destructure
@@ -536,10 +538,9 @@ function sendReaction(emojiKey: string) {
 }
 
 function onReacted(payload: Parameters<Misskey.Channels['reversiGame']['events']['reacted']>['0']) {
-	console.log('onReacted', payload);
-
 	const { userId, reaction } = payload;
 
+	if (showReactions.value || userId === $i.id) {
 		sound.playMisskeySfx('reaction');
 
 		const el = (userId === blackUser.value.id) ? blackUserEl.value : whiteUserEl.value;
@@ -555,6 +556,7 @@ function onReacted(payload: Parameters<Misskey.Channels['reversiGame']['events']
 				y,
 			}, {}, 'end');
 		}
+	}
 
 	if (userId === $i.id) {
 		// リアクションが可能になるまでのタイマー
@@ -789,12 +791,12 @@ $gap: 4px;
 		}
 	}
 
-	&:focus-visible {
+	&:not(:disabled):focus-visible {
 		outline: solid 2px var(--focus);
 		z-index: 1;
 	}
 
-	&:hover {
+	&:not(:disabled):hover {
 		background: rgba(0, 0, 0, 0.05);
 	}
 

packages/frontend/src/pages/reversi/game.emoji-balloon.vue

@@ -49,7 +49,7 @@ onMounted(() => {
 		active.value = false;
 		setTimeout(() => {
 			emit('end');
-		}, 1000);
+		}, 750);
 	}, 3000);
 });
 </script>
@@ -60,7 +60,7 @@ onMounted(() => {
 }
 
 .transition_balloon_leaveActive {
-	transition: all 1s ease;
+	transition: all .75s ease;
 }
 
 .transition_balloon_enterFrom {
@@ -75,7 +75,6 @@ onMounted(() => {
 .balloonRoot {
 	position: absolute;
 	filter: drop-shadow(0 2px 8px var(--shadow));
-	--balloon-radius: 24px;
 	user-select: none;
 	pointer-events: none;
 }