3 files changed, 75 insertions, 59 deletions
diff --git a/frontend/src/components/game/GameScene.jsx b/frontend/src/components/game/GameScene.jsx
index cf3c91f8..0437c567 100644
--- a/frontend/src/components/game/GameScene.jsx
+++ b/frontend/src/components/game/GameScene.jsx
@@ -2,16 +2,14 @@ import { Button, Classes, Intent } from '@blueprintjs/core';
 import { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import type { ApiHandCard, ApiPlayerTurnInfo } from '../../api/model';
+import type { ApiPlayerMove, ApiPlayerTurnInfo } from '../../api/model';
 import { Game } from '../../models/games';
 import { Player } from '../../models/players';
 import { actions } from '../../redux/actions/game';
 import { getCurrentTurnInfo } from '../../redux/currentGame';
 import { getCurrentGame } from '../../redux/games';
-
 import { getCurrentPlayer, getPlayers } from '../../redux/players';
 import { Hand } from './Hand';
-
 import './GameScene.css'
 
 type GameSceneProps = {
@@ -19,44 +17,42 @@ type GameSceneProps = {
   currentPlayer: Player,
   players: List<Player>,
   turnInfo: ApiPlayerTurnInfo,
-  sayReady: () => void
-}
-
-type GameSceneState = {
-  selectedCard: ApiHandCard | void
+  sayReady: () => void,
+  prepareMove: (move: ApiPlayerMove) => void,
 }
 
-class GameScenePresenter extends Component<GameSceneProps, GameSceneState> {
-
-  state = {
-    selectedCard: null
-  };
-
-  selectCard(c: ApiHandCard) {
-    this.setState({selectedCard: c})
-  }
+class GameScenePresenter extends Component<GameSceneProps> {
 
   render() {
     return (
       <div className='gameSceneRoot fullscreen'>
-        <h2>Now playing!</h2>
-        <p>{this.props.turnInfo ? this.props.turnInfo.message : 'Click "ready" when you are'}</p>
-
-        {this.props.turnInfo && <Hand cards={this.props.turnInfo.hand}
-                                      selectedCard={this.state.selectedCard}
-                                      onClick={(c) => this.selectCard(c)}/>}
-
-        {!this.props.turnInfo && <Button text="READY" className={Classes.LARGE} intent={Intent.PRIMARY} icon='play' onClick={this.props.sayReady} />}
+        <h1>{this.props.game.name}</h1>
+        {!this.props.turnInfo && <GamePreStart onReadyClicked={this.props.sayReady}/>}
+        {this.props.turnInfo && this.turnInfoScene()}
 
-        <h3>Turn Info</h3>
+        <h4 style={{marginTop: '2rem'}}>Debug</h4>
         <div>
           <pre>{JSON.stringify(this.props.turnInfo, null, 2) }</pre>
         </div>
       </div>
     );
   }
+
+  turnInfoScene() {
+    return <div>
+      <p>{this.props.turnInfo.message}</p>
+      <Hand cards={this.props.turnInfo.hand}
+            wonderUpgradable={this.props.turnInfo.wonderBuildability.buildable}
+            prepareMove={this.props.prepareMove}/>
+    </div>
+  }
 }
 
+const GamePreStart = ({onReadyClicked}) => <div>
+  <p>Click "ready" when you are</p>
+  <Button text="READY" className={Classes.LARGE} intent={Intent.PRIMARY} icon='play' onClick={onReadyClicked} />
+</div>;
+
 const mapStateToProps: (state) => GameSceneProps = state => {
   const game = getCurrentGame(state.get('games'));
   console.info(game);
@@ -65,12 +61,13 @@ const mapStateToProps: (state) => GameSceneProps = state => {
     game: game,
     currentPlayer: getCurrentPlayer(state),
     players: game ? getPlayers(state.get('players'), game.players) : new List(),
-    turnInfo: getCurrentTurnInfo(state.get('currentGame'))
+    turnInfo: getCurrentTurnInfo(state.get('currentGame')),
   };
 };
 
 const mapDispatchToProps = {
   sayReady: actions.sayReady,
+  prepareMove: actions.prepareMove,
 };
 
 export const GameScene = connect(mapStateToProps, mapDispatchToProps)(GameScenePresenter);
diff --git a/frontend/src/components/game/Hand.css b/frontend/src/components/game/Hand.css
index de7b556d..fb6ccd55 100644
--- a/frontend/src/components/game/Hand.css
+++ b/frontend/src/components/game/Hand.css
@@ -3,24 +3,33 @@
 }
 
 .hand-card {
+    align-items: flex-end;
+    display: grid;
     margin: 0.2rem;
 }
 
-.hand-card-unplayable {
-    opacity: 0.7;
-}
-
-.hand-card-img-selected {
-    border: 2px solid #0054ff;
-}
-
-.hand-card-img {
+.hand-card .hand-card-img {
     border-radius: 0.5rem;
     box-shadow: 0 0 10px black;
+    grid-row: 1;
+    grid-column: 1;
+    opacity: 1;
     width: 11rem;
 }
-
-.hand-card-img:hover {
+.hand-card.unplayable .hand-card-img {
+    opacity: 0.7;
+}
+.hand-card:hover .hand-card-img {
     box-shadow: 0 10px 40px black;
     width: 14rem;
 }
+
+.hand-card .action-buttons {
+    align-items: flex-end;
+    display: none;
+    grid-row: 1;
+    grid-column: 1;
+}
+.hand-card:hover .action-buttons {
+    display: flex;
+}
diff --git a/frontend/src/components/game/Hand.jsx b/frontend/src/components/game/Hand.jsx
index 7dea23de..2b8ca196 100644
--- a/frontend/src/components/game/Hand.jsx
+++ b/frontend/src/components/game/Hand.jsx
@@ -1,34 +1,44 @@
+import { Button, ButtonGroup, Classes, Intent } from '@blueprintjs/core';
 import React from 'react';
-import type { ApiHandCard } from '../../api/model';
+import type { ApiHandCard, ApiPlayerMove } from '../../api/model';
 import './Hand.css'
 
+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,
-  isSelected: boolean,
-  onClick: () => void
+  wonderUpgradable: boolean,
+  prepareMove: (move: ApiPlayerMove) => 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}>
+const HandCard = ({card, wonderUpgradable, prepareMove}: HandCardProps) => {
+  let playableClass = card.playability.playable ? '' : 'unplayable';
+  return <div className={`hand-card ${playableClass}`}>
     <img src={`/images/cards/${card.image}`}
          title={card.name}
          alt={'Card ' + card.name}
-         className={`hand-card-img ${selectedClass}`}/>
+         className="hand-card-img"/>
+    <ActionButtons card={card} wonderUpgradable={wonderUpgradable} prepareMove={prepareMove} />
   </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>;
-}
+const ActionButtons = ({card, wonderUpgradable, prepareMove}) => <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>;