added cards and basic gamestate communication via websocket

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<Props> = ({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 (
+        <div className={`card ${isClickable && 'card-clickable'}`}>
+            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
+        </div>
+    )
+}
+
+export default Card;

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<Props> = ({hand, actionOnClick, isHidden}) => {
+    return (
+        <div className="hand">
+            {
+                hand.map((card, index) => {
+                    return (
+                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={isHidden}/>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+export default Hand;