oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Pull Requests Packages Releases 2 Activity

enhance(frontend): バブルゲームのロゴやゲームオーバー画像を追加 (MisskeyIO#339)

Browse Source
This commit is contained in:
まっちゃとーにゅ 2024-01-07 19:45:59 +09:00 committed by GitHub
commit ce58adce22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/frontend/assets/drop-and-fusion/gameover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
packages/frontend/assets/drop-and-fusion/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

1
packages/frontend/src/components/MkPlusOneEffect.vue
View File

@ -42,6 +42,7 @@ onMounted(() => {
<style lang="scss" module>
.root {
user-select: none;
pointer-events: none;
position: fixed;
width: 128px;

35
packages/frontend/src/pages/drop-and-fusion.vue
View File

@ -7,9 +7,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer>
<template #header><MkPageHeader/></template>
<MkSpacer :contentMax="800">
<div v-show="!gameStarted" class="_gaps_s" :class="$style.root">
<div style="text-align: center;">
<div>{{ i18n.ts.bubbleGame }}</div>
<div v-show="!gameStarted" :class="$style.root">
<div style="text-align: center;" class="_gaps">
<div :class="$style.frame">
<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">
<div :class="$style.frameInner">
<div class="_gaps" style="padding: 16px;">
<MkSelect v-model="gameMode">
<option value="normal">NORMAL</option>
<option value="square">SQUARE</option>
@ -17,6 +24,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
</div>
</div>
</div>
</div>
</div>
<div v-show="gameStarted" class="_gaps_s" :class="$style.root">
<div style="display: flex;">
<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
@ -72,9 +82,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.dropGuide" :style="{ left: (mouseX - 2) + 'px' }"/>
</template>
<div v-if="gameOver" :class="$style.gameOverLabel">
<div>GAME OVER!</div>
<div class="_gaps_s">
<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
<div>SCORE: <MkNumber :value="score"/></div>
<MkButton primary rounded inline @click="share">Share</MkButton>
<div class="_buttonsCenter">
<MkButton primary rounded @click="restart">Restart</MkButton>
<MkButton primary rounded @click="share">Share</MkButton>
</div>
</div>
</div>
</div>
</div>
@ -102,7 +117,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import * as Matter from 'matter-js';
import { Ref, onMounted, ref, shallowRef } from 'vue';
import { onMounted, ref, shallowRef } from 'vue';
import { EventEmitter } from 'eventemitter3';
import * as Misskey from 'misskey-js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
@ -684,7 +699,7 @@ class Game extends EventEmitter<{
let game: Game;
function onClick(ev: MouseEvent) {
const rect = containerEl.value.getBoundingClientRect();
const rect = containerEl.value!.getBoundingClientRect();
const x = (ev.clientX - rect.left) / viewScaleX;
@ -692,7 +707,7 @@ function onClick(ev: MouseEvent) {
}
function onTouchend(ev: TouchEvent) {
const rect = containerEl.value.getBoundingClientRect();
const rect = containerEl.value!.getBoundingClientRect();
const x = (ev.changedTouches[0].clientX - rect.left) / viewScaleX;
@ -700,11 +715,11 @@ function onTouchend(ev: TouchEvent) {
}
function onMousemove(ev: MouseEvent) {
mouseX.value = ev.clientX - containerEl.value.getBoundingClientRect().left;
mouseX.value = ev.clientX - containerEl.value!.getBoundingClientRect().left;
}
function onTouchmove(ev: TouchEvent) {
mouseX.value = ev.touches[0].clientX - containerEl.value.getBoundingClientRect().left;
mouseX.value = ev.touches[0].clientX - containerEl.value!.getBoundingClientRect().left;
}
function restart() {