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;