Convert game components to TypeScript

5 files changed, 36 insertions, 25 deletions

diff --git a/frontend/src/components/game/Board.jsx b/frontend/src/components/game/Board.tsx
index b29b847f..98298a1f 100644
--- a/frontend/src/components/game/Board.jsx
+++ b/frontend/src/components/game/Board.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ApiBoard, ApiTableCard, ApiWonder } from '../../api/model';
+import { ApiBoard, ApiTableCard, ApiWonder } from '../../api/model';
 import './Board.css'
 import { CardImage } from './CardImage';
 
diff --git a/frontend/src/components/game/CardImage.jsx b/frontend/src/components/game/CardImage.tsx
index 3c8a9f07..a37595ad 100644
--- a/frontend/src/components/game/CardImage.jsx
+++ b/frontend/src/components/game/CardImage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ApiCard } from '../../api/model';
+import { ApiCard } from '../../api/model';
 import './CardImage.css'
 
 type CardImageProps = {
diff --git a/frontend/src/components/game/GameScene.jsx b/frontend/src/components/game/GameScene.tsx
index 70e857f0..465d0840 100644
--- a/frontend/src/components/game/GameScene.jsx
+++ b/frontend/src/components/game/GameScene.tsx
@@ -2,8 +2,8 @@ import { Button, Classes, Intent, NonIdealState } from '@blueprintjs/core';
 import { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import type { ApiPlayer, ApiPlayerMove, ApiPlayerTurnInfo } from '../../api/model';
-import type { GlobalState } from '../../reducers';
+import { ApiPlayer, ApiPlayerMove, ApiPlayerTurnInfo } from '../../api/model';
+import { GlobalState } from '../../reducers';
 import { actions } from '../../redux/actions/game';
 import { getCurrentTurnInfo } from '../../redux/currentGame';
 import { getCurrentGame } from '../../redux/games';
@@ -12,26 +12,30 @@ import './GameScene.css'
 import { Hand } from './Hand';
 import { ProductionBar } from './ProductionBar';
 
-type GameSceneProps = {
+type GameSceneStateProps = {
   players: List<ApiPlayer>,
-  turnInfo: ApiPlayerTurnInfo,
+  turnInfo: ApiPlayerTurnInfo | null,
+}
+
+type GameSceneDispatchProps = {
   sayReady: () => void,
   prepareMove: (move: ApiPlayerMove) => void,
 }
 
+type GameSceneProps = GameSceneStateProps & GameSceneDispatchProps
+
 class GameScenePresenter extends Component<GameSceneProps> {
 
   render() {
     return (
       <div className='gameSceneRoot fullscreen'>
         {!this.props.turnInfo && <GamePreStart onReadyClicked={this.props.sayReady}/>}
-        {this.props.turnInfo && this.turnInfoScene()}
+        {this.props.turnInfo && this.turnInfoScene(this.props.turnInfo)}
       </div>
     );
   }
 
-  turnInfoScene() {
-    let turnInfo = this.props.turnInfo;
+  turnInfoScene(turnInfo: ApiPlayerTurnInfo) {
     let board = turnInfo.table.boards[turnInfo.playerIndex];
     return <div>
       <p>{turnInfo.message}</p>
@@ -44,25 +48,30 @@ class GameScenePresenter extends Component<GameSceneProps> {
   }
 }
 
-const GamePreStart = ({onReadyClicked}) => <NonIdealState
+type GamePreStartProps = {
+  onReadyClicked: () => void
+}
+const GamePreStart = ({onReadyClicked}: GamePreStartProps) => <NonIdealState
         description={<p>Click "ready" when you are</p>}
         action={<Button text="READY" className={Classes.LARGE} intent={Intent.PRIMARY} icon='play'
-                        onClick={onReadyClicked}/>}
+                        onClick={() => onReadyClicked()}/>}
 />;
 
-const mapStateToProps: (state: GlobalState) => GameSceneProps = state => {
+function mapStateToProps(state: GlobalState): GameSceneStateProps {
   const game = getCurrentGame(state);
   console.info(game);
 
   return {
-    players: game ? new List(game.players) : new List(),
+    players: game ? List(game.players) : List(),
     turnInfo: getCurrentTurnInfo(state),
   };
-};
+}
 
-const mapDispatchToProps = {
-  sayReady: actions.sayReady,
-  prepareMove: actions.prepareMove,
-};
+function mapDispatchToProps(): GameSceneDispatchProps {
+  return {
+    sayReady: actions.sayReady,
+    prepareMove: actions.prepareMove,
+  }
+}
 
 export const GameScene = connect(mapStateToProps, mapDispatchToProps)(GameScenePresenter);
diff --git a/frontend/src/components/game/Hand.jsx b/frontend/src/components/game/Hand.tsx
index 9b29742e..744c45cc 100644
--- a/frontend/src/components/game/Hand.jsx
+++ b/frontend/src/components/game/Hand.tsx
@@ -1,6 +1,6 @@
 import { Button, ButtonGroup, Classes, Intent } from '@blueprintjs/core';
 import React from 'react';
-import type { ApiHandCard, ApiPlayerMove } from '../../api/model';
+import { ApiHandCard, ApiPlayerMove } from '../../api/model';
 import './Hand.css'
 import { CardImage } from './CardImage';
 
@@ -30,7 +30,9 @@ const HandCard = ({card, wonderUpgradable, prepareMove}: HandCardProps) => {
   </div>
 };
 
-const ActionButtons = ({card, wonderUpgradable, prepareMove}) => <ButtonGroup className="action-buttons">
+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: []})}/>
diff --git a/frontend/src/components/game/ProductionBar.jsx b/frontend/src/components/game/ProductionBar.tsx
index ec924b31..3e5c6d34 100644
--- a/frontend/src/components/game/ProductionBar.jsx
+++ b/frontend/src/components/game/ProductionBar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ApiCountedResource, ApiProduction, ApiResourceType } from '../../api/model';
+import { ApiCountedResource, ApiProduction, ApiResourceType } from '../../api/model';
 import './ProductionBar.css'
 
 type ProductionBarProps = {
@@ -54,9 +54,9 @@ const ResourceChoice = ({types}: ResourceChoiceProps) => {
   </div>
 };
 
-function intersperce(array, separator) {
-  let result = array.reduce((acc, elt) => acc.concat(elt, separator), []);
-  return result.slice(0, -1);
+function intersperce<T>(array: T[], separator: T): T[] {
+  let result = array.reduce((acc: T[], elt: T) => acc.concat(elt, separator), []);
+  return result.slice(0, -1); // remove extra separator at the end
 }
 
 type TokenWithCountProps = {
@@ -78,7 +78,7 @@ const TokenImage = ({tokenName}: TokenImageProps) => {
   return <img src={getTokenImagePath(tokenName)} title={tokenName} alt={tokenName} className="token-img"/>
 };
 
-function getTokenImagePath(tokenName: number): string {
+function getTokenImagePath(tokenName: string): string {
   return `/images/tokens/${tokenName}.png`;
 }