1 files changed, 34 insertions, 0 deletions
diff --git a/frontend/src/components/game/Hand.jsx b/frontend/src/components/game/Hand.jsx
new file mode 100644
index 00000000..7dea23de
--- /dev/null
+++ b/frontend/src/components/game/Hand.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ApiHandCard } from '../../api/model';
+import './Hand.css'
+
+type HandCardProps = {
+  card: ApiHandCard,
+  isSelected: boolean,
+  onClick: () => void
+}
+
+const HandCard = ({card, isSelected, onClick}: HandCardProps) => {
+  let playableClass = card.playability.playable ? '' : 'hand-card-unplayable';
+  let selectedClass = isSelected ? 'hand-card-img-selected' : '';
+  return <div className={`hand-card ${playableClass}`}
+              onClick={() => card.playability.playable && onClick()}
+              aria-disabled={!card.playability.playable}>
+    <img src={`/images/cards/${card.image}`}
+         title={card.name}
+         alt={'Card ' + card.name}
+         className={`hand-card-img ${selectedClass}`}/>
+  </div>
+};
+
+type HandProps = {
+  cards: ApiHandCard[],
+  selectedCard: ApiHandCard,
+  onClick: (card: ApiHandCard) => void
+}
+
+export const Hand = ({cards, selectedCard, onClick}: HandProps) => {
+  return <div className='hand'>{cards.map((c, i) => <HandCard key={i} card={c}
+                                                              isSelected={selectedCard === c}
+                                                              onClick={() => onClick(c)}/>)}</div>;
+}