feat: add keyboard navigation to analysis

Author: kevinjosethomas

src/components/Board/AnalysisMovesContainer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useContext, useMemo, Fragment } from 'react'
+import React, { useContext, useMemo, Fragment, useEffect } from 'react'
 import { AnalysisGameControllerContext, WindowSizeContext } from 'src/contexts'
 import { GameNode, AnalyzedGame, Termination, ClientBaseGame } from 'src/types'
 
@@ -64,6 +64,32 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
     return game.tree.getMainLine()
   }, [game.tree])
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!currentNode) return
+
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault()
+          if (currentNode.mainChild) {
+            goToNode(currentNode.mainChild)
+          }
+          break
+        case 'ArrowLeft':
+          event.preventDefault()
+          if (currentNode.parent) {
+            goToNode(currentNode.parent)
+          }
+          break
+        default:
+          break
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [currentNode, goToNode])
+
   const moves = useMemo(() => {
     const nodes = mainLineNodes.slice(1)
     const rows: (GameNode | null)[][] = []

src/pages/play/maia.tsx

@@ -165,6 +165,27 @@ const PlayMaia: React.FC<Props> = ({
 }: Props) => {
   const controller = useVsMaiaPlayController(id, playGameConfig)
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!controller.playerActive || controller.game.termination) return
+
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault()
+          break
+        case 'ArrowLeft':
+          event.preventDefault()
+
+          break
+        default:
+          break
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [controller.playerActive, controller.game.termination])
+
   return (
     <PlayControllerContext.Provider value={controller}>
       <GameplayInterface>