Repository: 2505-future/58hack-front
Pull request #48: 各ゲーム定数を `config.ts` に分離した
Author: login: ulxsth
Created: 2025-05-16T23:50:04Z | Merged: 2025-05-16T23:52:50Z

# Details
<!-- 作業の内容を3行程度で説明 -->
リファクタリングです。
ゲームに関する各値を `config.ts` に移行しました。

```ts
// display
export const DISPLAY_WIDTH = 800
export const DISPLAY_HEIGHT = 600

// field
export const FIELD_WIDTH = 600
export const FIELD_HEIGHT = 400

// colors
export const COLORS = {
  // background
  BACKGROUND: "#BBFBFF",
  
  // field
  FIELD: 0x00ff00,  // 緑のフィールド
  FIELD_BORDER: 0x00ee00,  // フィールド境界線
  
  // player
  PLAYER: 0xff0000,  // メインプレイヤー（赤）
  ENEMY: 0xffffff,   // 敵プレイヤー（白）
  
  // UI
  UI_TEXT: "#222",   // UI用テキスト色
}
```

## 変更の目的
<!-- このタスクを行う理由などが明確であれば、ここに記載 -->
- 基本的な値をゲーム外から参照しやすくするため
- 変更容易性を確保するため

<!-- 以下消さないでください！！ -->

<!-- for GitHub Copilot -->
<!-- レビューの際は、必ず以下のコメントに示す条件を満たしてください。 -->
<!-- 1. 日本語を使用すること -->
<!-- 2. 口調は軽快で親しみやすい関西弁にすること。ただし、やや抑えめで読みやすさを優先すること。 -->
<!-- 3. 絵文字を多用すること。絵文字は、前後の文に関係のあるものを添付すること。 -->
<!-- よい例：このプルリクエスト、ホーム画面の改善めっちゃ分かりやすいわ！ヘッダーのデザイン、マジでお洒落やん 🚀✨ -->
<!-- 悪い例：このプルリクエストでは、ホーム画面に変更が加えられています。ヘッダーのスタイルにより顕著な変更が見られます。-->


Diff:
diff --git a/app/features/game/core/config/config.ts b/app/features/game/core/config/config.ts
new file mode 100644
index 0000000..86727e4
--- /dev/null
+++ b/app/features/game/core/config/config.ts
@@ -0,0 +1,24 @@
+// display
+export const DISPLAY_WIDTH = 800
+export const DISPLAY_HEIGHT = 600
+
+// field
+export const FIELD_WIDTH = 600
+export const FIELD_HEIGHT = 400
+
+// colors
+export const COLORS = {
+  // background
+  BACKGROUND: "#BBFBFF",
+  
+  // field
+  FIELD: 0x00ff00,  // 緑のフィールド
+  FIELD_BORDER: 0x00ee00,  // フィールド境界線
+  
+  // player
+  PLAYER: 0xff0000,  // メインプレイヤー（赤）
+  ENEMY: 0xffffff,   // 敵プレイヤー（白）
+  
+  // UI
+  UI_TEXT: "#222",   // UI用テキスト色
+}
\ No newline at end of file
diff --git a/app/features/game/core/config/configLoader.ts b/app/features/game/core/config/configLoader.ts
index f0d63ee..746d782 100644
--- a/app/features/game/core/config/configLoader.ts
+++ b/app/features/game/core/config/configLoader.ts
@@ -1,6 +1,7 @@
 import type { Player } from "../objects/player";
 import ClientGameStateManager from "../state/ClientGameStateManager";
 import type { GameSettings } from "./gameSettings";
+import { FIELD_WIDTH, FIELD_HEIGHT, COLORS } from "./config";
 
 const stateManager = ClientGameStateManager.getInstance();
 
@@ -44,18 +45,14 @@ export const createGameConfig = async (
 				});
 			},
 			create: async function (this: Phaser.Scene) {
-				this.cameras.main.setBackgroundColor("#BBFBFF");
-
-				// フィールドの寸法
-				const fieldWidth = 600;
-				const fieldHeight = 400;
+				this.cameras.main.setBackgroundColor(COLORS.BACKGROUND);
 
 				// 物理世界の境界をフィールドサイズに一致させる（重要）
 				this.physics.world.setBounds(
-					this.cameras.main.centerX - fieldWidth / 2,
-					this.cameras.main.centerY - fieldHeight / 2,
-					fieldWidth,
-					fieldHeight,
+					this.cameras.main.centerX - FIELD_WIDTH / 2,
+					this.cameras.main.centerY - FIELD_HEIGHT / 2,
+					FIELD_WIDTH,
+					FIELD_HEIGHT,
 				);
 
 				// 物理境界のデバッグ出力
@@ -65,20 +62,20 @@ export const createGameConfig = async (
 				const field = this.add.rectangle(
 					this.cameras.main.centerX,
 					this.cameras.main.centerY,
-					fieldWidth,
-					fieldHeight,
-					0x00ff00,
+					FIELD_WIDTH,
+					FIELD_HEIGHT,
+					COLORS.FIELD,
 				);
 				field.setOrigin(0.5, 0.5);
 
 				// フィールドの境界線を作成
 				const fieldBorder = this.add.graphics();
-				fieldBorder.lineStyle(5, 0x00ee00, 1);
+				fieldBorder.lineStyle(5, COLORS.FIELD_BORDER, 1);
 				fieldBorder.strokeRect(
-					this.cameras.main.centerX - fieldWidth / 2,
-					this.cameras.main.centerY - fieldHeight / 2,
-					fieldWidth,
-					fieldHeight,
+					this.cameras.main.centerX - FIELD_WIDTH / 2,
+					this.cameras.main.centerY - FIELD_HEIGHT / 2,
+					FIELD_WIDTH,
+					FIELD_HEIGHT,
 				);
 
 				try {
@@ -111,8 +108,8 @@ export const createGameConfig = async (
 					for (let i = 0; i < 5; i++) {
 						const enemyPlayer = new Player(
 							this,
-							Phaser.Math.Between(0, fieldWidth),
-							Phaser.Math.Between(0, fieldWidth),
+							Phaser.Math.Between(0, FIELD_WIDTH),
+							Phaser.Math.Between(0, FIELD_HEIGHT),
 							20, // 半径
 							`enemy${i}`,
 							"",
@@ -122,7 +119,7 @@ export const createGameConfig = async (
 							500, // cooldown
 						);
 
-						enemyPlayer.setFillStyle(0xffffff, 1);
+						enemyPlayer.setFillStyle(COLORS.ENEMY, 1);
 
 						// 敵プレイヤーを配列に追加
 						players.push(enemyPlayer);
@@ -186,7 +183,7 @@ export const createGameConfig = async (
 					statusText = this.add
 						.text(0, 0, `status: ${status}`, {
 							font: "15px",
-							color: "#222",
+							color: COLORS.UI_TEXT,
 							padding: { left: 8, right: 8, top: 4, bottom: 4 },
 						})
 						.setOrigin(0, 0)
diff --git a/app/features/game/core/config/gameSettings.ts b/app/features/game/core/config/gameSettings.ts
index 8f7aa96..cd0139f 100644
--- a/app/features/game/core/config/gameSettings.ts
+++ b/app/features/game/core/config/gameSettings.ts
@@ -1,3 +1,5 @@
+import { DISPLAY_HEIGHT, DISPLAY_WIDTH } from "./config";
+
 /**
  * ゲーム設定を管理するオブジェクト
  */
@@ -7,8 +9,8 @@ export const defaultGameSettings = {
 		debug: false,
 	},
 	display: {
-		width: 800,
-		height: 600,
+		width: DISPLAY_WIDTH,
+		height: DISPLAY_HEIGHT,
 	},
 	userPreferences: {
 		controls: "keyboard",
diff --git a/app/features/game/core/objects/player.ts b/app/features/game/core/objects/player.ts
index 17eb4d0..6b1889a 100644
--- a/app/features/game/core/objects/player.ts
+++ b/app/features/game/core/objects/player.ts
@@ -1,5 +1,6 @@
 import { GameObjects } from "phaser";
 import ClientGameStateManager from "../state/ClientGameStateManager";
+import { COLORS } from "../config/config";
 
 /**
  * Phaserゲーム内のプレイヤーオブジェクトクラス
@@ -34,7 +35,7 @@ export class Player extends GameObjects.Arc {
 		cd: number,
 	) {
 		// 赤い円としてプレイヤーを作成
-		super(scene, x, y, radius, 0, 360, false, 0xff0000);
+		super(scene, x, y, radius, 0, 360, false, COLORS.PLAYER);
 
 		// シーンに追加
 		scene.add.existing(this);


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

このプルリクは、各ゲーム定数を config.ts に分離して管理しやすくするリファクタリングやね！  
- プレイヤーオブジェクトでハードコーディングしてた色を config の定数で置き換え  
- ゲーム設定で表示サイズやフィールドサイズを定数から取得するように変更  
- configLoader で背景色やフィールド関連の定数が使われるように修正してるで 😊

### Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

| File | Description |
| ---- | ----------- |
| app/features/game/core/objects/player.ts | プレイヤーの描画色を COLORS.PLAYER に変更して定数化 |
| app/features/game/core/config/gameSettings.ts | 表示サイズが定数 DISPLAY_WIDTH/HEIGHT に置き換え |
| app/features/game/core/config/configLoader.ts | 背景色、フィールドサイズ、境界線色が定数化され、定数で一元管理 |
| app/features/game/core/config/config.ts | ゲーム関連の定数を定義する新しいファイル |




state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T23:50:25Z
user: login: ulxsth
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T23:51:43Z

Review comments:
diff_hunk: @@ -111,8 +108,8 @@ export const createGameConfig = async (
 					for (let i = 0; i < 5; i++) {
 						const enemyPlayer = new Player(
 							this,
-							Phaser.Math.Between(0, fieldWidth),
-							Phaser.Math.Between(0, fieldWidth),
+							Phaser.Math.Between(0, FIELD_WIDTH),
+							Phaser.Math.Between(0, FIELD_WIDTH),
path: app/features/game/core/config/configLoader.ts
user: login: Copilot
body: 敵プレイヤーの Y 座標も FIELD_WIDTH が使われてるけど、FIELD_HEIGHT を使うべきとおもわれるで！😅
```suggestion
							Phaser.Math.Between(0, FIELD_HEIGHT),
```
created_at: 2025-05-16T23:50:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -111,8 +108,8 @@ export const createGameConfig = async (
 					for (let i = 0; i < 5; i++) {
 						const enemyPlayer = new Player(
 							this,
-							Phaser.Math.Between(0, fieldWidth),
-							Phaser.Math.Between(0, fieldWidth),
+							Phaser.Math.Between(0, FIELD_WIDTH),
+							Phaser.Math.Between(0, FIELD_WIDTH),
path: app/features/game/core/config/configLoader.ts
user: login: ulxsth
body: サンキューイッチ
created_at: 2025-05-16T23:51:43Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-16T23:50:59Z
body: ## 🚀 Deploying 58hack-front with Cloudflare Workers
**Branch:** `chore/enving-game-vals`

**Preview URL:** https://d8555745-58-hack-front.ogata-1225-koroku.workers.dev

author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-16T23:52:39Z
body: ## 🚀 Deploying 58hack-front with Cloudflare Workers
**Branch:** `chore/enving-game-vals`

**Preview URL:** https://fd584d24-58-hack-front.ogata-1225-koroku.workers.dev

author_association: NONE