From d46b2f7ddfd1437c81ee7b61c808f842070b809e Mon Sep 17 00:00:00 2001 From: Matevz Date: Wed, 18 Dec 2024 14:51:02 +0100 Subject: [PATCH] #LobbyDesign - Added changes for the comments on the PR. --- src/app/_components/Gameboard/Board/Board.tsx | 19 ++++- src/app/_components/Lobby/Players/Players.tsx | 34 +++++++- src/app/_components/Lobby/SetUp/SetUp.tsx | 3 +- .../_sharedcomponents/Cards/CardTypes.ts | 2 + .../Cards/GameCard/GameCard.tsx | 10 ++- .../Cards/LeaderBaseCard/LeaderBaseCard.tsx | 85 +++++++------------ 6 files changed, 90 insertions(+), 63 deletions(-) diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx index 2de0780f..1dc64ee0 100644 --- a/src/app/_components/Gameboard/Board/Board.tsx +++ b/src/app/_components/Gameboard/Board/Board.tsx @@ -4,7 +4,7 @@ import UnitsBoard from "../_subcomponents/UnitsBoard"; import { IBoardProps } from "@/app/_components/Gameboard/GameboardTypes"; import {useGame} from "@/app/_contexts/Game.context"; import LeaderBaseCard from "@/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard"; -import { Box } from "@mui/material"; +import {Box, Typography} from "@mui/material"; import CardActionTray from "@/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray"; const Board: React.FC = ({ @@ -47,6 +47,23 @@ const Board: React.FC = ({ flexGrow: 1, width: "100%" }; + //the title of the deck i believe + const redBoxStyle = { + position: "absolute", + bottom: "10px", + left: "50%", + transform: "translateX(-50%)", + backgroundColor: "red", + borderRadius: "4px", + p: "4px 8px", + }; + + const redBoxTypographyStyle = { + color: "white", + fontFamily: "var(--font-barlow), sans-serif", + fontWeight: "600", + fontSize: "1em", + }; return ( diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx index 1e1baa45..6ecdbf4b 100644 --- a/src/app/_components/Lobby/Players/Players.tsx +++ b/src/app/_components/Lobby/Players/Players.tsx @@ -74,8 +74,28 @@ const Players: React.FC = ({ isLobbyView }) => { }; const rowStyle = { flexGrow: 1, - width: "100%" + width: "100%", + alignItems: "center", + justifyContent: "center", + display: "flex" }; + const titleTypographyStyle = { + fontFamily: "var(--font-barlow), sans-serif", + fontWeight: "600", + fontSize: "1.5em", + marginBottom: isLobbyView ? 0 : "0.5em", + textAlign: "left", + color: "white", + }; + const titleTypographyStyleOpponent = { + fontFamily: "var(--font-barlow), sans-serif", + fontWeight: "600", + fontSize: "1.5em", + marginBottom: "10px", + textAlign: "left" as const, + color: "white", + opacity: "15%", + } return ( @@ -83,6 +103,12 @@ const Players: React.FC = ({ isLobbyView }) => { + + {connectedPlayer} + = ({ isLobbyView }) => { + + {titleOpponent === undefined ? "Opponent" : titleOpponent} + = ({ chatHistory, diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts index e54a813f..f78dc54c 100644 --- a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts +++ b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts @@ -31,6 +31,7 @@ export interface IGameCardProps { size?: "standard" | "square"; onClick?: () => void; variant?: "lobby" | "gameboard"; + disabled?: boolean; } export interface ILeaderBaseCardProps { @@ -40,4 +41,5 @@ export interface ILeaderBaseCardProps { handleSelect?: () => void; title?: string; card: ICardData; + disabled?: boolean; } \ No newline at end of file diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index b6cc1d9e..ed517a83 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -20,6 +20,7 @@ const GameCard: React.FC = ({ size = "standard", onClick, variant, + disabled = false, }) => { // const isLobbyView = path === "/lobby"; const isFaceUp = true; @@ -49,8 +50,8 @@ const GameCard: React.FC = ({ borderRadius: ".38em", ...(variant === "lobby" ? { - height: "18vh", - width: "6.7vw", + height: "13rem", + width: "10rem", minWidth: "101px", minHeight: "151px", overflow: "hidden", @@ -102,13 +103,14 @@ const GameCard: React.FC = ({ }, numberStyle:{ - fontSize: "1.5vw", + fontSize: "2rem", fontWeight: "700", } } return ( {isFaceUp ? ( diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx index 98cfb5fe..51110257 100644 --- a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx @@ -13,11 +13,12 @@ import { s3CardImageURL } from "@/app/_utils/s3Utils"; const LeaderBaseCard: React.FC = ({ - variant, - isLobbyView = false, - title, - card - }) => { + variant, + isLobbyView = false, + title, + card, + disabled = false, +}) => { const cardBorderColor = (card: ICardData) => { if (!card) return ""; if (card.selected) return "yellow"; @@ -76,24 +77,6 @@ const LeaderBaseCard: React.FC = ({ color: "hotpink", }; - const titleTypographyStyle = { - fontFamily: "var(--font-barlow), sans-serif", - fontWeight: "600", - fontSize: "1.5em", - marginBottom: isLobbyView ? 0 : "0.5em", - textAlign: "left", - color: "white", - }; - const titleTypographyStyleOpponent = { - fontFamily: "var(--font-barlow), sans-serif", - fontWeight: "600", - fontSize: "1.5em", - marginBottom: "10px", - textAlign: "left" as const, - color: "white", - opacity: "15%", - } - //the title of the deck i believe const redBoxStyle = { position: "absolute", @@ -116,43 +99,35 @@ const LeaderBaseCard: React.FC = ({ return ( - {/* Show title above the card if in lobby view and variant is leader */} - {variant === "leader" && isLobbyView && title && ( - - {title === undefined ? "Opponent" : title} - - )} - - {isLobbyView ? ( - - ) : ( - { - if (card.selectable) { - sendGameMessage(["cardClicked", card.uuid]); - } - }} - > + { + // Only allow clicking if not lobby view and the card is selectable + if (!disabled) { + sendGameMessage(["cardClicked", card.uuid]); + } + }} + > + {/* Only show card content if not in lobby view */} + {!isLobbyView && card && ( - {card.damage} + + {card.damage} + + )} - {/* Show title inside a red box at the bottom if not in lobby view and variant is leader */} - {variant === "leader" && !isLobbyView && title && ( - - - {title} - - - )} - - )} + {/* Show title inside a red box only if variant is leader and not lobby view */} + {variant === "leader" && !isLobbyView && title && ( + + + {title} + + + )} + ); };