Frontend: Show number of online players in match list

Author: JensForstmann

frontend/src/components/MatchList.tsx

@@ -7,6 +7,7 @@ import { t } from '../utils/locale';
 export const MatchTableColumns = [
 	'TEAM_A',
 	'TEAM_B',
+	'ONLINE_PLAYER_COUNT',
 	'AGE',
 	'BEST_OF',
 	'MATCH_STATE',
@@ -20,6 +21,7 @@ export const MatchTableColumns = [
 export const MatchTableColumnLabels: Record<TMatchTableColumns, string> = {
 	TEAM_A: t('Team A'),
 	TEAM_B: t('Team B'),
+	ONLINE_PLAYER_COUNT: t('Online Players'),
 	AGE: t('Age'),
 	BEST_OF: t('Best of'),
 	MATCH_STATE: t('Match State'),
@@ -52,6 +54,9 @@ export const MatchList: Component<{ matches: IMatchResponse[]; columnsToShow: TC
 					<th>{t('#')}</th>
 					{cts().TEAM_A && <th>{MatchTableColumnLabels.TEAM_A}</th>}
 					{cts().TEAM_B && <th>{MatchTableColumnLabels.TEAM_B}</th>}
+					{cts().ONLINE_PLAYER_COUNT && (
+						<th>{MatchTableColumnLabels.ONLINE_PLAYER_COUNT}</th>
+					)}
 					{cts().AGE && <th>{MatchTableColumnLabels.AGE}</th>}
 					{cts().BEST_OF && <th>{MatchTableColumnLabels.BEST_OF}</th>}
 					{cts().MATCH_STATE && <th>{MatchTableColumnLabels.MATCH_STATE}</th>}
@@ -69,6 +74,13 @@ export const MatchList: Component<{ matches: IMatchResponse[]; columnsToShow: TC
 							<td>{i() + 1}</td>
 							{cts().TEAM_A && <td>{match.teamA.name}</td>}
 							{cts().TEAM_B && <td>{match.teamB.name}</td>}
+							{cts().ONLINE_PLAYER_COUNT && (
+								<td>
+									{match.isStopped || match.state === 'FINISHED'
+										? ''
+										: match.players.filter((player) => player.online).length}
+								</td>
+							)}
 							{cts().AGE && <td>{diffString(match.createdAt)}</td>}
 							{cts().BEST_OF && <td>{getTotalNumberOfMaps(match.electionSteps)}</td>}
 							{cts().MATCH_STATE && <td>{match.state}</td>}

frontend/src/pages/matches.tsx

@@ -2,6 +2,7 @@ import { useSearchParams } from '@solidjs/router';
 import { Component, createEffect, For, onCleanup, Show } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { Event, IMatchResponse } from '../../../common';
+import { SvgSettings } from '../assets/Icons';
 import { Card } from '../components/Card';
 import {
 	MatchList,
@@ -12,11 +13,11 @@ import {
 import { createFetcher, getToken } from '../utils/fetcher';
 import { t } from '../utils/locale';
 import { createWebSocket } from '../utils/webSocket';
-import { SvgSettings } from '../assets/Icons';
 
 const defaultColumns: TColumnsToShow = {
 	TEAM_A: true,
 	TEAM_B: true,
+	ONLINE_PLAYER_COUNT: false,
 	AGE: true,
 	BEST_OF: true,
 	MATCH_STATE: true,