リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
DQ3風「ステータス画面」モーダルの追加(主人公+仲間の能力値・装備・経験値を一覧表示)
## 1. 目的
現在のプレイ画面には主人公のHP/MPバーと簡易ステータスは表示されているが、仲間全員の詳細ステータス(Lv・経験値・次のLvまで・攻撃力・防御力・装備中アイテム・所持MP・職業)を一覧で確認する手段がない。DQ3では「ステータス」コマンドで全員の能力値を確認できる。この機能を追加することで、パーティ編成やアイテム購入の判断がしやすくなり、ゲームの奥行きが増す。
## 2. 具体的な仕様
### 2-1. UIトリガー
- プレイ画面(pages/play.php)のコマンドボタン群に「ステータス」ボタンを追加する
- スマホ用の仮想パッドエリア下部にも同ボタンを配置する
- クリック/タップで `#statusModal` を表示する(JS制御、ページ遷移なし)
### 2-2. モーダルデザイン
- 既存の `save-modal` / `narrator-modal` と同じ `.save-window` スタイルを流用し、DQ3風の黒背景・金枠デザインにする
- モーダルタイトル:「ぼうけんしゃ の ちから」(DQ3風全角表記)
- 閉じるボタン(「とじる」)を右下に配置
### 2-3. 表示内容
主人公 + `$state['party']`(最大3人)を1人1カードで縦並びに表示。各カードに以下を表示する:
| 項目 | ソース |
|------|--------|
| 名前 / 職業名 | `$state['hero']['name']` / `$state['party'][n]['job_name']` |
| Lv | `$state['hero']['level']` |
| HP / 最大HP | `$state['hero']['hp']` / `max_hp` |
| MP / 最大MP | `$state['hero']['mp']` / `max_mp` |
| 経験値 / 次Lvまで | `$state['hero']['exp']`、次Lv閾値は `rpgsf_next_exp_threshold()` 相当のロジックで計算 |
| 攻撃力(装備込み) | `$state['hero']['atk']` |
| 防御力(装備込み) | `$state['hero']['def']` |
| 装備中武器 / 防具 | `rpgsf_equipped_items($state)` から取得済みの `$equipped` を流用 |
| 所持ゴールド | `$state['hero']['gold']` |
仲間メンバーは `$state['party']` 配列を走査し、同様の情報を表示する(仲間の装備は仲間の `inventory`/`equipped` キーから取得)。
### 2-4. HPバーのビジュアル表現
既存の `hp-bar` CSS クラスを再利用し、各メンバーのHP割合をインラインゲージで表示する。HPが25%以下は赤色(`--danger` 変数またはインラインスタイル `background:#c0392b`)にする。
### 2-5. PHP側の変更
- `pages/play.php` の変数展開部分で、主人公データと `$party` 配列をJSONまたはPHPテンプレートでHTMLに埋め込む
- 追加のサーバーリクエストやPOSTは不要(クライアントサイドのモーダル表示のみ)
- 既存の `$equipped`・`$party`・`$inventory_labels` 変数はすでに `play.php` で生成済みなのでそのまま流用できる
### 2-6. JS実装
```js
document.getElementById('btnStatus').addEventListener('click', () => {
document.getElementById('statusModal').hidden = false;
});
document.getElementById('btnStatusClose').addEventListener('click', () => {
document.getElementById('statusModal').hidden = true;
});
```
追加JS量は10行程度。既存のモーダルと同じパターンで実装できる。
## 3. 既存機能との整合
- ページ遷移・POST処理を一切追加しないため、既存の戦闘・移動・セーブ・ナレーション機能を壊さない
- `rpgsf_equipped_items()` / `$party` は `play.php` 内で既に計算済みの変数を参照するだけなので、lib.php の変更は不要
- CSSは既存の `.save-window`・`.hp-bar` クラスを流用するため、新規スタイルは最小限
- スマホ対応は既存のメディアクエリが適用されるため追加対応不要
## 4. 実装規模
- `pages/play.php` のHTML部分に約60〜80行のモーダルHTMLを追加
- インラインJSに約10〜15行追加
- CSS追加は `.status-card` など5〜10行程度
- lib.php・schema.sql・index.php の変更なし
現在のプレイ画面には主人公のHP/MPバーと簡易ステータスは表示されているが、仲間全員の詳細ステータス(Lv・経験値・次のLvまで・攻撃力・防御力・装備中アイテム・所持MP・職業)を一覧で確認する手段がない。DQ3では「ステータス」コマンドで全員の能力値を確認できる。この機能を追加することで、パーティ編成やアイテム購入の判断がしやすくなり、ゲームの奥行きが増す。
## 2. 具体的な仕様
### 2-1. UIトリガー
- プレイ画面(pages/play.php)のコマンドボタン群に「ステータス」ボタンを追加する
- スマホ用の仮想パッドエリア下部にも同ボタンを配置する
- クリック/タップで `#statusModal` を表示する(JS制御、ページ遷移なし)
### 2-2. モーダルデザイン
- 既存の `save-modal` / `narrator-modal` と同じ `.save-window` スタイルを流用し、DQ3風の黒背景・金枠デザインにする
- モーダルタイトル:「ぼうけんしゃ の ちから」(DQ3風全角表記)
- 閉じるボタン(「とじる」)を右下に配置
### 2-3. 表示内容
主人公 + `$state['party']`(最大3人)を1人1カードで縦並びに表示。各カードに以下を表示する:
| 項目 | ソース |
|------|--------|
| 名前 / 職業名 | `$state['hero']['name']` / `$state['party'][n]['job_name']` |
| Lv | `$state['hero']['level']` |
| HP / 最大HP | `$state['hero']['hp']` / `max_hp` |
| MP / 最大MP | `$state['hero']['mp']` / `max_mp` |
| 経験値 / 次Lvまで | `$state['hero']['exp']`、次Lv閾値は `rpgsf_next_exp_threshold()` 相当のロジックで計算 |
| 攻撃力(装備込み) | `$state['hero']['atk']` |
| 防御力(装備込み) | `$state['hero']['def']` |
| 装備中武器 / 防具 | `rpgsf_equipped_items($state)` から取得済みの `$equipped` を流用 |
| 所持ゴールド | `$state['hero']['gold']` |
仲間メンバーは `$state['party']` 配列を走査し、同様の情報を表示する(仲間の装備は仲間の `inventory`/`equipped` キーから取得)。
### 2-4. HPバーのビジュアル表現
既存の `hp-bar` CSS クラスを再利用し、各メンバーのHP割合をインラインゲージで表示する。HPが25%以下は赤色(`--danger` 変数またはインラインスタイル `background:#c0392b`)にする。
### 2-5. PHP側の変更
- `pages/play.php` の変数展開部分で、主人公データと `$party` 配列をJSONまたはPHPテンプレートでHTMLに埋め込む
- 追加のサーバーリクエストやPOSTは不要(クライアントサイドのモーダル表示のみ)
- 既存の `$equipped`・`$party`・`$inventory_labels` 変数はすでに `play.php` で生成済みなのでそのまま流用できる
### 2-6. JS実装
```js
document.getElementById('btnStatus').addEventListener('click', () => {
document.getElementById('statusModal').hidden = false;
});
document.getElementById('btnStatusClose').addEventListener('click', () => {
document.getElementById('statusModal').hidden = true;
});
```
追加JS量は10行程度。既存のモーダルと同じパターンで実装できる。
## 3. 既存機能との整合
- ページ遷移・POST処理を一切追加しないため、既存の戦闘・移動・セーブ・ナレーション機能を壊さない
- `rpgsf_equipped_items()` / `$party` は `play.php` 内で既に計算済みの変数を参照するだけなので、lib.php の変更は不要
- CSSは既存の `.save-window`・`.hp-bar` クラスを流用するため、新規スタイルは最小限
- スマホ対応は既存のメディアクエリが適用されるため追加対応不要
## 4. 実装規模
- `pages/play.php` のHTML部分に約60〜80行のモーダルHTMLを追加
- インラインJSに約10〜15行追加
- CSS追加は `.status-card` など5〜10行程度
- lib.php・schema.sql・index.php の変更なし
💬 返信 (3)
🛠 開発を開始しました (機能追加 rpg-story-forge)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「RPGストーリーフォージ AI風ドット絵冒険」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=rpg-story-forge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/rpg-story-forge/
ご利用ありがとうございます!
ご要望いただいた「RPGストーリーフォージ AI風ドット絵冒険」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=rpg-story-forge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/rpg-story-forge/
ご利用ありがとうございます!
Echo
Iris