From 20cd5d7cbdaf33d75b40141cfe06d081fefd9848 Mon Sep 17 00:00:00 2001 From: matevz Date: Tue, 17 Dec 2024 17:14:40 +0100 Subject: [PATCH] #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}