From b88e255429bac834a32f0090d29181c799d43ae9 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Mon, 4 Nov 2024 13:56:43 -0800
Subject: [PATCH] feat: add more chess assets and continue migration to
 tailwindcss

---
 public/assets/pieces/black king.svg           |  12 +++
 public/assets/pieces/black pawn.svg           |   5 +
 public/assets/pieces/white king.svg           |   9 ++
 public/assets/pieces/white pawn.svg           |   5 +
 src/components/Feedback/Feedback.tsx          |  19 ----
 .../GameplayInterface/GameplayInterface.tsx   |  14 ---
 .../HandBrainPlayControls.tsx                 | 100 ++++++++++--------
 src/components/MovePlot/MovePlot.tsx          |   8 --
 8 files changed, 89 insertions(+), 83 deletions(-)
 create mode 100644 public/assets/pieces/black king.svg
 create mode 100644 public/assets/pieces/black pawn.svg
 create mode 100644 public/assets/pieces/white king.svg
 create mode 100644 public/assets/pieces/white pawn.svg

diff --git a/public/assets/pieces/black king.svg b/public/assets/pieces/black king.svg
new file mode 100644
index 0000000..ba2ac9f
--- /dev/null
+++ b/public/assets/pieces/black king.svg	
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45">
+  <g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:#000000; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;">
+    <path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:#000000; stroke-linejoin:miter;" id="path6570"/>
+    <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:#000000;fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/>
+    <path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:#000000; stroke:#000000;"/>
+    <path d="M 20,8 L 25,8" style="fill:none; stroke:#000000; stroke-linejoin:miter;"/>
+    <path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:#ffffff;"/>
+    <path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:#ffffff;"/>
+  </g>
+</svg>
diff --git a/public/assets/pieces/black pawn.svg b/public/assets/pieces/black pawn.svg
new file mode 100644
index 0000000..b534de8
--- /dev/null
+++ b/public/assets/pieces/black pawn.svg	
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45">
+  <path d="m 22.5,9 c -2.21,0 -4,1.79 -4,4 0,0.89 0.29,1.71 0.78,2.38 C 17.33,16.5 16,18.59 16,21 c 0,2.03 0.94,3.84 2.41,5.03 C 15.41,27.09 11,31.58 11,39.5 H 34 C 34,31.58 29.59,27.09 26.59,26.03 28.06,24.84 29,23.03 29,21 29,18.59 27.67,16.5 25.72,15.38 26.21,14.71 26.5,13.89 26.5,13 c 0,-2.21 -1.79,-4 -4,-4 z" style="opacity:1; fill:#000000; fill-opacity:1; fill-rule:nonzero; stroke:#000000; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:miter; stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"/>
+</svg>
diff --git a/public/assets/pieces/white king.svg b/public/assets/pieces/white king.svg
new file mode 100644
index 0000000..632ca1a
--- /dev/null
+++ b/public/assets/pieces/white king.svg	
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45">
+  <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+    <path stroke-linejoin="miter" d="M22.5 11.63V6M20 8h5"/>
+    <path fill="#fff" stroke-linecap="butt" stroke-linejoin="miter" d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5"/>
+    <path fill="#fff" d="M12.5 37c5.5 3.5 14.5 3.5 20 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-2.5-7.5-12-10.5-16-4-3 6 6 10.5 6 10.5v7"/>
+    <path d="M12.5 30c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/pieces/white pawn.svg b/public/assets/pieces/white pawn.svg
new file mode 100644
index 0000000..b265fe1
--- /dev/null
+++ b/public/assets/pieces/white pawn.svg	
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45">
+  <path d="m 22.5,9 c -2.21,0 -4,1.79 -4,4 0,0.89 0.29,1.71 0.78,2.38 C 17.33,16.5 16,18.59 16,21 c 0,2.03 0.94,3.84 2.41,5.03 C 15.41,27.09 11,31.58 11,39.5 H 34 C 34,31.58 29.59,27.09 26.59,26.03 28.06,24.84 29,23.03 29,21 29,18.59 27.67,16.5 25.72,15.38 26.21,14.71 26.5,13.89 26.5,13 c 0,-2.21 -1.79,-4 -4,-4 z" style="opacity:1; fill:#ffffff; fill-opacity:1; fill-rule:nonzero; stroke:#000000; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:miter; stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"/>
+</svg>
diff --git a/src/components/Feedback/Feedback.tsx b/src/components/Feedback/Feedback.tsx
index 7c2cd30..82a1395 100644
--- a/src/components/Feedback/Feedback.tsx
+++ b/src/components/Feedback/Feedback.tsx
@@ -133,25 +133,6 @@ export const Feedback: React.FC<Props> = ({
             )}
           </>
         )}
-        {/* <button
-              onClick={() => {
-                router.push(
-                  {
-                    pathname: '/analysis/[id]',
-                    query: {
-                      id: game.id,
-                      index: game.targetIndex,
-                      orientation:
-                        game.targetIndex % 2 === 0 ? 'white' : 'black',
-                    },
-                  },
-                  `/analysis/${game.id}`,
-                )
-              }}
-              className={styles.secondary}
-            >
-              Analyze This Board
-            </button> */}
       </div>
     </div>
   )
diff --git a/src/components/GameplayInterface/GameplayInterface.tsx b/src/components/GameplayInterface/GameplayInterface.tsx
index 128fb6f..5c454a2 100644
--- a/src/components/GameplayInterface/GameplayInterface.tsx
+++ b/src/components/GameplayInterface/GameplayInterface.tsx
@@ -189,20 +189,6 @@ export const GameplayInterface: React.FC<Props> = (
     <>
       <div className="flex h-full flex-1 flex-col justify-center gap-1">
         <div className="mt-2 flex h-full flex-col items-start justify-start gap-2">
-          {/* <div className={styles.side}>
-            <div className={styles.info}>
-              <GameInfo
-                termination={game.termination}
-                blackPlayer={{ name: blackPlayer ?? 'Unknown' }}
-                whitePlayer={{ name: whitePlayer ?? 'Unknown' }}
-                type={playType}
-                id={game.id}
-                showId={false}
-                instructionsType={playType}
-              />
-            </div>
-            <div className={styles.play}></div>
-          </div> */}
           <div className="flex h-auto w-full flex-col gap-1">
             {timeControl != 'unlimited' ? (
               <GameClock
diff --git a/src/components/HandBrainPlayControls/HandBrainPlayControls.tsx b/src/components/HandBrainPlayControls/HandBrainPlayControls.tsx
index 00b7b12..2b75ad2 100644
--- a/src/components/HandBrainPlayControls/HandBrainPlayControls.tsx
+++ b/src/components/HandBrainPlayControls/HandBrainPlayControls.tsx
@@ -1,22 +1,23 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable jsx-a11y/alt-text */
 import { PieceSymbol } from 'chess.ts'
-import styles from './HandBrainPlayControls.module.scss'
-import classNames from 'classnames'
+
 import { Color } from 'src/types'
 
 const pieceTypes: PieceSymbol[] = ['k', 'q', 'r', 'b', 'n', 'p']
 
-const pieceStyleMap = {
-  p: styles.pawn,
-  k: styles.king,
-  q: styles.queen,
-  r: styles.rook,
-  b: styles.bishop,
-  n: styles.knight,
-}
-
-const colorStyleMap = {
-  white: styles.white,
-  black: styles.black,
+const pieceColorMap: { [key: string]: string } = {
+  wp: 'white pawn',
+  wk: 'white king',
+  wq: 'white queen',
+  wr: 'white rook',
+  wb: 'white bishop',
+  wn: 'white knight',
+  bp: 'black pawn',
+  bk: 'black king',
+  bq: 'black queen',
+  br: 'black rook',
+  bb: 'black bishop',
 }
 
 interface Props {
@@ -56,57 +57,72 @@ export const HandBrainPlayControls: React.FC<Props> = ({
 
   return (
     <div>
-      <div className={styles.container}>
+      <div className="flex flex-col items-center justify-center p-6">
         {gameOver ? (
           <>
-            {playAgain ? <button onClick={playAgain}>Play again</button> : null}
+            {playAgain ? (
+              <button
+                onClick={playAgain}
+                className="flex w-full justify-center rounded bg-human-3 py-2 text-primary transition duration-200 hover:bg-human-4"
+              >
+                Play again
+              </button>
+            ) : null}
           </>
         ) : (
-          <>
-            <p className={styles.roleBlurb}>
-              {isBrain ? 'You are the brain' : 'You are the hand'}
-            </p>
-            <p>{status}</p>
-
+          <div className="flex w-full flex-col items-center justify-center gap-4">
+            <div className="flex flex-col items-center justify-center">
+              <p className="font-bold">{status}</p>
+              <h2 className="text-base">
+                {isBrain ? 'You are the brain' : 'You are the hand'}
+              </h2>
+            </div>
             {isBrain ? (
-              <div className={styles.piecesContainer}>
+              <div className="flex w-full flex-wrap items-start justify-center gap-2">
                 {pieceTypes.map((p) => (
                   <button
                     key={p}
                     onClick={() => selectPiece(p)}
-                    className={styles.pieceButton}
                     disabled={
                       movablePieceTypes.indexOf(p) == -1 ||
                       !playerActive ||
                       !!selectedPiece
                     }
+                    className="flex h-16 w-16 items-center justify-center rounded border border-primary/10 bg-[#f0d9b5] disabled:bg-background-1"
                   >
-                    <div
-                      className={classNames([
-                        styles.piece,
-                        colorStyleMap[color],
-                        pieceStyleMap[p],
-                      ])}
-                    ></div>
+                    <img
+                      src={`/assets/pieces/${pieceColorMap[color[0] + p]}.svg`}
+                    />
                   </button>
                 ))}
               </div>
             ) : (
-              <div className={styles.selectedPieceDisplay}>
+              <div className="h-30 w-30 flex items-center justify-center">
                 {selectedPiece ? (
-                  <div
-                    className={classNames([
-                      styles.piece,
-                      colorStyleMap[color],
-                      pieceStyleMap[selectedPiece],
-                    ])}
-                  ></div>
+                  <img
+                    src={`/assets/pieces/${pieceColorMap[color[0] + selectedPiece]}.svg`}
+                    className="h-20 w-20 rounded bg-[#f0d9b5] bg-contain"
+                  />
                 ) : null}
               </div>
             )}
-            {offerDraw ? <button onClick={offerDraw}>Offer draw</button> : null}
-            {resign ? <button onClick={resign}>Resign</button> : null}
-          </>
+            {offerDraw ? (
+              <button
+                onClick={offerDraw}
+                className="mt-4 flex w-full justify-center rounded bg-engine-3 py-2 text-primary transition duration-200 hover:bg-engine-4"
+              >
+                Offer draw
+              </button>
+            ) : null}
+            {resign ? (
+              <button
+                onClick={resign}
+                className="mt-4 flex w-full justify-center rounded bg-human-3 py-2 text-primary transition duration-200 hover:bg-human-4"
+              >
+                Resign
+              </button>
+            ) : null}
+          </div>
         )}
       </div>
     </div>
diff --git a/src/components/MovePlot/MovePlot.tsx b/src/components/MovePlot/MovePlot.tsx
index 4da3b07..3775963 100644
--- a/src/components/MovePlot/MovePlot.tsx
+++ b/src/components/MovePlot/MovePlot.tsx
@@ -113,14 +113,6 @@ export const MovePlot: React.FC<Props> = ({
               onMouseMove={(event) => onMouseMove?.(node, event)}
               onMouseLeave={(event) => onMouseLeave?.(node, event)}
               onClick={(event) => onClick?.(node, event)}
-              // className={classNames({
-              //   [styles.animated]:
-              //     (currentMove &&
-              //       currentMove.join('') === props.node.data.move) ||
-              //     (!currentMove &&
-              //       currentSquare &&
-              //       currentSquare === props.node.data.move.slice(0, 2)),
-              // })}
             />
           )
         }}