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
{{ i18n.ts.options }}
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;
}