controller naming (#171)

realm-of-ra · Sep 19, 2024 · 8cd60e3 · 8cd60e3
1 parent f105eba
commit 8cd60e3
Show file tree

Hide file tree

Showing 5 changed files with 362 additions and 258 deletions.
diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
@@ -30,6 +30,7 @@ import {
   MancalaGameEdge,
   useFetchModelsForHeaderQuery,
 } from "@/generated/graphql.tsx";
+import useControllerUsername from "@/hooks/useControllerUsername";
 
 export default function Header() {
   const { provider } = useProvider();
@@ -79,9 +80,10 @@ export default function Header() {
 
   const account = {
     account: {
-      address: "0x05e01dB693CBF7461a016343042786DaC5A6000104813cF134a1E8B1D0a6810b"
-    }
-  }
+      address:
+        "0x05e01dB693CBF7461a016343042786DaC5A6000104813cF134a1E8B1D0a6810b",
+    },
+  };
 
   const { data, startPolling } = useFetchModelsForHeaderQuery();
   startPolling(1000);
@@ -110,6 +112,7 @@ export default function Header() {
     setIsDropdownClose(!isDropdownClose);
     disconnectWallet();
   };
+  const username = useControllerUsername();
 
   return (
     <div className="flex flex-row items-center justify-between w-full">
@@ -185,7 +188,7 @@ export default function Header() {
                   onClick={handleDropdownToggleClose}
                 >
                   <div className="flex flex-row items-center w-fit px-10 py-5">
-                    <p className="">{truncateString(address)}</p>
+                    <p className="">{username || truncateString(address)}</p>
                   </div>
                 </Button>
 
@@ -194,35 +197,27 @@ export default function Header() {
                     <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>
+                        <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>
+                        <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>
+                        <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} />
-                      <span
-                        className="block px-4 py-2 text-[#F58229] whitespace-nowrap"
-                      >
+                      <span className="block px-4 py-2 text-[#F58229] whitespace-nowrap">
                         Disconnect Wallet
                       </span>
                     </button>

diff --git a/client/src/components/message-area.tsx b/client/src/components/message-area.tsx
@@ -3,70 +3,77 @@ import { useToast } from "./ui/use-toast.ts";
 import { useEffect } from "react";
 
 interface IMessageAreaProps {
-    game_metadata_error: any,
-    game_players_error: any,
-    game_metadata: any,
-    address: string | undefined,
-    game_metadata_loading: any,
-    game_players_loading: any,
-    game_players: any,
-    moveMessage: any
+  game_metadata_error: any;
+  game_players_error: any;
+  game_metadata: any;
+  address: string | undefined;
+  game_metadata_loading: any;
+  game_players_loading: any;
+  game_players: any;
+  moveMessage: any;
 }
 
-export default function MessageArea(
-    { game_metadata_error, game_players_error, game_metadata, address,
-        game_metadata_loading, game_players_loading, game_players, moveMessage }: IMessageAreaProps
-) {
+export default function MessageArea({
+  game_metadata_error,
+  game_players_error,
+  game_metadata,
+  address,
+  game_metadata_loading,
+  game_players_loading,
+  game_players,
+  moveMessage,
+}: IMessageAreaProps) {
+  const game_has_error = game_metadata_error || game_players_error;
+  const game_is_loading = game_metadata_loading || game_players_loading;
+  const { player_one, player_two, current_player, status, winner } =
+    game_metadata?.game_data?.edges?.[0]?.node ?? {};
 
-    const game_has_error = game_metadata_error || game_players_error;
-    const game_is_loading = game_metadata_loading || game_players_loading;
-    const {
-        player_one, player_two, current_player, status, winner
-    } = game_metadata?.game_data?.edges?.[0]?.node ?? {}
+  const active_players_addrs = [player_one, player_two];
+  const player_includes_myself = active_players_addrs.includes(address);
+  const is_any_player_empty = active_players_addrs.some(
+    (individualAddr) =>
+      isEmptyString(individualAddr) || individualAddr === "0x0",
+  );
 
-    const active_players_addrs = [player_one, player_two]
-    const player_includes_myself = active_players_addrs.includes(address);
-    const is_any_player_empty = active_players_addrs.some(individualAddr => isEmptyString(individualAddr) || individualAddr === "0x0");
+  const { toast } = useToast();
 
-    const { toast } = useToast();
-
-    const generate_error_message = (): string => {
-        if (game_is_loading) return "Loading game data..."; // loading case
-        if (status === "Finished") {
-            if (winner === address) {
-                return "Congratulations! You won the game"
-            }
-            else {
-                return "You lost the game"
-            }
-        }
-        else {
-            if ( // guard clause for both players are present
-                game_metadata && game_players && player_includes_myself) {
-                if (current_player === address) { // I'm the one to play
-                    if (is_any_player_empty) return "Waiting for another player to join"; // case opponent isn't in
-                    if (moveMessage === undefined) {
-                        return "";
-                    }
-                    return "Not your pit"
-                }
-                return "";
-            }
-            else {
-                return "Player has not joined game or try connecting your wallet again in the lobby";
-            }
+  const generate_error_message = (): string => {
+    if (game_is_loading) return "Loading game data..."; // loading case
+    if (status === "Finished") {
+      if (winner === address) {
+        return "Congratulations! You won the game";
+      } else {
+        return "You lost the game";
+      }
+    } else {
+      if (
+        // guard clause for both players are present
+        game_metadata &&
+        game_players &&
+        player_includes_myself
+      ) {
+        if (current_player === address) {
+          // I'm the one to play
+          if (is_any_player_empty) return "Waiting for another player to join"; // case opponent isn't in
+          if (moveMessage === undefined) {
+            return "";
+          }
+          return "Not your pit";
         }
+        return "";
+      } else {
+        return "Player has not joined game or try connecting your wallet again in the lobby";
+      }
     }
+  };
 
-    useEffect(() => {
-        if (generate_error_message()) {
-            toast({
-                title: generate_error_message(),
-            })
-        }
-    }, [generate_error_message()])
+  useEffect(() => {
+    if (generate_error_message()) {
+      toast({
+        title: generate_error_message(),
+      });
+    }
+  }, [generate_error_message(), toast]);
 
-    return (
-        <></>
-    )
+  return <></>;
 }