リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
島ごとの「モンスター図鑑コレクション進捗バー」と未討伐モンスターヒント表示
## 1. 目的
現在の図鑑タブはエリア別出現モンスターと撃破回数を確認できるが、「あと何体未発見か」「どの島で何%コンプリートしたか」が一目でわからない。島ごとの図鑑コンプリート進捗バーと未討伐モンスターへのヒント表示を追加することで、探索モチベーションと周回プレイを促進する。
## 2. 具体的な仕様
### 2-1. 島別コンプリート進捗バー(図鑑タブ内)
- 図鑑タブの島セクション見出しの直下に、幅100%のプログレスバーを追加。
- 表示例: `第一島 草原の島 ██████░░░░ 6/10体 (60%)`
- バーの色はバイオーム連動(草原=緑、砂漠=黄、雪原=水色、火山=赤、沼=紫、海岸=青)
- 全島合計の「図鑑完成度」をタブ上部に1行でサマリー表示。
- 例: `図鑑: 24/50体 (48%)`
### 2-2. 未討伐モンスターのヒント表示
- 各島の図鑑セクション内に未討伐モンスター枠を表示。
- 撃破済み: モンスター名・ドット絵・撃破回数・出現エリアを通常表示(既存)
- 未討伐: シルエット表示(Canvas で黒塗りまたは `filter: grayscale(1) brightness(0.15)` CSS)+名前は「???」
- ただし「出現エリアヒント」だけは表示する(例: `出現: 第一島 草原エリア`)
- 未討伐数が0になった島の見出しに ✨ 完了バッジ を付与。
### 2-3. データ構造(既存 state_json を拡張)
- `state['bestiary']` に既存の撃破ログがあると仮定し、以下を追記:
```json
{
"bestiary": {
"slime": { "count": 5, "island_id": 1, "first_seen_at": "turn_12" },
"dragon": { "count": 0, "island_id": 2, "first_seen_at": null }
}
}
```
- `island_id` は `rpgsf_world_islands()` が返す既存の `island_id` を流用。
- 未討伐エントリは `count === 0` または `first_seen_at === null` で判定。
### 2-4. PHP側: 進捗集計関数
```php
// lib.php に追加
function rpgsf_bestiary_progress(array $state, array $scenario): array {
// islands ごとに total / seen / killed を集計して返す
// 戻り値: ['island_id' => ['total'=>N,'seen'=>N,'killed'=>N,'biome'=>'grassland'], ...]
}
```
- `total` = シナリオ生成時にその島の敵テーブルに登録されたモンスター種数
- `seen` = `first_seen_at !== null` の数
- `killed` = `count > 0` の数
### 2-5. JS/Canvas側: 図鑑タブ描画
- 既存の図鑑タブ描画処理に、島別セクションのヘッダー行として進捗バーを Canvas または `<div>` で描画する関数 `renderBestiaryIslandProgress(islandId)` を追加。
- 未討伐枠の Canvas 描画: 既存モンスタードット絵と同じ座標・サイズで `ctx.filter = 'brightness(0)'` を適用してシルエット化。その下に `「???」` テキスト、ヒントエリアラベルを薄グレーで表示。
- スマホ/PC 両対応: 既存の図鑑タブのレスポンシブレイアウトに合わせてグリッド幅を継承。
## 3. 既存機能との整合
- 既存の図鑑タブ表示(エリア別・撃破回数)は変更せず、島セクションの先頭に進捗バーを「追加」するだけ。
- `state_json` への追記は後方互換(`bestiary` が既存の場合はマージ、なければ空配列で初期化)。
- モンスター画像 (`assets/monsters/*.png`) は既存ファイルをそのまま使用し、JS の `filter` で暗転するだけなので新規画像不要。
- セーブ・ロード、共有URLによる引き継ぎはすべて `state_json` 経由のため変更不要。
現在の図鑑タブはエリア別出現モンスターと撃破回数を確認できるが、「あと何体未発見か」「どの島で何%コンプリートしたか」が一目でわからない。島ごとの図鑑コンプリート進捗バーと未討伐モンスターへのヒント表示を追加することで、探索モチベーションと周回プレイを促進する。
## 2. 具体的な仕様
### 2-1. 島別コンプリート進捗バー(図鑑タブ内)
- 図鑑タブの島セクション見出しの直下に、幅100%のプログレスバーを追加。
- 表示例: `第一島 草原の島 ██████░░░░ 6/10体 (60%)`
- バーの色はバイオーム連動(草原=緑、砂漠=黄、雪原=水色、火山=赤、沼=紫、海岸=青)
- 全島合計の「図鑑完成度」をタブ上部に1行でサマリー表示。
- 例: `図鑑: 24/50体 (48%)`
### 2-2. 未討伐モンスターのヒント表示
- 各島の図鑑セクション内に未討伐モンスター枠を表示。
- 撃破済み: モンスター名・ドット絵・撃破回数・出現エリアを通常表示(既存)
- 未討伐: シルエット表示(Canvas で黒塗りまたは `filter: grayscale(1) brightness(0.15)` CSS)+名前は「???」
- ただし「出現エリアヒント」だけは表示する(例: `出現: 第一島 草原エリア`)
- 未討伐数が0になった島の見出しに ✨ 完了バッジ を付与。
### 2-3. データ構造(既存 state_json を拡張)
- `state['bestiary']` に既存の撃破ログがあると仮定し、以下を追記:
```json
{
"bestiary": {
"slime": { "count": 5, "island_id": 1, "first_seen_at": "turn_12" },
"dragon": { "count": 0, "island_id": 2, "first_seen_at": null }
}
}
```
- `island_id` は `rpgsf_world_islands()` が返す既存の `island_id` を流用。
- 未討伐エントリは `count === 0` または `first_seen_at === null` で判定。
### 2-4. PHP側: 進捗集計関数
```php
// lib.php に追加
function rpgsf_bestiary_progress(array $state, array $scenario): array {
// islands ごとに total / seen / killed を集計して返す
// 戻り値: ['island_id' => ['total'=>N,'seen'=>N,'killed'=>N,'biome'=>'grassland'], ...]
}
```
- `total` = シナリオ生成時にその島の敵テーブルに登録されたモンスター種数
- `seen` = `first_seen_at !== null` の数
- `killed` = `count > 0` の数
### 2-5. JS/Canvas側: 図鑑タブ描画
- 既存の図鑑タブ描画処理に、島別セクションのヘッダー行として進捗バーを Canvas または `<div>` で描画する関数 `renderBestiaryIslandProgress(islandId)` を追加。
- 未討伐枠の Canvas 描画: 既存モンスタードット絵と同じ座標・サイズで `ctx.filter = 'brightness(0)'` を適用してシルエット化。その下に `「???」` テキスト、ヒントエリアラベルを薄グレーで表示。
- スマホ/PC 両対応: 既存の図鑑タブのレスポンシブレイアウトに合わせてグリッド幅を継承。
## 3. 既存機能との整合
- 既存の図鑑タブ表示(エリア別・撃破回数)は変更せず、島セクションの先頭に進捗バーを「追加」するだけ。
- `state_json` への追記は後方互換(`bestiary` が既存の場合はマージ、なければ空配列で初期化)。
- モンスター画像 (`assets/monsters/*.png`) は既存ファイルをそのまま使用し、JS の `filter` で暗転するだけなので新規画像不要。
- セーブ・ロード、共有URLによる引き継ぎはすべて `state_json` 経由のため変更不要。
💬 返信 (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