chore: migrate play maia page to tailwindcss

CSSLab · Nov 2, 2024 · 7109335 · 7109335
1 parent b2cf2c3
commit 7109335
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 21 deletions.
diff --git a/src/components/GameplayInterface/GameplayInterface.tsx b/src/components/GameplayInterface/GameplayInterface.tsx
@@ -121,10 +121,15 @@ export const GameplayInterface: React.FC<Props> = (
 
   const desktopLayout = (
     <>
-      <div className={styles.outer}>
-        <div className={styles.container}>
-          <div className={styles.side}>
-            <div className={styles.info}>
+      <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
+            style={{
+              maxWidth: 'min(20vw, 100vw - 75vh)',
+            }}
+            className="flex h-[75vh] w-[40vh] flex-col gap-1"
+          >
+            <div>
               <GameInfo
                 termination={game.termination}
                 blackPlayer={{ name: blackPlayer ?? 'Unknown' }}
@@ -135,10 +140,9 @@ export const GameplayInterface: React.FC<Props> = (
                 instructionsType={playType}
               />
             </div>
-            <div className={styles.play}></div>
             <StatsDisplay stats={stats} hideSession={true} />
           </div>
-          <div className={styles.board}>
+          <div className="relative flex aspect-square w-full max-w-[75vh]">
             <GameBoard
               game={game}
               moves={moveMap}
@@ -154,18 +158,23 @@ export const GameplayInterface: React.FC<Props> = (
               />
             ) : null}
           </div>
-          <div className={classNames([styles.side, styles.gameplay])}>
+          <div
+            style={{
+              maxWidth: 'min(20vw, 100vw - 75vh)',
+            }}
+            className="flex h-[75vh] w-[40vh] flex-col justify-center gap-1"
+          >
             {timeControl != 'unlimited' ? (
               <GameClock
                 player={controller.orientation == 'white' ? 'black' : 'white'}
                 reversed={false}
               />
             ) : null}
-            <div className={classNames([styles.moves, styles.gameplay])}>
+            <div className="relative bottom-0 h-full min-h-[38px] flex-1">
               <MovesContainer game={game} termination={game.termination} />
             </div>
-            <div className={styles.info}>{props.children}</div>
-            <div className={styles.controls}>
+            <div>{props.children}</div>
+            <div className="flex-none">
               <BoardController />
             </div>
             {timeControl != 'unlimited' ? (
@@ -179,8 +188,8 @@ export const GameplayInterface: React.FC<Props> = (
 
   const mobileLayout = (
     <>
-      <div className={styles.outer}>
-        <div className={styles.container}>
+      <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
@@ -195,15 +204,15 @@ export const GameplayInterface: React.FC<Props> = (
             </div>
             <div className={styles.play}></div>
           </div> */}
-          <div className={styles.side}>
+          <div className="flex h-auto w-full flex-col gap-1">
             {timeControl != 'unlimited' ? (
               <GameClock
                 player={controller.orientation == 'white' ? 'black' : 'white'}
                 reversed={false}
               />
             ) : null}
           </div>
-          <div className={styles.board}>
+          <div className="relative flex aspect-square h-[100vw] w-screen">
             <GameBoard
               game={game}
               moves={moveMap}
@@ -219,14 +228,14 @@ export const GameplayInterface: React.FC<Props> = (
               />
             ) : null}
           </div>
-          <div className={styles.side}>
+          <div className="flex h-auto w-full flex-col gap-1">
             {timeControl != 'unlimited' ? (
               <GameClock player={controller.orientation} reversed={true} />
             ) : null}
-            <div className={styles.controls}>
+            <div className="flex-none">
               <BoardController />
             </div>
-            <div className={styles.info}>{props.children}</div>
+            <div className="w-screen">{props.children}</div>
             <StatsDisplay stats={stats} hideSession={true} />
           </div>
         </div>

diff --git a/src/components/PlayControls/PlayControls.tsx b/src/components/PlayControls/PlayControls.tsx
@@ -18,14 +18,28 @@ export const PlayControls: React.FC<Props> = ({
   return (
     <div>
       {gameOver ? (
-        <div className={styles.container}>
-          {playAgain ? <button onClick={playAgain}>Play again</button> : null}
+        <div className="flex flex-col p-4 text-center">
+          {playAgain ? (
+            <button
+              onClick={playAgain}
+              className="flex items-center justify-center rounded bg-human-3 py-2 transition duration-200 hover:bg-human-4"
+            >
+              <p className="text-lg">Play again</p>
+            </button>
+          ) : null}
         </div>
       ) : (
-        <div className={styles.container}>
+        <div className="flex flex-col gap-2 p-4 text-center">
           {playerActive ? 'Your turn' : 'Waiting for opponent'}
           {offerDraw ? <button onClick={offerDraw}>Offer draw</button> : null}
-          {resign ? <button onClick={resign}>Resign</button> : null}
+          {resign ? (
+            <button
+              onClick={resign}
+              className="flex items-center justify-center rounded bg-human-3 py-2 transition duration-200 hover:bg-human-4"
+            >
+              <p className="text-lg">Resign</p>
+            </button>
+          ) : null}
         </div>
       )}
     </div>