Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
まっちゃとーにゅ 2024-01-07 19:45:59 +09:00 committed by GitHub
parent 5e3a7bb9e9 7ff06ca52f
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> <style lang="scss" module>
.root { .root {
user-select: none;
pointer-events: none; pointer-events: none;
position: fixed; position: fixed;
width: 128px; width: 128px;

47
packages/frontend/src/pages/drop-and-fusion.vue
View file

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