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

gameboard fixes

Browse source
This commit is contained in:
seavor 2026-04-25 14:42:41 -05:00
parent 88489ea2eb
commit f534cd79b7
86 changed files with 4249 additions and 2145 deletions
Download patch file Download diff file Expand all files Collapse all files

33
webclient/src/components/Game/PlayerList/PlayerList.tsx
View file

@ -7,6 +7,19 @@ export interface PlayerListProps {
gameId: number | undefined;
}
// HSV gradient from green (0s) to red (>=10s); black when disconnected
// (ping < 0). Mirrors desktop's PingPixmapGenerator in
// cockatrice/src/interface/pixel_map_generator.cpp.
function pingCssColor(pingSeconds: number | undefined): string {
if (pingSeconds == null || pingSeconds < 0) {
return '#000';
}
const max = 10;
const ratio = Math.min(pingSeconds, max) / max;
const hue = 120 * (1 - ratio);
return `hsl(${hue}, 100%, 50%)`;
}
function PlayerList({ gameId }: PlayerListProps) {
const players = useAppSelector((state) =>
gameId != null ? GameSelectors.getPlayers(state, gameId) : undefined,
@ -32,6 +45,9 @@ function PlayerList({ gameId }: PlayerListProps) {
const name = p.properties.userInfo?.name ?? '(unknown)';
const isActive = pid === activePlayerId;
const isHost = pid === hostId;
const sideboardLocked = p.properties.sideboardLocked ?? false;
const pingSeconds = p.properties.pingSeconds;
const pingLabel = `ping ${pingSeconds ?? '?'}s`;
return (
<li
key={pid}
@ -56,7 +72,22 @@ function PlayerList({ gameId }: PlayerListProps) {
</span>
)}
<span className="player-list__name">{name}</span>
<span className="player-list__ping">{p.properties.pingSeconds}s</span>
{sideboardLocked && (
<span
className="player-list__sideboard-lock"
aria-label="sideboard locked"
title="Sideboard locked"
>
🔒
</span>
)}
<span
className="player-list__ping-dot"
style={{ background: pingCssColor(pingSeconds) }}
aria-label={pingLabel}
title={pingLabel}
data-testid={`ping-dot-${pid}`}
/>
</li>
);
})}