diff --git a/src/app/_components/Lobby/LobbyTypes.ts b/src/app/_components/Lobby/LobbyTypes.ts index cf7bfab..d2ddd51 100644 --- a/src/app/_components/Lobby/LobbyTypes.ts +++ b/src/app/_components/Lobby/LobbyTypes.ts @@ -1,3 +1,5 @@ +import {IServerCardData} from "@/app/_components/_sharedcomponents/Cards/CardTypes"; + export interface IPlayersProps { isLobbyView?: boolean; } @@ -13,45 +15,9 @@ export interface IDeckData { sideboard: IServerCardData[]; } -interface ICardSetId { - set: string; - number: number; -} - -type IAspect = 'aggression' | 'command' | 'cunning' | 'heroism' | 'vigilance' | 'villainy'; - -export interface ICardData { - uuid: string; - parentCardId?: string, - id?: number; - name?: string; - selected?: boolean; - selectable: boolean; - disabled?: boolean; - unitType?: "ground" | "space"; - handleSelect?: () => void; - path?: string; - deckSize?: number; - power?: number; - hp?: number; - cost?: number; - exhausted?: boolean; - damage?: number; - setId: ICardSetId; - type: string; - subcards?: ICardData[]; - aspects?: IAspect[]; - sentinel?: boolean; -} -export interface IServerCardData { - count: number; - card: ICardData; -} - export interface ILobbyUserProps { id: string; username: string; ready: boolean; deck: IDeckData; - owner: boolean; } \ No newline at end of file diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index 937e68f..0fedbb5 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -20,7 +20,6 @@ const SetUp: React.FC = ({ // find the user const connectedUser = lobbyState ? lobbyState.users.find((u: ILobbyUserProps) => u.id === connectedPlayer) : null; - // setup chat mechanics const [chatMessage, setChatMessage] = useState(""); const handleChatSubmit = () => { @@ -85,7 +84,7 @@ const SetUp: React.FC = ({ return ( KARABAST - + = ({ @@ -16,7 +16,7 @@ const SetUpCard: React.FC = ({ owner, }) => { - const { sendMessage, lobbyState, connectedPlayer, sendLobbyMessage, gameState } = useGame(); + const { sendMessage, lobbyState, connectedPlayer, sendLobbyMessage } = useGame(); const opponentUser = lobbyState ? lobbyState.users.find((u: ILobbyUserProps) => u.id !== connectedPlayer) : null; // Extract the player from the URL query params const router = useRouter(); @@ -28,89 +28,83 @@ const SetUpCard: React.FC = ({ }; //------------------------STYLES------------------------// - const setUpCard = { - paddingLeft: "20px", - paddingRight: "20px", - } - const readyImg = { - width: "15px", - height: "15px", - backgroundImage: `url(${readyStatus ? '/ready.png' : '/notReady.png'})`, - backgroundSize: "contain", - backgroundRepeat: "no-repeat", - marginTop:"7px", - marginRight:"5px" - } - - const cardStyle = { - height: "fit-content", - background: "#18325199", - pb: "4vh", - backgroundColor: "#000000E6", - backdropFilter: "blur(20px)", - }; - - const textFieldStyle = { - backgroundColor: "#fff2", - "& .MuiInputBase-input": { - color: "#fff", + const styles = { + setUpCard: { + paddingLeft: "20px", + paddingRight: "20px", }, - "& .MuiInputBase-input::placeholder": { - color: "#fff", + readyImg: { + width: "15px", + height: "15px", + backgroundImage: `url(${readyStatus ? '/ready.png' : '/notReady.png'})`, + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + marginTop: "7px", + marginRight: "5px" }, - }; - - const boxStyle = { - display: "flex", - justifyContent: "flex-end", - mt: "1em", - }; - - const buttonStyle = { - backgroundColor: "#292929", - minWidth: "9rem", - }; - - const initiativeCardStyle = { - height: "15vh", - minHeight: "8.5rem", - background: "#18325199", - display: "flex", - paddingLeft: "30px", - paddingRight: "30px", - flexDirection: "column", - justifyContent: "center", - }; - - const buttonsContainerStyle = { - display: "flex", - justifyContent: "center", - width: "100%", - }; - - const setUpTextStyle = { - fontSize: "1.5em", - fontWeight: "800", - color: "white", - alignSelf: "flex-start", - }; - + cardStyle: { + height: "fit-content", + background: "#18325199", + pb: "4vh", + backgroundColor: "#000000E6", + backdropFilter: "blur(20px)", + }, + textFieldStyle: { + backgroundColor: "#fff2", + "& .MuiInputBase-input": { + color: "#fff", + }, + "& .MuiInputBase-input::placeholder": { + color: "#fff", + }, + }, + boxStyle: { + display: "flex", + justifyContent: "flex-end", + mt: "1em", + }, + buttonStyle: { + backgroundColor: "#292929", + minWidth: "9rem", + }, + initiativeCardStyle: { + height: "15vh", + minHeight: "8.5rem", + background: "#18325199", + display: "flex", + paddingLeft: "30px", + paddingRight: "30px", + flexDirection: "column", + justifyContent: "center", + }, + buttonsContainerStyle: { + display: "flex", + justifyContent: "center", + width: "100%", + }, + setUpTextStyle: { + fontSize: "1.5em", + fontWeight: "800", + color: "white", + alignSelf: "flex-start", + }, + } return ( - - + + Set Up {!opponentUser ? ( // If opponent is null, show "Waiting for an opponent" UI - + Waiting for an opponent to join - - - + + + ) : ( @@ -120,12 +114,12 @@ const SetUpCard: React.FC = ({ /* Both are ready */ <> - + Both players are ready. - + @@ -139,8 +133,8 @@ const SetUpCard: React.FC = ({ ) : ( /* Not both ready — show toggle-ready button */ - - + +