Feature/collision detection

[faithia-anastasia]

暫定的に衝突判定を実装
・とりあえず惑星2つを配列に入れて処理
・Simulation関数をいったん作り、内部で並進の処理と一緒に衝突判定を実施
・爆発のエフェクトを仮で実装

[tknkaa]

細かい点についてはレビューを見てほしいのですが、それとは別でシミュレーションゲームにするには衝突をシミュレートするためのボタンがあるといいかと思います。

[tknkaa]

ここも key に配列のインデックスを使ってますね。

[tknkaa]

別ファイルのレビューで指摘したように key に配列のインデックスを指定するのは一般的に React のアンチパターンとされています。ただ、この場合は追加削除がなさそうなので、バグの原因はならない可能性があります。

[tknkaa]

これもついやりがちなんですけど、基本的に状態管理は親コンポーネントでやりたいので、できれば setter を props で渡すのは避けてほしいです。今回なら、以下のような書き方ができます。

// 子
if (isColliding(a, b)) {
  if (!collidedPairsRef.current.has(key)) {
    collidedPairsRef.current.add(key)
    onExplosion(a, b)  // 「衝突した」という事実だけ伝える
  }
}

// props の型
interface SimulationProps {
  planets: Planet[]
  onExplosion: (a: Planet, b: Planet) => void
}

// 親
<Simulation
  planets={planets}
  onExplosion={(a, b) => setExplosions(prev => [...prev, a, b])}
/>

[tknkaa]

別ファイルのレビューで指摘したように for 文に統一するのがいいと思います。

[tknkaa]

fragmentCount が undefined になる状況がよく分からなかったのですが、もし undefined になる状況がないなら ? は外すと後で undefined かどうかチェックをする必要がなくなるかと思います。

[tknkaa]

これは型エラーになるかと思います。<THREE.Group | null> のように型を広げる必要がありそうです。