From 5c786cace839147a11fadac6ee46da29db5f2457 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 10 Jan 2024 17:31:59 +0900
Subject: [PATCH] enhance(drop-and-fusion): add game description

---
 locales/index.d.ts                              |  8 ++++++++
 locales/ja-JP.yml                               |  7 +++++++
 packages/frontend/src/pages/drop-and-fusion.vue | 16 +++++++++++++---
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index aa74ba54b0..852cbdd27d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1199,6 +1199,14 @@ export interface Locale {
     "showReplay": string;
     "replay": string;
     "replaying": string;
+    "_bubbleGame": {
+        "howToPlay": string;
+        "_howToPlay": {
+            "section1": string;
+            "section2": string;
+            "section3": string;
+        };
+    };
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4863bbe770..f85dc0fcf8 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1197,6 +1197,13 @@ showReplay: "リプレイを見る"
 replay: "リプレイ"
 replaying: "リプレイ中"
 
+_bubbleGame:
+  howToPlay: "遊び方"
+  _howToPlay:
+    section1: "位置を調整してハコにモノを落とします。"
+    section2: "同じ種類のモノがくっつくと別のモノに変化して、スコアが得られます。"
+    section3: "モノがハコからあふれるとゲームオーバーです。ハコからあふれないようにしつつモノを融合させてハイスコアを目指そう！"
+
 _announcement:
   forExistingUsers: "既存ユーザーのみ"
   forExistingUsersDescription: "有効にすると、このお知らせ作成時点で存在するユーザーにのみお知らせが表示されます。無効にすると、このお知らせ作成後にアカウントを作成したユーザーにもお知らせが表示されます。"
diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue
index c5ab7a33f5..9fb7ab2e23 100644
--- a/packages/frontend/src/pages/drop-and-fusion.vue
+++ b/packages/frontend/src/pages/drop-and-fusion.vue
@@ -8,13 +8,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader/></template>
 	<MkSpacer :contentMax="800">
 		<div v-show="!gameStarted" :class="$style.root">
-			<div style="text-align: center;" class="_gaps">
-				<div :class="$style.frame">
+			<div class="_gaps">
+				<div :class="$style.frame" style="text-align: center;">
 					<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.frame" style="text-align: center;">
 					<div :class="$style.frameInner">
 						<div class="_gaps" style="padding: 16px;">
 							<MkSelect v-model="gameMode">
@@ -33,6 +33,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</div>
 					</div>
 				</div>
+				<div :class="$style.frame">
+					<div :class="$style.frameInner">
+						<div>{{ 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>
 			</div>
 		</div>
 		<div v-show="gameStarted" class="_gaps_s" :class="$style.root">