feat: add more chess assets and continue migration to tailwindcss

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>
   )

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

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>

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)),
-              // })}
             />
           )
         }}