heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2024-01-20 15:52:35 +09:00
parent 3bf3ba450c
commit f6b7754fb1
1 changed files with 48 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
packages/frontend/src/pages/reversi/game.board.vue
View file

@ -44,6 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.boardCells" :style="cellsStyle"> <div :class="$style.boardCells" :style="cellsStyle">
<div <div
v-for="(stone, i) in engine.board" v-for="(stone, i) in engine.board"
:key="i"
v-tooltip="`${String.fromCharCode(65 + engine.posToXy(i)[0])}${engine.posToXy(i)[1] + 1}`" v-tooltip="`${String.fromCharCode(65 + engine.posToXy(i)[0])}${engine.posToXy(i)[1] + 1}`"
:class="[$style.boardCell, { :class="[$style.boardCell, {
[$style.boardCell_empty]: stone == null, [$style.boardCell_empty]: stone == null,
@ -55,14 +56,22 @@ SPDX-License-Identifier: AGPL-3.0-only
}]" }]"
@click="putStone(i)" @click="putStone(i)"
> >
<template v-if="useAvatarAsStone"> <Transition
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl"/> :enterActiveClass="$style.transition_flip_enterActive"
<img v-if="stone === false" :class="$style.boardCellStone" :src="whiteUser.avatarUrl"/> :leaveActiveClass="$style.transition_flip_leaveActive"
</template> :enterFromClass="$style.transition_flip_enterFrom"
<template v-else> :leaveToClass="$style.transition_flip_leaveTo"
<img v-if="stone === true" :class="$style.boardCellStone" src="/client-assets/reversi/stone_b.png"/> mode="default"
<img v-if="stone === false" :class="$style.boardCellStone" src="/client-assets/reversi/stone_w.png"/> >
</template> <template v-if="useAvatarAsStone">
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUser.avatarUrl"/>
</template>
<template v-else>
<img v-if="stone === true" :class="$style.boardCellStone" src="/client-assets/reversi/stone_b.png"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" src="/client-assets/reversi/stone_w.png"/>
</template>
</Transition>
</div> </div>
</div> </div>
<div v-if="showBoardLabels" :class="$style.labelsY"> <div v-if="showBoardLabels" :class="$style.labelsY">
@ -74,6 +83,17 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
<div v-if="game.isEnded" class="_panel _gaps_s" style="padding: 16px;">
<div>{{ logPos }} / {{ game.logs.length }}</div>
<div v-if="!autoplaying" class="_buttonsCenter">
<MkButton :disabled="logPos === 0" @click="logPos = 0"><i class="ti ti-chevrons-left"></i></MkButton>
<MkButton :disabled="logPos === 0" @click="logPos--"><i class="ti ti-chevron-left"></i></MkButton>
<MkButton :disabled="logPos === game.logs.length" @click="logPos++"><i class="ti ti-chevron-right"></i></MkButton>
<MkButton :disabled="logPos === game.logs.length" @click="logPos = game.logs.length"><i class="ti ti-chevrons-right"></i></MkButton>
</div>
<MkButton style="margin: auto;" :disabled="autoplaying" @click="autoplay()"><i class="ti ti-player-play"></i></MkButton>
</div>
<div class="_panel" style="padding: 16px;"> <div class="_panel" style="padding: 16px;">
<div> <div>
<b>{{ i18n.tsx._reversi.turnCount({ count: logPos }) }}</b> {{ i18n.ts._reversi.black }}:{{ engine.blackCount }} {{ i18n.ts._reversi.white }}:{{ engine.whiteCount }} {{ i18n.ts._reversi.total }}:{{ engine.blackCount + engine.whiteCount }} <b>{{ i18n.tsx._reversi.turnCount({ count: logPos }) }}</b> {{ i18n.ts._reversi.black }}:{{ engine.blackCount }} {{ i18n.ts._reversi.white }}:{{ engine.whiteCount }} {{ i18n.ts._reversi.total }}:{{ engine.blackCount + engine.whiteCount }}
@ -111,17 +131,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton @click="share">{{ i18n.ts.share }}</MkButton> <MkButton @click="share">{{ i18n.ts.share }}</MkButton>
</div> </div>
<div v-if="game.isEnded" class="_panel _gaps_s" style="padding: 16px;">
<div>{{ logPos }} / {{ game.logs.length }}</div>
<div v-if="!autoplaying" class="_buttonsCenter">
<MkButton :disabled="logPos === 0" @click="logPos = 0"><i class="ti ti-chevrons-left"></i></MkButton>
<MkButton :disabled="logPos === 0" @click="logPos--"><i class="ti ti-chevron-left"></i></MkButton>
<MkButton :disabled="logPos === game.logs.length" @click="logPos++"><i class="ti ti-chevron-right"></i></MkButton>
<MkButton :disabled="logPos === game.logs.length" @click="logPos = game.logs.length"><i class="ti ti-chevrons-right"></i></MkButton>
</div>
<MkButton style="margin: auto;" :disabled="autoplaying" @click="autoplay()"><i class="ti ti-player-play"></i></MkButton>
</div>
<MkA v-if="game.isEnded" :to="`/reversi`"> <MkA v-if="game.isEnded" :to="`/reversi`">
<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; width: 200px; margin: auto;"/> <img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; width: 200px; margin: auto;"/>
</MkA> </MkA>
@ -395,6 +404,20 @@ onUnmounted(() => {
<style lang="scss" module> <style lang="scss" module>
@use "sass:math"; @use "sass:math";
.transition_flip_enterActive,
.transition_flip_leaveActive {
backface-visibility: hidden;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.transition_flip_enterFrom {
transform: rotateY(-180deg);
opacity: 0;
}
.transition_flip_leaveTo {
transform: rotateY(180deg);
opacity: 0;
}
$label-size: 16px; $label-size: 16px;
$gap: 4px; $gap: 4px;
@ -461,8 +484,9 @@ $gap: 4px;
.boardCell { .boardCell {
background: transparent; background: transparent;
border-radius: 6px; border-radius: 6px;
overflow: clip;
aspect-ratio: 1; aspect-ratio: 1;
transform-style: preserve-3d;
perspective: 150px;
&.boardCell_empty { &.boardCell_empty {
border: solid 2px var(--divider); border: solid 2px var(--divider);
@ -501,10 +525,14 @@ $gap: 4px;
} }
.boardCellStone { .boardCellStone {
position: absolute;
top: 0;
left: 0;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px;
} }
</style> </style>