From b55ac0a0ff9d463bd10ec93c70c825c68556e3b8 Mon Sep 17 00:00:00 2001
From: Hadeed Ahmad <hadeedji@gmail.com>
Date: Tue, 4 Jun 2024 22:16:26 +0400
Subject: [PATCH] Make responsive

---
 src/app.jsx      |  2 +-
 src/game.jsx     | 36 ++++++++++++++++++++++--------------
 src/mainMenu.jsx |  8 ++++----
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 49e6232..0a6e8ed 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -8,7 +8,7 @@ export default () => {
   const players = useStore((state) => state.players);
 
   return (
-    <main className="center min-h-screen bg-navy-700">
+    <main className="center min-h-screen bg-navy-700 p-6">
       {isGameRunning ? <Game players={players} key={gameKey} /> : <MainMenu />}
     </main>
   );
diff --git a/src/game.jsx b/src/game.jsx
index e1455cf..822ce18 100644
--- a/src/game.jsx
+++ b/src/game.jsx
@@ -52,15 +52,15 @@ const GridButton = ({ onClick, symbol, turn, disabled, won }) => {
   return (
     <button
       onClick={onClick}
-      className={`center group size-36 rounded-2xl ${background}`}
+      className={`center group size-24 rounded-2xl sm:size-36 ${background}`}
       disabled={symbol != "" || disabled}
     >
       {symbol == "" ? (
         <SymbolOutline
-          className={`hidden size-16 group-enabled:group-hover:block ${outlineColor}`}
+          className={`hidden size-10 group-enabled:group-hover:block sm:size-16 ${outlineColor}`}
         />
       ) : (
-        <Symbol className={`size-16 ${symbolColor}`} />
+        <Symbol className={`size-10 sm:size-16 ${symbolColor}`} />
       )}
     </button>
   );
@@ -146,10 +146,10 @@ export default ({ players }) => {
           <div className="flex-1">
             <img src={logo} alt="logo" />
           </div>
-          <div className="h-14 w-36 rounded-xl bg-navy-400 px-8 py-4 inner-shadow-1-navy">
-            <div className="flex items-center justify-between text-silver-700">
-              <TurnIndicator className="size-5" />
-              <p className="text-h-xs uppercase">Turn</p>
+          <div className="center h-14 w-24 flex-row rounded-xl bg-navy-400 px-4 py-2 inner-shadow-1-navy sm:w-36 sm:px-8 sm:py-4">
+            <div className="flex w-full items-center justify-between text-silver-700">
+              <TurnIndicator className="size-4 sm:size-5" />
+              <p className="text-base uppercase sm:text-h-xs">Turn</p>
             </div>
           </div>
           <div className="flex-1">
@@ -180,7 +180,9 @@ export default ({ players }) => {
 
         <footer className="center flex-row justify-between text-navy-700">
           {Object.values(scores).map((score) => (
-            <div className={`center h-20 w-36 rounded-2xl ${score.bg}`}>
+            <div
+              className={`center h-16 w-24 rounded-2xl sm:h-20 sm:w-36 ${score.bg}`}
+            >
               <p className="text-base uppercase">{score.display}</p>
               <p className="text-h-m uppercase">{score.value}</p>
             </div>
@@ -192,7 +194,9 @@ export default ({ players }) => {
         className="space-y-8"
         onClose={() => setRestartModal(false)}
       >
-        <h2 className="text-h-l uppercase text-silver-700">Restart game?</h2>
+        <h2 className="text-center text-h-m uppercase text-silver-700 sm:text-h-l">
+          Restart game?
+        </h2>
         <form
           className="center flex-row space-x-4 text-navy-700"
           method="dialog"
@@ -216,7 +220,9 @@ export default ({ players }) => {
         {(() => {
           if (tied) {
             return (
-              <h2 className="text-h-l uppercase text-silver-700">Round tied</h2>
+              <h2 className="text-center text-h-m uppercase text-silver-700 sm:text-h-l">
+                Round tied
+              </h2>
             );
           }
 
@@ -226,14 +232,16 @@ export default ({ players }) => {
 
           return (
             <>
-              <p className="text-h-xs text-silver-700">
+              <p className="text-center text-base text-silver-700 sm:text-h-xs">
                 {players[winner]} wins!
               </p>
               <div
-                className={`mt-4 flex items-center space-x-6 ${headingColor}`}
+                className={`mt-4 flex items-center space-x-2 sm:space-x-6 ${headingColor}`}
               >
-                <HeadingSymbol className="size-16" />
-                <h2 className="text-h-l uppercase">Takes the round</h2>
+                <HeadingSymbol className="sm:size-18 size-[28px]" />
+                <h2 className="text-center text-h-m uppercase sm:text-h-l">
+                  Takes the round
+                </h2>
               </div>
             </>
           );
diff --git a/src/mainMenu.jsx b/src/mainMenu.jsx
index e150b34..2328baf 100644
--- a/src/mainMenu.jsx
+++ b/src/mainMenu.jsx
@@ -21,9 +21,9 @@ export default () => {
   };
 
   return (
-    <div className="center m-6 w-full max-w-lg space-y-10">
+    <div className="center w-full max-w-lg space-y-10">
       <img src={logo} alt="logo" />
-      <div className="center inner-shadow-2-navy w-full rounded-2xl bg-navy-400 p-6">
+      <div className="center w-full rounded-2xl bg-navy-400 p-6 inner-shadow-2-navy">
         <h2 className="mb-6 text-h-xs uppercase text-silver-700">
           Pick player 1's mark
         </h2>
@@ -57,13 +57,13 @@ export default () => {
       <div className="w-full space-y-5">
         <button
           onClick={() => startGame("CPU")}
-          className="center inner-shadow-2-yellow w-full rounded-2xl bg-yellow-700 p-4 hover:bg-yellow-400"
+          className="center w-full rounded-2xl bg-yellow-700 p-4 inner-shadow-2-yellow hover:bg-yellow-400"
         >
           <p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
         </button>
         <button
           onClick={() => startGame("P2")}
-          className="center inner-shadow-2-blue w-full rounded-2xl bg-blue-700 p-4 hover:bg-blue-400"
+          className="center w-full rounded-2xl bg-blue-700 p-4 inner-shadow-2-blue hover:bg-blue-400"
         >
           <p className="text-h-s uppercase text-navy-700">
             New game (vs player)