2024-01-06 05:15:28 -06:00
|
|
|
<!--
|
|
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
|
|
|
<template>
|
2024-01-12 23:57:06 -06:00
|
|
|
<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="out-in"
|
|
|
|
>
|
|
|
|
<MkSpacer v-if="!gameStarted" :contentMax="800">
|
|
|
|
<div :class="$style.root">
|
2024-01-10 02:31:59 -06:00
|
|
|
<div class="_gaps">
|
|
|
|
<div :class="$style.frame" style="text-align: center;">
|
2024-01-07 01:03:23 -06:00
|
|
|
<div :class="$style.frameInner">
|
|
|
|
<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-10 02:31:59 -06:00
|
|
|
<div :class="$style.frame" style="text-align: center;">
|
2024-01-07 01:03:23 -06:00
|
|
|
<div :class="$style.frameInner">
|
|
|
|
<div class="_gaps" style="padding: 16px;">
|
|
|
|
<MkSelect v-model="gameMode">
|
|
|
|
<option value="normal">NORMAL</option>
|
|
|
|
<option value="square">SQUARE</option>
|
2024-01-11 23:48:44 -06:00
|
|
|
<option value="yen">YEN</option>
|
2024-01-13 21:59:58 -06:00
|
|
|
<option value="sweets">SWEETS</option>
|
2024-01-07 01:03:23 -06:00
|
|
|
</MkSelect>
|
|
|
|
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-08 22:25:33 -06:00
|
|
|
<div :class="$style.frameInner">
|
|
|
|
<div class="_gaps" style="padding: 16px;">
|
|
|
|
<div style="font-size: 90%;"><i class="ti ti-music"></i> {{ i18n.ts.soundWillBePlayed }}</div>
|
|
|
|
<MkSwitch v-model="mute">
|
|
|
|
<template #label>{{ i18n.ts.mute }}</template>
|
|
|
|
</MkSwitch>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-07 01:03:23 -06:00
|
|
|
</div>
|
2024-01-11 03:13:39 -06:00
|
|
|
<div :class="$style.frame">
|
|
|
|
<div :class="$style.frameInner">
|
|
|
|
<div class="_gaps_s" style="padding: 16px;">
|
2024-01-11 23:48:44 -06:00
|
|
|
<div><b>{{ i18n.t('lastNDays', { n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode }})</div>
|
2024-01-11 03:13:39 -06:00
|
|
|
<div v-if="ranking" class="_gaps_s">
|
|
|
|
<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
|
|
|
|
<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
|
|
|
|
<MkUserName :user="r.user" :nowrap="true"/>
|
2024-01-13 03:03:31 -06:00
|
|
|
<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ getScoreUnit(gameMode) }}</b>
|
2024-01-11 03:13:39 -06:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-else>{{ i18n.ts.loading }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-10 02:31:59 -06:00
|
|
|
<div :class="$style.frame">
|
2024-01-10 04:54:59 -06:00
|
|
|
<div :class="$style.frameInner" style="padding: 16px;">
|
|
|
|
<div style="font-weight: bold;">{{ i18n.ts._bubbleGame.howToPlay }}</div>
|
2024-01-10 02:31:59 -06:00
|
|
|
<ol>
|
|
|
|
<li>{{ i18n.ts._bubbleGame._howToPlay.section1 }}</li>
|
|
|
|
<li>{{ i18n.ts._bubbleGame._howToPlay.section2 }}</li>
|
|
|
|
<li>{{ i18n.ts._bubbleGame._howToPlay.section3 }}</li>
|
|
|
|
</ol>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-10 04:54:59 -06:00
|
|
|
<div :class="$style.frame">
|
2024-01-06 22:19:10 -06:00
|
|
|
<div :class="$style.frameInner">
|
2024-01-10 04:54:59 -06:00
|
|
|
<div class="_gaps_s" style="padding: 16px;">
|
|
|
|
<div><b>Credit</b></div>
|
|
|
|
<div>
|
|
|
|
<div>Ai-chan illustration: @poteriri@misskey.io</div>
|
|
|
|
<div>BGM: @ys@misskey.design</div>
|
|
|
|
</div>
|
2024-01-08 22:25:33 -06:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-07 21:46:20 -06:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-06 05:15:28 -06:00
|
|
|
</div>
|
2024-01-12 23:57:06 -06:00
|
|
|
</MkSpacer>
|
|
|
|
<XGame v-else :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
|
|
|
|
</Transition>
|
2024-01-06 05:15:28 -06:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2024-01-13 03:03:31 -06:00
|
|
|
import { computed, ref, watch } from 'vue';
|
2024-01-10 04:54:59 -06:00
|
|
|
import XGame from './drop-and-fusion.game.vue';
|
2024-01-06 05:15:28 -06:00
|
|
|
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
|
|
|
import MkButton from '@/components/MkButton.vue';
|
2024-01-06 22:19:10 -06:00
|
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
import MkSelect from '@/components/MkSelect.vue';
|
2024-01-08 22:25:33 -06:00
|
|
|
import MkSwitch from '@/components/MkSwitch.vue';
|
2024-01-11 03:13:39 -06:00
|
|
|
import { misskeyApiGet } from '@/scripts/misskey-api.js';
|
2024-01-06 05:15:28 -06:00
|
|
|
|
2024-01-13 03:03:31 -06:00
|
|
|
const gameMode = ref<'normal' | 'square' | 'yen' | 'sweets'>('normal');
|
2024-01-06 05:15:28 -06:00
|
|
|
const gameStarted = ref(false);
|
2024-01-08 22:25:33 -06:00
|
|
|
const mute = ref(false);
|
2024-01-11 03:13:39 -06:00
|
|
|
const ranking = ref(null);
|
|
|
|
|
|
|
|
watch(gameMode, async () => {
|
|
|
|
ranking.value = await misskeyApiGet('bubble-game/ranking', { gameMode: gameMode.value });
|
|
|
|
}, { immediate: true });
|
2024-01-07 21:46:20 -06:00
|
|
|
|
2024-01-13 03:03:31 -06:00
|
|
|
function getScoreUnit(gameMode: string) {
|
|
|
|
return gameMode === 'normal' ? 'pt' :
|
|
|
|
gameMode === 'square' ? 'pt' :
|
|
|
|
gameMode === 'yen' ? '円' :
|
|
|
|
gameMode === 'sweets' ? 'kcal' :
|
|
|
|
'' as never;
|
|
|
|
}
|
|
|
|
|
2024-01-06 22:19:10 -06:00
|
|
|
async function start() {
|
2024-01-10 04:54:59 -06:00
|
|
|
gameStarted.value = true;
|
2024-01-06 22:19:10 -06:00
|
|
|
}
|
2024-01-06 05:15:28 -06:00
|
|
|
|
2024-01-10 04:54:59 -06:00
|
|
|
function onGameEnd() {
|
|
|
|
gameStarted.value = false;
|
2024-01-06 23:21:19 -06:00
|
|
|
}
|
|
|
|
|
2024-01-06 05:15:28 -06:00
|
|
|
definePageMetadata({
|
2024-01-06 22:19:10 -06:00
|
|
|
title: i18n.ts.bubbleGame,
|
2024-01-06 05:15:28 -06:00
|
|
|
icon: 'ti ti-apple',
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" module>
|
2024-01-10 04:54:59 -06:00
|
|
|
.transition_zoom_move,
|
|
|
|
.transition_zoom_enterActive,
|
|
|
|
.transition_zoom_leaveActive {
|
2024-01-06 05:15:28 -06:00
|
|
|
transition: opacity 0.5s cubic-bezier(0,.5,.5,1), transform 0.5s cubic-bezier(0,.5,.5,1) !important;
|
|
|
|
}
|
2024-01-10 04:54:59 -06:00
|
|
|
.transition_zoom_enterFrom,
|
|
|
|
.transition_zoom_leaveTo {
|
2024-01-06 05:15:28 -06:00
|
|
|
opacity: 0;
|
2024-01-10 04:54:59 -06:00
|
|
|
transform: scale(0.8);
|
2024-01-06 05:15:28 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
.root {
|
2024-01-06 22:19:10 -06:00
|
|
|
margin: 0 auto;
|
|
|
|
max-width: 600px;
|
2024-01-06 05:15:28 -06:00
|
|
|
user-select: none;
|
|
|
|
|
|
|
|
* {
|
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.frame {
|
|
|
|
padding: 7px;
|
|
|
|
background: #8C4F26;
|
|
|
|
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
2024-01-08 22:25:33 -06:00
|
|
|
|
|
|
|
.frameH {
|
|
|
|
display: flex;
|
|
|
|
gap: 6px;
|
|
|
|
}
|
|
|
|
|
2024-01-06 05:15:28 -06:00
|
|
|
.frameInner {
|
2024-01-08 22:25:33 -06:00
|
|
|
padding: 8px;
|
|
|
|
margin-top: 8px;
|
2024-01-06 05:15:28 -06:00
|
|
|
background: #F1E8DC;
|
|
|
|
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
|
|
|
|
border-radius: 6px;
|
|
|
|
color: #693410;
|
2024-01-08 22:25:33 -06:00
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
2024-01-06 05:15:28 -06:00
|
|
|
}
|
|
|
|
|
2024-01-08 22:25:33 -06:00
|
|
|
.frameDivider {
|
|
|
|
height: 0;
|
|
|
|
border: none;
|
|
|
|
border-top: 1px solid #693410;
|
|
|
|
border-bottom: 1px solid #ce8a5c;
|
|
|
|
}
|
2024-01-11 03:13:39 -06:00
|
|
|
|
|
|
|
.rankingRecord {
|
|
|
|
display: flex;
|
|
|
|
line-height: 24px;
|
|
|
|
padding-top: 4px;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: visible;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
2024-01-06 05:15:28 -06:00
|
|
|
</style>
|