1 files changed, 44 insertions, 0 deletions
diff --git a/frontend/src/components/game/Hand.tsx b/frontend/src/components/game/Hand.tsx
new file mode 100644
index 00000000..744c45cc
--- /dev/null
+++ b/frontend/src/components/game/Hand.tsx
@@ -0,0 +1,44 @@
+import { Button, ButtonGroup, Classes, Intent } from '@blueprintjs/core';
+import React from 'react';
+import { ApiHandCard, ApiPlayerMove } from '../../api/model';
+import './Hand.css'
+import { CardImage } from './CardImage';
+
+type HandProps = {
+  cards: ApiHandCard[],
+  wonderUpgradable: boolean,
+  prepareMove: (move: ApiPlayerMove) => void
+}
+
+export const Hand = ({cards, wonderUpgradable, prepareMove}: HandProps) => {
+  return <div className='hand'>{cards.map((c, i) => <HandCard key={i} card={c}
+                                                              wonderUpgradable={wonderUpgradable}
+                                                              prepareMove={prepareMove}/>)}</div>;
+};
+
+type HandCardProps = {
+  card: ApiHandCard,
+  wonderUpgradable: boolean,
+  prepareMove: (move: ApiPlayerMove) => void
+}
+
+const HandCard = ({card, wonderUpgradable, prepareMove}: HandCardProps) => {
+  let playableClass = card.playability.playable ? '' : 'unplayable';
+  return <div className={`hand-card ${playableClass}`}>
+    <CardImage card={card} otherClasses="hand-card-img"/>
+    <ActionButtons card={card} wonderUpgradable={wonderUpgradable} prepareMove={prepareMove} />
+  </div>
+};
+
+type ActionButtonsProps = HandCardProps
+
+const ActionButtons = ({card, wonderUpgradable, prepareMove}: ActionButtonsProps) => <ButtonGroup className="action-buttons">
+  <Button title="PLAY" className={Classes.LARGE} intent={Intent.SUCCESS} icon='play'
+          disabled={!card.playability.playable}
+          onClick={() => prepareMove({type: 'PLAY', cardName: card.name, boughtResources: []})}/>
+  <Button title="BUILD WONDER" className={Classes.LARGE} intent={Intent.PRIMARY} icon='key-shift'
+          disabled={!wonderUpgradable}
+          onClick={() => prepareMove({type: 'UPGRADE_WONDER', cardName: card.name, boughtResources: []})}/>
+  <Button title="DISCARD" className={Classes.LARGE} intent={Intent.DANGER} icon='cross'
+          onClick={() => prepareMove({type: 'DISCARD', cardName: card.name, boughtResources: []})}/>
+</ButtonGroup>;