Merge pull request #272 from CSSLab/codex/fix-second-game-piece-offset

fix: reset play board state between games

Author: ashtonanderson

src/components/Board/GameBoard.tsx

@@ -69,6 +69,7 @@ export const GameBoard: React.FC<Props> = ({
   destinationBadges = [],
 }: Props) => {
   const { playMoveSound } = useSound()
+  const boardInstanceKey = game?.id ?? 'board'
 
   const after = useCallback(
     (from: string, to: string) => {
@@ -151,6 +152,7 @@ export const GameBoard: React.FC<Props> = ({
   return (
     <div className="relative h-full w-full">
       <Chessground
+        key={boardInstanceKey}
         contained
         config={{
           movable: {

src/components/Board/GameplayInterface.tsx

@@ -11,7 +11,7 @@ import {
 import Head from 'next/head'
 import { useUnload } from 'src/hooks/useUnload'
 import type { DrawShape } from 'chessground/draw'
-import { useCallback, useContext, useMemo, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import {
   AuthContext,
   WindowSizeContext,
@@ -57,6 +57,10 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
     [string, string] | null
   >(null)
 
+  useEffect(() => {
+    setPromotionFromTo(null)
+  }, [game.id])
+
   const onPlayerMakeMove = useCallback(
     (move: [string, string] | null) => {
       if (move) {
@@ -199,6 +203,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
             className="relative flex aspect-square w-full max-w-[75vh] flex-shrink-0"
           >
             <GameBoard
+              key={game.id}
               game={game}
               availableMoves={availableMovesMapped}
               onPlayerMakeMove={onPlayerMakeMove}
@@ -272,6 +277,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
             className="relative mx-auto flex aspect-square w-full max-w-3xl"
           >
             <GameBoard
+              key={game.id}
               game={game}
               availableMoves={availableMovesMapped}
               onPlayerMakeMove={onPlayerMakeMove}

src/pages/play/hb.tsx

@@ -35,7 +35,7 @@ const PlayHandBrain: React.FC<Props> = ({
   )
 
   return (
-    <PlayControllerContext.Provider value={controller}>
+    <PlayControllerContext.Provider key={id} value={controller}>
       <GameplayInterface boardShapes={controller.boardShapes}>
         <HandBrainPlayControls
           game={controller.game}

src/pages/play/maia.tsx

@@ -53,7 +53,7 @@ const PlayMaia: React.FC<Props> = ({
   }, [controller.playerActive, controller.game.termination])
 
   return (
-    <PlayControllerContext.Provider value={controller}>
+    <PlayControllerContext.Provider key={id} value={controller}>
       <GameplayInterface>
         <div id="play-controls">
           <PlayControls