summaryrefslogtreecommitdiff
path: root/frontend/src/components/game-browser
diff options
context:
space:
mode:
authorJoffrey BION <joffrey.bion@gmail.com>2019-05-05 20:31:41 +0200
committerjbion <joffrey.bion@amadeus.com>2019-05-06 18:33:15 +0200
commit664f7a98b44a561d619cc14235335e2a6f2bceb3 (patch)
treefd1c26ccd24b4dee26a2d412f8bdd4ba61b6fe42 /frontend/src/components/game-browser
parentConvert game components to TypeScript (diff)
downloadseven-wonders-664f7a98b44a561d619cc14235335e2a6f2bceb3.tar.gz
seven-wonders-664f7a98b44a561d619cc14235335e2a6f2bceb3.tar.bz2
seven-wonders-664f7a98b44a561d619cc14235335e2a6f2bceb3.zip
Migrate game-browser components to TypeScript
Diffstat (limited to 'frontend/src/components/game-browser')
-rw-r--r--frontend/src/components/game-browser/GameBrowser.tsx (renamed from frontend/src/components/game-browser/GameBrowser.jsx)17
-rw-r--r--frontend/src/components/game-browser/GameList.tsx (renamed from frontend/src/components/game-browser/GameList.jsx)40
-rw-r--r--frontend/src/components/game-browser/GameStatus.tsx (renamed from frontend/src/components/game-browser/GameStatus.jsx)8
-rw-r--r--frontend/src/components/game-browser/PlayerCount.tsx (renamed from frontend/src/components/game-browser/PlayerCount.jsx)1
-rw-r--r--frontend/src/components/game-browser/PlayerInfo.tsx (renamed from frontend/src/components/game-browser/PlayerInfo.jsx)7
5 files changed, 45 insertions, 28 deletions
diff --git a/frontend/src/components/game-browser/GameBrowser.jsx b/frontend/src/components/game-browser/GameBrowser.tsx
index cfa0e45e..a6367d5e 100644
--- a/frontend/src/components/game-browser/GameBrowser.jsx
+++ b/frontend/src/components/game-browser/GameBrowser.tsx
@@ -1,6 +1,5 @@
-// @flow
import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core';
-import React, { Component } from 'react';
+import React, { ChangeEvent, Component, SyntheticEvent } from 'react';
import { connect } from 'react-redux';
import { Flex } from 'reflexbox';
import { actions } from '../../redux/actions/lobby';
@@ -15,7 +14,7 @@ class GameBrowserPresenter extends Component<GameBrowserProps> {
_gameName: string | void = undefined;
- createGame = (e: SyntheticEvent<*>): void => {
+ createGame = (e: SyntheticEvent<any>): void => {
e.preventDefault();
if (this._gameName !== undefined) {
this.props.createGame(this._gameName);
@@ -30,8 +29,8 @@ class GameBrowserPresenter extends Component<GameBrowserProps> {
<InputGroup
placeholder="Game name"
name="game_name"
- onChange={(e: SyntheticInputEvent<*>) => (this._gameName = e.target.value)}
- rightElement={<CreateGameButton onClick={this.createGame}/>}
+ onChange={(e: ChangeEvent<HTMLInputElement>) => (this._gameName = e.target.value)}
+ rightElement={<CreateGameButton createGame={this.createGame}/>}
/>
</form>
<PlayerInfo />
@@ -42,8 +41,12 @@ class GameBrowserPresenter extends Component<GameBrowserProps> {
}
}
-const CreateGameButton = ({onClick}) => (
- <Button className={Classes.MINIMAL} intent={Intent.PRIMARY} icon='add' onClick={onClick} />
+type CreateGameButtonProps = {
+ createGame: (e: SyntheticEvent<any>) => void
+}
+
+const CreateGameButton = ({createGame}: CreateGameButtonProps) => (
+ <Button className={Classes.MINIMAL} intent={Intent.PRIMARY} icon='add' onClick={createGame} />
);
const mapDispatchToProps = {
diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.tsx
index b797a358..1b136940 100644
--- a/frontend/src/components/game-browser/GameList.jsx
+++ b/frontend/src/components/game-browser/GameList.tsx
@@ -1,21 +1,25 @@
-// @flow
import { Button, Classes } from '@blueprintjs/core'
-import type { List } from 'immutable';
+import { List } from 'immutable';
import React from 'react';
import { connect } from 'react-redux';
-import type { ApiLobby } from '../../api/model';
-import type { GlobalState } from '../../reducers';
+import { ApiLobby } from '../../api/model';
+import { GlobalState } from '../../reducers';
import { actions } from '../../redux/actions/lobby';
import { getAllGames } from '../../redux/games';
import './GameList.css';
import { GameStatus } from './GameStatus';
import { PlayerCount } from './PlayerCount';
-type GameListProps = {
+type GameListStateProps = {
games: List<ApiLobby>,
- joinGame: (gameId: string) => void,
};
+type GameListDispatchProps = {
+ joinGame: (gameId: number) => void,
+};
+
+type GameListProps = GameListStateProps & GameListDispatchProps
+
const GameListPresenter = ({ games, joinGame }: GameListProps) => (
<table className={Classes.HTML_TABLE}>
<thead>
@@ -36,7 +40,12 @@ const GameListHeaderRow = () => (
</tr>
);
-const GameListItemRow = ({game, joinGame}) => (
+type GameListItemRowProps = {
+ game: ApiLobby,
+ joinGame: (gameId: number) => void,
+};
+
+const GameListItemRow = ({game, joinGame}: GameListItemRowProps) => (
<tr className="gameListRow">
<td>{game.name}</td>
<td>
@@ -51,17 +60,24 @@ const GameListItemRow = ({game, joinGame}) => (
</tr>
);
-const JoinButton = ({game, joinGame}) => {
+type JoinButtonProps = {
+ game: ApiLobby,
+ joinGame: (gameId: number) => void,
+};
+
+const JoinButton = ({game, joinGame}: JoinButtonProps) => {
const disabled = game.state !== 'LOBBY';
const onClick = () => joinGame(game.id);
return <Button minimal disabled={disabled} icon='arrow-right' title='Join Game' onClick={onClick}/>;
};
-const mapStateToProps = (state: GlobalState) => ({
- games: getAllGames(state),
-});
+function mapStateToProps(state: GlobalState): GameListStateProps {
+ return {
+ games: getAllGames(state),
+ };
+}
-const mapDispatchToProps = {
+const mapDispatchToProps: GameListDispatchProps = {
joinGame: actions.requestJoinGame,
};
diff --git a/frontend/src/components/game-browser/GameStatus.jsx b/frontend/src/components/game-browser/GameStatus.tsx
index fc14bbf6..5f237258 100644
--- a/frontend/src/components/game-browser/GameStatus.jsx
+++ b/frontend/src/components/game-browser/GameStatus.tsx
@@ -1,7 +1,7 @@
-//@flow
import { Tag } from '@blueprintjs/core';
+import { Intent } from '@blueprintjs/core';
import * as React from 'react';
-import type { ApiGameState } from '../../api/model';
+import { ApiGameState } from '../../api/model';
type GameStatusProps = {
state: ApiGameState,
@@ -12,6 +12,6 @@ export const GameStatus = ({state}: GameStatusProps) => (
);
const statusIntents = {
- 'LOBBY': 'success',
- 'PLAYING': 'warning',
+ 'LOBBY': Intent.SUCCESS,
+ 'PLAYING': Intent.WARNING,
};
diff --git a/frontend/src/components/game-browser/PlayerCount.jsx b/frontend/src/components/game-browser/PlayerCount.tsx
index 9a5306d6..64028f68 100644
--- a/frontend/src/components/game-browser/PlayerCount.jsx
+++ b/frontend/src/components/game-browser/PlayerCount.tsx
@@ -1,4 +1,3 @@
-//@flow
import { Icon } from '@blueprintjs/core';
import * as React from 'react';
import './PlayerCount.css';
diff --git a/frontend/src/components/game-browser/PlayerInfo.jsx b/frontend/src/components/game-browser/PlayerInfo.tsx
index baee67c1..4afed671 100644
--- a/frontend/src/components/game-browser/PlayerInfo.jsx
+++ b/frontend/src/components/game-browser/PlayerInfo.tsx
@@ -1,13 +1,12 @@
-// @flow
import { Text } from '@blueprintjs/core';
import React from 'react';
import { connect } from 'react-redux';
-import type { GlobalState } from '../../reducers';
-import type { User } from '../../redux/user';
+import { GlobalState } from '../../reducers';
+import { User } from '../../redux/user';
import { getCurrentUser } from '../../redux/user';
type PlayerInfoProps = {
- user: ?User,
+ user: User | null,
}
const PlayerInfoPresenter = ({user}: PlayerInfoProps) => (
bgstack15