chore: reorganize files

client/src/components/Chessboard.tsx

@@ -30,7 +30,7 @@ import Chess, {
 } from "../../../server/src/engine";
 import { MouseEventHandler, useState } from "react";
 import Show from "../utils/Show";
-import useWindowSize from "../utils/useWindowSize";
+import useWindowSize from "../hooks/useWindowSize";
 
 const PIECES: Record<Color, Record<PieceType, string>> = {
   w: { p: wp, n: wn, b: wb, r: wr, q: wq, k: wk },

client/src/components/ErrorNotification.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import Show from "./Show";
+import Show from "../utils/Show";
 import { CircleExclamation } from "./icons";
 
 const ErrorNorification: React.FC<{

client/src/components/icons.tsx

@@ -40,6 +40,19 @@ export const CaretRight = () => (
   </svg>
 );
 
+// Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
+export const CaretLeft = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    fill="currentColor"
+    viewBox="0 0 320 512"
+    height="1em"
+  >
+    <path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />
+  </svg>
+);
+
 // Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
 export const Repeat = () => (
   <svg
@@ -56,7 +69,8 @@ export const Repeat = () => (
 
 // Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
 export const Plus = () => (
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 448 512"
     stroke="currentColor"
     fill="currentColor"

client/src/main.tsx

@@ -40,7 +40,7 @@ const router = createBrowserRouter([
 // TODO: better UI
 // React's StricMode doesn't play well with how I implemented the socket connection
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <div className="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-zinc-600 -z-100">
+  <div className="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-zinc-500 -z-100">
     <RouterProvider router={router} />
   </div>
 );

client/src/routes/Home.tsx

@@ -2,8 +2,8 @@ import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Color, COLOR } from "../../../server/src/engine";
 import Show from "../utils/Show";
-import ErrorNorification from "../utils/ErrorNotification";
-import Modal, { ModalButton } from "../utils/Modal";
+import ErrorNorification from "../components/ErrorNotification";
+import Modal, { ModalButton } from "../components/Modal";
 
 const Home = () => {
   const navigate = useNavigate();

client/src/routes/LocalGame.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useState } from "react";
 import Chess, { Move } from "../../../server/src/engine";
 import ChessBoard from "../components/Chessboard";
-import { CaretRight, Plus, Repeat } from "../utils/icons";
+import { CaretLeft, CaretRight, Plus, Repeat } from "../components/icons";
 
 const LocalGame = () => {
     const [chess] = useState(Chess.load());
@@ -42,16 +42,16 @@ const LocalGame = () => {
                 <div className="bg-zinc-800 p-4 rounded-t-lg">{history}</div>
                 <div className="bg-black grid grid-cols-4 gap-5 p-4 rounded-b-lg">
                     {/* TODO: */}
-                    <Button>
+                    <Button title="New Game">
                         <Plus />
                     </Button>
-                    <Button>
+                    <Button title="Switch Sides">
                         <Repeat />
                     </Button>
-                    <Button className="rotate-180">
-                        <CaretRight />
+                    <Button title="Undo">
+                        <CaretLeft />
                     </Button>
-                    <Button>
+                    <Button title="Redo">
                         <CaretRight />
                     </Button>
                 </div>
@@ -60,16 +60,14 @@ const LocalGame = () => {
     );
 };
 
-const Button: React.FC<{ children: React.ReactNode; className?: string }> = ({
-    children,
-    className,
-}) => (
-    <button
-        className={
-            "min-w-[1rem] mt-auto bg-zinc-800 flex justify-center items-center p-2 rounded-md " +
-            (className ?? "")
-        }
-    >
+const Button: React.FC<{
+    children: React.ReactNode;
+    title: string;
+}> = ({ children, title }) => (
+    <button className="relative min-w-[1rem] mt-auto bg-zinc-800 flex justify-center items-center p-2 rounded-md hover:bg-zinc-900 transition-colors group">
+        <span className="absolute -top-full left-1/2 -translate-x-1/2 bg-black rounded-md py-0.5 px-2 whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity delay-100">
+            {title}
+        </span>
         {children}
     </button>
 );

client/src/routes/OnlineGame.tsx

@@ -2,13 +2,13 @@ import Chess, { COLOR, Move } from "../../../server/src/engine";
 import { useState, useEffect } from "react";
 import ChessBoard from "../components/Chessboard";
 import { useLocation, useNavigate } from "react-router-dom";
-import useCopyToClipboard from "../utils/useCopyToClipboard";
+import useCopyToClipboard from "../hooks/useCopyToClipboard";
 
 import { socket } from "../utils/socket";
-import { CopyIcon } from "../utils/icons";
+import { CopyIcon } from "../components/icons";
 import Show from "../utils/Show";
-import ErrorNorification from "../utils/ErrorNotification";
-import Modal, { ModalButton } from "../utils/Modal";
+import ErrorNorification from "../components/ErrorNotification";
+import Modal, { ModalButton } from "../components/Modal";
 
 const Game = () => {
   const navigate = useNavigate();