worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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
}]"
@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
:enterActiveClass="$style.transition_flip_enterActive"
@ -66,8 +70,8 @@ SPDX-License-Identifier: AGPL-3.0-only
mode="default"
>
<template v-if="useAvatarAsStone">
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl ?? undefined"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUser.avatarUrl ?? undefined"/>
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUserUrl ?? undefined"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUserUrl ?? undefined"/>
</template>
<template v-else>
<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 os from '@/os.js';
import { confetti } from '@/scripts/confetti.js';
import { defaultStore } from '@/store.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
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) => {
if (!game.value.isEnded) return;
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(() => {
if (props.connection != null) {
props.connection.on('log', onStreamLog);
props.connection.on('ended', onStreamEnded);
}
if (defaultStore.state.showingAnimatedImages === 'inactive') {
window.addEventListener('mousemove', resetTimer);
window.addEventListener('touchstart', resetTimer);
window.addEventListener('touchend', resetTimer);
}
});
onActivated(() => {
@ -473,6 +505,12 @@ onUnmounted(() => {
props.connection.off('log', onStreamLog);
props.connection.off('ended', onStreamEnded);
}
if (defaultStore.state.showingAnimatedImages === 'inactive') {
window.removeEventListener('mousemove', resetTimer);
window.removeEventListener('touchstart', resetTimer);
window.removeEventListener('touchend', resetTimer);
}
});
</script>