Add prepare move actions

8 files changed, 104 insertions, 63 deletions

diff --git a/frontend/src/api/model.js b/frontend/src/api/model.js
index f5c3481b..54be5cf8 100644
--- a/frontend/src/api/model.js
+++ b/frontend/src/api/model.js
@@ -79,9 +79,14 @@ export type ApiPlayerTurnInfo = {
   action: ApiAction,
   hand: ApiHandCard[],
   neighbourGuildCards: ApiTableCard[],
-  message: string
+  message: string,
+  wonderBuildability: ApiWonderBuildability,
 };
 
+export type ApiWonderBuildability = {
+  buildable: boolean
+}
+
 export type ApiMoveType = "PLAY" | "PLAY_FREE" | "UPGRADE_WONDER" | "DISCARD" | "COPY_GUILD";
 export type ApiProvider = "LEFT_NEIGHBOUR" | "RIGHT_NEIGHBOUR";
 export type ApiResourceType = "WOOD" | "STONE" | "ORE" | "CLAY" | "GLASS" | "PAPYRUS" | "LOOM";
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>;
diff --git a/frontend/src/redux/actions/game.js b/frontend/src/redux/actions/game.js
index 1fe49dfb..434aa8d3 100644
--- a/frontend/src/redux/actions/game.js
+++ b/frontend/src/redux/actions/game.js
@@ -1,7 +1,8 @@
-import type { ApiPlayerTurnInfo, ApiPreparedCard, ApiTable } from '../../api/model';
+import type { ApiPlayerMove, ApiPlayerTurnInfo, ApiPreparedCard, ApiTable } from '../../api/model';
 
 export const types = {
   REQUEST_SAY_READY: 'GAME/REQUEST_SAY_READY',
+  REQUEST_PREPARE_MOVE: 'GAME/REQUEST_PREPARE_MOVE',
   PLAYER_READY_RECEIVED: 'GAME/PLAYER_READY_RECEIVED',
   TABLE_UPDATE_RECEIVED: 'GAME/TABLE_UPDATE_RECEIVED',
   PREPARED_CARD_RECEIVED: 'GAME/PREPARED_CARD_RECEIVED',
@@ -9,15 +10,23 @@ export const types = {
 };
 
 export type SayReadyAction = { type: 'GAME/REQUEST_SAY_READY' };
+export type PrepareMoveAction = { type: 'GAME/REQUEST_PREPARE_MOVE', move: ApiPlayerMove };
 export type PlayerReadyEvent = { type: 'GAME/PLAYER_READY_RECEIVED', username: string };
 export type TableUpdateEvent = { type: 'GAME/TABLE_UPDATE_RECEIVED', table: ApiTable };
 export type PreparedCardEvent = { type: 'GAME/PREPARED_CARD_RECEIVED', card: ApiPreparedCard };
 export type TurnInfoEvent = { type: 'GAME/TURN_INFO_RECEIVED', turnInfo: ApiPlayerTurnInfo };
 
-export type GameAction = SayReadyAction | PlayerReadyEvent | TableUpdateEvent | PreparedCardEvent | TurnInfoEvent;
+export type GameAction =
+        SayReadyAction
+        | PrepareMoveAction
+        | PlayerReadyEvent
+        | TableUpdateEvent
+        | PreparedCardEvent
+        | TurnInfoEvent;
 
 export const actions = {
   sayReady: () => ({ type: types.REQUEST_SAY_READY }),
+  prepareMove: (move: ApiPlayerMove) => ({ type: types.REQUEST_PREPARE_MOVE, move }),
   receivePlayerReady: (username: string) => ({ type: types.PLAYER_READY_RECEIVED, username }),
   receiveTableUpdate: (table: ApiTable) => ({ type: types.TABLE_UPDATE_RECEIVED, table }),
   receivePreparedCard: (card: ApiPreparedCard) => ({ type: types.PREPARED_CARD_RECEIVED, card }),
diff --git a/frontend/src/sagas/game.js b/frontend/src/sagas/game.js
index 04209e91..dc92e89a 100644
--- a/frontend/src/sagas/game.js
+++ b/frontend/src/sagas/game.js
@@ -49,6 +49,13 @@ function* sayReady(session: SevenWondersSession) {
   }
 }
 
+function* prepareMove(session: SevenWondersSession) {
+  while (true) {
+    let action = yield take(types.REQUEST_PREPARE_MOVE);
+    yield apply(session, session.prepareMove, [action.move]);
+  }
+}
+
 function* watchTurnInfo(session: SevenWondersSession) {
   const channel = yield eventChannel(session.watchTurnInfo());
   try {
@@ -69,6 +76,7 @@ export function* gameSaga(session: SevenWondersSession) {
     call(watchTableUpdates, session, gameId),
     call(watchPreparedCards, session, gameId),
     call(sayReady, session),
+    call(prepareMove, session),
     call(watchTurnInfo, session)
   ];
 }
diff --git a/game-engine/src/main/kotlin/org/luxons/sevenwonders/game/api/PlayerTurnInfo.kt b/game-engine/src/main/kotlin/org/luxons/sevenwonders/game/api/PlayerTurnInfo.kt
index e80cdefd..9eccf935 100644
--- a/game-engine/src/main/kotlin/org/luxons/sevenwonders/game/api/PlayerTurnInfo.kt
+++ b/game-engine/src/main/kotlin/org/luxons/sevenwonders/game/api/PlayerTurnInfo.kt
@@ -1,5 +1,7 @@
 package org.luxons.sevenwonders.game.api
 
+import org.luxons.sevenwonders.game.wonders.WonderBuildability
+
 enum class Action(val message: String) {
     PLAY("Pick the card you want to play or discard."),
     PLAY_2("Pick the first card you want to play or discard. Note that you have the ability to play these 2 last cards. You will choose how to play the last one during your next turn."),
@@ -17,4 +19,5 @@ data class PlayerTurnInfo internal constructor(
 ) {
     val currentAge: Int = table.currentAge
     val message: String = action.message
+    val wonderBuildability: WonderBuildability = table.boards[playerIndex].wonder.buildability
 }
diff --git a/game-engine/src/test/kotlin/org/luxons/sevenwonders/game/GameTest.kt b/game-engine/src/test/kotlin/org/luxons/sevenwonders/game/GameTest.kt
index 12f867f2..7b5b9411 100644
--- a/game-engine/src/test/kotlin/org/luxons/sevenwonders/game/GameTest.kt
+++ b/game-engine/src/test/kotlin/org/luxons/sevenwonders/game/GameTest.kt
@@ -71,7 +71,7 @@ class GameTest {
     }
 
     private fun createPlayCardMove(turnInfo: PlayerTurnInfo): MoveExpectation {
-        val wonderBuildability = turnInfo.table.boards[turnInfo.playerIndex].wonder.buildability
+        val wonderBuildability = turnInfo.wonderBuildability
         if (wonderBuildability.isBuildable) {
             val transactions = wonderBuildability.cheapestTransactions.first()
             return planMove(turnInfo, MoveType.UPGRADE_WONDER, turnInfo.hand.first(), transactions)