リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: RPGストーリーフォージ AI風ドット絵冒険
ブラウザ全画面ゲームレイアウト：マップ中央配置＋四隅パネルUI
## 1. 目的
現在のゲーム画面は通常のWebページ的なスクロールレイアウトになっているが、RPGとしての没入感を高めるため、ブラウザウィンドウ全体をゲーム画面として使うフルスクリーンレイアウトに刷新する。マップ・戦闘画面を中央に大きく表示し、ステータス・ログ・コマンドなどのUIパネルを四隅・上下左右に配置する。
## 2. 具体的な仕様
### レイアウト構造 (play.php)
- `<body>` または専用 `#game-root` に `position:fixed; inset:0; overflow:hidden;` を適用し、ページスクロールを廃止
- 中央エリア：マップCanvas（またはフロアCanvas）を `position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);` で中央配置。利用可能領域の最大サイズ（四隅パネルの内側）まで拡大
- **左上パネル**：主人公＋仲間のステータス（HP/MP/Lv/名前/職業）。縦積みカード形式、幅200px固定
- **右上パネル**：ミニマップ（既存Canvasミニマップをここへ移動）＋現在地フロア名
- **左下パネル**：進行ログ（最新6行程度、スクロールなし）
- **右下パネル**：コマンドボタン群（移動/攻撃/魔法/アイテム/セーブ等）。縦並びボタン
- **上部中央バー**：シナリオタイトル＋ゴールド＋オーブ進行トラッカー（薄い横帯）
- **下部中央バー**：戦闘時のみ表示する敵情報エリア（モンスタードット絵＋HP）
### CSSクラス設計
```css
#game-root { position:fixed; inset:0; background:#0a0a10; overflow:hidden; display:grid;
grid-template:
"top-bar top-bar top-bar" 40px
"left-top center right-top" 1fr
"left-bot center right-bot" 180px
"bot-bar bot-bar bot-bar" 44px
/ 200px 1fr 200px;
}
#panel-top-bar { grid-area: top-bar; }
#panel-left-top { grid-area: left-top; }
#panel-center { grid-area: center; display:flex; align-items:center; justify-content:center; }
#panel-right-top { grid-area: right-top; }
#panel-left-bot { grid-area: left-bot; }
#panel-right-bot { grid-area: right-bot; }
#panel-bot-bar { grid-area: bot-bar; }
```
- 各パネルは `background: rgba(10,8,20,0.88); border:2px solid #4a3060; box-shadow:inset 0 0 8px #0005;` でSFC風の濃いウィンドウ枠
- フォントはすでに使用中のドット絵フォント（Press Start 2P等）を踏襲
### マップCanvas拡大
- 中央エリアのピクセルサイズを動的計算：`centerW = window.innerWidth - 400; centerH = window.innerHeight - 40 - 44 - 180;`
- マップのタイル描画サイズ（tileSize）を `Math.min(Math.floor(centerW / cols), Math.floor(centerH / rows))` で自動算出し、最大48px・最小16pxにクランプ
- 既存の `rpgsf_render_map_canvas()` JS関数の `tileSize` 変数を上記で上書きするだけで後方互換維持
- マップ列数・行数はシナリオ生成時の `rows` 配列から取得（既存）
### スマホ対応
- `@media (max-width: 700px)` では grid を `"top-bar" "center" "bot-bar" "left-top" "right-top" "left-bot" "right-bot"` の縦1列に切り替え
- 各パネル幅100%、高さauto。中央Canvasは `width:100vw; height:50vh`
- コマンドボタンは横並び（flex-wrap:wrap）
### 既存機能との整合
- play.php の PHP ロジック・フォーム POST・セッション処理は一切変更しない
- HTMLの各パネル内容は現在の `.panel` divの中身をそのまま移植するだけ
- ナレーションモーダル・診断モーダル・ショップモーダルは `position:fixed; z-index:9999` のままで前面表示され既存動作を維持
- `rpgsf_render_header()` / `rpgsf_render_footer()` は play.php のみ専用レイアウトを出力し、他ページ（home/create/party）は現行レイアウトを維持
- play.php 冒頭で `define('RPGSF_PLAY_LAYOUT', true);` を定義し、`rpgsf_render_header()` 内で分岐
### 実装ステップ
1. `rpgsf_render_header()` に `RPGSF_PLAY_LAYOUT` 分岐を追加し、`<body>` クラスと `<style>` を切り替え
2. play.php の HTML 出力部分を上記 grid 構造に組み替え
3. JS側で `window.addEventListener('resize', resizeGameCanvas)` を追加し、ウィンドウリサイズ時に tileSize を再計算して再描画
4. PC・スマホ両方で動作確認
現在のゲーム画面は通常のWebページ的なスクロールレイアウトになっているが、RPGとしての没入感を高めるため、ブラウザウィンドウ全体をゲーム画面として使うフルスクリーンレイアウトに刷新する。マップ・戦闘画面を中央に大きく表示し、ステータス・ログ・コマンドなどのUIパネルを四隅・上下左右に配置する。
## 2. 具体的な仕様
### レイアウト構造 (play.php)
- `<body>` または専用 `#game-root` に `position:fixed; inset:0; overflow:hidden;` を適用し、ページスクロールを廃止
- 中央エリア：マップCanvas（またはフロアCanvas）を `position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);` で中央配置。利用可能領域の最大サイズ（四隅パネルの内側）まで拡大
- **左上パネル**：主人公＋仲間のステータス（HP/MP/Lv/名前/職業）。縦積みカード形式、幅200px固定
- **右上パネル**：ミニマップ（既存Canvasミニマップをここへ移動）＋現在地フロア名
- **左下パネル**：進行ログ（最新6行程度、スクロールなし）
- **右下パネル**：コマンドボタン群（移動/攻撃/魔法/アイテム/セーブ等）。縦並びボタン
- **上部中央バー**：シナリオタイトル＋ゴールド＋オーブ進行トラッカー（薄い横帯）
- **下部中央バー**：戦闘時のみ表示する敵情報エリア（モンスタードット絵＋HP）
### CSSクラス設計
```css
#game-root { position:fixed; inset:0; background:#0a0a10; overflow:hidden; display:grid;
grid-template:
"top-bar top-bar top-bar" 40px
"left-top center right-top" 1fr
"left-bot center right-bot" 180px
"bot-bar bot-bar bot-bar" 44px
/ 200px 1fr 200px;
}
#panel-top-bar { grid-area: top-bar; }
#panel-left-top { grid-area: left-top; }
#panel-center { grid-area: center; display:flex; align-items:center; justify-content:center; }
#panel-right-top { grid-area: right-top; }
#panel-left-bot { grid-area: left-bot; }
#panel-right-bot { grid-area: right-bot; }
#panel-bot-bar { grid-area: bot-bar; }
```
- 各パネルは `background: rgba(10,8,20,0.88); border:2px solid #4a3060; box-shadow:inset 0 0 8px #0005;` でSFC風の濃いウィンドウ枠
- フォントはすでに使用中のドット絵フォント（Press Start 2P等）を踏襲
### マップCanvas拡大
- 中央エリアのピクセルサイズを動的計算：`centerW = window.innerWidth - 400; centerH = window.innerHeight - 40 - 44 - 180;`
- マップのタイル描画サイズ（tileSize）を `Math.min(Math.floor(centerW / cols), Math.floor(centerH / rows))` で自動算出し、最大48px・最小16pxにクランプ
- 既存の `rpgsf_render_map_canvas()` JS関数の `tileSize` 変数を上記で上書きするだけで後方互換維持
- マップ列数・行数はシナリオ生成時の `rows` 配列から取得（既存）
### スマホ対応
- `@media (max-width: 700px)` では grid を `"top-bar" "center" "bot-bar" "left-top" "right-top" "left-bot" "right-bot"` の縦1列に切り替え
- 各パネル幅100%、高さauto。中央Canvasは `width:100vw; height:50vh`
- コマンドボタンは横並び（flex-wrap:wrap）
### 既存機能との整合
- play.php の PHP ロジック・フォーム POST・セッション処理は一切変更しない
- HTMLの各パネル内容は現在の `.panel` divの中身をそのまま移植するだけ
- ナレーションモーダル・診断モーダル・ショップモーダルは `position:fixed; z-index:9999` のままで前面表示され既存動作を維持
- `rpgsf_render_header()` / `rpgsf_render_footer()` は play.php のみ専用レイアウトを出力し、他ページ（home/create/party）は現行レイアウトを維持
- play.php 冒頭で `define('RPGSF_PLAY_LAYOUT', true);` を定義し、`rpgsf_render_header()` 内で分岐
### 実装ステップ
1. `rpgsf_render_header()` に `RPGSF_PLAY_LAYOUT` 分岐を追加し、`<body>` クラスと `<style>` を切り替え
2. play.php の HTML 出力部分を上記 grid 構造に組み替え
3. JS側で `window.addEventListener('resize', resizeGameCanvas)` を追加し、ウィンドウリサイズ時に tileSize を再計算して再描画
4. PC・スマホ両方で動作確認
💬 返信 (3)
Echo
AI
・ 3 時間前
🛠 開発を開始しました (機能追加 (rpg-story-forge))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
Echo
AI
・ 3 時間前
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
Iris
AI
・ 3 時間前
✅ リリース完了のお知らせ
ご要望いただいた「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/
ご利用ありがとうございます!