diff --git a/src/layout/components/Card.tsx b/src/layout/components/Card.tsx index 28001ef..4a99fea 100644 --- a/src/layout/components/Card.tsx +++ b/src/layout/components/Card.tsx @@ -1,13 +1,13 @@ import React, {FunctionComponent} from "react"; +import {NoButton} from "./Button"; interface Props { cardString: string; handleClick?: (cardString: string) => void; isHidden?: boolean; - isClickable?: boolean; } -const Card: FunctionComponent = ({cardString, handleClick, isHidden, isClickable}) => { +const Card: FunctionComponent = ({cardString, handleClick, isHidden}) => { const cardType = cardString.split(' ')[0].toLowerCase(); const cardValue = cardString.split(' ')[1].toLowerCase(); @@ -30,9 +30,17 @@ const Card: FunctionComponent = ({cardString, handleClick, isHidden, isCl } } + if (handleClick) { + return ( + + {cardName}/ + + ) + } + return ( -
- {cardName} +
+ {cardName}/
) } diff --git a/src/layout/components/Deck.tsx b/src/layout/components/Deck.tsx index a7419ac..f0fbff9 100644 --- a/src/layout/components/Deck.tsx +++ b/src/layout/components/Deck.tsx @@ -15,12 +15,10 @@ const Deck: FunctionComponent = ({currentCard, actionOnClick}) => { return (
-

-

- +
); diff --git a/src/layout/components/Game.tsx b/src/layout/components/Game.tsx index 206dcb1..d03f14b 100644 --- a/src/layout/components/Game.tsx +++ b/src/layout/components/Game.tsx @@ -2,11 +2,11 @@ import React, {FunctionComponent} from "react"; import Deck from "./Deck"; import Hand from "./Hand"; import {GHButton} from "./Button"; -import {GameAction, Player} from "../pages/Room"; +import {Player, SocketMessage} from "../pages/Room"; export interface GameState { Me: Player; - CurrentState: string; + MyState: string; Hand: string[]; CurrentCard: string; CurrentPlayer: Player; @@ -15,7 +15,7 @@ export interface GameState { interface Props { gameState: GameState - handleGameAction: (action: GameAction) => void; + handleGameAction: (message: SocketMessage) => void; } const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS']; @@ -23,15 +23,15 @@ const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS']; const Game: FunctionComponent = ({gameState, handleGameAction}) => { const handleChoice = (choice: string) => { - handleGameAction({Action: 'CHOOSE', Data: choice}); + handleGameAction({Type: 'CHOOSE', Data: choice}); } const handleDraw = () => { - handleGameAction({Action: 'DRAW', Data: ""}); + handleGameAction({Type: 'DRAW', Data: ""}); } const handleCardSend = (cardString: string) => { - handleGameAction({Action: "PLAYCARD", Data: JSON.stringify({ + handleGameAction({Type: "PLAY", Data: JSON.stringify({ CardType: cardString.split(' ')[0], CardValue: cardString.split(' ')[1] })}) @@ -70,7 +70,7 @@ const Game: FunctionComponent = ({gameState, handleGameAction}) => { } { - gameState.CurrentState === 'CHOOSE' && + gameState.MyState === 'CHOOSE' && CHOICES.map(choice => handleChoice(choice)}>{choice}) }
diff --git a/src/layout/components/Hand.tsx b/src/layout/components/Hand.tsx index 32c05a6..d9a8869 100644 --- a/src/layout/components/Hand.tsx +++ b/src/layout/components/Hand.tsx @@ -3,25 +3,24 @@ import Card from "./Card"; interface Props { hand: string[]; - actionOnClick: (cardString: string) => void; + actionOnClick?: (cardString: string) => void; isHidden?: boolean; } const Hand: FunctionComponent = ({hand, actionOnClick, isHidden}) => { - const isMyHand = !isHidden; - return ( -
+
    { hand.map((card, index) => { return ( - +
  • + +
    • ) }) } -
+ ) } diff --git a/src/layout/pages/MainLobby.tsx b/src/layout/pages/MainLobby.tsx index 006e532..2bd1331 100644 --- a/src/layout/pages/MainLobby.tsx +++ b/src/layout/pages/MainLobby.tsx @@ -37,11 +37,11 @@ const MainLobby = () => {

Host Game

- + navigateTo('/rooms')}>

Join Game

- +
diff --git a/src/layout/pages/Room.tsx b/src/layout/pages/Room.tsx index 7b4a7f3..7eeb651 100644 --- a/src/layout/pages/Room.tsx +++ b/src/layout/pages/Room.tsx @@ -13,14 +13,13 @@ export interface Player { CardsLeft: number; } -interface SocketMessage { +export interface SocketMessage { Type: string; - Payload: any; + Data: string; } -export interface GameAction { - Action: string; - Data: string; +interface JoinLeaveMessage { + ChatMessage: string; } const Room = () => { @@ -35,7 +34,6 @@ const Room = () => { const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`; const [gameState, setGameState] = React.useState(undefined); - const [lobbyState, setLobbyState] = React.useState(""); const [winner, setWinner] = React.useState(undefined); const chatRef = React.useRef(null); @@ -59,15 +57,11 @@ const Room = () => { onOpen: () => { console.log('WebSocket connection established.'); }, - onMessage: (event) => { - const data = JSON.parse(event.data); - const payload = JSON.parse(data.Payload); + onMessage: (messageEvent) => { + const data: SocketMessage = JSON.parse(messageEvent.data); + const payload = JSON.parse(data.Data); switch (data.Type) { - case 'LOBBY': - setLobbyState(data.Type); - break; case 'GAME': - setLobbyState(data.Type); setGameState(payload); break; case 'CHAT': @@ -77,6 +71,12 @@ const Room = () => { setWinner(payload.Name) setGameState(undefined); break; + case "JOIN": + addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage}); + break; + case "LEAVE": + addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage}); + break; default: console.log('Unknown message type:', data.Type); } @@ -91,18 +91,14 @@ const Room = () => { websocket.sendMessage(JSON.stringify(message)); } - const handleGameAction = (action: GameAction) => { - handleSend({Type: "GAME", Payload: JSON.stringify(action)}); - } - const handleLobbyAction = (action: string) => { - handleSend({Type: "LOBBY", Payload: JSON.stringify(action)}); + handleSend({Type: "LOBBY", Data: JSON.stringify(action)}); } const handleChatMessage = (chatMessage: string) => { handleSend({ Type: "CHAT", - Payload: chatMessage + Data: chatMessage }); } @@ -130,8 +126,8 @@ const Room = () => {
{ gameState ? - - : lobbyState === 'LOBBY' && + + : }
diff --git a/src/styles/layout/components/card.scss b/src/styles/layout/components/card.scss index f2e8439..d96a750 100644 --- a/src/styles/layout/components/card.scss +++ b/src/styles/layout/components/card.scss @@ -2,10 +2,6 @@ width: 100px; min-width: 100px; - &-clickable { - cursor: pointer; - } - &__texture { width: 100%; height: 100%; diff --git a/src/styles/layout/components/hand.scss b/src/styles/layout/components/hand.scss index 1651805..a68aaa1 100644 --- a/src/styles/layout/components/hand.scss +++ b/src/styles/layout/components/hand.scss @@ -5,4 +5,8 @@ overflow-x: scroll; padding: 0.5rem; gap: 0.5rem; + + &__item { + list-style: none; + } }