mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2025-01-09 19:34:00 +09:00
Code

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

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-02-01 07:26:05 +09:00
parent efc272a340
commit 4c50b0a5dd
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/frontend/src/pages/reversi/game.board.vue
View File

@ -142,6 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.options }}</template> <template #label>{{ i18n.ts.options }}</template>
<div class="_gaps_s" style="text-align: left;"> <div class="_gaps_s" style="text-align: left;">
<MkSwitch v-model="showBoardLabels">Show labels</MkSwitch> <MkSwitch v-model="showBoardLabels">Show labels</MkSwitch>
<MkSwitch v-model="showReaction">Show reactions</MkSwitch>
<MkSwitch v-model="useAvatarAsStone">useAvatarAsStone</MkSwitch> <MkSwitch v-model="useAvatarAsStone">useAvatarAsStone</MkSwitch>
</div> </div>
</MkFolder> </MkFolder>
@ -188,6 +189,7 @@ const props = defineProps<{
}>(); }>();
const showBoardLabels = ref<boolean>(false); const showBoardLabels = ref<boolean>(false);
const showReactions = ref<boolean>(true);
const useAvatarAsStone = ref<boolean>(true); const useAvatarAsStone = ref<boolean>(true);
const autoplaying = ref<boolean>(false); const autoplaying = ref<boolean>(false);
// eslint-disable-next-line vue/no-setup-props-destructure // eslint-disable-next-line vue/no-setup-props-destructure
@ -536,24 +538,24 @@ function sendReaction(emojiKey: string) {
} }
function onReacted(payload: Parameters<Misskey.Channels['reversiGame']['events']['reacted']>['0']) { function onReacted(payload: Parameters<Misskey.Channels['reversiGame']['events']['reacted']>['0']) {
console.log('onReacted', payload);
const { userId, reaction } = 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) { if (el) {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const x = rect.right; const x = rect.right;
const y = rect.bottom; const y = rect.bottom;
os.popup(XEmojiBalloon, { os.popup(XEmojiBalloon, {
reaction, reaction,
tail: 'left', tail: 'left',
x, x,
y, y,
}, {}, 'end'); }, {}, 'end');
}
} }
if (userId === $i.id) { if (userId === $i.id) {
@ -789,12 +791,12 @@ $gap: 4px;
} }
} }
&:focus-visible { &:not(:disabled):focus-visible {
outline: solid 2px var(--focus); outline: solid 2px var(--focus);
z-index: 1; z-index: 1;
} }
&:hover { &:not(:disabled):hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
} }

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

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