Skip to content

components.md

Latest commit

 

History

History
183 lines (129 loc) · 6.04 KB

components.md

File metadata and controls

183 lines (129 loc) · 6.04 KB

コンポーネント仕様

コンポーネント階層

page.tsx (Home)
├── InfoDisplay
├── GameBoard (目標盤面)
│   └── Panel × N
├── GameBoard (操作盤面)
│   └── Panel × N
├── Controls
├── ConfirmModal
├── HowToPlayModal
└── LevelInfoModal

各コンポーネントの詳細

Home (src/app/page.tsx)

ゲーム全体のコントローラーとなるルートコンポーネント。

管理する状態:

状態 型 説明
level number 現在のレベル (1〜)
problem Problem | null 現在の問題データ
currentBoard Board | null 操作中の盤面
tapsLeft number 残りタップ回数
totalFailedAttempts number 累計失敗回数
gameState GameState ゲーム状態
showConfirmModal boolean 終了確認モーダルの表示状態
showHowToPlay boolean 遊び方モーダルの表示状態
showLevelInfo boolean レベル情報モーダルの表示状態

GameState の遷移:

状態 説明 次の遷移
loading 問題生成中 → playing
playing プレイ中 → cleared / failed / finished
cleared クリア（1.5秒後に次へ） → loading
failed 失敗（1.5秒後にリセット） → playing
finished ゲーム終了画面 → loading（再スタート時）

GameBoard (src/components/GameBoard.tsx)

盤面をグリッド表示するコンポーネント。

Props:

Prop 型 説明
board Board 盤面データ (2次元配列)
onPanelClick (row: number, col: number) => void パネルクリック時のコールバック
disabled boolean 操作無効化フラグ
isTarget boolean 目標盤面かどうか（目標盤面はクリック不可）
panelSize number パネルのサイズ (px)
gap number パネル間のギャップ (px)

目標盤面 (isTarget=true) の場合、onPanelClick は空関数となり、クリック操作が無効化されます。

Panel (src/components/Panel.tsx)

個別のパネルを表示するコンポーネント。CSS 3D Transform を使用して表裏の反転アニメーションを実現します。

Props:

Prop 型 説明
state 'O' | 'X' パネルの表裏状態
onClick () => void クリック時のコールバック
disabled boolean 操作無効化フラグ
size number パネルサイズ (px)

3D反転の仕組み:

  • .panel コンテナが transform-style: preserve-3d で3D空間を構成
  • 状態が X の場合、.panel-flipped クラスにより rotateY(180deg) が適用
  • 表面（O）と裏面（X）それぞれが .panel-face で backface-visibility: hidden に設定
  • 反転アニメーション: 0.6秒の transition

InfoDisplay (src/components/InfoDisplay.tsx)

画面上部の情報バー。レベル、盤面サイズ、残りタップ数を表示し、ヘルプ・レベル情報・終了ボタンを配置します。

Props:

Prop 型 説明
level number 現在のレベル
boardSize number 盤面サイズ
tapsLeft number 残りタップ回数
onHelpClick () => void ヘルプボタンのコールバック
onLevelClick () => void レベル情報ボタンのコールバック
onEndGame () => void 終了ボタンのコールバック

Controls (src/components/Controls.tsx)

残りタップ数と終了ボタンを表示するコンポーネント。

Props:

Prop 型 説明
tapsLeft number 残りタップ回数
onEndGame () => void 終了ボタンのコールバック

ConfirmModal (src/components/ConfirmModal.tsx)

ゲーム終了確認用の汎用モーダルコンポーネント。

Props:

Prop 型 説明
isOpen boolean 表示状態
onConfirm () => void 確認ボタンのコールバック
onCancel () => void キャンセルボタンのコールバック
message string 表示するメッセージ

HowToPlayModal (src/components/HowToPlayModal.tsx)

遊び方の説明を表示するモーダル。ゲームのルール、操作方法、クリア条件を視覚的に説明します。

Props:

Prop 型 説明
isOpen boolean 表示状態
onClose () => void 閉じるボタンのコールバック

LevelInfoModal (src/components/LevelInfoModal.tsx)

ステージ構成をテーブル形式で表示するモーダル。現在のプレイヤーのステージがハイライトされます。

Props:

Prop 型 説明
isOpen boolean 表示状態
onClose () => void 閉じるボタンのコールバック
currentLevel number 現在のレベル（ハイライト用）

カスタムフック

useResponsiveSize (src/hooks/useResponsiveSize.ts)

ビューポートサイズに応じて最適なパネルサイズとレイアウトを計算するカスタムフック。

パラメータ:

パラメータ 型 説明
boardSize number 盤面サイズ (4〜8)

戻り値:

プロパティ 型 説明
panelSize number 計算されたパネルサイズ (px, 最小28px)
gap number パネル間隔 (固定6px)
isLandscape boolean 横長レイアウトかどうか

計算ロジック:

  • 横長の場合: ビューポート幅の半分から余白を引いた値を基準に計算
  • 縦長の場合: ビューポート高さの半分から固定要素の高さを引いた値を基準に計算
  • window.resize イベントで動的に再計算