Feat/store

[khkmgch]

概要

• ReactとPhaser間のデータのやり取りの実装

ストアのオブジェクトの階層が深いのでZustandだけで状態を更新できず、ramdaというパッケージをインストールして使いました。

内容

• パッケージの追加(zustand, ramda, @types/ramda)
• ストアの型ファイル作成(types/useGameStore.ts)
• ストア作成(store/useGameStore.ts)
• 状態と更新メソッドをまとめたファイルを作成(store/index.ts)
• GameDisplayコンポーネント内でPhaserにストアの状態とメソッドを登録(components/GameDisplay.ts)
• GameSceneから状態とメソッドを呼び出す

• 可能になったこと

• Phaserからストアの状態を読み込む
• Phaserからストアの状態を更新

課題

• Phaserからストアの状態を読み込むのは、new Phaser.Game()の１回だけみたいなので、ストアの更新を常に反映はできない。(ゲーム開始前に設定画面で入力した残機などは使える)

  対策

  ① TextBoxクラスを作って残機などをPhaserの描画内に表示する。 ② Phaserの描画の外(コンポーネント内)のdivタグ内で表示する。

Doc

その他

• レビュワーへの参考情報（実装上の懸念点や注意点などあれば記載）