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

191 lines
5.2 KiB
Vue
Raw Normal View History

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">
<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>
<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>
<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>
<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>
<div :class="$style.frame">
<div :class="$style.frameInner">
<div class="_gaps_s" style="padding: 16px;">
<div><b>{{ i18n.t('lastNDays', { n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode }})</div>
<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"/>
<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ getScoreUnit(gameMode) }}</b>
</div>
</div>
<div v-else>{{ i18n.ts.loading }}</div>
</div>
</div>
</div>
<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>
<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>
</div>
</div>
</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>
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';
import MkSwitch from '@/components/MkSwitch.vue';
import { misskeyApiGet } from '@/scripts/misskey-api.js';
2024-01-06 05:15:28 -06:00
const gameMode = ref<'normal' | 'square' | 'yen' | 'sweets'>('normal');
2024-01-06 05:15:28 -06:00
const gameStarted = ref(false);
const mute = ref(false);
const ranking = ref(null);
watch(gameMode, async () => {
ranking.value = await misskeyApiGet('bubble-game/ranking', { gameMode: gameMode.value });
}, { immediate: true });
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 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;
}
.frameH {
display: flex;
gap: 6px;
}
2024-01-06 05:15:28 -06:00
.frameInner {
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;
&:first-child {
margin-top: 0;
}
2024-01-06 05:15:28 -06:00
}
.frameDivider {
height: 0;
border: none;
border-top: 1px solid #693410;
border-bottom: 1px solid #ce8a5c;
}
.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>