From 73064e371de9ccb66fa16446c6b9d0ca2bdc3b55 Mon Sep 17 00:00:00 2001 From: Matevz Date: Mon, 2 Dec 2024 20:02:49 +0100 Subject: [PATCH 01/17] #LobbyDesign - Started with lobby design. --- src/app/_components/Lobby/Deck/Deck.tsx | 59 ++++++++++++------- src/app/_components/Lobby/Players/Players.tsx | 6 +- src/app/_components/Lobby/SetUp/SetUp.tsx | 43 +++++++++----- .../GameLinkCard/GameLinkCard.tsx | 2 +- .../_sharedcomponents/Chat/Chat.tsx | 45 +++----------- src/app/lobby/page.tsx | 28 ++++++--- 6 files changed, 99 insertions(+), 84 deletions(-) diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index dd57d0c0..c2f2c1da 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -24,10 +24,12 @@ const Deck: React.FC = () => { width: "100%", display: "flex", flexDirection: "column", - mt: "2.6em", backgroundColor: "#000000E6", backdropFilter: "blur(20px)", overflow: "hidden", + '@media (max-height: 759px)': { + height: '84vh', + }, }; const headerBoxStyle = { @@ -54,7 +56,15 @@ const Deck: React.FC = () => { color: "white", mr: ".6em", }; - + const exitText = { + fontFamily: "var(--font-barlow), sans-serif", + fontWeight: "600", + color: "#fff", + mr: ".5vw", + textAlign: "end", + mb: "22px", + cursor: "pointer", + }; const scrollableBoxStyle = { flexGrow: 1, overflowY: "auto", @@ -73,26 +83,31 @@ const Deck: React.FC = () => { }; return ( - - - Your Deck - - 0/0 - - - - - - + + + {'>'} Exit + + + + Your Deck + + 0/0 + + + + + + + ); }; diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx index 30caf652..b4c54c55 100644 --- a/src/app/_components/Lobby/Players/Players.tsx +++ b/src/app/_components/Lobby/Players/Players.tsx @@ -10,15 +10,17 @@ const Players: React.FC = ({ isLobbyView }) => { const cardStyle = { borderRadius: "1.1em", borderColor: "#FFFFFF00", - height: "90vh", + height:"90vh", // For small screens and up (600px and above) width: "80%", display: "flex", flexDirection: isLobbyView ? "column" : "row", justifyContent: isLobbyView ? "flex-start" : "center", - mt: "2.6em", pt: ".8em", backgroundColor: "#000000E6", backdropFilter: "blur(20px)", + '@media (max-height: 759px)': { + height: '84vh', + }, }; const typographyStyle = { diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index ddccacd5..af15d313 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -2,7 +2,8 @@ import { Card, Typography, CardActions, - Button + Button, + Box, } from "@mui/material"; import Chat from "@/app/_components/_sharedcomponents/Chat/Chat"; import GameLinkCard from "../_subcomponents/GameLinkCard/GameLinkCard"; @@ -10,6 +11,7 @@ import { useGame } from "@/app/_contexts/Game.context"; import { SetUpProps } from "../LobbyTypes"; import { useRouter, useSearchParams } from "next/navigation" + const SetUp: React.FC = ({ chatHistory, chatMessage, @@ -38,10 +40,11 @@ const SetUp: React.FC = ({ const mainCardStyle = { borderRadius: "1.1em", height: "auto", + maxHeight: "100%", width: "100%", display: "flex", flexDirection: "column", - mt: "2.6em", + mt: "2.0em", p: "1.8em", backgroundColor: "#000000E6", backdropFilter: "blur(20px)", @@ -67,26 +70,36 @@ const SetUp: React.FC = ({ fontWeight: "800", color: "white", alignSelf: "flex-start", - mt: "1.3em", }; - + const lobbyTextStyle ={ + fontSize: "1.85em", + fontWeight: "800", + color: "white", + alignSelf: "flex-start", + mb: "20px", + }; + const boxContainer = { + width: "100%", + }; return ( - + + GAME LOBBY - Set Up - - - - + + Set Up + + + + ); }; diff --git a/src/app/_components/Lobby/_subcomponents/GameLinkCard/GameLinkCard.tsx b/src/app/_components/Lobby/_subcomponents/GameLinkCard/GameLinkCard.tsx index 457d1c44..73b082a2 100644 --- a/src/app/_components/Lobby/_subcomponents/GameLinkCard/GameLinkCard.tsx +++ b/src/app/_components/Lobby/_subcomponents/GameLinkCard/GameLinkCard.tsx @@ -12,7 +12,7 @@ const GameLinkCard: React.FC = () => { //------------------------STYLES------------------------// const cardStyle = { - height: "15vh", + height: "fit-content", background: "#18325199", pb: "4vh", backgroundColor: "#000000E6", diff --git a/src/app/_components/_sharedcomponents/Chat/Chat.tsx b/src/app/_components/_sharedcomponents/Chat/Chat.tsx index 38acbe30..224c3375 100644 --- a/src/app/_components/_sharedcomponents/Chat/Chat.tsx +++ b/src/app/_components/_sharedcomponents/Chat/Chat.tsx @@ -13,28 +13,13 @@ import { ChatProps } from "./ChatTypes"; const Chat: React.FC = ({ chatHistory, chatMessage, - playerRoll = null, - opponentRoll = null, setChatMessage, handleChatSubmit, }) => { - const determineFirstPlayer = () => { - if (playerRoll !== null && opponentRoll !== null) { - if (playerRoll > opponentRoll) { - return "Player"; - } else if (opponentRoll > playerRoll) { - return "Opponent"; - } else { - return "It's a tie. Roll again."; - } - } - return null; - }; //------------------------STYLES------------------------// const chatContainerStyle = { - mt: 2, backgroundColor: "#28282800", }; @@ -103,28 +88,14 @@ const Chat: React.FC = ({ )) ) : ( - {playerRoll !== null && opponentRoll !== null ? ( - <> - - Player rolled {playerRoll} and Opponent rolled{" "} - {opponentRoll}. - - - {determineFirstPlayer() === "It's a tie. Roll again." - ? "It's a tie. Roll again." - : `${determineFirstPlayer()} chooses who goes first.`} - - - ) : ( - <> - - Player 1 has connected. - - - Player 2 has connected. - - - )} + <> + + Player 1 has connected. + + + Player 2 has connected. + + )} diff --git a/src/app/lobby/page.tsx b/src/app/lobby/page.tsx index d0161185..08c722f3 100644 --- a/src/app/lobby/page.tsx +++ b/src/app/lobby/page.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState } from "react"; -import { Grid2 as Grid } from "@mui/material"; +import {Grid2 as Grid, Typography} from "@mui/material"; import { usePathname } from "next/navigation"; import Players from "../_components/Lobby/Players/Players"; import Deck from "../_components/Lobby/Deck/Deck"; @@ -31,25 +31,32 @@ const Lobby = () => { const setUpGridStyle = { justifyContent: "center", - alignContent: "center", pl: "20px", - mb: "16.3em", + mt: "24px", }; const playersGridStyle = { justifyContent: "center", - alignContent: "center", + mt: "78px" }; const deckGridStyle = { justifyContent: "center", - alignContent: "center", pr: "20px", + mt: "23px" + }; + const disclaimer = { + position: "absolute", + bottom: 0, + width: "100%", + padding: "1rem", + textAlign: "center", + fontSize: "0.90rem", }; return ( - + { - + + + + Karabast is in no way affiliated with Disney or Fantasy Flight Games. + Star Wars characters, cards, logos, and art are property of Disney + and/or Fantasy Flight Games. + + ); }; From 2c76020b76e848718396571d5b90171923fa097e Mon Sep 17 00:00:00 2001 From: Matevz Date: Tue, 3 Dec 2024 08:00:49 +0100 Subject: [PATCH 02/17] #LobbyDesign - Inbetween changes --- src/app/_components/Lobby/Deck/Deck.tsx | 8 +++++--- src/app/_components/Lobby/SetUp/SetUp.tsx | 1 + .../_sharedcomponents/CardArea/CardArea.tsx | 1 - .../LeaderBaseBoard/LeaderBase/LeaderBase.tsx | 17 ++++++++++++----- .../LeaderBaseBoard/LeaderBaseBoard.tsx | 1 - src/app/_contexts/Game.context.tsx | 8 +++++++- src/app/_utils/s3Assets.ts | 1 + 7 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index c2f2c1da..79c4d012 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -2,6 +2,7 @@ import React from "react"; import { Card, Box, Typography } from "@mui/material"; import CardArea from "../../_sharedcomponents/CardArea/CardArea"; import { useDragScroll } from "@/app/_utils/useDragScroll"; +import {useGame} from "@/app/_contexts/Game.context"; const Deck: React.FC = () => { @@ -81,7 +82,8 @@ const Deck: React.FC = () => { }, transition: "scrollbar-color 0.3s ease-in-out", }; - + const { connectedDeck } = useGame(); + const newDeck = connectedDeck?.data.deckCards ?? []; return ( @@ -91,7 +93,7 @@ const Deck: React.FC = () => { Your Deck - 0/0 + 0/{connectedDeck?.data.deckCards.length} { onTouchEnd={handleTouchEnd} sx={scrollableBoxStyle} > - + diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index af15d313..c7b349f0 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -80,6 +80,7 @@ const SetUp: React.FC = ({ }; const boxContainer = { width: "100%", + maxHeight: "64vh", }; return ( diff --git a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx b/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx index 11563cf9..d5508e64 100644 --- a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx +++ b/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx @@ -13,7 +13,6 @@ const CardArea: React.FC = ({ cards }) => { justifyContent: "center", textWrap: "wrap", }; - return ( {cards.map((card) => ( diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx index dc17192a..5609bc7a 100644 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx +++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx @@ -3,7 +3,6 @@ import Grid from "@mui/material/Grid2"; import LeaderBaseCard from "../../Cards/LeaderBaseCard/LeaderBaseCard"; import { LeaderBaseProps } from "../LeaderBaseBoardTypes"; import { useGame } from "@/app/_contexts/Game.context"; -import { s3CardImageURL } from "@/app/_utils/s3Assets"; const LeaderBase: React.FC = ({ player, @@ -11,10 +10,18 @@ const LeaderBase: React.FC = ({ title, }) => { - const { gameState, connectedPlayer } = useGame(); - const playerLeader = gameState?.players[player].leader; - const playerBase = gameState?.players[player].base; - + const { gameState, connectedPlayer, connectedDeck } = useGame(); + let playerLeader = null + let playerBase = null + console.log("HEREIAM"); + console.log(connectedDeck); + if(isLobbyView && connectedDeck){ + playerLeader = connectedDeck.data.leader[0] + playerBase = connectedDeck.data.base[0] + }else { + playerLeader = gameState?.players[player].leader; + playerBase = gameState?.players[player].base; + } const containerStyle = { height: "100%", width: "100%", diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx index ea6c76e4..7de0c95e 100644 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx +++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx @@ -13,7 +13,6 @@ const LeaderBaseBoard: React.FC = ({ const titleOpponent = connectedPlayer === "ThisIsTheWay" ? "Order66" : "ThisIsTheWay"; //------------------------STYLES------------------------// - const containerStyle = { height: "100%", width: "100%", diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx index 2db34202..f99eb41c 100644 --- a/src/app/_contexts/Game.context.tsx +++ b/src/app/_contexts/Game.context.tsx @@ -16,6 +16,7 @@ interface GameContextType { sendGameMessage: (args: any[]) => void; getOpponent: (player: string) => string; connectedPlayer: string; + connectedDeck: any, } const GameContext = createContext(undefined); @@ -24,7 +25,7 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { const [gameState, setGameState] = useState(null); const [socket, setSocket] = useState(undefined); const [connectedPlayer, setConnectedPlayer] = useState(""); - + const [connectedDeck, setDeck] = useState(null); useEffect(() => { const urlParams = new URLSearchParams(window.location.search); @@ -45,6 +46,9 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { setGameState(gameState); console.log("Game state received:", gameState); }); + newSocket.on("deckData", (deck:any) =>{ + setDeck(deck); + }); setSocket(newSocket); @@ -76,6 +80,7 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { sendGameMessage, sendMessage, connectedPlayer, + connectedDeck, getOpponent }} > @@ -86,6 +91,7 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { export const useGame = () => { const context = useContext(GameContext); + console.log(context); if (!context) { throw new Error("useGame must be used within a GameProvider"); } diff --git a/src/app/_utils/s3Assets.ts b/src/app/_utils/s3Assets.ts index 5beca7dd..c2109eb7 100644 --- a/src/app/_utils/s3Assets.ts +++ b/src/app/_utils/s3Assets.ts @@ -7,6 +7,7 @@ export const s3ImageURL = (path: string) => { export const s3CardImageURL = (card: CardData) => { if (!card) return "game/epic-action-token.webp"; + card = card.card const cardNumber = card.setId.number.toString().padStart(3, "0") + (card.type === "leaderUnit" ? "-portrait" : ""); return s3ImageURL(`cards/${card.setId.set}/${cardNumber}.webp`); }; \ No newline at end of file From 7f4113d119a739c1479467ec36addfd29257bcf9 Mon Sep 17 00:00:00 2001 From: matevz Date: Tue, 3 Dec 2024 16:09:24 +0100 Subject: [PATCH 03/17] #LobbyDesign - Changed Lobby design to go with the figma designs. --- src/app/_components/Lobby/Deck/Deck.tsx | 13 +++++++++---- .../Cards/LeaderBaseCard/LeaderBaseCard.tsx | 4 +++- .../LeaderBaseBoard/LeaderBase/LeaderBase.tsx | 9 +++------ src/app/_contexts/Game.context.tsx | 1 - src/app/_utils/s3Assets.ts | 1 - src/app/lobby/page.tsx | 4 ++-- 6 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index 79c4d012..b2de5b7e 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -3,6 +3,7 @@ import { Card, Box, Typography } from "@mui/material"; import CardArea from "../../_sharedcomponents/CardArea/CardArea"; import { useDragScroll } from "@/app/_utils/useDragScroll"; import {useGame} from "@/app/_contexts/Game.context"; +import {useRouter} from "next/navigation"; const Deck: React.FC = () => { @@ -17,8 +18,12 @@ const Deck: React.FC = () => { handleTouchEnd, } = useDragScroll("vertical"); - //------------------------STYLES------------------------// + const router = useRouter(); + const handleExit = () => { + router.push("/"); + } + //------------------------STYLES------------------------// const cardStyle = { borderRadius: "1.1em", height: "90vh", @@ -83,17 +88,17 @@ const Deck: React.FC = () => { transition: "scrollbar-color 0.3s ease-in-out", }; const { connectedDeck } = useGame(); - const newDeck = connectedDeck?.data.deckCards ?? []; + const newDeck = connectedDeck?.deckCards ?? []; return ( - + handleExit()}> {'>'} Exit Your Deck - 0/{connectedDeck?.data.deckCards.length} + 0/{connectedDeck?.deckCards.length} = ({ )} {isLobbyView ? ( - + ) : ( = ({ const { gameState, connectedPlayer, connectedDeck } = useGame(); let playerLeader = null let playerBase = null - console.log("HEREIAM"); - console.log(connectedDeck); if(isLobbyView && connectedDeck){ - playerLeader = connectedDeck.data.leader[0] - playerBase = connectedDeck.data.base[0] + playerLeader = connectedDeck.leader + playerBase = connectedDeck.base }else { playerLeader = gameState?.players[player].leader; playerBase = gameState?.players[player].base; @@ -27,9 +25,8 @@ const LeaderBase: React.FC = ({ width: "100%", justifyContent: "center", }; - return ( - + {isLobbyView ? ( <> { export const useGame = () => { const context = useContext(GameContext); - console.log(context); if (!context) { throw new Error("useGame must be used within a GameProvider"); } diff --git a/src/app/_utils/s3Assets.ts b/src/app/_utils/s3Assets.ts index c2109eb7..5beca7dd 100644 --- a/src/app/_utils/s3Assets.ts +++ b/src/app/_utils/s3Assets.ts @@ -7,7 +7,6 @@ export const s3ImageURL = (path: string) => { export const s3CardImageURL = (card: CardData) => { if (!card) return "game/epic-action-token.webp"; - card = card.card const cardNumber = card.setId.number.toString().padStart(3, "0") + (card.type === "leaderUnit" ? "-portrait" : ""); return s3ImageURL(`cards/${card.setId.set}/${cardNumber}.webp`); }; \ No newline at end of file diff --git a/src/app/lobby/page.tsx b/src/app/lobby/page.tsx index 08c722f3..fdbd41e3 100644 --- a/src/app/lobby/page.tsx +++ b/src/app/lobby/page.tsx @@ -64,10 +64,10 @@ const Lobby = () => { setChatMessage={setChatMessage} /> - + - + From 868dc94751dc928be85751ad60709d30ff0822be Mon Sep 17 00:00:00 2001 From: Matevz Date: Thu, 12 Dec 2024 20:15:00 +0100 Subject: [PATCH 04/17] #LobbyDesign - Made changes to the lobby design to better go with the design in figma. --- src/app/_components/Lobby/Deck/Deck.tsx | 14 ++---- src/app/_components/Lobby/Players/Players.tsx | 3 ++ src/app/_components/Lobby/SetUp/SetUp.tsx | 49 +++++++++++++++---- .../_sharedcomponents/Chat/Chat.tsx | 5 +- src/app/lobby/page.tsx | 6 +-- 5 files changed, 52 insertions(+), 25 deletions(-) diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index b2de5b7e..15eb569c 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -3,8 +3,6 @@ import { Card, Box, Typography } from "@mui/material"; import CardArea from "../../_sharedcomponents/CardArea/CardArea"; import { useDragScroll } from "@/app/_utils/useDragScroll"; import {useGame} from "@/app/_contexts/Game.context"; -import {useRouter} from "next/navigation"; - const Deck: React.FC = () => { // Use the custom hook with horizontal or vertical scrolling as required @@ -17,12 +15,6 @@ const Deck: React.FC = () => { handleTouchMove, handleTouchEnd, } = useDragScroll("vertical"); - - const router = useRouter(); - const handleExit = () => { - router.push("/"); - } - //------------------------STYLES------------------------// const cardStyle = { borderRadius: "1.1em", @@ -36,6 +28,9 @@ const Deck: React.FC = () => { '@media (max-height: 759px)': { height: '84vh', }, + '@media (max-height: 1000px)': { + maxHeight: '85.5vh', + }, }; const headerBoxStyle = { @@ -91,9 +86,6 @@ const Deck: React.FC = () => { const newDeck = connectedDeck?.deckCards ?? []; return ( - handleExit()}> - {'>'} Exit - Your Deck diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx index b4c54c55..270c5934 100644 --- a/src/app/_components/Lobby/Players/Players.tsx +++ b/src/app/_components/Lobby/Players/Players.tsx @@ -21,6 +21,9 @@ const Players: React.FC = ({ isLobbyView }) => { '@media (max-height: 759px)': { height: '84vh', }, + '@media (max-height: 1000px)': { + maxHeight: '85.5vh', + }, }; const typographyStyle = { diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index c7b349f0..c447321a 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -3,13 +3,14 @@ import { Typography, CardActions, Button, - Box, + Box, Divider, } from "@mui/material"; import Chat from "@/app/_components/_sharedcomponents/Chat/Chat"; import GameLinkCard from "../_subcomponents/GameLinkCard/GameLinkCard"; import { useGame } from "@/app/_contexts/Game.context"; import { SetUpProps } from "../LobbyTypes"; import { useRouter, useSearchParams } from "next/navigation" +import React from "react"; const SetUp: React.FC = ({ @@ -39,8 +40,8 @@ const SetUp: React.FC = ({ const mainCardStyle = { borderRadius: "1.1em", - height: "auto", - maxHeight: "100%", + height: "100%", + maxHeight: "72.5vh", width: "100%", display: "flex", flexDirection: "column", @@ -49,6 +50,9 @@ const SetUp: React.FC = ({ backgroundColor: "#000000E6", backdropFilter: "blur(20px)", overflow: "hidden", + '@media (max-height: 1000px)': { + maxHeight: '67vh', + }, }; const initiativeCardStyle = { @@ -72,19 +76,38 @@ const SetUp: React.FC = ({ alignSelf: "flex-start", }; const lobbyTextStyle ={ - fontSize: "1.85em", - fontWeight: "800", + fontSize: "3.0em", + fontWeight: "600", color: "white", alignSelf: "flex-start", - mb: "20px", + mb: "0.3em", + }; + const exitCard = { + display: "flex", + pr: "1.2em", + pl: "1.2em", + width: "100%", + height: "6%", + alignItems: "center", + justifyContent: "space-between", + cursor: "pointer", + }; + const dividerStyle = { + backgroundColor: "#fff", + mt: ".5vh", + mb: "0.5vh", }; const boxContainer = { width: "100%", - maxHeight: "64vh", + //maxHeight: "64vh", // this is for the small screen + height: "100%", }; + const handleExit = () => { + router.push("/"); + } return ( - GAME LOBBY + KARABAST @@ -92,13 +115,21 @@ const SetUp: React.FC = ({ Set Up - + + handleExit()}> + + Exit Game Lobby + + + {'<'} + + ); diff --git a/src/app/_components/_sharedcomponents/Chat/Chat.tsx b/src/app/_components/_sharedcomponents/Chat/Chat.tsx index 224c3375..be713ef0 100644 --- a/src/app/_components/_sharedcomponents/Chat/Chat.tsx +++ b/src/app/_components/_sharedcomponents/Chat/Chat.tsx @@ -21,6 +21,8 @@ const Chat: React.FC = ({ const chatContainerStyle = { backgroundColor: "#28282800", + height: "53vh", + overflowY: "auto", }; const titleStyle = { @@ -31,7 +33,7 @@ const Chat: React.FC = ({ const dividerStyle = { backgroundColor: "#fff", mt: ".5vh", - mb: "1vh", + mb: "0.5vh", }; const chatBoxStyle = { @@ -53,7 +55,6 @@ const Chat: React.FC = ({ p: "10px", mt: 2, }; - const textFieldStyle = { backgroundColor: "#28282800", color: "#fff", diff --git a/src/app/lobby/page.tsx b/src/app/lobby/page.tsx index fdbd41e3..2c0bc3fa 100644 --- a/src/app/lobby/page.tsx +++ b/src/app/lobby/page.tsx @@ -32,18 +32,18 @@ const Lobby = () => { const setUpGridStyle = { justifyContent: "center", pl: "20px", - mt: "24px", + mt: "5px", }; const playersGridStyle = { justifyContent: "center", - mt: "78px" + mt: "78px", }; const deckGridStyle = { justifyContent: "center", pr: "20px", - mt: "23px" + mt: "78px", }; const disclaimer = { position: "absolute", From ad9def67265940b6e26d73643848925619d270ce Mon Sep 17 00:00:00 2001 From: Matevz Date: Fri, 13 Dec 2024 20:32:20 +0100 Subject: [PATCH 05/17] #LobbyDesign - Added new design changes to the lobby. - Added card counters to the lobby. --- public/counterIcon.svg | 4 ++ src/app/_components/Lobby/Deck/Deck.tsx | 17 ++---- src/app/_components/Lobby/Players/Players.tsx | 4 +- src/app/_components/Lobby/SetUp/SetUp.tsx | 10 ++-- .../_sharedcomponents/CardArea/CardArea.tsx | 4 +- .../_sharedcomponents/Cards/CardTypes.ts | 9 +++- .../Cards/GameCard/GameCard.tsx | 54 +++++++++++++++---- .../_sharedcomponents/Chat/Chat.tsx | 3 +- .../LeaderBaseBoard/LeaderBase/LeaderBase.tsx | 6 ++- src/app/_contexts/Game.context.tsx | 1 + src/app/lobby/page.tsx | 4 ++ 11 files changed, 81 insertions(+), 35 deletions(-) create mode 100644 public/counterIcon.svg diff --git a/public/counterIcon.svg b/public/counterIcon.svg new file mode 100644 index 00000000..4c91b9d1 --- /dev/null +++ b/public/counterIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index 15eb569c..2953c68b 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -22,8 +22,8 @@ const Deck: React.FC = () => { width: "100%", display: "flex", flexDirection: "column", - backgroundColor: "#000000E6", - backdropFilter: "blur(20px)", + backgroundColor: "#00000080", + backdropFilter: "blur(30px)", overflow: "hidden", '@media (max-height: 759px)': { height: '84vh', @@ -35,7 +35,7 @@ const Deck: React.FC = () => { const headerBoxStyle = { display: "flex", - height: "10vh", + height: "100px", width: "100%", justifyContent: "space-between", position: "sticky", @@ -57,19 +57,9 @@ const Deck: React.FC = () => { color: "white", mr: ".6em", }; - const exitText = { - fontFamily: "var(--font-barlow), sans-serif", - fontWeight: "600", - color: "#fff", - mr: ".5vw", - textAlign: "end", - mb: "22px", - cursor: "pointer", - }; const scrollableBoxStyle = { flexGrow: 1, overflowY: "auto", - px: "5em", "::-webkit-scrollbar": { width: "0.2vw", }, @@ -84,6 +74,7 @@ const Deck: React.FC = () => { }; const { connectedDeck } = useGame(); const newDeck = connectedDeck?.deckCards ?? []; + return ( diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx index 41ad642d..138fc80c 100644 --- a/src/app/_components/Lobby/Players/Players.tsx +++ b/src/app/_components/Lobby/Players/Players.tsx @@ -16,8 +16,8 @@ const Players: React.FC = ({ isLobbyView }) => { flexDirection: isLobbyView ? "column" : "row", justifyContent: isLobbyView ? "flex-start" : "center", pt: ".8em", - backgroundColor: "#000000E6", - backdropFilter: "blur(20px)", + backgroundColor: "#00000080", + backdropFilter: "blur(30px)", '@media (max-height: 759px)': { height: '84vh', }, diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index a66c4ab0..2d895767 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -47,12 +47,15 @@ const SetUp: React.FC = ({ flexDirection: "column", mt: "2.0em", p: "1.8em", - backgroundColor: "#000000E6", - backdropFilter: "blur(20px)", + backgroundColor: "#00000080", + backdropFilter: "blur(30px)", overflow: "hidden", '@media (max-height: 1000px)': { maxHeight: '67vh', }, + '@media (max-height: 759px)': { + maxHeight: '64.3vh', + }, }; const initiativeCardStyle = { @@ -87,7 +90,7 @@ const SetUp: React.FC = ({ pr: "1.2em", pl: "1.2em", width: "100%", - height: "6%", + height: "10%", alignItems: "center", justifyContent: "space-between", cursor: "pointer", @@ -114,7 +117,6 @@ const SetUp: React.FC = ({ - Set Up = ({ cards }) => { const mainContainerStyle = { display: "flex", flexWrap: "wrap", - gap: "3em", + gap: "1em", p: "1em", justifyContent: "center", textWrap: "wrap", @@ -19,6 +19,8 @@ const CardArea: React.FC = ({ cards }) => { ))} diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts index bf047f0c..b7596f0e 100644 --- a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts +++ b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts @@ -22,10 +22,15 @@ export interface ICardData { setId: ICardSetId; type: string; } - -export interface IGameCardProps { +export interface IServerCardData { + count: number; card: ICardData; +} +export interface IGameCardProps { + card: ICardData | IServerCardData; size?: "standard" | "square"; + options: string[]; + location: "lobby" | "gameBoard"; } export interface ILeaderBaseCardProps { diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index 4182fa16..7f8d3710 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -7,18 +7,27 @@ import { Box, } from "@mui/material"; import Image from "next/image"; -import { IGameCardProps, ICardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes"; +import { IGameCardProps, ICardData, IServerCardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes"; import { useGame } from "@/app/_contexts/Game.context"; import { s3CardImageURL } from "@/app/_utils/s3Utils"; +// Type guard to check if the card is ICardData +const isICardData = (card: ICardData | IServerCardData): card is ICardData => { + return (card as ICardData).uuid !== undefined; +}; + const GameCard: React.FC = ({ card, size = "standard", + location = "lobby", + options, }) => { // const isLobbyView = path === "/lobby"; const isLobbyView = false; - const isFaceUp = true - + const isFaceUp = true; + // Determine whether card is ICardData or IServerCardData + const cardData = isICardData(card) ? card : card.card; + const cardCounter = !isICardData(card) ? card.count : 0; const { sendGameMessage } = useGame(); const cardBorderColor = (card: ICardData) => { @@ -34,19 +43,24 @@ const GameCard: React.FC = ({ height: size === "standard" ? "10rem" : "8rem", width: size === "standard" ? "7.18rem" : "8rem", }, + cardStylesLobby: { + borderRadius: ".38em", + height: "19vh", + width: "7.18vw", + overflow: "hidden", + }, cardContentStyle: { width: "100%", height: "100%", position: "relative", - padding: ".5em", textAlign: "center", whiteSpace: "normal", backgroundColor: "black", - backgroundImage: `url(${s3CardImageURL(card)})`, + backgroundImage: `url(${s3CardImageURL(cardData)})`, backgroundSize: size === "standard" ? "contain" : "cover", backgroundPosition: size === "standard" ? "center" : "top", backgroundRepeat: "no-repeat", - border: `2px solid ${cardBorderColor(card)}`, + border: `2px solid ${cardBorderColor(cardData)}`, }, imageStyle: { width: "2.5rem", @@ -58,20 +72,40 @@ const GameCard: React.FC = ({ fontSize: "1.3em", margin: 0, }, + iconLayer:{ + position: "absolute", + width: "100%", + display: "flex", + height: "20%", + bottom: "0px", + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + backgroundImage: `url(/counterIcon.svg)`, + alignItems: "center", + justifyContent: "center", + + }, + numberStyle:{ + fontSize: "1.5vw", + fontWeight: "700", + } } return ( - { - if (card.selectable) { - sendGameMessage(["cardClicked", card.uuid]); + if (cardData.selectable) { + sendGameMessage(["cardClicked", cardData.uuid]); } }} > {isFaceUp ? ( - + + + {cardCounter} ) : ( diff --git a/src/app/_components/_sharedcomponents/Chat/Chat.tsx b/src/app/_components/_sharedcomponents/Chat/Chat.tsx index 5157bc7e..6fa6a1b1 100644 --- a/src/app/_components/_sharedcomponents/Chat/Chat.tsx +++ b/src/app/_components/_sharedcomponents/Chat/Chat.tsx @@ -21,13 +21,14 @@ const Chat: React.FC = ({ const chatContainerStyle = { backgroundColor: "#28282800", - height: "53vh", + height: "55vh", overflowY: "auto", }; const titleStyle = { fontWeight: "bold", color: "#fff", + fontSize: "1.5em", }; const dividerStyle = { diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx index f7ce90d3..c5a7921b 100644 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx +++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx @@ -15,8 +15,10 @@ const LeaderBase: React.FC = ({ let playerLeader = null let playerBase = null if(isLobbyView && connectedDeck){ - playerLeader = connectedDeck.leader - playerBase = connectedDeck.base + playerLeader = connectedDeck.leader[0].card + playerBase = connectedDeck.base[0].card + console.log(playerLeader); + console.log(playerBase); }else { playerLeader = gameState?.players[player].leader; playerBase = gameState?.players[player].base; diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx index 572cf83e..79af46c5 100644 --- a/src/app/_contexts/Game.context.tsx +++ b/src/app/_contexts/Game.context.tsx @@ -47,6 +47,7 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { console.log("Game state received:", gameState); }); newSocket.on("deckData", (deck:any) =>{ + console.log(deck); setDeck(deck); }); diff --git a/src/app/lobby/page.tsx b/src/app/lobby/page.tsx index 2c0bc3fa..433ef8c8 100644 --- a/src/app/lobby/page.tsx +++ b/src/app/lobby/page.tsx @@ -5,6 +5,7 @@ import { usePathname } from "next/navigation"; import Players from "../_components/Lobby/Players/Players"; import Deck from "../_components/Lobby/Deck/Deck"; import SetUp from "../_components/Lobby/SetUp/SetUp"; +import {s3ImageURL} from "@/app/_utils/s3Utils"; const Lobby = () => { @@ -27,6 +28,9 @@ const Lobby = () => { const containerStyle = { height: "100vh", overflow: "hidden", + backgroundImage: `url(${s3ImageURL("game/board-background-1.png")})`, + backgroundSize: "cover", + backgroundPosition: "center", }; const setUpGridStyle = { From 50240b7b2d636c0badccb607973d62f4cc770ba7 Mon Sep 17 00:00:00 2001 From: Matevz Date: Sun, 15 Dec 2024 15:18:49 +0100 Subject: [PATCH 06/17] #LobbyDesign - Added functionality of changing the deck with the sideboard. --- .../_components/Gameboard/GameboardTypes.ts | 1 + src/app/_components/Lobby/Deck/Deck.tsx | 52 ++++++++++++- .../_sharedcomponents/CardArea/CardArea.tsx | 3 +- .../_sharedcomponents/Cards/CardTypes.ts | 1 + .../Cards/GameCard/GameCard.tsx | 74 +++++++++++++++---- src/app/_contexts/Game.context.tsx | 9 ++- 6 files changed, 120 insertions(+), 20 deletions(-) diff --git a/src/app/_components/Gameboard/GameboardTypes.ts b/src/app/_components/Gameboard/GameboardTypes.ts index 35175c78..fae6e3b8 100644 --- a/src/app/_components/Gameboard/GameboardTypes.ts +++ b/src/app/_components/Gameboard/GameboardTypes.ts @@ -57,6 +57,7 @@ export interface IBasicPromptProps { export interface ICardAreaProps { cards: ICardData[]; + pile: "Deck" | "Sideboard" | null; } export interface IUnitsBoardProps { diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index 2953c68b..df0d67cd 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Box, Typography } from "@mui/material"; +import {Card, Box, Typography, Divider} from "@mui/material"; import CardArea from "../../_sharedcomponents/CardArea/CardArea"; import { useDragScroll } from "@/app/_utils/useDragScroll"; import {useGame} from "@/app/_contexts/Game.context"; @@ -35,7 +35,7 @@ const Deck: React.FC = () => { const headerBoxStyle = { display: "flex", - height: "100px", + height: "50px", width: "100%", justifyContent: "space-between", position: "sticky", @@ -57,6 +57,30 @@ const Deck: React.FC = () => { color: "white", mr: ".6em", }; + const dividerStyle = { + backgroundColor: "#fff", + mt: ".5vh", + mb: "0.5vh", + width: "80%", + alignSelf: "center", + height: "1px", + }; + const scrollableBoxStyleSideboard = { + flexGrow: 1, + height: "20%", + overflowY: "auto", + "::-webkit-scrollbar": { + width: "0.2vw", + }, + "::-webkit-scrollbar-thumb": { + backgroundColor: "#D3D3D3B3", + borderRadius: "1vw", + }, + "::-webkit-scrollbar-button": { + display: "none", + }, + transition: "scrollbar-color 0.3s ease-in-out", + }; const scrollableBoxStyle = { flexGrow: 1, overflowY: "auto", @@ -74,6 +98,7 @@ const Deck: React.FC = () => { }; const { connectedDeck } = useGame(); const newDeck = connectedDeck?.deckCards ?? []; + const sideBoard = connectedDeck?.sideboard ?? []; return ( @@ -81,7 +106,7 @@ const Deck: React.FC = () => { Your Deck - 0/{connectedDeck?.deckCards.length} + {connectedDeck?.deckCards.length}/50 { onTouchEnd={handleTouchEnd} sx={scrollableBoxStyle} > - + + + + Sideboard + + + {connectedDeck?.sideboard.length}/10 + + + + diff --git a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx b/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx index f8d362b5..92d60d9b 100644 --- a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx +++ b/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx @@ -3,7 +3,7 @@ import { Box } from "@mui/material"; import GameCard from "../Cards/GameCard/GameCard"; import { ICardAreaProps } from "@/app/_components/Gameboard/GameboardTypes"; -const CardArea: React.FC = ({ cards }) => { +const CardArea: React.FC = ({ cards, pile }) => { //------------------------STYLES------------------------// const mainContainerStyle = { display: "flex", @@ -21,6 +21,7 @@ const CardArea: React.FC = ({ cards }) => { card={card} options={['counter']} location={'lobby'} + pile={pile} /> ))} diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts index b7596f0e..b168b35a 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"; options: string[]; location: "lobby" | "gameBoard"; + pile: "Deck" | "Sideboard" | null; } export interface ILeaderBaseCardProps { diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index 7f8d3710..5717263a 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -2,7 +2,6 @@ import React from "react"; import { Card as MuiCard, CardContent, - CardActionArea, Typography, Box, } from "@mui/material"; @@ -20,6 +19,7 @@ const GameCard: React.FC = ({ card, size = "standard", location = "lobby", + pile, options, }) => { // const isLobbyView = path === "/lobby"; @@ -28,8 +28,7 @@ const GameCard: React.FC = ({ // Determine whether card is ICardData or IServerCardData const cardData = isICardData(card) ? card : card.card; const cardCounter = !isICardData(card) ? card.count : 0; - const { sendGameMessage } = useGame(); - + const { sendGameMessage, connectedDeck, setConnectedDeck } = useGame(); const cardBorderColor = (card: ICardData) => { if (card.selected) return "yellow"; if (card.selectable) return "limegreen"; @@ -37,6 +36,51 @@ const GameCard: React.FC = ({ return ""; } + // handle deck movement + const handleSwitch = () => { + const updatedDeck = {...connectedDeck}; + const deckList = updatedDeck.deckCards || []; + const sideboardList = updatedDeck.sideboard || []; + + // Helper function to move the card between lists + const moveCard = (sourceList: any[], targetList: any[]) => { + const cardIndex = sourceList.findIndex((c: any) => c.card.id === cardData.id); + + if (cardIndex !== -1) { + // Decrement one copy from the source card + sourceList[cardIndex].count -= 1; + + // If count drops to zero, remove the card entirely from source + if (sourceList[cardIndex].count === 0) { + sourceList.splice(cardIndex, 1); + } + + // Now handle the target list + const existingCardIndex = targetList.findIndex((c: any) => c.card.id === cardData.id); + + if (existingCardIndex !== -1) { + // If the card already exists in the target, just increment its count + targetList[existingCardIndex].count += 1; + } else { + // If the card doesn't exist in the target, add it with count = 1 + targetList.push({ count: 1, card: { ...cardData } }); + } + } + }; + // Check if the card is in the deck or sideboard + if (pile === 'Deck') { + // Move from deck to sideboard + moveCard(deckList, sideboardList); + } else { + // Move from sideboard to deck + moveCard(sideboardList, deckList); + } + + // Update the connectedDeck state + setConnectedDeck(updatedDeck); + } + + const styles = { cardStyles: { borderRadius: ".38em", @@ -45,9 +89,10 @@ const GameCard: React.FC = ({ }, cardStylesLobby: { borderRadius: ".38em", - height: "19vh", - width: "7.18vw", + height: "18vh", + width: "6.7vw", overflow: "hidden", + cursor: "pointer", }, cardContentStyle: { width: "100%", @@ -91,22 +136,23 @@ const GameCard: React.FC = ({ fontWeight: "700", } } - return ( { - if (cardData.selectable) { - sendGameMessage(["cardClicked", cardData.uuid]); - } - }} + onClick={location === 'lobby' ? handleSwitch: () => { + if (cardData.selectable) { + sendGameMessage(["cardClicked", cardData.uuid]); + } + }} > {isFaceUp ? ( - - {cardCounter} - + {options?.includes("counter") && ( + + {cardCounter} + + )} ) : ( diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx index 79af46c5..c1e162f7 100644 --- a/src/app/_contexts/Game.context.tsx +++ b/src/app/_contexts/Game.context.tsx @@ -17,6 +17,7 @@ interface IGameContextType { getOpponent: (player: string) => string; connectedPlayer: string; connectedDeck: any, + setConnectedDeck: (deck: any) => void; } const GameContext = createContext(undefined); @@ -68,12 +69,17 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { socket?.emit("game", ...args); }; + const getOpponent = (player: string) => { if (!gameState) return ""; const playerNames = Object.keys(gameState.players); return playerNames.find((name) => name !== player) || ""; }; + const setConnectedDeck = (deck: any) => { + setDeck(deck); + } + return ( { sendMessage, connectedPlayer, connectedDeck, - getOpponent + getOpponent, + setConnectedDeck, }} > {children} From 62094b45a4ed48ca96be65fe53c23ee9e5fc3e2c Mon Sep 17 00:00:00 2001 From: Matevz Date: Sun, 15 Dec 2024 18:13:10 +0100 Subject: [PATCH 07/17] #LobbyDesign - Divided the Leader and Base cards. - Added support for smaller screens the lobby. - Added Sideboard support - Correctly count the amount of cards in both the deck and sideboard. - Send the deck to the server before starting the game. --- .../_subcomponents/PlayerTray/PlayerHand.tsx | 3 +- .../Gameboard/_subcomponents/UnitsBoard.tsx | 4 +- src/app/_components/Lobby/Deck/Deck.tsx | 51 +++--- src/app/_components/Lobby/Players/Players.tsx | 18 ++- src/app/_components/Lobby/SetUp/SetUp.tsx | 37 ++++- .../Cards/BaseCard/BaseCard.tsx | 94 +++++++++++ .../Cards/GameCard/GameCard.tsx | 11 +- .../Cards/LeaderBaseCard/LeaderBaseCard.tsx | 130 --------------- .../Cards/LeaderCard/LeaderCard.tsx | 150 ++++++++++++++++++ .../LeaderBaseBoard/LeaderBase/LeaderBase.tsx | 72 ++++----- .../LeaderBaseBoard/LeaderBaseBoard.tsx | 63 +++++--- src/app/_contexts/Game.context.tsx | 1 - 12 files changed, 405 insertions(+), 229 deletions(-) create mode 100644 src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx delete mode 100644 src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx create mode 100644 src/app/_components/_sharedcomponents/Cards/LeaderCard/LeaderCard.tsx diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx index 6c05f540..81d81b0c 100644 --- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx +++ b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx @@ -60,8 +60,7 @@ const PlayerHand: React.FC = ({ {cards.map((card) => ( + card={card} options={[]} location={"gameBoard"} pile={null} /> ))} diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx index dcdd7d10..641ca871 100644 --- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx +++ b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx @@ -55,7 +55,7 @@ const UnitsBoard: React.FC = ({ {opponentUnits.map((card: ICardData) => ( - + ))} @@ -64,7 +64,7 @@ const UnitsBoard: React.FC = ({ {playerUnits.map((card: ICardData) => ( - + ))} diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index df0d67cd..63daa569 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -18,6 +18,7 @@ const Deck: React.FC = () => { //------------------------STYLES------------------------// const cardStyle = { borderRadius: "1.1em", + pt: ".8em", height: "90vh", width: "100%", display: "flex", @@ -67,7 +68,8 @@ const Deck: React.FC = () => { }; const scrollableBoxStyleSideboard = { flexGrow: 1, - height: "20%", + height: "21%", + minHeight: "183px", overflowY: "auto", "::-webkit-scrollbar": { width: "0.2vw", @@ -99,14 +101,23 @@ const Deck: React.FC = () => { const { connectedDeck } = useGame(); const newDeck = connectedDeck?.deckCards ?? []; const sideBoard = connectedDeck?.sideboard ?? []; + // Calculate the total counts + const deckCount = newDeck.reduce( + (sum: number, item: { count: number; }) => sum + (item.count || 0), + 0 + ) ?? 0; + const sideboardCount = sideBoard.reduce( + (sum: number, item: { count: number; }) => sum + (item.count || 0), + 0 + ) ?? 0; return ( Your Deck - {connectedDeck?.deckCards.length}/50 + {deckCount}/50 { > - - Sideboard - - - {connectedDeck?.sideboard.length}/10 - - - - - + {sideBoard?.length > 0 && ( + <> + + Sideboard + + + {sideboardCount}/10 + + + + + + + )} ); diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx index 138fc80c..4411930f 100644 --- a/src/app/_components/Lobby/Players/Players.tsx +++ b/src/app/_components/Lobby/Players/Players.tsx @@ -12,6 +12,7 @@ const Players: React.FC = ({ isLobbyView }) => { borderColor: "#FFFFFF00", height:"90vh", // For small screens and up (600px and above) width: "80%", + minWidth: "212px", display: "flex", flexDirection: isLobbyView ? "column" : "row", justifyContent: isLobbyView ? "flex-start" : "center", @@ -24,14 +25,25 @@ const Players: React.FC = ({ isLobbyView }) => { '@media (max-height: 1000px)': { maxHeight: '85.5vh', }, + "::-webkit-scrollbar": { + width: "0.2vw", + }, + "::-webkit-scrollbar-thumb": { + backgroundColor: "#D3D3D3B3", + borderRadius: "1vw", + }, + "::-webkit-scrollbar-button": { + display: "none", + }, + transition: "scrollbar-color 0.3s ease-in-out", }; const typographyStyle = { - fontSize: "2.4em", + fontSize: "2.0em", fontWeight: "bold", color: "white", - ml: ".6em", - pt: ".2em", + ml: "30px", + mb: "0px" }; return ( diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index 2d895767..9489d197 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -23,18 +23,39 @@ const SetUp: React.FC = ({ const { sendMessage } = useGame(); const router = useRouter(); const searchParams = useSearchParams(); - + const { connectedPlayer, connectedDeck } = useGame(); // Extract the player from the URL query params const player = searchParams.get("player"); - const handleStartGame = () => { - sendMessage("startGame"); - if (player){ - router.push("/GameBoard?player=" + player); - }else { - router.push("/GameBoard"); + const handleStartGame = async () => { + try { + const payload = { + user: connectedPlayer, + deck: connectedDeck + }; + const response = await fetch("http://localhost:9500/api/submit-deck", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + }); + + if (!response.ok) { + throw new Error("Failed to create game"); + } + + sendMessage("startGame"); + if (player) { + router.push("/GameBoard?player=" + player); + } else { + router.push("/GameBoard"); + } + + } catch (error) { + console.error(error); } - } + }; //------------------------STYLES------------------------// diff --git a/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx new file mode 100644 index 00000000..5c209515 --- /dev/null +++ b/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx @@ -0,0 +1,94 @@ +import React from "react"; +import { Card, CardContent, Typography, Box } from "@mui/material"; +import { ICardData } from "../CardTypes"; +import { useGame } from "@/app/_contexts/Game.context"; +import { s3CardImageURL } from "@/app/_utils/s3Utils"; + +interface IBaseCardProps { + isLobbyView?: boolean; + card: ICardData; +} + +const BaseCard: React.FC = ({ isLobbyView = false, card }) => { + const { sendGameMessage } = useGame(); + + const cardBorderColor = (card: ICardData) => { + if (!card) return ""; + if (card.selected) return "yellow"; + if (card.selectable) return "limegreen"; + if (card.exhausted) return "gray"; + return "black"; + }; + const cardStyle = { + backgroundColor: "black", + backgroundImage: `url(${s3CardImageURL(card)})`, + backgroundSize: "contain", + backgroundPosition: "center", + width: "10rem", + height: "7.18rem", + textAlign: "center" as const, + color: "white", + display: "flex", + cursor: "pointer", + position: "relative" as const, + border: `2px solid ${cardBorderColor(card)}`, + }; + const cardStyleLobby = card ? { + backgroundColor: "transparent", + backgroundImage: `url(${s3CardImageURL(card)})`, + backgroundSize: "contain", + backgroundPosition: "center", + width: "9.5vw", + height: "13vh", + backgroundRepeat: "no-repeat", + textAlign: "center" as const, + color: "white", + display: "flex", + cursor: "pointer", + position: "relative" as const, + } : { + backgroundColor: "#00000040", + backgroundSize: "contain", + backgroundPosition: "center", + width: "9.5vw", + height: "13vh", + backgroundRepeat: "no-repeat", + textAlign: "center" as const, + color: "white", + display: "flex", + cursor: "pointer", + position: "relative" as const, + }; + const damageStyle = { + fontWeight: "600", + fontSize: "2em", + color: "hotpink", + }; + + return ( + + {isLobbyView ? ( + + ) : ( + { + if (card.selectable) { + sendGameMessage(["cardClicked", card.uuid]); + } + }} + > + + + + {card.damage} + + + + + )} + + ); +}; + +export default BaseCard; \ 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 5717263a..1e5b9b95 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -18,7 +18,7 @@ const isICardData = (card: ICardData | IServerCardData): card is ICardData => { const GameCard: React.FC = ({ card, size = "standard", - location = "lobby", + location = "gameBoard", pile, options, }) => { @@ -91,8 +91,11 @@ const GameCard: React.FC = ({ borderRadius: ".38em", height: "18vh", width: "6.7vw", + minWidth: "101px", + minHeight: "151px", overflow: "hidden", cursor: "pointer", + backgroundColor: "transparent", }, cardContentStyle: { width: "100%", @@ -100,12 +103,11 @@ const GameCard: React.FC = ({ position: "relative", textAlign: "center", whiteSpace: "normal", - backgroundColor: "black", + backgroundColor: "transparent", backgroundImage: `url(${s3CardImageURL(cardData)})`, backgroundSize: size === "standard" ? "contain" : "cover", backgroundPosition: size === "standard" ? "center" : "top", backgroundRepeat: "no-repeat", - border: `2px solid ${cardBorderColor(cardData)}`, }, imageStyle: { width: "2.5rem", @@ -138,7 +140,8 @@ const GameCard: React.FC = ({ } return ( { + onClick={location === 'lobby' ? handleSwitch : () => { + console.log("Hello world") if (cardData.selectable) { sendGameMessage(["cardClicked", cardData.uuid]); } diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx deleted file mode 100644 index 0a1eb6b3..00000000 --- a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React from "react"; -import { - Card, - CardActionArea, - CardContent, - Typography, - Box, -} from "@mui/material"; -import { ILeaderBaseCardProps } from "../CardTypes"; -import { ICardData } from "../CardTypes"; -import { useGame } from "@/app/_contexts/Game.context"; -import { s3CardImageURL } from "@/app/_utils/s3Utils"; - - -const LeaderBaseCard: React.FC = ({ - variant, - isLobbyView = false, - title, - card -}) => { - const cardBorderColor = (card: ICardData) => { - if (!card) return ""; - if (card.selected) return "yellow"; - if (card.selectable) return "limegreen"; - if (card.exhausted) return "gray"; - return "black"; - }; - - const cardStyle = { - backgroundColor: "black", - backgroundImage: `url(${s3CardImageURL(card)})`, - backgroundSize: "contain", - backgroundPosition: "center", - width: "10rem", - height: "7.18rem", - textAlign: "center", - color: "white", - display: "flex", - cursor: "pointer", - m: "0em", - position: "relative", // Needed for positioning the red box - border: `2px solid ${cardBorderColor(card)}`, - }; - - const typographyStyle = { - fontFamily: "var(--font-barlow), sans-serif", - fontWeight: "400", - fontSize: "1.6em", - }; - - const damageStyle = { - fontWeight: "600", - fontSize: "2em", - color: "hotpink", - }; - - const titleTypographyStyle = { - fontFamily: "var(--font-barlow), sans-serif", - fontWeight: "600", - fontSize: "1.5em", - marginBottom: isLobbyView ? 0 : "0.5em", - textAlign: "left", - color: "white", - }; - - //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", - }; - - const { sendGameMessage } = useGame(); - - return ( - - {/* Show title above the card if in lobby view and variant is leader */} - {variant === "leader" && isLobbyView && title && ( - - {title} - - )} - - {isLobbyView ? ( - - ) : ( - { - if (card.selectable) { - sendGameMessage(["cardClicked", card.uuid]); - } - }} - > - - - {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} - - - )} - - )} - - - - ); -}; - -export default LeaderBaseCard; diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderCard/LeaderCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderCard/LeaderCard.tsx new file mode 100644 index 00000000..567e2876 --- /dev/null +++ b/src/app/_components/_sharedcomponents/Cards/LeaderCard/LeaderCard.tsx @@ -0,0 +1,150 @@ +import React from "react"; +import { Card, CardContent, Typography, Box } from "@mui/material"; +import { ICardData } from "../CardTypes"; +import { useGame } from "@/app/_contexts/Game.context"; +import { s3CardImageURL } from "@/app/_utils/s3Utils"; + +interface ILeaderCardProps { + isLobbyView?: boolean; + title?: string; + card: ICardData; +} + +const LeaderCard: React.FC = ({ isLobbyView = false, title, card }) => { + const { sendGameMessage } = useGame(); + + const cardBorderColor = (card: ICardData) => { + if (!card) return ""; + if (card.selected) return "yellow"; + if (card.selectable) return "limegreen"; + if (card.exhausted) return "gray"; + return "black"; + }; + const cardStyle = { + backgroundColor: "black", + backgroundImage: `url(${s3CardImageURL(card)})`, + backgroundSize: "contain", + backgroundPosition: "center", + width: "10rem", + height: "7.18rem", + textAlign: "center" as const, + color: "white", + display: "flex", + cursor: "pointer", + position: "relative" as const, + border: `2px solid ${cardBorderColor(card)}`, + }; + const cardStyleLobby = card ? { + backgroundColor: "transparent", + backgroundImage: `url(${s3CardImageURL(card)})`, + backgroundSize: "contain", + backgroundPosition: "center", + width: "9.5vw", + height: "13vh", + backgroundRepeat: "no-repeat", + textAlign: "center" as const, + color: "white", + display: "flex", + cursor: "pointer", + position: "relative" as const, + mb: "10px", + } : { + backgroundColor: "#00000040", + backgroundSize: "contain", + backgroundPosition: "center", + width: "9.5vw", + height: "13vh", + backgroundRepeat: "no-repeat", + textAlign: "center" as const, + color: "white", + display: "flex", + cursor: "pointer", + position: "relative" as const, + mb: "10px", + }; + + const damageStyle = { + fontWeight: "600", + fontSize: "2em", + color: "hotpink", + }; + + const titleTypographyStyle = { + fontFamily: "var(--font-barlow), sans-serif", + fontWeight: "600", + fontSize: "1.5em", + marginBottom: isLobbyView ? "10px" : "0.5em", + textAlign: "left" as const, + 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%", + } + + const redBoxStyle = { + position: "absolute" as const, + 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 ( + + {isLobbyView && ( + + {title === undefined ? "Opponent" : title} + + )} + + {isLobbyView ? ( + + ) : ( + { + if (card.selectable) { + sendGameMessage(["cardClicked", card.uuid]); + } + }} + > + + + + {card.damage} + + + + + {title && ( + + + {title} + + + )} + + )} + + ); +}; + +export default LeaderCard; \ No newline at end of file diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx index c5a7921b..48204b2c 100644 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx +++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx @@ -1,68 +1,62 @@ import React from "react"; import Grid from "@mui/material/Grid2"; -import LeaderBaseCard from "../../Cards/LeaderBaseCard/LeaderBaseCard"; +import LeaderCard from "../../Cards/LeaderCard/LeaderCard"; +import BaseCard from "../../Cards/BaseCard/BaseCard"; import { ILeaderBaseProps } from "../LeaderBaseBoardTypes"; import { useGame } from "@/app/_contexts/Game.context"; -import { s3CardImageURL } from "@/app/_utils/s3Utils"; +import {Box} from "@mui/material"; const LeaderBase: React.FC = ({ - player, - isLobbyView = false, - title, -}) => { - + player, + isLobbyView = false, + title, + }) => { const { gameState, connectedPlayer, connectedDeck } = useGame(); - let playerLeader = null - let playerBase = null - if(isLobbyView && connectedDeck){ - playerLeader = connectedDeck.leader[0].card - playerBase = connectedDeck.base[0].card - console.log(playerLeader); - console.log(playerBase); - }else { + + let playerLeader = null; + let playerBase = null; + + if (isLobbyView && connectedDeck) { + playerLeader = connectedDeck.leader[0].card; + playerBase = connectedDeck.base[0].card; + } else { playerLeader = gameState?.players[player].leader; playerBase = gameState?.players[player].base; } + const containerStyle = { height: "100%", width: "100%", justifyContent: "center", + alignItems: "center" }; + const lobbyLeaderBaseContainer = { + display: "flex", + flexDirection: "column", + alignItems: "center", + width: "100%", + } + return ( {isLobbyView ? ( - <> - - - + + + + ) : player === connectedPlayer ? ( <> - - + + ) : ( <> - - + + )} ); }; -export default LeaderBase; +export default LeaderBase; \ No newline at end of file diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx index fa0f09d2..4ed798ee 100644 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx +++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx @@ -16,33 +16,58 @@ const LeaderBaseBoard: React.FC = ({ const containerStyle = { height: "100%", width: "100%", - justifyContent: "space-between", + justifyContent: "space-between" }; const rowStyle = { flexGrow: 1, - width: "100%", + width: "100%" }; return ( - {/* Opponent's row */} - - - - { isLobbyView ? null : } - {/* Player's row */} - - - + {isLobbyView ? ( + // If it's the lobby view, show the player's row first, then the opponent's. + <> + {/* Player's row */} + + + + {/* Opponent's row */} + + + + + ) : ( + // Otherwise (in-game view), show the opponent's row first, then the player’s row, with the CardActionTray in between. + <> + {/* Opponent's row */} + + + + + {/* Player's row */} + + + + + )} ); }; diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx index c1e162f7..964ee5d5 100644 --- a/src/app/_contexts/Game.context.tsx +++ b/src/app/_contexts/Game.context.tsx @@ -48,7 +48,6 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { console.log("Game state received:", gameState); }); newSocket.on("deckData", (deck:any) =>{ - console.log(deck); setDeck(deck); }); From b2640fdc653bceea6c0f3ff0ad2d1aac806aa40b Mon Sep 17 00:00:00 2001 From: Matevz Date: Sun, 15 Dec 2024 18:17:50 +0100 Subject: [PATCH 08/17] #LobbyDesign - Cleaned up the code for PR --- .../_sharedcomponents/Cards/GameCard/GameCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index 1e5b9b95..045a2b2b 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -43,8 +43,8 @@ const GameCard: React.FC = ({ const sideboardList = updatedDeck.sideboard || []; // Helper function to move the card between lists - const moveCard = (sourceList: any[], targetList: any[]) => { - const cardIndex = sourceList.findIndex((c: any) => c.card.id === cardData.id); + const moveCard = (sourceList: IServerCardData[], targetList: IServerCardData[]) => { + const cardIndex = sourceList.findIndex((c: IServerCardData) => c.card.id === cardData.id); if (cardIndex !== -1) { // Decrement one copy from the source card @@ -56,7 +56,7 @@ const GameCard: React.FC = ({ } // Now handle the target list - const existingCardIndex = targetList.findIndex((c: any) => c.card.id === cardData.id); + const existingCardIndex = targetList.findIndex((c: IServerCardData) => c.card.id === cardData.id); if (existingCardIndex !== -1) { // If the card already exists in the target, just increment its count From 592185bd2dee803b9408c59916c2b1539b72568c Mon Sep 17 00:00:00 2001 From: Matevz Date: Sun, 15 Dec 2024 18:18:38 +0100 Subject: [PATCH 09/17] #LobbyDesign - Cleaned up the code for PR --- src/app/_components/Lobby/SetUp/SetUp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index 9489d197..c95d21b8 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -42,7 +42,7 @@ const SetUp: React.FC = ({ }); if (!response.ok) { - throw new Error("Failed to create game"); + throw new Error("Failed to submit deck"); } sendMessage("startGame"); From 1c953bb65f882730122d7b075670670e8b55260f Mon Sep 17 00:00:00 2001 From: Matevz Date: Sun, 15 Dec 2024 18:25:49 +0100 Subject: [PATCH 10/17] #LobbyDesign - Cleaned up the code for PR --- .../Overlays/ResourcesOverlay/ResourcesOverlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx b/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx index 440a2fe1..d140d987 100644 --- a/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx +++ b/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx @@ -50,7 +50,7 @@ const ResourcesOverlay: React.FC = ({ Your Resources - + Date: Tue, 17 Dec 2024 17:14:40 +0100 Subject: [PATCH 11/17] #LobbyDesign - Cleaned up code for PR resolved some comments --- .../_components/Gameboard/GameboardTypes.ts | 5 - .../ResourcesOverlay/ResourcesOverlay.tsx | 22 +++- src/app/_components/Lobby/Deck/Deck.tsx | 40 ++++++- src/app/_components/Lobby/SetUp/SetUp.tsx | 33 ++---- .../_sharedcomponents/CardArea/CardArea.tsx | 31 ------ .../_sharedcomponents/Cards/CardTypes.ts | 7 +- .../Cards/GameCard/GameCard.tsx | 101 ++++++------------ src/app/_contexts/Game.context.tsx | 12 +-- 8 files changed, 100 insertions(+), 151 deletions(-) delete mode 100644 src/app/_components/_sharedcomponents/CardArea/CardArea.tsx diff --git a/src/app/_components/Gameboard/GameboardTypes.ts b/src/app/_components/Gameboard/GameboardTypes.ts index fae6e3b8..eda81afe 100644 --- a/src/app/_components/Gameboard/GameboardTypes.ts +++ b/src/app/_components/Gameboard/GameboardTypes.ts @@ -55,11 +55,6 @@ export interface IBasicPromptProps { handleBasicPromptToggle: () => void; } -export interface ICardAreaProps { - cards: ICardData[]; - pile: "Deck" | "Sideboard" | null; -} - export interface IUnitsBoardProps { sidebarOpen: boolean; arena: string; diff --git a/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx b/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx index d140d987..b1907ac9 100644 --- a/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx +++ b/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx @@ -10,9 +10,10 @@ import { IconButton, } from "@mui/material"; import { Close } from "@mui/icons-material"; -import CardArea from "../../../../_sharedcomponents/CardArea/CardArea"; +import { ICardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes"; import { IResourcesOverlayProps } from "@/app/_components/Gameboard/GameboardTypes"; import { useGame } from "@/app/_contexts/Game.context"; +import GameCard from "@/app/_components/_sharedcomponents/Cards/GameCard/GameCard"; const ResourcesOverlay: React.FC = ({ isModalOpen, @@ -20,7 +21,14 @@ const ResourcesOverlay: React.FC = ({ }) => { const { gameState, connectedPlayer } = useGame(); - + const mainContainerStyle = { + display: "flex", + flexWrap: "wrap", + gap: "1em", + p: "1em", + justifyContent: "center", + textWrap: "wrap", + }; return ( = ({ Your Resources - - + + {gameState.players[connectedPlayer].cardPiles["resources"].map((card: ICardData) => ( + + ))} + { // Use the custom hook with horizontal or vertical scrolling as required @@ -98,7 +99,15 @@ const Deck: React.FC = () => { }, transition: "scrollbar-color 0.3s ease-in-out", }; - const { connectedDeck } = useGame(); + const mainContainerStyle = { + display: "flex", + flexWrap: "wrap", + gap: "1em", + p: "1em", + justifyContent: "center", + textWrap: "wrap", + }; + const { connectedDeck, updateDeck } = useGame(); const newDeck = connectedDeck?.deckCards ?? []; const sideBoard = connectedDeck?.sideboard ?? []; // Calculate the total counts @@ -111,6 +120,7 @@ const Deck: React.FC = () => { (sum: number, item: { count: number; }) => sum + (item.count || 0), 0 ) ?? 0; + return ( @@ -130,7 +140,17 @@ const Deck: React.FC = () => { onTouchEnd={handleTouchEnd} sx={scrollableBoxStyle} > - + + {newDeck.map((card:IServerCardData) => ( + updateDeck(['Deck', card.card.id])} + /> + ))} + {sideBoard?.length > 0 && ( <> @@ -145,7 +165,17 @@ const Deck: React.FC = () => { ref={containerRef} sx={scrollableBoxStyleSideboard} > - + + {sideBoard.map((card:IServerCardData) => ( + updateDeck(['SideBoard', card.card.uuid])} + /> + ))} + )} @@ -154,4 +184,4 @@ const Deck: React.FC = () => { ); }; -export default Deck; +export default Deck; \ No newline at end of file diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx index c95d21b8..cbdf0cb0 100644 --- a/src/app/_components/Lobby/SetUp/SetUp.tsx +++ b/src/app/_components/Lobby/SetUp/SetUp.tsx @@ -23,38 +23,17 @@ const SetUp: React.FC = ({ const { sendMessage } = useGame(); const router = useRouter(); const searchParams = useSearchParams(); - const { connectedPlayer, connectedDeck } = useGame(); // Extract the player from the URL query params const player = searchParams.get("player"); const handleStartGame = async () => { - try { - const payload = { - user: connectedPlayer, - deck: connectedDeck - }; - const response = await fetch("http://localhost:9500/api/submit-deck", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(payload), - }); - - if (!response.ok) { - throw new Error("Failed to submit deck"); - } - - sendMessage("startGame"); - if (player) { - router.push("/GameBoard?player=" + player); - } else { - router.push("/GameBoard"); - } - - } catch (error) { - console.error(error); + sendMessage("startGame"); + if (player) { + router.push("/GameBoard?player=" + player); + } else { + router.push("/GameBoard"); } + }; //------------------------STYLES------------------------// diff --git a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx b/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx deleted file mode 100644 index 92d60d9b..00000000 --- a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import { Box } from "@mui/material"; -import GameCard from "../Cards/GameCard/GameCard"; -import { ICardAreaProps } from "@/app/_components/Gameboard/GameboardTypes"; - -const CardArea: React.FC = ({ cards, pile }) => { - //------------------------STYLES------------------------// - const mainContainerStyle = { - display: "flex", - flexWrap: "wrap", - gap: "1em", - p: "1em", - justifyContent: "center", - textWrap: "wrap", - }; - return ( - - {cards.map((card) => ( - - ))} - - ); -}; - -export default CardArea; diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts index b168b35a..e8de942a 100644 --- a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts +++ b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts @@ -28,10 +28,9 @@ export interface IServerCardData { } export interface IGameCardProps { card: ICardData | IServerCardData; - size?: "standard" | "square"; - options: string[]; - location: "lobby" | "gameBoard"; - pile: "Deck" | "Sideboard" | null; + size?: "standard" | "square" | "lobby"; + onClick?: () => void; + options?: string[]; } export interface ILeaderBaseCardProps { diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index 045a2b2b..91e3e5a3 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -18,17 +18,25 @@ const isICardData = (card: ICardData | IServerCardData): card is ICardData => { const GameCard: React.FC = ({ card, size = "standard", - location = "gameBoard", - pile, + onClick, options, }) => { // const isLobbyView = path === "/lobby"; - const isLobbyView = false; const isFaceUp = true; + // Determine whether card is ICardData or IServerCardData const cardData = isICardData(card) ? card : card.card; const cardCounter = !isICardData(card) ? card.count : 0; - const { sendGameMessage, connectedDeck, setConnectedDeck } = useGame(); + const { sendGameMessage } = useGame(); + + // default on click + const defaultClickFunction = () => { + if (cardData.selectable) { + sendGameMessage(["cardClicked", cardData.uuid]); + } + }; + + const handleClick = onClick ?? defaultClickFunction; const cardBorderColor = (card: ICardData) => { if (card.selected) return "yellow"; if (card.selectable) return "limegreen"; @@ -36,67 +44,27 @@ const GameCard: React.FC = ({ return ""; } - // handle deck movement - const handleSwitch = () => { - const updatedDeck = {...connectedDeck}; - const deckList = updatedDeck.deckCards || []; - const sideboardList = updatedDeck.sideboard || []; - - // Helper function to move the card between lists - const moveCard = (sourceList: IServerCardData[], targetList: IServerCardData[]) => { - const cardIndex = sourceList.findIndex((c: IServerCardData) => c.card.id === cardData.id); - - if (cardIndex !== -1) { - // Decrement one copy from the source card - sourceList[cardIndex].count -= 1; - - // If count drops to zero, remove the card entirely from source - if (sourceList[cardIndex].count === 0) { - sourceList.splice(cardIndex, 1); - } - - // Now handle the target list - const existingCardIndex = targetList.findIndex((c: IServerCardData) => c.card.id === cardData.id); - - if (existingCardIndex !== -1) { - // If the card already exists in the target, just increment its count - targetList[existingCardIndex].count += 1; - } else { - // If the card doesn't exist in the target, add it with count = 1 - targetList.push({ count: 1, card: { ...cardData } }); - } - } - }; - // Check if the card is in the deck or sideboard - if (pile === 'Deck') { - // Move from deck to sideboard - moveCard(deckList, sideboardList); - } else { - // Move from sideboard to deck - moveCard(sideboardList, deckList); - } - - // Update the connectedDeck state - setConnectedDeck(updatedDeck); - } - - const styles = { cardStyles: { borderRadius: ".38em", - height: size === "standard" ? "10rem" : "8rem", - width: size === "standard" ? "7.18rem" : "8rem", - }, - cardStylesLobby: { - borderRadius: ".38em", - height: "18vh", - width: "6.7vw", - minWidth: "101px", - minHeight: "151px", - overflow: "hidden", - cursor: "pointer", - backgroundColor: "transparent", + ...(size === "lobby" + ? { + height: "18vh", + width: "6.7vw", + minWidth: "101px", + minHeight: "151px", + overflow: "hidden", + cursor: "pointer", + backgroundColor: "transparent", + } + : { + // For "standard" or other sizes: + height: size === "standard" ? "10rem" : "8rem", + width: size === "standard" ? "7.18rem" : "8rem", + } + ), }, + cardContentStyle: { width: "100%", height: "100%", @@ -139,13 +107,8 @@ const GameCard: React.FC = ({ } } return ( - { - console.log("Hello world") - if (cardData.selectable) { - sendGameMessage(["cardClicked", cardData.uuid]); - } - }} + {isFaceUp ? ( @@ -181,4 +144,4 @@ const GameCard: React.FC = ({ ); }; -export default GameCard; +export default GameCard; \ No newline at end of file diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx index 964ee5d5..967b243b 100644 --- a/src/app/_contexts/Game.context.tsx +++ b/src/app/_contexts/Game.context.tsx @@ -17,7 +17,7 @@ interface IGameContextType { getOpponent: (player: string) => string; connectedPlayer: string; connectedDeck: any, - setConnectedDeck: (deck: any) => void; + updateDeck: (args: any[]) => void; } const GameContext = createContext(undefined); @@ -68,6 +68,10 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { socket?.emit("game", ...args); }; + const updateDeck = (args: any[]) => { + console.log("move card message", args); + socket?.emit("updateDeck", ...args); + } const getOpponent = (player: string) => { if (!gameState) return ""; @@ -75,10 +79,6 @@ export const GameProvider = ({ children }: { children: ReactNode }) => { return playerNames.find((name) => name !== player) || ""; }; - const setConnectedDeck = (deck: any) => { - setDeck(deck); - } - return ( { connectedPlayer, connectedDeck, getOpponent, - setConnectedDeck, + updateDeck }} > {children} From 76727f81c2b4e46f7ab99ce137e6b940fe610e63 Mon Sep 17 00:00:00 2001 From: Matevz Date: Tue, 17 Dec 2024 18:47:29 +0100 Subject: [PATCH 12/17] #LobbyDesign - Cleaned up the code for PR --- src/app/_components/Gameboard/Board/Board.tsx | 59 +++++++++++- .../_subcomponents/PlayerTray/PlayerHand.tsx | 2 +- .../Gameboard/_subcomponents/UnitsBoard.tsx | 4 +- src/app/_components/Lobby/Players/Players.tsx | 57 ++++++++++- .../Cards/BaseCard/BaseCard.tsx | 94 ------------------- .../LeaderBaseCard.tsx} | 50 ++++++---- .../LeaderBaseBoard/LeaderBase/LeaderBase.tsx | 62 ------------ .../LeaderBaseBoard/LeaderBaseBoard.tsx | 75 --------------- .../LeaderBaseBoard/LeaderBaseBoardTypes.ts | 9 -- 9 files changed, 144 insertions(+), 268 deletions(-) delete mode 100644 src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx rename src/app/_components/_sharedcomponents/Cards/{LeaderCard/LeaderCard.tsx => LeaderBaseCard/LeaderBaseCard.tsx} (76%) delete mode 100644 src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx delete mode 100644 src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx delete mode 100644 src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx index f0d76e37..90f65c64 100644 --- a/src/app/_components/Gameboard/Board/Board.tsx +++ b/src/app/_components/Gameboard/Board/Board.tsx @@ -1,12 +1,25 @@ import React from "react"; import Grid from "@mui/material/Grid2"; import UnitsBoard from "../_subcomponents/UnitsBoard"; -import LeaderBaseBoard from "../../_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard"; 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"; const Board: React.FC = ({ sidebarOpen, }) => { + const { gameState, connectedPlayer } = useGame(); + + const titleOpponent = + connectedPlayer === "ThisIsTheWay" ? "Order66" : "ThisIsTheWay"; + + const playerLeader = gameState?.players[connectedPlayer].leader; + const playerBase = gameState?.players[connectedPlayer].base; + const opponentLeader = gameState?.players[titleOpponent].leader; + const opponentBase = gameState?.players[titleOpponent].base; + + //----------------Styles----------------// const leftColumnStyle = { justifyContent: "flex-end", @@ -17,7 +30,22 @@ const Board: React.FC = ({ justifyContent: "flex-start", alignItems: "center", }; - + const containerStyle = { + height: "100%", + width: "100%", + justifyContent: "center", + alignItems: "center" + }; + const lobbyLeaderBaseContainer = { + display: "flex", + flexDirection: "column", + alignItems: "center", + width: "100%", + } + const rowStyle = { + flexGrow: 1, + width: "100%" + }; return ( @@ -26,7 +54,32 @@ const Board: React.FC = ({ /> - + + + + + + + + + + + + + + + + = ({ {cards.map((card) => ( + card={card} options={[]}/> ))} diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx index 641ca871..753c7552 100644 --- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx +++ b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx @@ -55,7 +55,7 @@ const UnitsBoard: React.FC = ({ {opponentUnits.map((card: ICardData) => ( - + ))} @@ -64,7 +64,7 @@ const UnitsBoard: React.FC = ({ {playerUnits.map((card: ICardData) => ( - + ))} diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx index 4411930f..1e1baa45 100644 --- a/src/app/_components/Lobby/Players/Players.tsx +++ b/src/app/_components/Lobby/Players/Players.tsx @@ -1,11 +1,25 @@ // Players.tsx import React from "react"; import { Card, Box, Typography } from "@mui/material"; -import LeaderBaseBoard from "../../_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard"; +import Grid from "@mui/material/Grid2"; import { IPlayersProps } from "../LobbyTypes"; +import LeaderBaseCard from "@/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard"; +import {useGame} from "@/app/_contexts/Game.context"; const Players: React.FC = ({ isLobbyView }) => { //------------------------STYLES------------------------// + const { connectedPlayer, connectedDeck } = useGame(); + + const titleOpponent = + connectedPlayer === "ThisIsTheWay" ? "Order66" : "ThisIsTheWay"; + let playerLeader = null; + let playerBase = null; + + // we get the connected deck + if (connectedDeck) { + playerLeader = connectedDeck.leader[0].card; + playerBase = connectedDeck.base[0].card; + } const cardStyle = { borderRadius: "1.1em", @@ -46,11 +60,50 @@ const Players: React.FC = ({ isLobbyView }) => { mb: "0px" }; + const lobbyLeaderBaseContainer = { + display: "flex", + flexDirection: "column", + alignItems: "center", + width: "100%", + } + const containerStyle = { + height: "100%", + width: "100%", + justifyContent: "center", + alignItems: "center" + }; + const rowStyle = { + flexGrow: 1, + width: "100%" + }; return ( Players - + + + + + + + + + + + + + + ); diff --git a/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx deleted file mode 100644 index 5c209515..00000000 --- a/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from "react"; -import { Card, CardContent, Typography, Box } from "@mui/material"; -import { ICardData } from "../CardTypes"; -import { useGame } from "@/app/_contexts/Game.context"; -import { s3CardImageURL } from "@/app/_utils/s3Utils"; - -interface IBaseCardProps { - isLobbyView?: boolean; - card: ICardData; -} - -const BaseCard: React.FC = ({ isLobbyView = false, card }) => { - const { sendGameMessage } = useGame(); - - const cardBorderColor = (card: ICardData) => { - if (!card) return ""; - if (card.selected) return "yellow"; - if (card.selectable) return "limegreen"; - if (card.exhausted) return "gray"; - return "black"; - }; - const cardStyle = { - backgroundColor: "black", - backgroundImage: `url(${s3CardImageURL(card)})`, - backgroundSize: "contain", - backgroundPosition: "center", - width: "10rem", - height: "7.18rem", - textAlign: "center" as const, - color: "white", - display: "flex", - cursor: "pointer", - position: "relative" as const, - border: `2px solid ${cardBorderColor(card)}`, - }; - const cardStyleLobby = card ? { - backgroundColor: "transparent", - backgroundImage: `url(${s3CardImageURL(card)})`, - backgroundSize: "contain", - backgroundPosition: "center", - width: "9.5vw", - height: "13vh", - backgroundRepeat: "no-repeat", - textAlign: "center" as const, - color: "white", - display: "flex", - cursor: "pointer", - position: "relative" as const, - } : { - backgroundColor: "#00000040", - backgroundSize: "contain", - backgroundPosition: "center", - width: "9.5vw", - height: "13vh", - backgroundRepeat: "no-repeat", - textAlign: "center" as const, - color: "white", - display: "flex", - cursor: "pointer", - position: "relative" as const, - }; - const damageStyle = { - fontWeight: "600", - fontSize: "2em", - color: "hotpink", - }; - - return ( - - {isLobbyView ? ( - - ) : ( - { - if (card.selectable) { - sendGameMessage(["cardClicked", card.uuid]); - } - }} - > - - - - {card.damage} - - - - - )} - - ); -}; - -export default BaseCard; \ No newline at end of file diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderCard/LeaderCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx similarity index 76% rename from src/app/_components/_sharedcomponents/Cards/LeaderCard/LeaderCard.tsx rename to src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx index 567e2876..98cfb5fe 100644 --- a/src/app/_components/_sharedcomponents/Cards/LeaderCard/LeaderCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx @@ -1,18 +1,23 @@ import React from "react"; -import { Card, CardContent, Typography, Box } from "@mui/material"; +import { + Card, + CardActionArea, + CardContent, + Typography, + Box, +} from "@mui/material"; +import { ILeaderBaseCardProps } from "../CardTypes"; import { ICardData } from "../CardTypes"; import { useGame } from "@/app/_contexts/Game.context"; import { s3CardImageURL } from "@/app/_utils/s3Utils"; -interface ILeaderCardProps { - isLobbyView?: boolean; - title?: string; - card: ICardData; -} - -const LeaderCard: React.FC = ({ isLobbyView = false, title, card }) => { - const { sendGameMessage } = useGame(); +const LeaderBaseCard: React.FC = ({ + variant, + isLobbyView = false, + title, + card + }) => { const cardBorderColor = (card: ICardData) => { if (!card) return ""; if (card.selected) return "yellow"; @@ -20,6 +25,7 @@ const LeaderCard: React.FC = ({ isLobbyView = false, title, ca if (card.exhausted) return "gray"; return "black"; }; + const cardStyle = { backgroundColor: "black", backgroundImage: `url(${s3CardImageURL(card)})`, @@ -27,11 +33,12 @@ const LeaderCard: React.FC = ({ isLobbyView = false, title, ca backgroundPosition: "center", width: "10rem", height: "7.18rem", - textAlign: "center" as const, + textAlign: "center", color: "white", display: "flex", cursor: "pointer", - position: "relative" as const, + m: "0em", + position: "relative", // Needed for positioning the red box border: `2px solid ${cardBorderColor(card)}`, }; const cardStyleLobby = card ? { @@ -73,8 +80,8 @@ const LeaderCard: React.FC = ({ isLobbyView = false, title, ca fontFamily: "var(--font-barlow), sans-serif", fontWeight: "600", fontSize: "1.5em", - marginBottom: isLobbyView ? "10px" : "0.5em", - textAlign: "left" as const, + marginBottom: isLobbyView ? 0 : "0.5em", + textAlign: "left", color: "white", }; const titleTypographyStyleOpponent = { @@ -87,8 +94,9 @@ const LeaderCard: React.FC = ({ isLobbyView = false, title, ca opacity: "15%", } + //the title of the deck i believe const redBoxStyle = { - position: "absolute" as const, + position: "absolute", bottom: "10px", left: "50%", transform: "translateX(-50%)", @@ -104,9 +112,12 @@ const LeaderCard: React.FC = ({ isLobbyView = false, title, ca fontSize: "1em", }; + const { sendGameMessage } = useGame(); + return ( - {isLobbyView && ( + {/* Show title above the card if in lobby view and variant is leader */} + {variant === "leader" && isLobbyView && title && ( = ({ isLobbyView = false, title, ca > - - {card.damage} - + {card.damage} - {title && ( + {/* Show title inside a red box at the bottom if not in lobby view and variant is leader */} + {variant === "leader" && !isLobbyView && title && ( {title} @@ -147,4 +157,4 @@ const LeaderCard: React.FC = ({ isLobbyView = false, title, ca ); }; -export default LeaderCard; \ No newline at end of file +export default LeaderBaseCard; \ No newline at end of file diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx deleted file mode 100644 index 48204b2c..00000000 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from "react"; -import Grid from "@mui/material/Grid2"; -import LeaderCard from "../../Cards/LeaderCard/LeaderCard"; -import BaseCard from "../../Cards/BaseCard/BaseCard"; -import { ILeaderBaseProps } from "../LeaderBaseBoardTypes"; -import { useGame } from "@/app/_contexts/Game.context"; -import {Box} from "@mui/material"; - -const LeaderBase: React.FC = ({ - player, - isLobbyView = false, - title, - }) => { - const { gameState, connectedPlayer, connectedDeck } = useGame(); - - let playerLeader = null; - let playerBase = null; - - if (isLobbyView && connectedDeck) { - playerLeader = connectedDeck.leader[0].card; - playerBase = connectedDeck.base[0].card; - } else { - playerLeader = gameState?.players[player].leader; - playerBase = gameState?.players[player].base; - } - - const containerStyle = { - height: "100%", - width: "100%", - justifyContent: "center", - alignItems: "center" - }; - const lobbyLeaderBaseContainer = { - display: "flex", - flexDirection: "column", - alignItems: "center", - width: "100%", - } - - return ( - - {isLobbyView ? ( - - - - - ) : player === connectedPlayer ? ( - <> - - - - ) : ( - <> - - - - )} - - ); -}; - -export default LeaderBase; \ No newline at end of file diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx deleted file mode 100644 index 4ed798ee..00000000 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx +++ /dev/null @@ -1,75 +0,0 @@ -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 { ILeaderBaseBoardProps } from "./LeaderBaseBoardTypes"; - - -const LeaderBaseBoard: React.FC = ({ - isLobbyView, -}) => { - const { connectedPlayer, getOpponent } = useGame(); - const titleOpponent = - connectedPlayer === "ThisIsTheWay" ? "Order66" : "ThisIsTheWay"; - //------------------------STYLES------------------------// - const containerStyle = { - height: "100%", - width: "100%", - justifyContent: "space-between" - }; - - const rowStyle = { - flexGrow: 1, - width: "100%" - }; - - return ( - - {isLobbyView ? ( - // If it's the lobby view, show the player's row first, then the opponent's. - <> - {/* Player's row */} - - - - {/* Opponent's row */} - - - - - ) : ( - // Otherwise (in-game view), show the opponent's row first, then the player’s row, with the CardActionTray in between. - <> - {/* Opponent's row */} - - - - - {/* Player's row */} - - - - - )} - - ); -}; - -export default LeaderBaseBoard; diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts deleted file mode 100644 index 2b3c55a1..00000000 --- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface ILeaderBaseBoardProps { - isLobbyView?: boolean; -} - -export interface ILeaderBaseProps { - player: string; - isLobbyView?: boolean; - title?: string; -} From 82d9c8cdfd3c31cb85a382b55c83b37036f7bccb Mon Sep 17 00:00:00 2001 From: Matevz Date: Tue, 17 Dec 2024 18:54:08 +0100 Subject: [PATCH 13/17] #LobbyDesign - Cleaned last comment for PR --- .../Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx | 2 +- src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx | 4 ++-- src/app/_components/Lobby/Deck/Deck.tsx | 6 ++---- src/app/_components/_sharedcomponents/Cards/CardTypes.ts | 4 ++-- .../_sharedcomponents/Cards/GameCard/GameCard.tsx | 6 +++--- 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx index 9cf8b992..164dcb1f 100644 --- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx +++ b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx @@ -60,7 +60,7 @@ const PlayerHand: React.FC = ({ {cards.map((card) => ( + card={card}/> ))} diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx index 753c7552..fcb56169 100644 --- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx +++ b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx @@ -55,7 +55,7 @@ const UnitsBoard: React.FC = ({ {opponentUnits.map((card: ICardData) => ( - + ))} @@ -64,7 +64,7 @@ const UnitsBoard: React.FC = ({ {playerUnits.map((card: ICardData) => ( - + ))} diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index b8f846b6..bfc7c501 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -145,8 +145,7 @@ const Deck: React.FC = () => { updateDeck(['Deck', card.card.id])} /> ))} @@ -170,8 +169,7 @@ const Deck: React.FC = () => { updateDeck(['SideBoard', card.card.uuid])} /> ))} diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts index e8de942a..e54a813f 100644 --- a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts +++ b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts @@ -28,9 +28,9 @@ export interface IServerCardData { } export interface IGameCardProps { card: ICardData | IServerCardData; - size?: "standard" | "square" | "lobby"; + size?: "standard" | "square"; onClick?: () => void; - options?: string[]; + variant?: "lobby" | "gameboard"; } export interface ILeaderBaseCardProps { diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index 91e3e5a3..b6cc1d9e 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx @@ -19,7 +19,7 @@ const GameCard: React.FC = ({ card, size = "standard", onClick, - options, + variant, }) => { // const isLobbyView = path === "/lobby"; const isFaceUp = true; @@ -47,7 +47,7 @@ const GameCard: React.FC = ({ const styles = { cardStyles: { borderRadius: ".38em", - ...(size === "lobby" + ...(variant === "lobby" ? { height: "18vh", width: "6.7vw", @@ -114,7 +114,7 @@ const GameCard: React.FC = ({ - {options?.includes("counter") && ( + {variant === "lobby" && ( {cardCounter} From 157ae317e5ac7a999526d09aa7d61109fe7ef616 Mon Sep 17 00:00:00 2001 From: Matevz Date: Tue, 17 Dec 2024 18:59:37 +0100 Subject: [PATCH 14/17] #LobbyDesign - Cleaned a bug. --- src/app/_components/Gameboard/Board/Board.tsx | 2 ++ src/app/_components/Lobby/Deck/Deck.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx index 90f65c64..2de0780f 100644 --- a/src/app/_components/Gameboard/Board/Board.tsx +++ b/src/app/_components/Gameboard/Board/Board.tsx @@ -5,6 +5,7 @@ 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 CardActionTray from "@/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray"; const Board: React.FC = ({ sidebarOpen, @@ -67,6 +68,7 @@ const Board: React.FC = ({ + diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index bfc7c501..32665ca1 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -170,7 +170,7 @@ const Deck: React.FC = () => { key={card.card.uuid} card={card} variant={'lobby'} - onClick={() => updateDeck(['SideBoard', card.card.uuid])} + onClick={() => updateDeck(['SideBoard', card.card.id])} /> ))} From b2721d656ccdeef40733843243c1c89fc8907ffd Mon Sep 17 00:00:00 2001 From: Matevz Date: Tue, 17 Dec 2024 20:31:45 +0100 Subject: [PATCH 15/17] #LobbyDesign - Cleaned a bug. --- src/app/_components/Lobby/Deck/Deck.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx index 32665ca1..4bda5010 100644 --- a/src/app/_components/Lobby/Deck/Deck.tsx +++ b/src/app/_components/Lobby/Deck/Deck.tsx @@ -170,7 +170,7 @@ const Deck: React.FC = () => { key={card.card.uuid} card={card} variant={'lobby'} - onClick={() => updateDeck(['SideBoard', card.card.id])} + onClick={() => updateDeck(['Sideboard', card.card.id])} /> ))} From d46b2f7ddfd1437c81ee7b61c808f842070b809e Mon Sep 17 00:00:00 2001 From: Matevz Date: Wed, 18 Dec 2024 14:51:02 +0100 Subject: [PATCH 16/17] #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} + + + )} + ); }; From 6bf7f5a525fc47596b1ac4d47de55baa0307d355 Mon Sep 17 00:00:00 2001 From: Matevz Date: Wed, 18 Dec 2024 14:51:53 +0100 Subject: [PATCH 17/17] #LobbyDesign - Fixed bug --- .../_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx index 51110257..96ebd857 100644 --- a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx @@ -103,7 +103,7 @@ const LeaderBaseCard: React.FC = ({ sx={isLobbyView ? cardStyleLobby : cardStyle} onClick={() => { // Only allow clicking if not lobby view and the card is selectable - if (!disabled) { + if (!disabled && card.selectable) { sendGameMessage(["cardClicked", card.uuid]); } }}