enhance(drop-and-fusion): some tweaks

packages/frontend/src/pages/drop-and-fusion.game.vue

@@ -4,12 +4,33 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
+<MkSpacer :contentMax="800">
 	<div :class="$style.root">
 		<div v-if="!gameLoaded" :class="$style.loadingScreen">
+			<div>
 				Loading...
 			</div>
+		</div>
 		<!-- ↓に対してTransitionコンポーネントを使うと何故かkeyを指定していてもキャッシュが効かず様々なコンポーネントが都度再評価されてパフォーマンスが低下する -->
 		<div v-show="gameLoaded" class="_gaps_s">
+			<div v-if="readyGo === 'ready'" :class="$style.readyGo_bg">
+			</div>
+			<Transition
+				:enterActiveClass="$style.transition_zoom_enterActive"
+				:leaveActiveClass="$style.transition_zoom_leaveActive"
+				:enterFromClass="$style.transition_zoom_enterFrom"
+				:leaveToClass="$style.transition_zoom_leaveTo"
+				:moveClass="$style.transition_zoom_move"
+				mode="default"
+			>
+				<div v-if="readyGo === 'ready'" :class="$style.readyGo_ready">
+					<img src="/client-assets/drop-and-fusion/ready.png" :class="$style.readyGo_img"/>
+				</div>
+				<div v-else-if="readyGo === 'go'" :class="$style.readyGo_go">
+					<img src="/client-assets/drop-and-fusion/go.png" :class="$style.readyGo_img"/>
+				</div>
+			</Transition>
+
 			<div :class="$style.header">
 				<div :class="[$style.frame, $style.headerTitle]">
 					<div :class="$style.frameInner">
@@ -35,6 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</div>
+
 			<div ref="containerEl" :class="[$style.gameContainer, { [$style.gameOver]: isGameOver && !replaying }]" @contextmenu.stop.prevent @click.stop.prevent="onClick" @touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" @mousemove="onMousemove">
 				<img v-if="defaultStore.state.darkMode" src="/client-assets/drop-and-fusion/frame-dark.svg" :class="$style.mainFrameImg"/>
 				<img v-else src="/client-assets/drop-and-fusion/frame-light.svg" :class="$style.mainFrameImg"/>
@@ -75,6 +97,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<div v-if="replaying" :class="$style.replayIndicator"><span :class="$style.replayIndicatorText"><i class="ti ti-player-play"></i> {{ i18n.ts.replaying }}</span></div>
 			</div>
+
 			<div v-if="replaying" :class="$style.frame">
 				<div :class="$style.frameInner">
 					<div style="background: #0004;">
@@ -89,6 +112,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</div>
+
 			<div v-if="isGameOver" :class="$style.frame">
 				<div :class="$style.frameInner">
 					<div class="_buttonsCenter">
@@ -99,6 +123,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</div>
+
 			<div style="display: flex;">
 				<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
 					<div :class="$style.frameInner">
@@ -113,6 +138,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</div>
+
 			<div v-if="showConfig" :class="$style.frame">
 				<div :class="$style.frameInner">
 					<div class="_gaps">
@@ -125,6 +151,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</div>
+
 			<div :class="$style.frame">
 				<div :class="$style.frameInner">
 					<MkButton v-if="!isGameOver && !replaying" full danger @click="surrender">Surrender</MkButton>
@@ -133,6 +160,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
@@ -439,6 +467,7 @@ const maxCombo = ref(0);
 const dropReady = ref(true);
 const isGameOver = ref(false);
 const gameLoaded = ref(false);
+const readyGo = ref<'ready' | 'go' | null>('ready');
 const highScore = ref<number | null>(null);
 const yenTotal = ref<number | null>(null);
 const showConfig = ref(false);
@@ -579,6 +608,13 @@ async function start() {
 	window.requestAnimationFrame(tick);
 
 	gameLoaded.value = true;
+
+	window.setTimeout(() => {
+		readyGo.value = 'go';
+		window.setTimeout(() => {
+			readyGo.value = null;
+		}, 1000);
+	}, 1500);
 }
 
 function onClick(ev: MouseEvent) {
@@ -650,6 +686,7 @@ function reset() {
 	comboPrev.value = 0;
 	maxCombo.value = 0;
 	gameLoaded.value = false;
+	readyGo.value = false;
 }
 
 function dispose() {
@@ -1128,6 +1165,36 @@ definePageMetadata({
 	padding: 32px;
 }
 
+.readyGo_bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 100;
+	backdrop-filter: blur(4px);
+}
+
+.readyGo_ready,
+.readyGo_go {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 101;
+	pointer-events: none;
+}
+
+.readyGo_img {
+	display: block;
+	width: 250px;
+	max-width: 100%;
+}
+
 .frame {
 	padding: 7px;
 	background: #8C4F26;

packages/frontend/src/pages/drop-and-fusion.vue

@@ -4,7 +4,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkSpacer :contentMax="800">
 <Transition
 	:enterActiveClass="$style.transition_zoom_enterActive"
 	:leaveActiveClass="$style.transition_zoom_leaveActive"
@@ -13,7 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:moveClass="$style.transition_zoom_move"
 	mode="out-in"
 >
-		<div v-if="!gameStarted" :class="$style.root">
+	<MkSpacer v-if="!gameStarted" :contentMax="800">
+		<div :class="$style.root">
 			<div class="_gaps">
 				<div :class="$style.frame" style="text-align: center;">
 					<div :class="$style.frameInner">
@@ -78,11 +78,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 		</div>
-		<div v-else>
-			<XGame :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
-		</div>
-	</Transition>
 	</MkSpacer>
+	<XGame v-else :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
+</Transition>
 </template>
 
 <script lang="ts" setup>