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

MisskeyIO · Jan 7, 2024 · ce58adc · ce58adc
2 parents 5e3a7bb + 7ff06ca
commit ce58adc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/packages/frontend/assets/drop-and-fusion/gameover.png b/packages/frontend/assets/drop-and-fusion/gameover.png
diff --git a/packages/frontend/assets/drop-and-fusion/logo.png b/packages/frontend/assets/drop-and-fusion/logo.png
diff --git a/packages/frontend/src/components/MkPlusOneEffect.vue b/packages/frontend/src/components/MkPlusOneEffect.vue
@@ -42,6 +42,7 @@ onMounted(() => {
 
 <style lang="scss" module>
 .root {
+	user-select: none;
 	pointer-events: none;
 	position: fixed;
 	width: 128px;

diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue
@@ -7,14 +7,24 @@ 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>
-				<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 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>
+							</MkSelect>
+							<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">
@@ -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>SCORE: <MkNumber :value="score"/></div>
-						<MkButton primary rounded inline @click="share">Share</MkButton>
+						<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>
+							<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,27 +699,27 @@ 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;
 
 	game.drop(x);
 }
 
 function onTouchend(ev: TouchEvent) {
-	const rect = containerEl.value.getBoundingClientRect();
+	const rect = containerEl.value!.getBoundingClientRect();
 
 	const x = (ev.changedTouches[0].clientX - rect.left) / viewScaleX;
 
 	game.drop(x);
 }
 
 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() {