fix: reset play board state between games

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/components/Home/HomeHero.tsx

@@ -145,7 +145,7 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
           <div className="flex w-full flex-col items-start justify-center gap-6 md:w-[45%] md:gap-8">
             <div className="flex flex-col gap-3 md:gap-4">
               <motion.h1 className="whitespace-nowrap text-4xl font-bold leading-tight text-white md:text-5xl">
-                The human chess AI
+                Human-like chess AI
               </motion.h1>
               <motion.p className="text-xl text-white/80 md:text-2xl">
                 Maia is a neural network chess model that captures human style.

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