mirror of
https://github.com/paricafe/misskey.git
synced 2024-11-24 11:46:43 -06:00
enhance(drop-and-fusion): some tweaks
This commit is contained in:
syuilo
parent
5503ad9d1a
commit
d246f6c360
4 changed files with 188 additions and 123 deletions
BIN
packages/frontend/assets/drop-and-fusion/go.png
Normal file
BIN
packages/frontend/assets/drop-and-fusion/go.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
packages/frontend/assets/drop-and-fusion/ready.png
Normal file
BIN
packages/frontend/assets/drop-and-fusion/ready.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -4,135 +4,163 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="$style.root">
|
<MkSpacer :contentMax="800">
|
||||||
<div v-if="!gameLoaded" :class="$style.loadingScreen">
|
<div :class="$style.root">
|
||||||
Loading...
|
<div v-if="!gameLoaded" :class="$style.loadingScreen">
|
||||||
</div>
|
<div>
|
||||||
<!-- ↓に対してTransitionコンポーネントを使うと何故かkeyを指定していてもキャッシュが効かず様々なコンポーネントが都度再評価されてパフォーマンスが低下する -->
|
Loading...
|
||||||
<div v-show="gameLoaded" class="_gaps_s">
|
|
||||||
<div :class="$style.header">
|
|
||||||
<div :class="[$style.frame, $style.headerTitle]">
|
|
||||||
<div :class="$style.frameInner">
|
|
||||||
<b>BUBBLE GAME</b>
|
|
||||||
<div>- {{ gameMode }} -</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :class="[$style.frame, $style.frameH]">
|
|
||||||
<div :class="$style.frameInner">
|
|
||||||
<MkButton inline small @click="hold">HOLD</MkButton>
|
|
||||||
<img v-if="holdingStock" :src="getTextureImageUrl(holdingStock.mono)" style="width: 32px; margin-left: 8px; vertical-align: bottom;"/>
|
|
||||||
</div>
|
|
||||||
<div :class="[$style.frameInner, $style.stock]" style="text-align: center;">
|
|
||||||
<TransitionGroup
|
|
||||||
:enterActiveClass="$style.transition_stock_enterActive"
|
|
||||||
:leaveActiveClass="$style.transition_stock_leaveActive"
|
|
||||||
:enterFromClass="$style.transition_stock_enterFrom"
|
|
||||||
:leaveToClass="$style.transition_stock_leaveTo"
|
|
||||||
:moveClass="$style.transition_stock_move"
|
|
||||||
>
|
|
||||||
<img v-for="x in stock" :key="x.id" :src="getTextureImageUrl(x.mono)" style="width: 32px; vertical-align: bottom;"/>
|
|
||||||
</TransitionGroup>
|
|
||||||
</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">
|
<!-- ↓に対してTransitionコンポーネントを使うと何故かkeyを指定していてもキャッシュが効かず様々なコンポーネントが都度再評価されてパフォーマンスが低下する -->
|
||||||
<img v-if="defaultStore.state.darkMode" src="/client-assets/drop-and-fusion/frame-dark.svg" :class="$style.mainFrameImg"/>
|
<div v-show="gameLoaded" class="_gaps_s">
|
||||||
<img v-else src="/client-assets/drop-and-fusion/frame-light.svg" :class="$style.mainFrameImg"/>
|
<div v-if="readyGo === 'ready'" :class="$style.readyGo_bg">
|
||||||
<canvas ref="canvasEl" :class="$style.canvas"/>
|
</div>
|
||||||
<Transition
|
<Transition
|
||||||
:enterActiveClass="$style.transition_combo_enterActive"
|
:enterActiveClass="$style.transition_zoom_enterActive"
|
||||||
:leaveActiveClass="$style.transition_combo_leaveActive"
|
:leaveActiveClass="$style.transition_zoom_leaveActive"
|
||||||
:enterFromClass="$style.transition_combo_enterFrom"
|
:enterFromClass="$style.transition_zoom_enterFrom"
|
||||||
:leaveToClass="$style.transition_combo_leaveTo"
|
:leaveToClass="$style.transition_zoom_leaveTo"
|
||||||
:moveClass="$style.transition_combo_move"
|
:moveClass="$style.transition_zoom_move"
|
||||||
|
mode="default"
|
||||||
>
|
>
|
||||||
<div v-show="combo > 1" :class="$style.combo" :style="{ fontSize: `${100 + ((comboPrev - 2) * 15)}%` }">{{ comboPrev }} Chain!</div>
|
<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>
|
</Transition>
|
||||||
<div v-if="!isGameOver && !replaying" :class="$style.dropperContainer" :style="{ left: dropperX + 'px' }">
|
|
||||||
<!--<img v-if="currentPick" src="/client-assets/drop-and-fusion/dropper.png" :class="$style.dropper" :style="{ left: dropperX + 'px' }"/>-->
|
<div :class="$style.header">
|
||||||
|
<div :class="[$style.frame, $style.headerTitle]">
|
||||||
|
<div :class="$style.frameInner">
|
||||||
|
<b>BUBBLE GAME</b>
|
||||||
|
<div>- {{ gameMode }} -</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :class="[$style.frame, $style.frameH]">
|
||||||
|
<div :class="$style.frameInner">
|
||||||
|
<MkButton inline small @click="hold">HOLD</MkButton>
|
||||||
|
<img v-if="holdingStock" :src="getTextureImageUrl(holdingStock.mono)" style="width: 32px; margin-left: 8px; vertical-align: bottom;"/>
|
||||||
|
</div>
|
||||||
|
<div :class="[$style.frameInner, $style.stock]" style="text-align: center;">
|
||||||
|
<TransitionGroup
|
||||||
|
:enterActiveClass="$style.transition_stock_enterActive"
|
||||||
|
:leaveActiveClass="$style.transition_stock_leaveActive"
|
||||||
|
:enterFromClass="$style.transition_stock_enterFrom"
|
||||||
|
:leaveToClass="$style.transition_stock_leaveTo"
|
||||||
|
:moveClass="$style.transition_stock_move"
|
||||||
|
>
|
||||||
|
<img v-for="x in stock" :key="x.id" :src="getTextureImageUrl(x.mono)" style="width: 32px; vertical-align: bottom;"/>
|
||||||
|
</TransitionGroup>
|
||||||
|
</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"/>
|
||||||
|
<canvas ref="canvasEl" :class="$style.canvas"/>
|
||||||
<Transition
|
<Transition
|
||||||
:enterActiveClass="$style.transition_picked_enterActive"
|
:enterActiveClass="$style.transition_combo_enterActive"
|
||||||
:leaveActiveClass="$style.transition_picked_leaveActive"
|
:leaveActiveClass="$style.transition_combo_leaveActive"
|
||||||
:enterFromClass="$style.transition_picked_enterFrom"
|
:enterFromClass="$style.transition_combo_enterFrom"
|
||||||
:leaveToClass="$style.transition_picked_leaveTo"
|
:leaveToClass="$style.transition_combo_leaveTo"
|
||||||
:moveClass="$style.transition_picked_move"
|
:moveClass="$style.transition_combo_move"
|
||||||
mode="out-in"
|
|
||||||
>
|
>
|
||||||
<img v-if="currentPick" :key="currentPick.id" :src="getTextureImageUrl(currentPick.mono)" :class="$style.currentMono" :style="{ marginBottom: -((currentPick?.mono.sizeY * viewScale) / 2) + 'px', left: -((currentPick?.mono.sizeX * viewScale) / 2) + 'px', width: `${currentPick?.mono.sizeX * viewScale}px` }"/>
|
<div v-show="combo > 1" :class="$style.combo" :style="{ fontSize: `${100 + ((comboPrev - 2) * 15)}%` }">{{ comboPrev }} Chain!</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
<template v-if="dropReady && currentPick">
|
<div v-if="!isGameOver && !replaying" :class="$style.dropperContainer" :style="{ left: dropperX + 'px' }">
|
||||||
<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow"/>
|
<!--<img v-if="currentPick" src="/client-assets/drop-and-fusion/dropper.png" :class="$style.dropper" :style="{ left: dropperX + 'px' }"/>-->
|
||||||
<div :class="$style.dropGuide"/>
|
<Transition
|
||||||
</template>
|
:enterActiveClass="$style.transition_picked_enterActive"
|
||||||
</div>
|
:leaveActiveClass="$style.transition_picked_leaveActive"
|
||||||
<div v-if="isGameOver && !replaying" :class="$style.gameOverLabel">
|
:enterFromClass="$style.transition_picked_enterFrom"
|
||||||
<div class="_gaps_s">
|
:leaveToClass="$style.transition_picked_leaveTo"
|
||||||
<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
|
:moveClass="$style.transition_picked_move"
|
||||||
<div>SCORE: <MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</div>
|
mode="out-in"
|
||||||
<div>MAX CHAIN: <MkNumber :value="maxCombo"/></div>
|
>
|
||||||
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b><MkNumber :value="yenTotal ?? score"/>円</b></div>
|
<img v-if="currentPick" :key="currentPick.id" :src="getTextureImageUrl(currentPick.mono)" :class="$style.currentMono" :style="{ marginBottom: -((currentPick?.mono.sizeY * viewScale) / 2) + 'px', left: -((currentPick?.mono.sizeX * viewScale) / 2) + 'px', width: `${currentPick?.mono.sizeX * viewScale}px` }"/>
|
||||||
|
</Transition>
|
||||||
|
<template v-if="dropReady && currentPick">
|
||||||
|
<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow"/>
|
||||||
|
<div :class="$style.dropGuide"/>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-if="isGameOver && !replaying" :class="$style.gameOverLabel">
|
||||||
<div v-if="replaying" :class="$style.replayIndicator"><span :class="$style.replayIndicatorText"><i class="ti ti-player-play"></i> {{ i18n.ts.replaying }}</span></div>
|
<div class="_gaps_s">
|
||||||
</div>
|
<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
|
||||||
<div v-if="replaying" :class="$style.frame">
|
<div>SCORE: <MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</div>
|
||||||
<div :class="$style.frameInner">
|
<div>MAX CHAIN: <MkNumber :value="maxCombo"/></div>
|
||||||
<div style="background: #0004;">
|
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b><MkNumber :value="yenTotal ?? score"/>円</b></div>
|
||||||
<div style="height: 10px; background: var(--accent); will-change: width;" :style="{ width: `${(currentFrame / endedAtFrame) * 100}%` }"></div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<div :class="$style.frameInner">
|
|
||||||
<div class="_buttonsCenter">
|
<div v-if="replaying" :class="$style.frame">
|
||||||
<MkButton @click="endReplay"><i class="ti ti-player-stop"></i> END</MkButton>
|
|
||||||
<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton>
|
|
||||||
<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ti ti-player-track-next"></i> x16</MkButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="isGameOver" :class="$style.frame">
|
|
||||||
<div :class="$style.frameInner">
|
|
||||||
<div class="_buttonsCenter">
|
|
||||||
<MkButton primary rounded @click="backToTitle">{{ i18n.ts.backToTitle }}</MkButton>
|
|
||||||
<MkButton primary rounded @click="replay">{{ i18n.ts.showReplay }}</MkButton>
|
|
||||||
<MkButton primary rounded @click="share">{{ i18n.ts.share }}</MkButton>
|
|
||||||
<MkButton rounded @click="exportLog">Copy replay data</MkButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex;">
|
|
||||||
<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
|
|
||||||
<div :class="$style.frameInner">
|
<div :class="$style.frameInner">
|
||||||
<div>SCORE: <b><MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b></div>
|
<div style="background: #0004;">
|
||||||
<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b><b v-else>-</b></div>
|
<div style="height: 10px; background: var(--accent); will-change: width;" :style="{ width: `${(currentFrame / endedAtFrame) * 100}%` }"></div>
|
||||||
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b v-if="yenTotal"><MkNumber :value="yenTotal"/>円</b><b v-else>-</b></div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :class="$style.frameInner">
|
||||||
|
<div class="_buttonsCenter">
|
||||||
|
<MkButton @click="endReplay"><i class="ti ti-player-stop"></i> END</MkButton>
|
||||||
|
<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton>
|
||||||
|
<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ti ti-player-track-next"></i> x16</MkButton>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[$style.frame]" style="margin-left: auto;">
|
|
||||||
<div :class="$style.frameInner" style="text-align: center;">
|
<div v-if="isGameOver" :class="$style.frame">
|
||||||
<div @click="showConfig = !showConfig"><i class="ti ti-settings"></i></div>
|
<div :class="$style.frameInner">
|
||||||
|
<div class="_buttonsCenter">
|
||||||
|
<MkButton primary rounded @click="backToTitle">{{ i18n.ts.backToTitle }}</MkButton>
|
||||||
|
<MkButton primary rounded @click="replay">{{ i18n.ts.showReplay }}</MkButton>
|
||||||
|
<MkButton primary rounded @click="share">{{ i18n.ts.share }}</MkButton>
|
||||||
|
<MkButton rounded @click="exportLog">Copy replay data</MkButton>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div v-if="showConfig" :class="$style.frame">
|
<div style="display: flex;">
|
||||||
<div :class="$style.frameInner">
|
<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
|
||||||
<div class="_gaps">
|
<div :class="$style.frameInner">
|
||||||
<MkRange v-model="bgmVolume" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`" :continuousUpdate="true" @dragEnded="(v) => updateSettings('bgmVolume', v)">
|
<div>SCORE: <b><MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b></div>
|
||||||
<template #label>BGM {{ i18n.ts.volume }}</template>
|
<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b><b v-else>-</b></div>
|
||||||
</MkRange>
|
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b v-if="yenTotal"><MkNumber :value="yenTotal"/>円</b><b v-else>-</b></div>
|
||||||
<MkRange v-model="sfxVolume" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`" :continuousUpdate="true" @dragEnded="(v) => updateSettings('sfxVolume', v)">
|
</div>
|
||||||
<template #label>{{ i18n.ts.sfx }} {{ i18n.ts.volume }}</template>
|
</div>
|
||||||
</MkRange>
|
<div :class="[$style.frame]" style="margin-left: auto;">
|
||||||
|
<div :class="$style.frameInner" style="text-align: center;">
|
||||||
|
<div @click="showConfig = !showConfig"><i class="ti ti-settings"></i></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div :class="$style.frame">
|
<div v-if="showConfig" :class="$style.frame">
|
||||||
<div :class="$style.frameInner">
|
<div :class="$style.frameInner">
|
||||||
<MkButton v-if="!isGameOver && !replaying" full danger @click="surrender">Surrender</MkButton>
|
<div class="_gaps">
|
||||||
<MkButton v-else full @click="restart">Retry</MkButton>
|
<MkRange v-model="bgmVolume" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`" :continuousUpdate="true" @dragEnded="(v) => updateSettings('bgmVolume', v)">
|
||||||
|
<template #label>BGM {{ i18n.ts.volume }}</template>
|
||||||
|
</MkRange>
|
||||||
|
<MkRange v-model="sfxVolume" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`" :continuousUpdate="true" @dragEnded="(v) => updateSettings('sfxVolume', v)">
|
||||||
|
<template #label>{{ i18n.ts.sfx }} {{ i18n.ts.volume }}</template>
|
||||||
|
</MkRange>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :class="$style.frame">
|
||||||
|
<div :class="$style.frameInner">
|
||||||
|
<MkButton v-if="!isGameOver && !replaying" full danger @click="surrender">Surrender</MkButton>
|
||||||
|
<MkButton v-else full @click="restart">Retry</MkButton>
|
||||||
|
</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;
|
||||||
|
|
|
||||||
|
|
@ -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"
|
>
|
||||||
>
|
<MkSpacer v-if="!gameStarted" :contentMax="800">
|
||||||
<div v-if="!gameStarted" :class="$style.root">
|
<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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue