diff options
Diffstat (limited to 'sw-ui/src/components/game-browser')
-rw-r--r-- | sw-ui/src/components/game-browser/GameBrowser.tsx | 56 | ||||
-rw-r--r-- | sw-ui/src/components/game-browser/GameList.css | 3 | ||||
-rw-r--r-- | sw-ui/src/components/game-browser/GameList.tsx | 85 | ||||
-rw-r--r-- | sw-ui/src/components/game-browser/GameStatus.tsx | 17 | ||||
-rw-r--r-- | sw-ui/src/components/game-browser/PlayerCount.css | 3 | ||||
-rw-r--r-- | sw-ui/src/components/game-browser/PlayerCount.tsx | 12 | ||||
-rw-r--r-- | sw-ui/src/components/game-browser/PlayerInfo.tsx | 27 |
7 files changed, 0 insertions, 203 deletions
diff --git a/sw-ui/src/components/game-browser/GameBrowser.tsx b/sw-ui/src/components/game-browser/GameBrowser.tsx deleted file mode 100644 index a6367d5e..00000000 --- a/sw-ui/src/components/game-browser/GameBrowser.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core'; -import React, { ChangeEvent, Component, SyntheticEvent } from 'react'; -import { connect } from 'react-redux'; -import { Flex } from 'reflexbox'; -import { actions } from '../../redux/actions/lobby'; -import { GameList } from './GameList'; -import { PlayerInfo } from './PlayerInfo'; - -type GameBrowserProps = { - createGame: (gameName: string) => void, -} - -class GameBrowserPresenter extends Component<GameBrowserProps> { - - _gameName: string | void = undefined; - - createGame = (e: SyntheticEvent<any>): void => { - e.preventDefault(); - if (this._gameName !== undefined) { - this.props.createGame(this._gameName); - } - }; - - render() { - return ( - <div> - <Flex align="center" justify='space-between' p={1}> - <form onSubmit={this.createGame}> - <InputGroup - placeholder="Game name" - name="game_name" - onChange={(e: ChangeEvent<HTMLInputElement>) => (this._gameName = e.target.value)} - rightElement={<CreateGameButton createGame={this.createGame}/>} - /> - </form> - <PlayerInfo /> - </Flex> - <GameList /> - </div> - ); - } -} - -type CreateGameButtonProps = { - createGame: (e: SyntheticEvent<any>) => void -} - -const CreateGameButton = ({createGame}: CreateGameButtonProps) => ( - <Button className={Classes.MINIMAL} intent={Intent.PRIMARY} icon='add' onClick={createGame} /> -); - -const mapDispatchToProps = { - createGame: actions.requestCreateGame, -}; - -export const GameBrowser = connect(null, mapDispatchToProps)(GameBrowserPresenter); diff --git a/sw-ui/src/components/game-browser/GameList.css b/sw-ui/src/components/game-browser/GameList.css deleted file mode 100644 index a04e126c..00000000 --- a/sw-ui/src/components/game-browser/GameList.css +++ /dev/null @@ -1,3 +0,0 @@ -tr.gameListRow td { - vertical-align: middle; -} diff --git a/sw-ui/src/components/game-browser/GameList.tsx b/sw-ui/src/components/game-browser/GameList.tsx deleted file mode 100644 index 1b136940..00000000 --- a/sw-ui/src/components/game-browser/GameList.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Button, Classes } from '@blueprintjs/core' -import { List } from 'immutable'; -import React from 'react'; -import { connect } from 'react-redux'; -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 GameListStateProps = { - games: List<ApiLobby>, -}; - -type GameListDispatchProps = { - joinGame: (gameId: number) => void, -}; - -type GameListProps = GameListStateProps & GameListDispatchProps - -const GameListPresenter = ({ games, joinGame }: GameListProps) => ( - <table className={Classes.HTML_TABLE}> - <thead> - <GameListHeaderRow /> - </thead> - <tbody> - {games.map((game: ApiLobby) => <GameListItemRow key={game.id} game={game} joinGame={joinGame}/>)} - </tbody> - </table> -); - -const GameListHeaderRow = () => ( - <tr> - <th>Name</th> - <th>Status</th> - <th>Nb Players</th> - <th>Join</th> - </tr> -); - -type GameListItemRowProps = { - game: ApiLobby, - joinGame: (gameId: number) => void, -}; - -const GameListItemRow = ({game, joinGame}: GameListItemRowProps) => ( - <tr className="gameListRow"> - <td>{game.name}</td> - <td> - <GameStatus state={game.state} /> - </td> - <td> - <PlayerCount nbPlayers={game.players.length} /> - </td> - <td> - <JoinButton game={game} joinGame={joinGame}/> - </td> - </tr> -); - -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}/>; -}; - -function mapStateToProps(state: GlobalState): GameListStateProps { - return { - games: getAllGames(state), - }; -} - -const mapDispatchToProps: GameListDispatchProps = { - joinGame: actions.requestJoinGame, -}; - -export const GameList = connect(mapStateToProps, mapDispatchToProps)(GameListPresenter); - diff --git a/sw-ui/src/components/game-browser/GameStatus.tsx b/sw-ui/src/components/game-browser/GameStatus.tsx deleted file mode 100644 index 5f237258..00000000 --- a/sw-ui/src/components/game-browser/GameStatus.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Tag } from '@blueprintjs/core'; -import { Intent } from '@blueprintjs/core'; -import * as React from 'react'; -import { ApiGameState } from '../../api/model'; - -type GameStatusProps = { - state: ApiGameState, -} - -export const GameStatus = ({state}: GameStatusProps) => ( - <Tag minimal intent={statusIntents[state]}>{state}</Tag> -); - -const statusIntents = { - 'LOBBY': Intent.SUCCESS, - 'PLAYING': Intent.WARNING, -}; diff --git a/sw-ui/src/components/game-browser/PlayerCount.css b/sw-ui/src/components/game-browser/PlayerCount.css deleted file mode 100644 index d2f18e50..00000000 --- a/sw-ui/src/components/game-browser/PlayerCount.css +++ /dev/null @@ -1,3 +0,0 @@ -.playerCountIcon, .playerCount { - vertical-align: middle; -} diff --git a/sw-ui/src/components/game-browser/PlayerCount.tsx b/sw-ui/src/components/game-browser/PlayerCount.tsx deleted file mode 100644 index 64028f68..00000000 --- a/sw-ui/src/components/game-browser/PlayerCount.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Icon } from '@blueprintjs/core'; -import * as React from 'react'; -import './PlayerCount.css'; - -type PlayerCountProps = { - nbPlayers: number, -} - -export const PlayerCount = ({nbPlayers}: PlayerCountProps) => <div title='Number of players'> - <Icon className="playerCountIcon" icon="people" title={false} /> - <span className="playerCount"> {nbPlayers}</span> -</div>; diff --git a/sw-ui/src/components/game-browser/PlayerInfo.tsx b/sw-ui/src/components/game-browser/PlayerInfo.tsx deleted file mode 100644 index 4afed671..00000000 --- a/sw-ui/src/components/game-browser/PlayerInfo.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Text } from '@blueprintjs/core'; -import React from 'react'; -import { connect } from 'react-redux'; -import { GlobalState } from '../../reducers'; -import { User } from '../../redux/user'; -import { getCurrentUser } from '../../redux/user'; - -type PlayerInfoProps = { - user: User | null, -} - -const PlayerInfoPresenter = ({user}: PlayerInfoProps) => ( - <Text> - <b>Username:</b> - {' '} - {user && user.displayName} - </Text> -); - -const mapStateToProps = (state: GlobalState): PlayerInfoProps => ({ - user: getCurrentUser(state), -}); - -const mapDispatchToProps = { -}; - -export const PlayerInfo = connect(mapStateToProps, mapDispatchToProps)(PlayerInfoPresenter); |