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 = ({
) : (
-
+
{/* {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 */}