From f6b7754fb1cec46e0f85ecf0028598d7a49d25ed Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 20 Jan 2024 15:52:35 +0900
Subject: [PATCH] :art:

---
 .../frontend/src/pages/reversi/game.board.vue | 68 +++++++++++++------
 1 file changed, 48 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue
index fbe44d016..b787e301b 100644
--- a/packages/frontend/src/pages/reversi/game.board.vue
+++ b/packages/frontend/src/pages/reversi/game.board.vue
@@ -44,6 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.boardCells" :style="cellsStyle">
 					<div
 						v-for="(stone, i) in engine.board"
+						:key="i"
 						v-tooltip="`${String.fromCharCode(65 + engine.posToXy(i)[0])}${engine.posToXy(i)[1] + 1}`"
 						:class="[$style.boardCell, {
 							[$style.boardCell_empty]: stone == null,
@@ -55,14 +56,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 						}]"
 						@click="putStone(i)"
 					>
-						<template v-if="useAvatarAsStone">
-							<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl"/>
-							<img v-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-if="stone === false" :class="$style.boardCellStone" src="/client-assets/reversi/stone_w.png"/>
-						</template>
+						<Transition
+							:enterActiveClass="$style.transition_flip_enterActive"
+							:leaveActiveClass="$style.transition_flip_leaveActive"
+							:enterFromClass="$style.transition_flip_enterFrom"
+							:leaveToClass="$style.transition_flip_leaveTo"
+							mode="default"
+						>
+							<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 v-if="showBoardLabels" :class="$style.labelsY">
@@ -74,6 +83,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</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>
 				<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>
 		</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`">
 			<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; width: 200px; margin: auto;"/>
 		</MkA>
@@ -395,6 +404,20 @@ onUnmounted(() => {
 <style lang="scss" module>
 @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;
 $gap: 4px;
 
@@ -461,8 +484,9 @@ $gap: 4px;
 .boardCell {
 	background: transparent;
 	border-radius: 6px;
-	overflow: clip;
 	aspect-ratio: 1;
+	transform-style: preserve-3d;
+	perspective: 150px;
 
 	&.boardCell_empty {
 		border: solid 2px var(--divider);
@@ -501,10 +525,14 @@ $gap: 4px;
 }
 
 .boardCellStone {
+	position: absolute;
+	top: 0;
+	left: 0;
 	pointer-events: none;
 	user-select: none;
 	display: block;
 	width: 100%;
 	height: 100%;
+	border-radius: 6px;
 }
 </style>