Merge pull request #352 from manish591/feat/added-themes

Feat/added themes

Author: siinghd

apps/frontend/public/github.svg

@@ -0,0 +1,45 @@
+.loader {
+  width: 100%;
+  height: 100vh;
+}
+
+.loader__main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 50px;
+}
+
+.loader__dot {
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  border-radius: 20px;
+  transform: translate(0px, -40px);
+  animation: bounce 1s infinite;
+}
+
+.loader__dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loader__dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+  0% {
+    transform: translate(0px, -10px);
+  }
+  40% {
+    width: 0px;
+    height: 2px;
+    transform: translate(0px, 40px) scale(1.7);
+  }
+  100% {
+    height: 20px;
+    transform: translate(0px, -20px);
+  }
+}

apps/frontend/public/google.svg

@@ -1,4 +1,5 @@
-import './App.css';
+import "./App.css";
+import "./themes.css";
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Landing } from './screens/Landing';
 import { Game } from './screens/Game';
@@ -7,13 +8,18 @@ import { Suspense } from 'react';
 import { RecoilRoot } from 'recoil';
 import { Loader } from './components/Loader';
 import { Layout } from './layout';
+import { Settings } from './screens/Settings';
+import { Themes } from "./components/themes";
+import { ThemesProvider } from "./context/themeContext";
 
 function App() {
   return (
-    <div className="min-h-screen bg-stone-800">
+    <div className="min-h-screen bg-bgMain text-textMain">
       <RecoilRoot>
         <Suspense fallback={<Loader />}>
-          <AuthApp />
+          <ThemesProvider>
+            <AuthApp />
+          </ThemesProvider>
         </Suspense>
       </RecoilRoot>
     </div>
@@ -24,15 +30,24 @@ function AuthApp() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Layout children={<Landing />} />} />
+        <Route 
+          path="/" 
+          element={<Layout><Landing /></Layout>} 
+        />
         <Route
           path="/login"
           element={<Login />}
         />
         <Route
           path="/game/:gameId"
-          element={<Layout children={<Game />} />}
+          element={<Layout><Game /></Layout>}
         />
+        <Route 
+          path='/settings' 
+          element={<Layout><Settings /></Layout>} 
+        >
+          <Route path="themes" element={<Themes />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );

apps/frontend/public/theme.svg

@@ -84,17 +84,16 @@ export function PlayCard() {
   const navigate = useNavigate();
   return (
     <Card className="bg-transparent border-none">
-      <CardHeader className="pb-3 text-center text-white shadow-md">
+      <CardHeader className="pb-3 text-center">
         <CardTitle className="font-semibold tracking-wide flex flex-col items-center justify-center">
-          <p>
-            Play
-            <span className="text-green-700 font-bold pt-1"> Chess</span>
+          <p className='text-white'>
+            Play <span className="text-green-600 font-bold pt-1">Chess</span>
           </p>
           <img className="pl-1 w-1/2 mt-4" src={chessIcon} alt="chess" />
         </CardTitle>
-        <CardDescription></CardDescription>
+        <CardDescription />
       </CardHeader>
-      <CardContent className="grid gap-2 cursor-pointer shadow-md mt-1">
+      <CardContent className="grid gap-2 cursor-pointer mt-1">
         {gameModeData.map((data) => {
           return <GameModeComponent {...data} />;
         })}

apps/frontend/src/App.css

@@ -74,7 +74,6 @@ export const ChessBoard = memo(({
   socket: WebSocket;
 }) => {
   console.log("chessboard reloaded")
-  const { height, width } = useWindowSize();
 
   const [isFlipped, setIsFlipped] = useRecoilState(isBoardFlippedAtom);
   const [userSelectedMoveIndex, setUserSelectedMoveIndex] = useRecoilState(
@@ -93,11 +92,7 @@ export const ChessBoard = memo(({
 
   const labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
   const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
-  const OFFSET = 100;
-  const boxSize =
-    width > height
-      ? Math.floor((height - OFFSET) / 8)
-      : Math.floor((width - OFFSET) / 8);
+  const boxSize = 80;
   const [gameOver, setGameOver] = useState(false);
   const moveAudio = new Audio(MoveSound);
   const captureAudio = new Audio(CaptureSound);
@@ -337,7 +332,7 @@ export const ChessBoard = memo(({
                         height: boxSize,
                       }}
                       key={j}
-                      className={`${isRightClickedSquare ? (isMainBoxColor ? 'bg-[#CF664E]' : 'bg-[#E87764]') : isKingInCheckSquare ? 'bg-[#FF6347]' : isHighlightedSquare ? `${isMainBoxColor ? 'bg-[#BBCB45]' : 'bg-[#F4F687]'}` : isMainBoxColor ? 'bg-[#739552]' : 'bg-[#EBEDD0]'} ${''}`}
+                      className={`${isRightClickedSquare ? (isMainBoxColor ? 'bg-[#CF664E]' : 'bg-[#E87764]') : isKingInCheckSquare ? 'bg-[#FF6347]' : isHighlightedSquare ? `${isMainBoxColor ? 'bg-[#BBCB45]' : 'bg-[#F4F687]'}` : isMainBoxColor ? 'bg-boardDark' : 'bg-boardLight'} ${''}`}
                       onContextMenu={(e) => {
                         e.preventDefault();
                       }}