diff --git a/src/assets/cards/back.png b/src/assets/cards/back.png new file mode 100644 index 0000000..7b5a40a Binary files /dev/null and b/src/assets/cards/back.png differ diff --git a/src/assets/cards/clubs_ace.png b/src/assets/cards/clubs_ace.png new file mode 100644 index 0000000..914f2df Binary files /dev/null and b/src/assets/cards/clubs_ace.png differ diff --git a/src/assets/cards/clubs_eight.png b/src/assets/cards/clubs_eight.png new file mode 100644 index 0000000..4fb1f3a Binary files /dev/null and b/src/assets/cards/clubs_eight.png differ diff --git a/src/assets/cards/clubs_five.png b/src/assets/cards/clubs_five.png new file mode 100644 index 0000000..2a83f3b Binary files /dev/null and b/src/assets/cards/clubs_five.png differ diff --git a/src/assets/cards/clubs_four.png b/src/assets/cards/clubs_four.png new file mode 100644 index 0000000..ed95591 Binary files /dev/null and b/src/assets/cards/clubs_four.png differ diff --git a/src/assets/cards/clubs_jack.png b/src/assets/cards/clubs_jack.png new file mode 100644 index 0000000..13a99f2 Binary files /dev/null and b/src/assets/cards/clubs_jack.png differ diff --git a/src/assets/cards/clubs_king.png b/src/assets/cards/clubs_king.png new file mode 100644 index 0000000..e91b8e6 Binary files /dev/null and b/src/assets/cards/clubs_king.png differ diff --git a/src/assets/cards/clubs_nine.png b/src/assets/cards/clubs_nine.png new file mode 100644 index 0000000..97f8c9a Binary files /dev/null and b/src/assets/cards/clubs_nine.png differ diff --git a/src/assets/cards/clubs_queen.png b/src/assets/cards/clubs_queen.png new file mode 100644 index 0000000..e20ed19 Binary files /dev/null and b/src/assets/cards/clubs_queen.png differ diff --git a/src/assets/cards/clubs_seven.png b/src/assets/cards/clubs_seven.png new file mode 100644 index 0000000..0e512e0 Binary files /dev/null and b/src/assets/cards/clubs_seven.png differ diff --git a/src/assets/cards/clubs_six.png b/src/assets/cards/clubs_six.png new file mode 100644 index 0000000..0501a03 Binary files /dev/null and b/src/assets/cards/clubs_six.png differ diff --git a/src/assets/cards/clubs_ten.png b/src/assets/cards/clubs_ten.png new file mode 100644 index 0000000..3b0f049 Binary files /dev/null and b/src/assets/cards/clubs_ten.png differ diff --git a/src/assets/cards/clubs_three.png b/src/assets/cards/clubs_three.png new file mode 100644 index 0000000..f37ac05 Binary files /dev/null and b/src/assets/cards/clubs_three.png differ diff --git a/src/assets/cards/clubs_two.png b/src/assets/cards/clubs_two.png new file mode 100644 index 0000000..61b3b43 Binary files /dev/null and b/src/assets/cards/clubs_two.png differ diff --git a/src/assets/cards/diamonds_ace.png b/src/assets/cards/diamonds_ace.png new file mode 100644 index 0000000..21f3cf2 Binary files /dev/null and b/src/assets/cards/diamonds_ace.png differ diff --git a/src/assets/cards/diamonds_eight.png b/src/assets/cards/diamonds_eight.png new file mode 100644 index 0000000..c407a6a Binary files /dev/null and b/src/assets/cards/diamonds_eight.png differ diff --git a/src/assets/cards/diamonds_five.png b/src/assets/cards/diamonds_five.png new file mode 100644 index 0000000..e2bb9a8 Binary files /dev/null and b/src/assets/cards/diamonds_five.png differ diff --git a/src/assets/cards/diamonds_four.png b/src/assets/cards/diamonds_four.png new file mode 100644 index 0000000..3fa2f6d Binary files /dev/null and b/src/assets/cards/diamonds_four.png differ diff --git a/src/assets/cards/diamonds_jack.png b/src/assets/cards/diamonds_jack.png new file mode 100644 index 0000000..43210a0 Binary files /dev/null and b/src/assets/cards/diamonds_jack.png differ diff --git a/src/assets/cards/diamonds_king.png b/src/assets/cards/diamonds_king.png new file mode 100644 index 0000000..a45e1ed Binary files /dev/null and b/src/assets/cards/diamonds_king.png differ diff --git a/src/assets/cards/diamonds_nine.png b/src/assets/cards/diamonds_nine.png new file mode 100644 index 0000000..4352f3b Binary files /dev/null and b/src/assets/cards/diamonds_nine.png differ diff --git a/src/assets/cards/diamonds_queen.png b/src/assets/cards/diamonds_queen.png new file mode 100644 index 0000000..3c8f6d3 Binary files /dev/null and b/src/assets/cards/diamonds_queen.png differ diff --git a/src/assets/cards/diamonds_seven.png b/src/assets/cards/diamonds_seven.png new file mode 100644 index 0000000..8929b09 Binary files /dev/null and b/src/assets/cards/diamonds_seven.png differ diff --git a/src/assets/cards/diamonds_six.png b/src/assets/cards/diamonds_six.png new file mode 100644 index 0000000..585286d Binary files /dev/null and b/src/assets/cards/diamonds_six.png differ diff --git a/src/assets/cards/diamonds_ten.png b/src/assets/cards/diamonds_ten.png new file mode 100644 index 0000000..a56cab3 Binary files /dev/null and b/src/assets/cards/diamonds_ten.png differ diff --git a/src/assets/cards/diamonds_three.png b/src/assets/cards/diamonds_three.png new file mode 100644 index 0000000..b341bbc Binary files /dev/null and b/src/assets/cards/diamonds_three.png differ diff --git a/src/assets/cards/diamonds_two.png b/src/assets/cards/diamonds_two.png new file mode 100644 index 0000000..29e3c3c Binary files /dev/null and b/src/assets/cards/diamonds_two.png differ diff --git a/src/assets/cards/hearts_ace.png b/src/assets/cards/hearts_ace.png new file mode 100644 index 0000000..b232a16 Binary files /dev/null and b/src/assets/cards/hearts_ace.png differ diff --git a/src/assets/cards/hearts_eight.png b/src/assets/cards/hearts_eight.png new file mode 100644 index 0000000..ba69c91 Binary files /dev/null and b/src/assets/cards/hearts_eight.png differ diff --git a/src/assets/cards/hearts_five.png b/src/assets/cards/hearts_five.png new file mode 100644 index 0000000..b96ba61 Binary files /dev/null and b/src/assets/cards/hearts_five.png differ diff --git a/src/assets/cards/hearts_four.png b/src/assets/cards/hearts_four.png new file mode 100644 index 0000000..7020ba7 Binary files /dev/null and b/src/assets/cards/hearts_four.png differ diff --git a/src/assets/cards/hearts_jack.png b/src/assets/cards/hearts_jack.png new file mode 100644 index 0000000..28b9004 Binary files /dev/null and b/src/assets/cards/hearts_jack.png differ diff --git a/src/assets/cards/hearts_king.png b/src/assets/cards/hearts_king.png new file mode 100644 index 0000000..014278e Binary files /dev/null and b/src/assets/cards/hearts_king.png differ diff --git a/src/assets/cards/hearts_nine.png b/src/assets/cards/hearts_nine.png new file mode 100644 index 0000000..b0777f5 Binary files /dev/null and b/src/assets/cards/hearts_nine.png differ diff --git a/src/assets/cards/hearts_queen.png b/src/assets/cards/hearts_queen.png new file mode 100644 index 0000000..ef59db6 Binary files /dev/null and b/src/assets/cards/hearts_queen.png differ diff --git a/src/assets/cards/hearts_seven.png b/src/assets/cards/hearts_seven.png new file mode 100644 index 0000000..f243269 Binary files /dev/null and b/src/assets/cards/hearts_seven.png differ diff --git a/src/assets/cards/hearts_six.png b/src/assets/cards/hearts_six.png new file mode 100644 index 0000000..e596c63 Binary files /dev/null and b/src/assets/cards/hearts_six.png differ diff --git a/src/assets/cards/hearts_ten.png b/src/assets/cards/hearts_ten.png new file mode 100644 index 0000000..95697b3 Binary files /dev/null and b/src/assets/cards/hearts_ten.png differ diff --git a/src/assets/cards/hearts_three.png b/src/assets/cards/hearts_three.png new file mode 100644 index 0000000..e2d8e8c Binary files /dev/null and b/src/assets/cards/hearts_three.png differ diff --git a/src/assets/cards/hearts_two.png b/src/assets/cards/hearts_two.png new file mode 100644 index 0000000..84078d6 Binary files /dev/null and b/src/assets/cards/hearts_two.png differ diff --git a/src/assets/cards/joker_black.png b/src/assets/cards/joker_black.png new file mode 100644 index 0000000..166fe74 Binary files /dev/null and b/src/assets/cards/joker_black.png differ diff --git a/src/assets/cards/joker_red.png b/src/assets/cards/joker_red.png new file mode 100644 index 0000000..6732fae Binary files /dev/null and b/src/assets/cards/joker_red.png differ diff --git a/src/assets/cards/spades_ace.png b/src/assets/cards/spades_ace.png new file mode 100644 index 0000000..6fe5b51 Binary files /dev/null and b/src/assets/cards/spades_ace.png differ diff --git a/src/assets/cards/spades_eight.png b/src/assets/cards/spades_eight.png new file mode 100644 index 0000000..7eb7d4a Binary files /dev/null and b/src/assets/cards/spades_eight.png differ diff --git a/src/assets/cards/spades_five.png b/src/assets/cards/spades_five.png new file mode 100644 index 0000000..8e99a75 Binary files /dev/null and b/src/assets/cards/spades_five.png differ diff --git a/src/assets/cards/spades_four.png b/src/assets/cards/spades_four.png new file mode 100644 index 0000000..e9a8d84 Binary files /dev/null and b/src/assets/cards/spades_four.png differ diff --git a/src/assets/cards/spades_jack.png b/src/assets/cards/spades_jack.png new file mode 100644 index 0000000..70f12bf Binary files /dev/null and b/src/assets/cards/spades_jack.png differ diff --git a/src/assets/cards/spades_king.png b/src/assets/cards/spades_king.png new file mode 100644 index 0000000..27377b9 Binary files /dev/null and b/src/assets/cards/spades_king.png differ diff --git a/src/assets/cards/spades_nine.png b/src/assets/cards/spades_nine.png new file mode 100644 index 0000000..49c3ec4 Binary files /dev/null and b/src/assets/cards/spades_nine.png differ diff --git a/src/assets/cards/spades_queen.png b/src/assets/cards/spades_queen.png new file mode 100644 index 0000000..78e367f Binary files /dev/null and b/src/assets/cards/spades_queen.png differ diff --git a/src/assets/cards/spades_seven.png b/src/assets/cards/spades_seven.png new file mode 100644 index 0000000..b598802 Binary files /dev/null and b/src/assets/cards/spades_seven.png differ diff --git a/src/assets/cards/spades_six.png b/src/assets/cards/spades_six.png new file mode 100644 index 0000000..3b09899 Binary files /dev/null and b/src/assets/cards/spades_six.png differ diff --git a/src/assets/cards/spades_ten.png b/src/assets/cards/spades_ten.png new file mode 100644 index 0000000..4aedafb Binary files /dev/null and b/src/assets/cards/spades_ten.png differ diff --git a/src/assets/cards/spades_three.png b/src/assets/cards/spades_three.png new file mode 100644 index 0000000..66b982c Binary files /dev/null and b/src/assets/cards/spades_three.png differ diff --git a/src/assets/cards/spades_two.png b/src/assets/cards/spades_two.png new file mode 100644 index 0000000..5817ff5 Binary files /dev/null and b/src/assets/cards/spades_two.png differ diff --git a/src/layout/components/Card.tsx b/src/layout/components/Card.tsx new file mode 100644 index 0000000..1de719d --- /dev/null +++ b/src/layout/components/Card.tsx @@ -0,0 +1,32 @@ +import React, {FunctionComponent} from "react"; + +interface Props { + cardString: string; + handleClick?: (cardString: string) => void; + isHidden?: boolean; + isClickable?: boolean; +} + +const Card: FunctionComponent = ({cardString, handleClick, isHidden, isClickable}) => { + const cardType = cardString.split(' ')[0].toLowerCase(); + const cardValue = cardString.split(' ')[1].toLowerCase(); + + const cardSource = isHidden ? + require(`../../assets/cards/back.png`) : + require(`../../assets/cards/${cardType}_${cardValue}.png`); + const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`; + + const handleCardClick = () => { + if (handleClick) { + handleClick(cardString); + } + } + + return ( +
+ {cardName} +
+ ) +} + +export default Card; diff --git a/src/layout/components/Hand.tsx b/src/layout/components/Hand.tsx new file mode 100644 index 0000000..5d82b30 --- /dev/null +++ b/src/layout/components/Hand.tsx @@ -0,0 +1,24 @@ +import React, {FunctionComponent} from 'react'; +import Card from "./Card"; + +interface Props { + hand: string[]; + actionOnClick: (cardString: string) => void; + isHidden?: boolean; +} + +const Hand: FunctionComponent = ({hand, actionOnClick, isHidden}) => { + return ( +
+ { + hand.map((card, index) => { + return ( + + ) + }) + } +
+ ) +} + +export default Hand; diff --git a/src/layout/pages/Room.tsx b/src/layout/pages/Room.tsx index d3ae0e3..b6cea81 100644 --- a/src/layout/pages/Room.tsx +++ b/src/layout/pages/Room.tsx @@ -3,6 +3,13 @@ import React from "react"; import {useParams} from "react-router"; import {GHButton} from "../components/Button"; import useTitle from "../../utils/TitleHook"; +import Card from "../components/Card"; +import Hand from "../components/Hand"; + +interface GameState { + Hand: string[]; + CurrentCard: string; +} const Room = () => { @@ -12,50 +19,36 @@ const Room = () => { const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`; - const [message, setMessage] = React.useState(''); - const [messages, setMessages] = React.useState([]); + const [gameState, setGameState] = React.useState({Hand: [], CurrentCard: ''}); const websocket = useWebSocket(WS_URL, { onOpen: () => { console.log('WebSocket connection established.'); }, onMessage: (event) => { - setMessages([...messages, event.data]); + const data = JSON.parse(event.data); + setGameState(data); } }); - const handleSend = () => { - websocket.sendMessage(message); - setMessage(''); - } - - const handleMessageChange = (event: React.ChangeEvent) => { - setMessage(event.target.value); - } - const handleLeaveRoom = () => { window.location.href = '/'; } + const handleCardSend = (card: string) => { + const formattedCard = JSON.stringify({CardType: card.split(' ')[0], CardValue: card.split(' ')[1]}); + websocket.sendMessage(formattedCard); + } + return (

Room {roomId}

Leave Room -
{ - event.preventDefault(); - handleSend(); - }}> - - Send -
-
    - { - messages.map((message, index) => { - return
  • {message}
    • - }) - } -
+ { + gameState.CurrentCard && + + } +
) } diff --git a/src/styles/layout/components/_components.scss b/src/styles/layout/components/_components.scss index 14eca13..c5a74b8 100644 --- a/src/styles/layout/components/_components.scss +++ b/src/styles/layout/components/_components.scss @@ -1 +1,3 @@ -@import "button"; \ No newline at end of file +@import "button"; +@import "card"; +@import "hand"; \ No newline at end of file diff --git a/src/styles/layout/components/card.scss b/src/styles/layout/components/card.scss new file mode 100644 index 0000000..f2e8439 --- /dev/null +++ b/src/styles/layout/components/card.scss @@ -0,0 +1,14 @@ +.card { + width: 100px; + min-width: 100px; + + &-clickable { + cursor: pointer; + } + + &__texture { + width: 100%; + height: 100%; + object-fit: contain; + } +} diff --git a/src/styles/layout/components/hand.scss b/src/styles/layout/components/hand.scss new file mode 100644 index 0000000..6eed4cf --- /dev/null +++ b/src/styles/layout/components/hand.scss @@ -0,0 +1,9 @@ +.hand { + display: flex; + flex-direction: row; + //justify-content: center; + flex-flow: nowrap !important; + overflow-x: scroll; + padding: 0.5rem; + gap: 0.5rem; +}