From 543fcc90506b71503b1eec438d3b7d6c9dfa9250 Mon Sep 17 00:00:00 2001
From: Dan Bastin <dan.bastin@gmail.com>
Date: Fri, 29 Nov 2024 22:02:20 -0500
Subject: [PATCH] card sizing

---
 .../PlayerCardTray/PlayerCardTray.tsx         |   2 +-
 .../Gameboard/_subcomponents/UnitsBoard.tsx   |   8 +-
 .../_sharedcomponents/Cards/CardTypes.ts      |   1 +
 .../Cards/GameCard/GameCard.tsx               | 127 ++++++------------
 .../LeaderBaseBoard/LeaderBase/LeaderBase.tsx |  27 +---
 .../LeaderBaseBoard/LeaderBaseBoard.tsx       |   2 +
 6 files changed, 55 insertions(+), 112 deletions(-)

diff --git a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx
index 169d8421..34e26dff 100644
--- a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx
+++ b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx
@@ -49,7 +49,7 @@ const PlayerCardTray: React.FC<PlayerCardTrayProps> = ({
 			</Grid>
 			<Grid size={6} sx={centerColumnStyle}>
 				<PlayerHand cards={gameState?.players[connectedPlayer].cardPiles["hand"] || []} />
-				<CardActionTray />
+				{/* <CardActionTray /> */}
 			</Grid>
 			<Grid size={3} sx={rightColumnStyle}>
 				<DeckDiscard trayPlayer={trayPlayer} />
diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx
index 8b60972c..2ff9a9cf 100644
--- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx
@@ -25,7 +25,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 	const opponentGridStyle = {
 		flexGrow: 1,
 		display: "flex",
-		justifyContent: "flex-start",
+		justifyContent: arena == "groundArena" ? "flex-start": "flex-end",
 		alignItems: "flex-start",
 		gap: "0.5vw",
 		flexWrap: "nowrap",
@@ -35,7 +35,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 	const playerGridStyle = {
 		flexGrow: 1,
 		display: "flex",
-		justifyContent: "flex-start",
+		justifyContent: arena == "groundArena" ? "flex-start": "flex-end",
 		alignItems: "flex-end",
 		gap: "0.5vw",
 		flexWrap: "nowrap",
@@ -55,7 +55,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 				<Grid sx={opponentGridStyle}>
 					{opponentUnits.map((card: CardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
-							<GameCard card={card} />
+							<GameCard card={card} size="square" />
 						</Box>
 					))}
 				</Grid>
@@ -64,7 +64,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 				<Grid sx={playerGridStyle}>
 					{playerUnits.map((card: CardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
-							<GameCard card={card} />
+							<GameCard card={card} size="square" />
 						</Box>
 					))}
 				</Grid>
diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts
index f99a4062..992bbd7b 100644
--- a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts
+++ b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts
@@ -18,6 +18,7 @@ export interface CardData {
 
 export interface GameCardProps {
 	card: CardData;
+	size?: "standard" | "square";
 }
 
 export interface LeaderBaseCardProps {
diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx
index 9688b264..e9d08ce4 100644
--- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx
+++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx
@@ -9,87 +9,17 @@ import {
 import Image from "next/image";
 import { GameCardProps, CardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
+import { wrap } from "module";
+import { text } from "stream/consumers";
 
 const GameCard: React.FC<GameCardProps> = ({
-	card
+	card,
+	size = "standard",
 }) => {
 	// const isLobbyView = path === "/lobby";
 	const isLobbyView = false;
 	const isFaceUp = true
 
-	// Base styles shared between face-up and face-down cards
-	// const baseCardStyle = {
-	// 	backgroundColor: "#282828E6",
-	// 	display: "flex",
-	// 	borderRadius: "5px",
-	// 	justifyContent: "center",
-	// 	alignItems: "center",
-	// 	position: "relative",
-	// };
-
-	// Styles specific to face-up cards
-	// const faceCardStyle = {
-	// 	...baseCardStyle,
-	// 	width: isLobbyView ? "10vh" : "8vh",
-	// 	height: isLobbyView ? "10vh" : "8vh",
-	// 	// border: selected ? "2px solid blue" : "1px solid gray",
-	// 	// opacity: disabled ? 0.8 : 1,
-	// 	textAlign: "center",
-	// 	textWrap: "wrap",
-	// 	color: "white",
-	// 	// "&:hover": {
-	// 	// 	backgroundColor: disabled ? "#000000CC" : "#708090CC",
-	// 	// },
-	// 	// cursor: disabled ? "not-allowed" : "pointer",
-	// };
-
-	// Styles specific to face-down cards
-	// const backCardStyle = {
-	// 	...baseCardStyle,
-	// 	width: "9vh",
-	// 	height: "9vh",
-	// };
-
-	const cardContentStyle = {
-		width: "100%",
-		height: "100%",
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center",
-		textAlign: "center" as const,
-		position: "relative" as const,
-	};
-
-	const imageStyle = {
-		width: "11.29vh",
-		height: "auto",
-	};
-
-	// const circularBackgroundStyle = {
-	// 	width: "5.5vh",
-	// 	height: "5.5vh",
-	// 	backgroundColor: "#141414E6",
-	// 	borderRadius: "50%",
-	// 	position: "absolute" as const,
-	// 	display: "flex",
-	// 	justifyContent: "center",
-	// 	alignItems: "center",
-	// };
-
-	// const deckSizeTextStyle = {
-	// 	fontFamily: "var(--font-barlow), sans-serif",
-	// 	fontWeight: "800",
-	// 	fontSize: "2em",
-	// 	color: "white",
-	// 	position: "absolute" as const,
-	// };
-
-	const typographyStyle = {
-		color: "black",
-		fontWeight: "400",
-		fontSize: isLobbyView ? "2em" : "1.6em",
-	};
-
 	const { sendGameMessage } = useGame();
 
 	const cardBorderColor = (card: CardData) => {
@@ -99,6 +29,31 @@ const GameCard: React.FC<GameCardProps> = ({
 		return "";
 	}
 
+	const styles = {
+		cardWrapper: {
+			height: size === "standard" ? "9.36rem" : "8rem",
+			width: size === "standard" ? "6rem" : "8rem",
+		},
+		cardContentStyle: {
+			width: "100%",
+			height: "100%",
+			position: "relative",
+			padding: ".5em",
+			textAlign: "center",
+			whiteSpace: "normal",
+		},
+		imageStyle: {
+			width: "2.5rem",
+			height: "auto",
+		},
+		typographyStyle: {
+			color: "black",
+			fontWeight: "400",
+			fontSize: "1.3em",
+			margin: 0,
+		},
+	}
+
 	return (
 		<MuiCard sx={{ backgroundColor: cardBorderColor(card) }}
 			onClick={() => {
@@ -108,25 +63,25 @@ const GameCard: React.FC<GameCardProps> = ({
 			}}
 		>
 			{isFaceUp ? (
-				<CardActionArea>
-					<CardContent>
-						<Box sx={{ display: 'flex', flexDirection: 'column'}}>
-							<Box sx={{ display: 'flex', justifyContent: 'space-between'}}>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'goldenrod'}}>
+				<CardActionArea sx={styles.cardWrapper}>
+					<CardContent sx={styles.cardContentStyle}>
+						<Box sx={{ display: 'flex', flexDirection: 'column', height: "100%"}}>
+							<Box sx={{ display: 'flex', justifyContent: 'space-between', flex: 1}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'goldenrod'}}>
 									{card.cost}
 								</Typography>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'hotpink'}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'hotpink'}}>
 									{card.damage}
 								</Typography>
 							</Box>
-							<Typography variant="body1" sx={typographyStyle}>
+							<Typography variant="body1" component="span" sx={styles.typographyStyle}>
 								{card.name}
 							</Typography>
-							<Box sx={{ display: 'flex', justifyContent: 'space-between'}}>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'red'}}>
+							<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: "flex-end", flex: 1}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'red'}}>
 									{card.power}
 								</Typography>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'blue'}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'blue'}}>
 									{card.hp}
 								</Typography>
 							</Box>
@@ -134,14 +89,14 @@ const GameCard: React.FC<GameCardProps> = ({
 					</CardContent>
 				</CardActionArea>
 			) : (
-				<CardContent sx={cardContentStyle}>
+				<CardContent sx={styles.cardContentStyle}>
 					<Image
 						src="/card-back.png"
 						alt="Deck Image"
 						width={28}
 						height={38}
 						placeholder="empty"
-						style={imageStyle}
+						style={styles.imageStyle}
 					/>
 					{/* {deckSize && deckSize > 0 && (
 						<>
diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx
index 611a2556..e50d0e46 100644
--- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx
+++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx
@@ -9,32 +9,17 @@ const LeaderBase: React.FC<LeaderBaseProps> = ({
 	isLobbyView = false,
 	title,
 }) => {
-	// Adjusted styles
-	const containerStyle = {
-		// justifyContent:
-		// 	participant === "opponent" && isLobbyView
-		// 		? "flex-end"
-		// 		: participant === "player" && isLobbyView
-		// 		? "flex-start"
-		// 		: participant === "player"
-		// 		? "flex-end"
-		// 		: "flex-start",
-		// alignItems: "center",
-		// gap: ".5em",
-		// height: "94%",
-		// pt: isLobbyView ? 0 : "3.5em",
-		// pb:
-		// 	participant === "player" && isLobbyView
-		// 		? 0
-		// 		: participant === "player"
-		// 		? "4vh"
-		// 		: 0,
-	};
 
 	const { gameState, connectedPlayer } = useGame();
 	const playerLeader = gameState?.players[player].leader;
 	const playerBase = gameState?.players[player].base;
 
+	const containerStyle = {
+		height: "100%",
+		width: "100%",
+		justifyContent: "center",
+	};
+
 	return (
 		<Grid container direction="row" sx={containerStyle}>
 			{isLobbyView ? (
diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx
index adb1b7c6..ea6c76e4 100644
--- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx
+++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Grid from "@mui/material/Grid2";
 import LeaderBase from "./LeaderBase/LeaderBase";
+import CardActionTray from "@/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray";
 import { useGame } from "@/app/_contexts/Game.context";
 import { LeaderBaseBoardProps } from "./LeaderBaseBoardTypes";
 
@@ -34,6 +35,7 @@ const LeaderBaseBoard: React.FC<LeaderBaseBoardProps> = ({
 					title={titleOpponent}
 				/>
 			</Grid>
+			{ isLobbyView ? null : <CardActionTray /> }
 			{/* Player's row */}
 			<Grid sx={rowStyle}>
 				<LeaderBase