feat: add export pgn and copy fen option below game board

Author: kevinjosethomas

src/components/Core/ExportGame.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react'
+import { Chess } from 'chess.ts'
+
+import { Move } from 'src/types'
+
+interface Props {
+  moves: Move[]
+}
+
+export const ExportGame: React.FC<Props> = ({ moves }) => {
+  const [pgn, setPgn] = useState('')
+
+  useEffect(() => {
+    const chess = new Chess()
+    moves.forEach((move) => {
+      if (move.san) {
+        chess.move(move.san)
+      }
+    })
+    setPgn(chess.pgn())
+  }, [moves])
+
+  const copy = (content: string) => {
+    navigator.clipboard.writeText(content)
+  }
+
+  return (
+    <div className="flex flex-row items-center justify-center gap-2">
+      <div className="flex h-10 items-center overflow-hidden rounded border border-primary/10 bg-background-1">
+        <div className="flex w-[500px] items-center justify-start bg-background-1 px-4">
+          <p className="whitespace-nowrap text-sm text-secondary">
+            {moves[moves.length - 1].board}
+          </p>
+        </div>
+        <button
+          onClick={() => copy(moves[moves.length - 1].board)}
+          className="flex h-10 w-10 min-w-10 items-center justify-center border-l border-primary/10 bg-background-2 transition duration-200 hover:bg-background-3"
+        >
+          <span className="material-symbols-outlined text-xl">
+            content_copy
+          </span>
+        </button>
+      </div>
+      <button
+        onClick={() => copy(pgn)}
+        className="flex h-10 items-center justify-center rounded border border-primary/10 bg-background-2 px-4 py-1 transition duration-300 hover:bg-background-3"
+      >
+        Copy PGN
+      </button>
+    </div>
+  )
+}

src/components/Core/index.ts

@@ -1,2 +1,3 @@
 export * from './GameInfo'
+export * from './ExportGame'
 export * from './ContinueAgainstMaia'

src/components/GameplayInterface/GameplayInterface.tsx

@@ -9,7 +9,7 @@ import {
   WindowSizeContext,
 } from 'src/contexts'
 import { GameBoard, MovesContainer, BoardController } from 'src/components'
-import { GameInfo } from '../Core'
+import { GameInfo, ExportGame } from '../Core'
 import { GameClock } from '../GameClock'
 import { useGameController } from 'src/hooks'
 import { StatsDisplay } from '../StatsDisplay'
@@ -159,7 +159,7 @@ export const GameplayInterface: React.FC<Props> = (
   const desktopLayout = (
     <>
       <div className="flex h-full flex-1 flex-col justify-center gap-1">
-        <div className="mt-2 flex w-full flex-row items-center justify-center gap-1">
+        <div className="flex w-full flex-row items-center justify-center gap-1">
           <div
             style={{
               maxWidth: 'min(20vw, 100vw - 75vh)',
@@ -219,6 +219,7 @@ export const GameplayInterface: React.FC<Props> = (
             ) : null}
           </div>
         </div>
+        <ExportGame moves={game.moves.slice(0, controller.currentIndex + 1)} />
       </div>
     </>
   )