Profile page (#168)

* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * added profile page --------- Co-authored-by: okhai <[email protected]>
realm-of-ra · Sep 16, 2024 · f105eba · f105eba
1 parent af8becb
commit f105eba
Show file tree

Hide file tree

Showing 16 changed files with 500 additions and 46 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -15,6 +15,7 @@ import Home from "./pages/Home";
 import Leaderboard from "./pages/Leaderboard";
 import Lobby from "./pages/Lobby";
 import { POLICIES } from "./lib/constants";
+import Profile from "./pages/Profile";
 
 const options: ControllerOptions = {
   rpc: "https://api.cartridge.gg/x/mancala-alpha-v8/katana",
@@ -75,6 +76,7 @@ export default function App() {
             <Route index element={<Home />} />
             <Route path="/lobby" element={<Lobby />} />
             <Route path="/leaderboard" element={<Leaderboard />} />
+            <Route path="/profile" element={<Profile />} />
             <Route path="/games/:gameId" element={<Gameplay />} />
           </Routes>
         </Router>

diff --git a/client/src/assets/avatar.png b/client/src/assets/avatar.png
diff --git a/client/src/assets/image-add.svg b/client/src/assets/image-add.svg
diff --git a/client/src/assets/long-box.png b/client/src/assets/long-box.png
diff --git a/client/src/assets/telegram.png b/client/src/assets/telegram.png
diff --git a/client/src/assets/twitter.png b/client/src/assets/twitter.png
diff --git a/client/src/assets/wide-box.png b/client/src/assets/wide-box.png
diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
@@ -19,7 +19,7 @@ import { Link } from "react-router-dom";
 import { constants } from "starknet";
 import { Button } from "@material-tailwind/react";
 import { UserIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
-import { useDojo } from "@/dojo/useDojo";
+// import { useDojo } from "@/dojo/useDojo";
 import clsx from "clsx";
 import controllerSvg from "../assets/controller.svg";
 import connectB from "../assets/connect.svg";
@@ -75,7 +75,13 @@ export default function Header() {
     setPlaying(!isPlaying);
   };
 
-  const { account } = useDojo();
+  // const { account } = useDojo();
+
+  const account = {
+    account: {
+      address: "0x05e01dB693CBF7461a016343042786DaC5A6000104813cF134a1E8B1D0a6810b"
+    }
+  }
 
   const { data, startPolling } = useFetchModelsForHeaderQuery();
   startPolling(1000);
@@ -185,36 +191,41 @@ export default function Header() {
 
                 {isDropdownClose && (
                   <div className="absolute top-1/2 font-medium transform translate-y-6 w-[259px] right-0 mt-2 border border-[#272A32] bg-[#171922] text-[#BFC5D4] rounded-xl shadow-xl z-20">
-                    <span className="flex w-full px-4 py-2 rounded-tl-xl rounded-tr-xl  bg-[#171922] hover:bg-[#272A32] hover:bg-opacity-50 cursor-pointer transition duration-300 ease-in-out">
-                      <img src={profileImage} />
-                      <Link to="/" className="block px-4 py-2">
-                        Profile
-                      </Link>
-                    </span>
-                    <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
-                      <img src={lobby} />
-                      <Link to="/" className="block px-4 py-2">
-                        Lobby
-                      </Link>
-                    </span>
-                    <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
-                      <img src={leader} />
-                      <Link to="/" className="block px-4 py-2">
-                        Leaderboard
-                      </Link>
-                    </span>
-                    <span
-                      className="flex w-full px-4 py-2  rounded-bl-xl rounded-br-xl  bg-[#171922] hover:bg-[#272A32] cursor-pointer"
+                    <Link to="/profile">
+                      <button className="flex flex-row items-center w-full px-4 py-2 rounded-tl-xl rounded-tr-xl  bg-[#171922] hover:bg-[#272A32] hover:bg-opacity-50 cursor-pointer transition duration-300 ease-in-out">
+                        <img src={profileImage} />
+                        <span className="block px-4 py-2">
+                          Profile
+                        </span>
+                      </button>
+                    </Link>
+                    <Link to="/lobby">
+                      <button className="flex flex-row items-center w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
+                        <img src={lobby} />
+                        <span className="block px-4 py-2">
+                          Lobby
+                        </span>
+                      </button>
+                    </Link>
+                    <Link to="/leaderboard">
+                      <button className="flex flex-row items-center w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer">
+                        <img src={leader} />
+                        <span className="block px-4 py-2">
+                          Leaderboard
+                        </span>
+                      </button>
+                    </Link>
+                    <button
+                      className="flex flex-row items-center w-full px-4 py-2  rounded-bl-xl rounded-br-xl  bg-[#171922] hover:bg-[#272A32] cursor-pointer"
                       onClick={handleDisconnect}
                     >
                       <img src={connectB} />
-                      <Link
-                        to="#"
+                      <span
                         className="block px-4 py-2 text-[#F58229] whitespace-nowrap"
                       >
                         Disconnect Wallet
-                      </Link>
-                    </span>
+                      </span>
+                    </button>
                   </div>
                 )}
               </div>
@@ -242,28 +253,27 @@ export default function Header() {
 
             {isDropdownOpen && (
               <div className="absolute top-1/2 transform font-medium translate-y-5 w-[259px] right-0 mt-2 border border-[#272A32] bg-[#171922] text-[#BFC5D4] rounded-xl shadow-xl z-20">
-                <span className="flex w-full px-4 py-2 rounded-t-xl bg-[#171922] hover:bg-[#272A32] cursor-pointer">
+                <button className="flex flex-row items-center w-full px-4 py-2 rounded-t-xl bg-[#171922] hover:bg-[#272A32] cursor-pointer">
                   <img src={connectB} />
-                  <Link
-                    to={{}}
+                  <span
                     className="block px-4 py-2 text-[#F58229] whitespace-nowrap"
                     onClick={handleConnect}
                   >
                     Connect Wallet
-                  </Link>
-                </span>
-                <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] hover:bg-opacity-50 cursor-pointer transition duration-300 ease-in-out">
+                  </span>
+                </button>
+                <button className="flex flex-row items-center w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] hover:bg-opacity-50 cursor-pointer transition duration-300 ease-in-out">
                   <img src={lobby} />
                   <Link to="/" className="block px-4 py-2">
                     Lobby
                   </Link>
-                </span>
-                <span className="flex w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer rounded-b-xl">
+                </button>
+                <button className="flex flex-row items-center w-full px-4 py-2 bg-[#171922] hover:bg-[#272A32] cursor-pointer rounded-b-xl">
                   <img src={leader} />
                   <Link to="/" className="block px-4 py-2">
                     Leaderboard
                   </Link>
-                </span>
+                </button>
               </div>
             )}
           </div>

diff --git a/client/src/components/lobby/duels.tsx b/client/src/components/lobby/duels.tsx
@@ -60,7 +60,7 @@ export default function Duels({ games, transactions, loading }: { games: any, tr
         return <DuelsSkeleton />
     }
     else {
-        if (data.length === 0) {
+        if (data?.length === 0) {
             return <EmptyDuels />
         }
         else {
@@ -105,8 +105,8 @@ export default function Duels({ games, transactions, loading }: { games: any, tr
                                         </tr>
                                     </thead>
                                     <tbody className="w-full max-h-[450px] overflow-y-scroll">
-                                        {data.map((item: any, index: number) => {
-                                            const isLast = index === data.length - 1;
+                                        {data?.map((item: any, index: number) => {
+                                            const isLast = index === data?.length - 1;
                                             const date = new Date(item.date)
                                             return (
                                                 <tr key={index} className={clsx(!isLast && "border-b border-[#23272F]", "w-[814px] bg-[#0F1116] flex flex-row items-center")}>

diff --git a/client/src/components/profile/empty-game-history.tsx b/client/src/components/profile/empty-game-history.tsx
@@ -0,0 +1,13 @@
+import mancala_duels_logo from '../../assets/mancala_duels.png';
+
+export default function EmptyGameHistory({ id }: { id: string }) {
+    return (
+        <div className="w-[874px] h-[874px] bg-[url('./assets/lobby-box-long.png')] bg-contain bg-no-repeat p-8">
+            <div className='w-full h-[500px] flex flex-col items-center justify-center'>
+                <img src={mancala_duels_logo} alt="duels" className="w-24 h-24 mx-auto" />
+                <h6 className="text-[#BDC2CC] font-bold text-lg mt-1.5">{id == "all" ? "You have no duels" : id == "won" ? "You have won no duels" : "You have lost no duels"}</h6>
+                <button className="text-[#4F5666] text-sm">Create a game to play</button>
+            </div>
+        </div>
+    )
+}
diff --git a/client/src/components/profile/game-history-skeleton.tsx b/client/src/components/profile/game-history-skeleton.tsx
@@ -0,0 +1,36 @@
+import clsx from "clsx";
+
+export function GameHistorySkeleton() {
+    const arr = Array(6).fill(null);
+    return (
+        <>
+            {arr.map((_, index) => {
+                const isLast = index === arr.length - 1;
+                return (
+                    <tr key={index} className={clsx(!isLast && "border-b border-[#23272F]", "w-[814px] bg-[#0F1116] flex flex-row items-center")}>
+                        <td className="flex flex-row items-center p-4 space-x-5 w-[200px] justify-start">
+                            <div className="flex flex-row items-center space-x-5 w-fit">
+                                <div className="w-8 h-8 bg-gray-700 rounded-full"></div>
+                                <div className="w-24 h-4 bg-gray-700 rounded"></div>
+                            </div>
+                        </td>
+                        <td className="flex flex-row items-center p-4 space-x-5 w-[200px] justify-center">
+                            <div className="flex flex-row items-center space-x-5 w-fit">
+                                <div className="w-8 h-8 bg-gray-700 rounded-full"></div>
+                                <div className="w-24 h-4 bg-gray-700 rounded"></div>
+                            </div>
+                        </td>
+                        <td className="w-[200px] text-center ml-8">
+                            <div className="w-24 h-4 mx-auto ml-12 bg-gray-700 rounded"></div>
+                        </td>
+                        <td className="w-[200px] text-center pr-12">
+                            <div className="w-24 h-4 mx-auto ml-16 bg-gray-700 rounded"></div>
+                        </td>
+                    </tr>
+                )
+
+            })}
+
+        </>
+    );
+}