diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue index 14c71a3ee5..4dcc5043f4 100644 --- a/packages/frontend/src/pages/reversi/game.board.vue +++ b/packages/frontend/src/pages/reversi/game.board.vue @@ -142,6 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
Show labels + Show reactions useAvatarAsStone
@@ -188,6 +189,7 @@ const props = defineProps<{ }>(); const showBoardLabels = ref(false); +const showReactions = ref(true); const useAvatarAsStone = ref(true); const autoplaying = ref(false); // eslint-disable-next-line vue/no-setup-props-destructure @@ -536,24 +538,24 @@ function sendReaction(emojiKey: string) { } function onReacted(payload: Parameters['0']) { - console.log('onReacted', payload); - const { userId, reaction } = payload; - sound.playMisskeySfx('reaction'); + if (showReactions.value || userId === $i.id) { + sound.playMisskeySfx('reaction'); - const el = (userId === blackUser.value.id) ? blackUserEl.value : whiteUserEl.value; + const el = (userId === blackUser.value.id) ? blackUserEl.value : whiteUserEl.value; - if (el) { - const rect = el.getBoundingClientRect(); - const x = rect.right; - const y = rect.bottom; - os.popup(XEmojiBalloon, { - reaction, - tail: 'left', - x, - y, - }, {}, 'end'); + if (el) { + const rect = el.getBoundingClientRect(); + const x = rect.right; + const y = rect.bottom; + os.popup(XEmojiBalloon, { + reaction, + tail: 'left', + x, + 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); } diff --git a/packages/frontend/src/pages/reversi/game.emoji-balloon.vue b/packages/frontend/src/pages/reversi/game.emoji-balloon.vue index 8d943f1fdb..fecb760430 100644 --- a/packages/frontend/src/pages/reversi/game.emoji-balloon.vue +++ b/packages/frontend/src/pages/reversi/game.emoji-balloon.vue @@ -49,7 +49,7 @@ onMounted(() => { active.value = false; setTimeout(() => { emit('end'); - }, 1000); + }, 750); }, 3000); }); @@ -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; }