作りたいものがあったので、とりあえず試作 ドキュメント含めまだほぼAIが書いてます
チェス初心者向けの学習・対戦サポートWebアプリケーション。 「駒の利き（攻撃範囲）」を視覚的にガイドすることで、盤面の状況を直感的に理解し、ブランダー（悪手）を減らす手助けをします。
初心者が「どこに動かしていいか」「どこが危ないか」を一目で判断できるようにし、盤面感覚を養う。
docs/
├── architecture/
│ ├── tech_stack.md # 技術スタックの選定理由 (Next.js, chess.js, etc.)
│ └── data_flow.md # データフローと状態管理
├── design/
│ ├── ui_mockup.md # 画面レイアウト・コンポーネント構成案
│ └── color_palette.md # 配色定義 (青・赤・紫)
├── specs/
│ ├── visualization.md # 可視化ロジック (攻撃範囲計算アルゴリズム)
│ ├── game_modes.md # 各モードの挙動詳細
│ └── gameplay_mechanics.md # 対局機能・駒の挙動詳細
├── git_workflow.md # ブランチ運用・コミットメッセージのルール
└── roadmap.md # 開発ロードマップ・タスク一覧
src/
├── app/
│ ├── globals.css # グローバルスタイル
│ ├── layout.tsx # ルートレイアウト
│ └── page.tsx # トップページ（レイアウト・useBoardLayout フック）
├── components/
│ ├── Board/
│ │ └── ChessBoard.tsx # チェス盤コンポーネント（マス色のオーバーレイ描画）
│ ├── Controls/
│ │ └── GameControls.tsx # 操作ボタン群（Board Scope / Flip / Undo / Reset）
│ └── UI/
│ └── GameInfo.tsx # ゲーム情報パネル（手番・取った駒・棋譜）
├── hooks/
│ └── useChess.ts # チェスロジックのカスタムフック（移動・選択・状態同期）
├── lib/
│ └── chess-analyzer.ts # 攻撃範囲計算ロジック (analyzeBoard / analyzePiece)
└── store/
└── game.ts # Zustand によるグローバル状態管理
通常のチェス対局機能に加え、以下の2つの視覚化モードを搭載する。これらはいつでも切り替え可能。
盤面全体の支配状況を色分けして表示する。 画面下部にボタンを用意し、敵味方ごとにオンオフの切り替えを可能にする。
- 🔴 相手の攻撃範囲: 赤色でハイライト
- 🔵 自分の攻撃範囲: 青色でハイライト
- 🟣 激戦区 (Overlap): 双方が攻撃しているマスは紫色で表示
Warning
駒のクリックは駒を動かすためのイベントにしたいので、Piece Scopeは一旦無効化しています 後でなんかいいやり方考える
特定の駒をマーキングして、その駒の攻撃範囲を追うことができる。 一度マークすると、ターンが切り替わってもマークを外すまで可視化は外れない。
- 操作: 考え中
- 表示:
- 選択した駒が敵の場合: その駒を赤く強調し、その駒の攻撃範囲のみを表示
- 選択した駒が味方の場合: その駒を青く強調し、その駒の攻撃範囲のみを表示
- 協調の際は、透明度20%程度で赤色や青色を重ね、元の色（白or黒）が分かるようにする
- 解除: もう一度クリックすると解除
- プレイヤー vs プレイヤー (ローカル/オフライン)
- プレイヤー vs CPU (AI) ※将来実装予定
- 棋譜の記録 (PGN形式)
- 盤面のリセット / 待った機能
- Frontend: React, Next.js, Tailwind CSS
- Chess Logic: chess.js (ルールの判定、移動の検証)
- Visualization: react-chessboard (またはカスタムSVG描画)
- Deployment: Vercel
- プロジェクトのセットアップ (Next.js)
- チェス盤の表示と駒の配置
- 基本的なルールの実装 (chess.js連携)
- 機能①: 全体攻撃範囲の可視化ロジック実装
- 機能②: 個別駒のマーキング機能実装
- UI/UXのブラッシュアップ