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

enhance(frontend): 리버시 돌에 표시되는 아바타를 움직이는 이미지 설정에 대응함

Browse Source
This commit is contained in:
NoriDev 2024-02-07 16:53:37 +09:00
parent de7c078721
commit d625ee7663
1 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,10 @@ SPDX-License-Identifier: AGPL-3.0-only
[$style.boardCell_prev]: engine.prevPos === i [$style.boardCell_prev]: engine.prevPos === i
}]" }]"
@click="putStone(i)" @click="putStone(i)"
@mouseover="defaultStore.state.showingAnimatedImages === 'interaction' && stone === true ? playAnimation = true : ''"
@mouseout="defaultStore.state.showingAnimatedImages === 'interaction' && stone === true ? playAnimation = false : ''"
@touchstart="defaultStore.state.showingAnimatedImages === 'interaction' && stone === true ? playAnimation = true : ''"
@touchend="defaultStore.state.showingAnimatedImages === 'interaction' && stone === true ? playAnimation = false : ''"
> >
<Transition <Transition
:enterActiveClass="$style.transition_flip_enterActive" :enterActiveClass="$style.transition_flip_enterActive"
@ -66,8 +70,8 @@ SPDX-License-Identifier: AGPL-3.0-only
mode="default" mode="default"
> >
<template v-if="useAvatarAsStone"> <template v-if="useAvatarAsStone">
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl ?? undefined"/> <img v-if="stone === true" :class="$style.boardCellStone" :src="blackUserUrl ?? undefined"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUser.avatarUrl ?? undefined"/> <img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUserUrl ?? undefined"/>
</template> </template>
<template v-else> <template v-else>
<img v-if="stone === true" :class="$style.boardCellStone" src="/client-assets/reversi/stone_b.png"/> <img v-if="stone === true" :class="$style.boardCellStone" src="/client-assets/reversi/stone_b.png"/>
@ -157,6 +161,8 @@ import { userPage } from '@/filters/user.js';
import * as sound from '@/scripts/sound.js'; import * as sound from '@/scripts/sound.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { confetti } from '@/scripts/confetti.js'; import { confetti } from '@/scripts/confetti.js';
import { defaultStore } from '@/store.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
const $i = signinRequired(); const $i = signinRequired();
@ -227,6 +233,20 @@ const cellsStyle = computed(() => {
}; };
}); });
const playAnimation = ref(true);
if (defaultStore.state.showingAnimatedImages === 'interaction') playAnimation.value = false;
let playAnimationTimer = setTimeout(() => playAnimation.value = false, 5000);
const blackUserUrl = computed(() => {
if (blackUser.value.avatarUrl == null) return null;
if (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar || (['interaction', 'inactive'].includes(<string>defaultStore.state.showingAnimatedImages) && !playAnimation.value)) return getStaticImageUrl(blackUser.value.avatarUrl);
return blackUser.value.avatarUrl;
});
const whiteUserUrl = computed(() => {
if (whiteUser.value.avatarUrl == null) return null;
if (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar || (['interaction', 'inactive'].includes(<string>defaultStore.state.showingAnimatedImages) && !playAnimation.value)) return getStaticImageUrl(whiteUser.value.avatarUrl);
return whiteUser.value.avatarUrl;
});
watch(logPos, (v) => { watch(logPos, (v) => {
if (!game.value.isEnded) return; if (!game.value.isEnded) return;
engine.value = Reversi.Serializer.restoreGame({ engine.value = Reversi.Serializer.restoreGame({
@ -447,11 +467,23 @@ function share() {
}); });
} }
function resetTimer() {
playAnimation.value = true;
clearTimeout(playAnimationTimer);
playAnimationTimer = setTimeout(() => playAnimation.value = false, 5000);
}
onMounted(() => { onMounted(() => {
if (props.connection != null) { if (props.connection != null) {
props.connection.on('log', onStreamLog); props.connection.on('log', onStreamLog);
props.connection.on('ended', onStreamEnded); props.connection.on('ended', onStreamEnded);
} }
if (defaultStore.state.showingAnimatedImages === 'inactive') {
window.addEventListener('mousemove', resetTimer);
window.addEventListener('touchstart', resetTimer);
window.addEventListener('touchend', resetTimer);
}
}); });
onActivated(() => { onActivated(() => {
@ -473,6 +505,12 @@ onUnmounted(() => {
props.connection.off('log', onStreamLog); props.connection.off('log', onStreamLog);
props.connection.off('ended', onStreamEnded); props.connection.off('ended', onStreamEnded);
} }
if (defaultStore.state.showingAnimatedImages === 'inactive') {
window.removeEventListener('mousemove', resetTimer);
window.removeEventListener('touchstart', resetTimer);
window.removeEventListener('touchend', resetTimer);
}
}); });
</script> </script>