enhance(drop-and-fusion): some tweaks

This commit is contained in:
syuilo 2024-01-13 14:57:06 +09:00
parent 5503ad9d1a
commit d246f6c360
4 changed files with 188 additions and 123 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -4,12 +4,33 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div :class="$style.root"> <MkSpacer :contentMax="800">
<div :class="$style.root">
<div v-if="!gameLoaded" :class="$style.loadingScreen"> <div v-if="!gameLoaded" :class="$style.loadingScreen">
<div>
Loading... Loading...
</div> </div>
</div>
<!-- に対してTransitionコンポーネントを使うと何故かkeyを指定していてもキャッシュが効かず様々なコンポーネントが都度再評価されてパフォーマンスが低下する --> <!-- に対してTransitionコンポーネントを使うと何故かkeyを指定していてもキャッシュが効かず様々なコンポーネントが都度再評価されてパフォーマンスが低下する -->
<div v-show="gameLoaded" class="_gaps_s"> <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.header">
<div :class="[$style.frame, $style.headerTitle]"> <div :class="[$style.frame, $style.headerTitle]">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
@ -35,6 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </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"> <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-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"/> <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>
<div v-if="replaying" :class="$style.replayIndicator"><span :class="$style.replayIndicatorText"><i class="ti ti-player-play"></i> {{ i18n.ts.replaying }}</span></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>
<div v-if="replaying" :class="$style.frame"> <div v-if="replaying" :class="$style.frame">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<div style="background: #0004;"> <div style="background: #0004;">
@ -89,6 +112,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<div v-if="isGameOver" :class="$style.frame"> <div v-if="isGameOver" :class="$style.frame">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<div class="_buttonsCenter"> <div class="_buttonsCenter">
@ -99,6 +123,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div :class="$style.frame" style="flex: 1; margin-right: 10px;"> <div :class="$style.frame" style="flex: 1; margin-right: 10px;">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
@ -113,6 +138,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<div v-if="showConfig" :class="$style.frame"> <div v-if="showConfig" :class="$style.frame">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<div class="_gaps"> <div class="_gaps">
@ -125,6 +151,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<div :class="$style.frame"> <div :class="$style.frame">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<MkButton v-if="!isGameOver && !replaying" full danger @click="surrender">Surrender</MkButton> <MkButton v-if="!isGameOver && !replaying" full danger @click="surrender">Surrender</MkButton>
@ -132,7 +159,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</MkSpacer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -439,6 +467,7 @@ const maxCombo = ref(0);
const dropReady = ref(true); const dropReady = ref(true);
const isGameOver = ref(false); const isGameOver = ref(false);
const gameLoaded = ref(false); const gameLoaded = ref(false);
const readyGo = ref<'ready' | 'go' | null>('ready');
const highScore = ref<number | null>(null); const highScore = ref<number | null>(null);
const yenTotal = ref<number | null>(null); const yenTotal = ref<number | null>(null);
const showConfig = ref(false); const showConfig = ref(false);
@ -579,6 +608,13 @@ async function start() {
window.requestAnimationFrame(tick); window.requestAnimationFrame(tick);
gameLoaded.value = true; gameLoaded.value = true;
window.setTimeout(() => {
readyGo.value = 'go';
window.setTimeout(() => {
readyGo.value = null;
}, 1000);
}, 1500);
} }
function onClick(ev: MouseEvent) { function onClick(ev: MouseEvent) {
@ -650,6 +686,7 @@ function reset() {
comboPrev.value = 0; comboPrev.value = 0;
maxCombo.value = 0; maxCombo.value = 0;
gameLoaded.value = false; gameLoaded.value = false;
readyGo.value = false;
} }
function dispose() { function dispose() {
@ -1128,6 +1165,36 @@ definePageMetadata({
padding: 32px; 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 { .frame {
padding: 7px; padding: 7px;
background: #8C4F26; background: #8C4F26;

View File

@ -4,16 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkSpacer :contentMax="800"> <Transition
<Transition
:enterActiveClass="$style.transition_zoom_enterActive" :enterActiveClass="$style.transition_zoom_enterActive"
:leaveActiveClass="$style.transition_zoom_leaveActive" :leaveActiveClass="$style.transition_zoom_leaveActive"
:enterFromClass="$style.transition_zoom_enterFrom" :enterFromClass="$style.transition_zoom_enterFrom"
:leaveToClass="$style.transition_zoom_leaveTo" :leaveToClass="$style.transition_zoom_leaveTo"
:moveClass="$style.transition_zoom_move" :moveClass="$style.transition_zoom_move"
mode="out-in" 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="_gaps">
<div :class="$style.frame" style="text-align: center;"> <div :class="$style.frame" style="text-align: center;">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
@ -78,11 +78,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<div v-else> </MkSpacer>
<XGame :gameMode="gameMode" :mute="mute" @end="onGameEnd"/> <XGame v-else :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
</div> </Transition>
</Transition>
</MkSpacer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>