jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-06-11 08:34:52 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

upgrade packages + improve typing

Browse source
This commit is contained in:
seavor 2026-04-14 11:34:29 -05:00
parent fd55f4fb7f
commit 19f5eefdd2
138 changed files with 4504 additions and 11015 deletions
Download patch file Download diff file Expand all files Collapse all files

205
webclient/src/containers/Room/Games.tsx
View file

@ -1,6 +1,5 @@
// eslint-disable-next-line
import React, { Component } from "react";
import { connect } from 'react-redux';
import React from "react";
import * as _ from 'lodash';
import Table from '@mui/material/Table';
@ -15,129 +14,97 @@ import Tooltip from '@mui/material/Tooltip';
import { SortUtil, RoomsDispatch, RoomsSelectors } from 'store';
import { UserDisplay } from 'components';
import { useAppSelector } from 'store/store';
import './Games.css';
// @TODO run interval to update timeSinceCreated
class Games extends Component<GamesProps> {
private headerCells = [
{
label: 'Age',
field: 'startTime'
},
{
label: 'Description',
field: 'description'
},
{
label: 'Creator',
field: 'creatorInfo.name'
},
{
label: 'Type',
field: 'gameType'
},
{
label: 'Restrictions',
// field: "?"
},
{
label: 'Players',
// field: ["maxPlayers", "playerCount"]
},
{
label: 'Spectators',
field: 'spectatorsCount'
},
];
handleSort(sortByField) {
const { room: { roomId }, sortBy } = this.props;
const { field, order } = SortUtil.toggleSortBy(sortByField, sortBy);
RoomsDispatch.sortGames(roomId, field, order);
}
private isUnavailableGame({ started, maxPlayers, playerCount }) {
return !started && playerCount < maxPlayers;
}
private isPasswordProtectedGame({ withPassword }) {
return !withPassword;
}
private isBuddiesOnlyGame({ onlyBuddies }) {
return !onlyBuddies;
}
render() {
const { room, sortBy } = this.props;
const games = room.gameList.filter(game => (
this.isUnavailableGame(game) &&
this.isPasswordProtectedGame(game) &&
this.isBuddiesOnlyGame(game)
));
return (
<div className="games">
<Table size="small">
<TableHead>
<TableRow>
{ _.map(this.headerCells, ({ label, field }) => {
const active = field === sortBy.field;
const order = sortBy.order.toLowerCase();
const sortDirection = active ? order : false;
return (
<TableCell sortDirection={sortDirection} key={label}>
{!field ? label : (
<TableSortLabel
active={active}
direction={order}
onClick={() => this.handleSort(field)}
>
{label}
</TableSortLabel>
)}
</TableCell>
);
})}
</TableRow>
</TableHead>
<TableBody>
{ _.map(games, ({ description, gameId, gameType, creatorInfo, maxPlayers, playerCount, spectatorsCount, startTime }) => (
<TableRow key={gameId}>
<TableCell className="games-header__cell single-line-ellipsis">{startTime}</TableCell>
<TableCell className="games-header__cell">
<Tooltip title={description} placement="bottom-start" enterDelay={500}>
<div className="single-line-ellipsis">
{description}
</div>
</Tooltip>
</TableCell>
<TableCell className="games-header__cell">
<UserDisplay user={ creatorInfo } />
</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">{gameType}</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">?</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">{`${playerCount}/${maxPlayers}`}</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">{spectatorsCount}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
}
interface GamesProps {
room: any;
sortBy: any;
}
const mapStateToProps = state => ({
sortBy: RoomsSelectors.getSortGamesBy(state)
});
const Games = ({ room }: GamesProps) => {
const sortBy = useAppSelector(state => RoomsSelectors.getSortGamesBy(state));
export default connect(mapStateToProps)(Games);
const headerCells = [
{ label: 'Age', field: 'startTime' },
{ label: 'Description', field: 'description' },
{ label: 'Creator', field: 'creatorInfo.name' },
{ label: 'Type', field: 'gameType' },
{ label: 'Restrictions' },
{ label: 'Players' },
{ label: 'Spectators', field: 'spectatorsCount' },
];
const handleSort = (sortByField) => {
const { roomId } = room;
const { field, order } = SortUtil.toggleSortBy(sortByField, sortBy);
RoomsDispatch.sortGames(roomId, field, order);
};
const isUnavailableGame = ({ started, maxPlayers, playerCount }) =>
!started && playerCount < maxPlayers;
const isPasswordProtectedGame = ({ withPassword }) => !withPassword;
const isBuddiesOnlyGame = ({ onlyBuddies }) => !onlyBuddies;
const games = room.gameList.filter(game => (
isUnavailableGame(game) &&
isPasswordProtectedGame(game) &&
isBuddiesOnlyGame(game)
));
return (
<div className="games">
<Table size="small">
<TableHead>
<TableRow>
{ _.map(headerCells, ({ label, field }) => {
const active = field === sortBy.field;
const order = sortBy.order.toLowerCase();
const sortDirection = active ? (order === 'asc' ? 'asc' : 'desc') : false;
return (
<TableCell sortDirection={sortDirection} key={label}>
{!field ? label : (
<TableSortLabel
active={active}
direction={order}
onClick={() => handleSort(field)}
>
{label}
</TableSortLabel>
)}
</TableCell>
);
})}
</TableRow>
</TableHead>
<TableBody>
{ _.map(games, ({ description, gameId, gameType, creatorInfo, maxPlayers, playerCount, spectatorsCount, startTime }) => (
<TableRow key={gameId}>
<TableCell className="games-header__cell single-line-ellipsis">{startTime}</TableCell>
<TableCell className="games-header__cell">
<Tooltip title={description} placement="bottom-start" enterDelay={500}>
<div className="single-line-ellipsis">
{description}
</div>
</Tooltip>
</TableCell>
<TableCell className="games-header__cell">
<UserDisplay user={ creatorInfo } />
</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">{gameType}</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">?</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">{`${playerCount}/${maxPlayers}`}</TableCell>
<TableCell className="games-header__cell single-line-ellipsis">{spectatorsCount}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
};
export default Games;