summaryrefslogtreecommitdiff
path: root/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/game-browser/GameList.jsx11
-rw-r--r--frontend/src/components/game-browser/GameStatus.jsx4
-rw-r--r--frontend/src/components/game-browser/PlayerInfo.jsx15
-rw-r--r--frontend/src/components/game/GameScene.jsx22
-rw-r--r--frontend/src/components/home/ChooseNameForm.jsx2
-rw-r--r--frontend/src/components/lobby/Lobby.jsx20
-rw-r--r--frontend/src/components/lobby/PlayerList.jsx6
-rw-r--r--frontend/src/components/lobby/RadialPlayerList.jsx23
8 files changed, 47 insertions, 56 deletions
diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.jsx
index 64ced9b0..b46cd14c 100644
--- a/frontend/src/components/game-browser/GameList.jsx
+++ b/frontend/src/components/game-browser/GameList.jsx
@@ -2,7 +2,8 @@
import type { List } from 'immutable';
import React from 'react';
import { connect } from 'react-redux';
-import type { Game } from '../../models/games';
+import type { ApiLobby } from '../../api/model';
+import type { GlobalState } from '../../reducers';
import { actions } from '../../redux/actions/lobby';
import { getAllGames } from '../../redux/games';
import { IconButton } from '../shared/IconButton';
@@ -11,7 +12,7 @@ import { GameStatus } from './GameStatus';
import { PlayerCount } from './PlayerCount';
type GameListProps = {
- games: List<Game>,
+ games: List<ApiLobby>,
joinGame: (gameId: string) => void,
};
@@ -21,7 +22,7 @@ const GameListPresenter = ({ games, joinGame }: GameListProps) => (
<GameListHeaderRow />
</thead>
<tbody>
- {games.map((game: Game) => <GameListItemRow key={game.id} game={game} joinGame={joinGame}/>)}
+ {games.map((game: ApiLobby) => <GameListItemRow key={game.id} game={game} joinGame={joinGame}/>)}
</tbody>
</table>
);
@@ -56,8 +57,8 @@ const JoinButton = ({game, joinGame}) => {
return <IconButton minimal disabled={disabled} icon='arrow-right' title='Join Game' onClick={onClick}/>;
};
-const mapStateToProps = state => ({
- games: getAllGames(state.get('games')),
+const mapStateToProps = (state: GlobalState) => ({
+ games: getAllGames(state),
});
const mapDispatchToProps = {
diff --git a/frontend/src/components/game-browser/GameStatus.jsx b/frontend/src/components/game-browser/GameStatus.jsx
index 749d3cfa..fc14bbf6 100644
--- a/frontend/src/components/game-browser/GameStatus.jsx
+++ b/frontend/src/components/game-browser/GameStatus.jsx
@@ -1,10 +1,10 @@
//@flow
import { Tag } from '@blueprintjs/core';
import * as React from 'react';
-import type { GameState } from '../../models/games';
+import type { ApiGameState } from '../../api/model';
type GameStatusProps = {
- state: GameState,
+ state: ApiGameState,
}
export const GameStatus = ({state}: GameStatusProps) => (
diff --git a/frontend/src/components/game-browser/PlayerInfo.jsx b/frontend/src/components/game-browser/PlayerInfo.jsx
index 2f29ea60..baee67c1 100644
--- a/frontend/src/components/game-browser/PlayerInfo.jsx
+++ b/frontend/src/components/game-browser/PlayerInfo.jsx
@@ -2,23 +2,24 @@
import { Text } from '@blueprintjs/core';
import React from 'react';
import { connect } from 'react-redux';
-import type { Player } from '../../models/players';
-import { getCurrentPlayer } from '../../redux/players';
+import type { GlobalState } from '../../reducers';
+import type { User } from '../../redux/user';
+import { getCurrentUser } from '../../redux/user';
type PlayerInfoProps = {
- player: ?Player,
+ user: ?User,
}
-const PlayerInfoPresenter = ({player}: PlayerInfoProps) => (
+const PlayerInfoPresenter = ({user}: PlayerInfoProps) => (
<Text>
<b>Username:</b>
{' '}
- {player && player.displayName}
+ {user && user.displayName}
</Text>
);
-const mapStateToProps = state => ({
- player: getCurrentPlayer(state),
+const mapStateToProps = (state: GlobalState): PlayerInfoProps => ({
+ user: getCurrentUser(state),
});
const mapDispatchToProps = {
diff --git a/frontend/src/components/game/GameScene.jsx b/frontend/src/components/game/GameScene.jsx
index 5221ab8e..70e857f0 100644
--- a/frontend/src/components/game/GameScene.jsx
+++ b/frontend/src/components/game/GameScene.jsx
@@ -2,22 +2,18 @@ import { Button, Classes, Intent, NonIdealState } from '@blueprintjs/core';
import { List } from 'immutable';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import type { ApiPlayerMove, ApiPlayerTurnInfo } from '../../api/model';
-import { Game } from '../../models/games';
-import { Player } from '../../models/players';
+import type { ApiPlayer, ApiPlayerMove, ApiPlayerTurnInfo } from '../../api/model';
+import type { GlobalState } from '../../reducers';
import { actions } from '../../redux/actions/game';
import { getCurrentTurnInfo } from '../../redux/currentGame';
import { getCurrentGame } from '../../redux/games';
-import { getCurrentPlayer, getPlayers } from '../../redux/players';
import { Board } from './Board';
-import { Hand } from './Hand';
import './GameScene.css'
+import { Hand } from './Hand';
import { ProductionBar } from './ProductionBar';
type GameSceneProps = {
- game: Game,
- currentPlayer: Player,
- players: List<Player>,
+ players: List<ApiPlayer>,
turnInfo: ApiPlayerTurnInfo,
sayReady: () => void,
prepareMove: (move: ApiPlayerMove) => void,
@@ -54,15 +50,13 @@ const GamePreStart = ({onReadyClicked}) => <NonIdealState
onClick={onReadyClicked}/>}
/>;
-const mapStateToProps: (state) => GameSceneProps = state => {
- const game = getCurrentGame(state.get('games'));
+const mapStateToProps: (state: GlobalState) => GameSceneProps = state => {
+ const game = getCurrentGame(state);
console.info(game);
return {
- game: game,
- currentPlayer: getCurrentPlayer(state),
- players: game ? getPlayers(state.get('players'), game.players) : new List(),
- turnInfo: getCurrentTurnInfo(state.get('currentGame')),
+ players: game ? new List(game.players) : new List(),
+ turnInfo: getCurrentTurnInfo(state),
};
};
diff --git a/frontend/src/components/home/ChooseNameForm.jsx b/frontend/src/components/home/ChooseNameForm.jsx
index 619d967c..13f6034b 100644
--- a/frontend/src/components/home/ChooseNameForm.jsx
+++ b/frontend/src/components/home/ChooseNameForm.jsx
@@ -2,7 +2,7 @@
import { Classes, InputGroup, Intent } from '@blueprintjs/core';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import { actions } from '../../redux/actions/players';
+import { actions } from '../../redux/actions/user';
import { IconButton } from '../shared/IconButton';
type ChooseNameFormPresenterProps = {
diff --git a/frontend/src/components/lobby/Lobby.jsx b/frontend/src/components/lobby/Lobby.jsx
index f352ab83..cc979190 100644
--- a/frontend/src/components/lobby/Lobby.jsx
+++ b/frontend/src/components/lobby/Lobby.jsx
@@ -3,17 +3,17 @@ import { Button, Classes, Intent } from '@blueprintjs/core';
import { List } from 'immutable';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import type { Game } from '../../models/games';
-import type { Player } from '../../models/players';
+import type { ApiLobby, ApiPlayer } from '../../api/model';
+import type { GlobalState } from '../../reducers';
import { actions } from '../../redux/actions/lobby';
import { getCurrentGame } from '../../redux/games';
-import { getCurrentPlayer, getPlayers } from '../../redux/players';
+import { getCurrentPlayer } from '../../redux/user';
import { RadialPlayerList } from './RadialPlayerList';
export type LobbyProps = {
- currentGame: Game,
- currentPlayer: Player,
- players: List<Player>,
+ currentGame: ApiLobby,
+ currentPlayer: ApiPlayer,
+ players: List<ApiPlayer>,
startGame: () => void,
}
@@ -24,7 +24,7 @@ class LobbyPresenter extends Component<LobbyProps> {
return (
<div>
<h2>{currentGame.name + ' — Lobby'}</h2>
- <RadialPlayerList players={players} owner={currentGame.owner} currentPlayer={currentPlayer}/>
+ <RadialPlayerList players={players}/>
{currentPlayer.gameOwner && <Button text="START" className={Classes.LARGE} intent={Intent.PRIMARY} icon='play'
onClick={startGame} disabled={players.size < 3}/>}
</div>
@@ -32,13 +32,13 @@ class LobbyPresenter extends Component<LobbyProps> {
}
}
-const mapStateToProps = state => {
- const game = getCurrentGame(state.get('games'));
+const mapStateToProps = (state: GlobalState) => {
+ const game = getCurrentGame(state);
console.info(game);
return {
currentGame: game,
currentPlayer: getCurrentPlayer(state),
- players: game ? getPlayers(state.get('players'), game.players) : new List(),
+ players: game ? new List(game.players) : new List(),
};
};
diff --git a/frontend/src/components/lobby/PlayerList.jsx b/frontend/src/components/lobby/PlayerList.jsx
index 87887dd0..bd37f40d 100644
--- a/frontend/src/components/lobby/PlayerList.jsx
+++ b/frontend/src/components/lobby/PlayerList.jsx
@@ -3,12 +3,12 @@ import { Icon } from '@blueprintjs/core'
import { List } from 'immutable';
import * as React from 'react';
import { Flex } from 'reflexbox';
-import { Player } from '../../models/players';
+import { ApiPlayer } from '../../api/model';
type PlayerListProps = {
- players: List<Player>,
+ players: List<ApiPlayer>,
owner: string,
- currentPlayer: Player,
+ currentPlayer: ApiPlayer,
};
const PlayerListItem = ({player, isOwner, isUser}) => (
diff --git a/frontend/src/components/lobby/RadialPlayerList.jsx b/frontend/src/components/lobby/RadialPlayerList.jsx
index 8345b48c..0f122910 100644
--- a/frontend/src/components/lobby/RadialPlayerList.jsx
+++ b/frontend/src/components/lobby/RadialPlayerList.jsx
@@ -3,19 +3,17 @@ import { Icon } from '@blueprintjs/core'
import { List } from 'immutable';
import * as React from 'react';
import { Flex } from 'reflexbox';
-import { Player } from '../../models/players';
+import { ApiPlayer } from '../../api/model';
import { RadialList } from './radial-list/RadialList';
import roundTable from './round-table.png';
type RadialPlayerListProps = {
- players: List<Player>,
- owner: string,
- currentPlayer: Player,
+ players: List<ApiPlayer>
};
-const PlayerItem = ({player, isOwner, isUser}) => (
+const PlayerItem = ({player}) => (
<Flex column align='center'>
- <UserIcon isOwner={isOwner} isUser={isUser} title={isOwner ? 'Game owner' : false}/>
+ <UserIcon isOwner={player.gameOwner} isUser={player.user} title={player.gameOwner ? 'Game owner' : false}/>
<h5 style={{margin: 0}}>{player.displayName}</h5>
</Flex>
);
@@ -33,12 +31,9 @@ const UserIcon = ({isUser, isOwner, title}) => {
return <Icon icon={icon} iconSize={50} intent={intent} title={title}/>;
};
-export const RadialPlayerList = ({players, owner, currentPlayer}: RadialPlayerListProps) => {
- const orderedPlayers = placeFirst(players.toArray(), currentPlayer.username);
- const playerItems = orderedPlayers.map(player => <PlayerItem key={player.username}
- player={player}
- isOwner={player.username === owner}
- isUser={player.username === currentPlayer.username}/>);
+export const RadialPlayerList = ({players}: RadialPlayerListProps) => {
+ const orderedPlayers = placeUserFirst(players.toArray());
+ const playerItems = orderedPlayers.map(player => <PlayerItem key={player.username} player={player}/>);
const tableImg = <img src={roundTable} alt='Round table' style={{width: 200, height: 200}}/>;
return <RadialList items={completeWithPlaceholders(playerItems)}
centerElement={tableImg}
@@ -48,8 +43,8 @@ export const RadialPlayerList = ({players, owner, currentPlayer}: RadialPlayerLi
itemHeight={100}/>;
};
-function placeFirst(players: Array<Player>, targetFirstUsername: string): Array<Player> {
- while (players[0].username !== targetFirstUsername) {
+function placeUserFirst(players: Array<ApiPlayer>): Array<ApiPlayer> {
+ while (!players[0].user) {
players.push(players.shift());
}
return players;
bgstack15