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..34e26dff 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"; @@ -49,10 +49,10 @@ 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..2ff9a9cf 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 = { @@ -29,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", @@ -39,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", @@ -59,7 +55,7 @@ const UnitsBoard: React.FC = ({ {opponentUnits.map((card: CardData) => ( - + ))} @@ -68,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 b584083e..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 = { - fontFamily: "var(--font-barlow), sans-serif", - 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/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/_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 */}