From 0fb1df77b149b864b01b6c4a416b33d87bf3b310 Mon Sep 17 00:00:00 2001 From: Dan Bastin Date: Fri, 29 Nov 2024 20:57:42 -0500 Subject: [PATCH 1/2] misc cleanup --- src/app/ClientLayout.tsx | 1 - src/app/GameBoard/page.tsx | 4 ++++ src/app/_components/Gameboard/GameboardTypes.ts | 3 +-- .../OpponentCardTray/OpponentCardTray.tsx | 3 ++- .../Gameboard/PlayerCardTray/PlayerCardTray.tsx | 4 ++-- .../_subcomponents/PlayerTray/DeckDiscard.tsx | 15 ++++++++++++--- .../Gameboard/_subcomponents/UnitsBoard.tsx | 4 ---- .../_sharedcomponents/Cards/GameCard/GameCard.tsx | 2 +- .../CreateGameForm/CreateGameForm.tsx | 1 - src/app/_theme/theme.ts | 6 ++++-- 10 files changed, 26 insertions(+), 17 deletions(-) diff --git a/src/app/ClientLayout.tsx b/src/app/ClientLayout.tsx index 5a915762..aa896e18 100644 --- a/src/app/ClientLayout.tsx +++ b/src/app/ClientLayout.tsx @@ -22,7 +22,6 @@ export default function ClientLayout({ children }: { children: React.ReactNode } {isPageWithWebsocket ? ( - {children} diff --git a/src/app/GameBoard/page.tsx b/src/app/GameBoard/page.tsx index 054f7295..666c2c34 100644 --- a/src/app/GameBoard/page.tsx +++ b/src/app/GameBoard/page.tsx @@ -2,6 +2,7 @@ "use client"; import React, { useState, useRef, useEffect, useContext } from "react"; import { Box, Grid2 as Grid } from "@mui/material"; +import { s3ImageURL } from "../_utils/s3Assets"; import ChatDrawer from "../_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer"; import OpponentCardTray from "../_components/Gameboard/OpponentCardTray/OpponentCardTray"; import Board from "../_components/Gameboard/Board/Board"; @@ -54,6 +55,9 @@ const GameBoard = () => { mr: sidebarOpen ? `${drawerWidth}px` : "0", height: "100vh", position: "relative", + backgroundImage: `url(${s3ImageURL("game/board-background-1.png")})`, + backgroundSize: "cover", + backgroundPosition: "center", }; if (!gameState || !connectedPlayer) { diff --git a/src/app/_components/Gameboard/GameboardTypes.ts b/src/app/_components/Gameboard/GameboardTypes.ts index b370c278..22324d59 100644 --- a/src/app/_components/Gameboard/GameboardTypes.ts +++ b/src/app/_components/Gameboard/GameboardTypes.ts @@ -36,9 +36,8 @@ export interface BoardProps { sidebarOpen: boolean; } -export type DeckSize = number; export interface DeckDiscardProps { - deckSize: DeckSize; + trayPlayer: string; } export interface ResourcesProps { diff --git a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx index c2f70db7..c8ad807a 100644 --- a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx +++ b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx @@ -2,6 +2,7 @@ import React from "react"; import Grid from "@mui/material/Grid2"; import Resources from "../_subcomponents/PlayerTray/Resources"; import PlayerHand from "../_subcomponents/PlayerTray/PlayerHand"; +import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard"; import { OpponentCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes"; import { useGame } from "@/app/_contexts/Game.context"; @@ -44,7 +45,7 @@ const OpponentCardTray: React.FC = ({ trayPlayer }) => { - {/* */} + ); diff --git a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx index 72fd91ae..169d8421 100644 --- a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx +++ b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx @@ -1,7 +1,7 @@ import React from "react"; import Grid from "@mui/material/Grid2"; import Resources from "../_subcomponents/PlayerTray/Resources"; -// import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard/DeckDiscard"; +import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard"; import CardActionTray from "../_subcomponents/PlayerTray/CardActionTray"; import PlayerHand from "../_subcomponents/PlayerTray/PlayerHand"; import { PlayerCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes"; @@ -52,7 +52,7 @@ const PlayerCardTray: React.FC = ({ - {/* */} + ); diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx index 0cda4900..d3d513a1 100644 --- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx +++ b/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx @@ -1,9 +1,14 @@ import React from "react"; import { Card, CardContent, Box, Typography } from "@mui/material"; -// import GameCard from "../../../_sharedcomponents/Cards/GameCard/GameCard"; +import GameCard from "../../../_sharedcomponents/Cards/GameCard/GameCard"; import { DeckDiscardProps } from "@/app/_components/Gameboard/GameboardTypes"; +import { useGame } from "@/app/_contexts/Game.context"; -const DeckDiscard: React.FC = () => { +const DeckDiscard: React.FC = ( + trayPlayer +) => { + + const { gameState } = useGame(); //------------------------STYLES------------------------// const containerStyle = { display: "flex", @@ -41,7 +46,11 @@ const DeckDiscard: React.FC = () => { Discard - {/* */} + + + Deck + + ); }; diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx index da9390f0..8b60972c 100644 --- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx +++ b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx @@ -16,10 +16,6 @@ const UnitsBoard: React.FC = ({ width: sidebarOpen ? "32vw" : "36vw", ml: ".3vw", p: "1vh", - backgroundImage: "url(/ground-board.png)", - backgroundPositionX: "45%", - backgroundPositionY: sidebarOpen ? "80%" : "90%", - backgroundSize: "200%", }; const containerStyle = { diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index b584083e..9688b264 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -85,7 +85,7 @@ const GameCard: React.FC = ({ // }; const typographyStyle = { - fontFamily: "var(--font-barlow), sans-serif", + color: "black", fontWeight: "400", fontSize: isLobbyView ? "2em" : "1.6em", }; diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx index 69cc0b71..5562a0f6 100644 --- a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx +++ b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx @@ -213,7 +213,6 @@ const CreateGameForm: React.FC = ({ onChange={(e: ChangeEvent) => setDeckLink(e.target.value) } - required /> diff --git a/src/app/_theme/theme.ts b/src/app/_theme/theme.ts index 7067e050..e788fd37 100644 --- a/src/app/_theme/theme.ts +++ b/src/app/_theme/theme.ts @@ -97,8 +97,6 @@ export const theme: Theme = createTheme({ styleOverrides: { root: { borderRadius: ".8rem", - padding: "1.5rem", - backdropFilter: "blur(20px)", width: "100%", overflow: "auto", }, @@ -108,12 +106,16 @@ export const theme: Theme = createTheme({ props: { variant: "blue" }, style: { backgroundColor: "#18325199", + padding: "1.5rem", + backdropFilter: "blur(20px)", }, }, { props: { variant: "black" }, style: { backgroundColor: "rgb(0, 0, 0, 0.60)", + padding: "1.5rem", + backdropFilter: "blur(20px)", }, }, ] From 543fcc90506b71503b1eec438d3b7d6c9dfa9250 Mon Sep 17 00:00:00 2001 From: Dan Bastin Date: Fri, 29 Nov 2024 22:02:20 -0500 Subject: [PATCH 2/2] 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 = ({ - + {/* */} 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 = ({ 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 = ({ 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 = ({ {opponentUnits.map((card: CardData) => ( - + ))} @@ -64,7 +64,7 @@ const UnitsBoard: React.FC = ({ {playerUnits.map((card: CardData) => ( - + ))} 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 = ({ - 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 = ({ 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 ( { @@ -108,25 +63,25 @@ const GameCard: React.FC = ({ }} > {isFaceUp ? ( - - - - - + + + + + {card.cost} - + {card.damage} - + {card.name} - - + + {card.power} - + {card.hp} @@ -134,14 +89,14 @@ const GameCard: React.FC = ({ ) : ( - + Deck Image {/* {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 = ({ 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 ( {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 = ({ title={titleOpponent} /> + { isLobbyView ? null : } {/* Player's row */}