Add board and played cards

1 files changed, 15 insertions, 4 deletions

diff --git a/frontend/src/components/game/CardImage.jsx b/frontend/src/components/game/CardImage.jsx
index 110d9883..3c8a9f07 100644
--- a/frontend/src/components/game/CardImage.jsx
+++ b/frontend/src/components/game/CardImage.jsx
@@ -1,15 +1,26 @@
 import React from 'react';
 import type { ApiCard } from '../../api/model';
-import './Hand.css'
+import './CardImage.css'
 
 type CardImageProps = {
   card: ApiCard,
-  otherClasses: string
+  otherClasses: string,
+  highlightColor?: string
 }
 
-export const CardImage = ({card, otherClasses}: CardImageProps) => {
+export const CardImage = ({card, otherClasses, highlightColor}: CardImageProps) => {
+  const style = highlightStyle(highlightColor);
   return <img src={`/images/cards/${card.image}`}
               title={card.name}
               alt={'Card ' + card.name}
-              className={`card-img ${otherClasses}`}/>
+              className={`card-img ${otherClasses}`}
+              style={style}/>
 };
+
+function highlightStyle(highlightColor?: string) {
+  if (highlightColor) {
+    return { boxShadow: `0 0 1rem 0.1rem ${highlightColor}` };
+  } else {
+    return {};
+  }
+}