add lobby page

client/src/ui/pages/lobbyPage.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect } from "react";
+
+import { ClickWrapper } from "../clickWrapper";
+import { Phase } from "../phaseManager";
+import { useDojo } from "../../hooks/useDojo";
+import { truncateString } from "../../utils";
+import { Account, num } from "starknet";
+import { padHex } from "../../utils";
+
+interface LobbyPageProps {
+  setUIState: React.Dispatch<Phase>;
+}
+
+export const LobbyPage: React.FC<LobbyPageProps> = ({ setUIState }) => {
+
+  //for now we use a burner account
+  const {
+    account: { account },
+    networkLayer: {
+      systemCalls: { create_game },
+      network: { graphSdk }
+    },
+  } = useDojo();
+
+  useEffect(() => {
+    const fetchPlayerGames = async () => {
+       const response = await graphSdk().getPlayersGames({ address: padHex(account.address) });
+       console.log(response.data);
+    }
+
+    fetchPlayerGames();
+  }, [graphSdk, account]);
+
+
+  const newGame = async (account: Account) => {
+    //create a new game by sending a transaction
+    const game = await create_game(account);
+  }
+
+
+  return (
+    <ClickWrapper className="centered-div" style={{ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", gap: "20px" }}>
+
+      <div className="global-button-style" style={{ fontSize: "2.4cqw", padding: "5px 10px", fontFamily: "OL", fontWeight: "100" }} onClick={() => { newGame(account)}}>
+          Create Game
+      </div>      
+
+    </ClickWrapper>
+  );
+};

client/src/ui/loginComponent.tsx → client/src/ui/pages/loginPage.tsx

@@ -1,48 +1,26 @@
 import React, { useEffect } from "react";
-import { MAP_HEIGHT,MAP_WIDTH } from "../utils/settingsConstants";
 
-import { ClickWrapper } from "./clickWrapper";
-import { Phase } from "./phaseManager";
-import { useDojo } from "../hooks/useDojo";
-import { truncateString } from "../utils";
-import { Account, num } from "starknet";
-import { padHexAddress } from "../utils";
+import { ClickWrapper } from "../clickWrapper";
+import { Phase } from "../phaseManager";
+import { useDojo } from "../../hooks/useDojo";
+import { truncateString } from "../../utils";
+
 
 interface LoginPageProps {
   setUIState: React.Dispatch<Phase>;
 }
 
-export const LoginComponent: React.FC<LoginPageProps> = ({ setUIState }) => {
+export const LoginPage: React.FC<LoginPageProps> = ({ setUIState }) => {
 
-  //for now we use a burner account
   const {
     account: { account, create, isDeploying, clear,select,list },
-    networkLayer: {
-      systemCalls: { create_game },
-      network: { graphSdk }
-    },
   } = useDojo();
 
-  useEffect(() => {
-    const fetchPlayerGames = async () => {
-       const response = await graphSdk().getPlayersGames({ address: padHexAddress(account.address) });
-       console.log(response.data);
-    }
-
-    fetchPlayerGames();
-  }, [graphSdk, account]);
-
   //create the client game comp for the start of the loading
-  const createGameClient = async () => {
-    setUIState(Phase.LOADING); 
-  }
-
-  const newGame = async (account: Account) => {
-    //create a new game by sending a transaction
-    const game = await create_game(account);
+  const goToLobby = async () => {
+    setUIState(Phase.LOBBY); 
   }
 
-
   return (
     <ClickWrapper className="centered-div" style={{ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", gap: "20px" }}>
 
@@ -65,13 +43,9 @@ export const LoginComponent: React.FC<LoginPageProps> = ({ setUIState }) => {
         delete burners
       </div>
 
-      <div className="global-button-style" style={{ fontSize: "2.4cqw", padding: "5px 10px", fontFamily: "OL", fontWeight: "100" }} onClick={() => { createGameClient()}}>
+      <div className="global-button-style" style={{ fontSize: "2.4cqw", padding: "5px 10px", fontFamily: "OL", fontWeight: "100" }} onClick={() => { goToLobby()}}>
           Login as {truncateString(account.address,5)}
-      </div>
-
-      <div className="global-button-style" style={{ fontSize: "2.4cqw", padding: "5px 10px", fontFamily: "OL", fontWeight: "100" }} onClick={() => { newGame(account)}}>
-          Create Game
-      </div>      
+      </div>    
 
     </ClickWrapper>
   );

client/src/ui/phaseManager.tsx

@@ -1,22 +1,12 @@
 //libs
 import React, { useState, useEffect } from "react";
 
-//components
-import { LoginComponent } from "./loginComponent";
-
-//notes
-/*
-    This component will render different pages based on the current phase.
-    It may involve loading screens for certain phases.
-
-    // i think this should have a timer if in the prep phase to see if it should go in the next phase
-    something along the lines of checking the block count anyway
-*/
+import { LoginPage } from "./pages/loginPage";
+import { LobbyPage } from "./pages/lobbyPage";
 
 export enum Phase {
   LOGIN,
-  LOADING,
-  PREP,
+  LOBBY,
   GAME,
 }
 
@@ -29,8 +19,8 @@ export const PhaseManager = () => {
 
   return (
     <>
-      {phase === Phase.LOGIN && <LoginComponent setUIState={setUIState}/>}
-      {/* {phase === Phase.GAME && <GamePhaseManager />} */}
+      {phase === Phase.LOGIN && <LoginPage setUIState={setUIState}/>}
+      {phase === Phase.LOBBY &&<LobbyPage setUIState={setUIState}/>}
     </>
   );
 };

client/src/utils/index.ts

@@ -55,9 +55,11 @@ export function truncateString(inputString: string, prefixLength: number): strin
     return `${prefix}...${suffix}`;
 }
 
-export function padHexAddress(hexAddress: string): string {
+// Pads a hex string to 64 chars as expected by torii queries
+export function padHex(hexAddress: string): string {
     // convert a hex encoded address to a 64 byte long hex string by removing the leading 0x, padding with 0 and then readding the prefix
-    const hexAddressWithoutPrefix = hexAddress.slice(2);
+    // strip 0x if present
+    const hexAddressWithoutPrefix = hexAddress.replace('0x', '');
     const paddedHexAddress = hexAddressWithoutPrefix.padStart(64, '0');
     return `0x${paddedHexAddress}`;
 }