ludo-web-multiplayer/src/components/LoginPage/JoinServer/ServersTable/ServersTable.jsx

41 lines
1.7 KiB
JavaScript

import lock from '../../../../images/login-page/lock.png';
import styles from './ServersTable.module.css';
const ServerListTable = ({ rooms, handleJoinClick, handleDeleteClick }) => {
const safeRooms = Array.isArray(rooms) ? rooms : [];
return (
<table className={styles.rooms}>
<thead>
<tr>
<th className={styles.firstColumn}></th>
<th>Server</th>
<th>#/#</th>
<th>Status</th>
<th className={styles.lastColumn}></th>
</tr>
</thead>
<tbody>
{safeRooms.map((room, index) => {
if (!room) return null;
return room.started ? null : (
<tr key={index}>
<td>{room.private ? <img src={lock} alt='private' /> : null}</td>
<td className={styles.roomName}>{room.name}</td>
<td>{`${(room.players && room.players.length) || 0}/4`}</td>
<td>{room.isStarted ? 'started' : 'waiting'}</td>
<td className={styles.lastColumn}>
<button onClick={() => handleJoinClick(room)}>Join</button>
<button onClick={() => handleDeleteClick(room._id)} className={styles.deleteBtn}>
Delete
</button>
</td>
</tr>
);
})}
</tbody>
</table>
);
};
export default ServerListTable;