Continuing...
This commit is contained in:
parent
6b4e5d1e58
commit
b9d7523800
@ -5,7 +5,6 @@ import "./PlayerList.css";
|
||||
import { MediaControl, MediaAgent, Peer } from "./MediaControl";
|
||||
import Box from "@mui/material/Box";
|
||||
import { GlobalContext } from "./GlobalContext";
|
||||
import useWebSocket from "react-use-websocket";
|
||||
|
||||
type Player = {
|
||||
name: string;
|
||||
@ -22,8 +21,8 @@ type Player = {
|
||||
};
|
||||
|
||||
const PlayerList: React.FC = () => {
|
||||
const { session, socketUrl } = useContext(GlobalContext);
|
||||
const [Players, setPlayers] = useState<Player[] | null>(null);
|
||||
const { session, socketUrl, lastJsonMessage, sendJsonMessage } = useContext(GlobalContext);
|
||||
const [players, setPlayers] = useState<Player[] | null>(null);
|
||||
const [peers, setPeers] = useState<Record<string, Peer>>({});
|
||||
|
||||
const sortPlayers = useCallback(
|
||||
@ -55,82 +54,76 @@ const PlayerList: React.FC = () => {
|
||||
);
|
||||
|
||||
// Use the WebSocket hook for room events with automatic reconnection
|
||||
const { sendJsonMessage } = useWebSocket(socketUrl, {
|
||||
share: true,
|
||||
shouldReconnect: (closeEvent) => true, // Auto-reconnect on connection loss
|
||||
reconnectInterval: 5000,
|
||||
onMessage: (event: MessageEvent) => {
|
||||
if (!session) {
|
||||
return;
|
||||
}
|
||||
const message = JSON.parse(event.data);
|
||||
const data: any = message.data;
|
||||
switch (message.type) {
|
||||
case "room_state": {
|
||||
type RoomStateData = {
|
||||
participants: Player[];
|
||||
};
|
||||
const room_state = data as RoomStateData;
|
||||
console.log(`Players - room_state`, room_state.participants);
|
||||
room_state.participants.forEach((Player) => {
|
||||
Player.local = Player.session_id === session.id;
|
||||
});
|
||||
room_state.participants.sort(sortPlayers);
|
||||
setPlayers(room_state.participants);
|
||||
// Initialize peers with remote mute/video state
|
||||
setPeers((prevPeers) => {
|
||||
const updated: Record<string, Peer> = { ...prevPeers };
|
||||
room_state.participants.forEach((Player) => {
|
||||
// Only update remote peers, never overwrite local peer object
|
||||
if (!Player.local && updated[Player.session_id]) {
|
||||
updated[Player.session_id] = {
|
||||
...updated[Player.session_id],
|
||||
muted: Player.muted ?? false,
|
||||
video_on: Player.video_on ?? true,
|
||||
};
|
||||
}
|
||||
});
|
||||
return updated;
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "update_name": {
|
||||
// Update local session name immediately
|
||||
if (data && typeof data.name === "string") {
|
||||
session.name = data.name;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "peer_state_update": {
|
||||
// Update peer state in peers, but do not override local mute
|
||||
setPeers((prevPeers) => {
|
||||
const updated = { ...prevPeers };
|
||||
const peerId = data.peer_id;
|
||||
if (peerId && updated[peerId]) {
|
||||
updated[peerId] = {
|
||||
...updated[peerId],
|
||||
muted: data.muted,
|
||||
video_on: data.video_on,
|
||||
useEffect(() => {
|
||||
if (!lastJsonMessage) {
|
||||
return;
|
||||
}
|
||||
const data: any = lastJsonMessage;
|
||||
switch (data.type) {
|
||||
case "players": {
|
||||
type RoomStateData = {
|
||||
participants: Player[];
|
||||
};
|
||||
const room_state = data as RoomStateData;
|
||||
console.log(`Players - room_state`, room_state.participants);
|
||||
room_state.participants.forEach((player) => {
|
||||
player.local = player.session_id === session.id;
|
||||
});
|
||||
room_state.participants.sort(sortPlayers);
|
||||
setPlayers(room_state.participants);
|
||||
// Initialize peers with remote mute/video state
|
||||
setPeers((prevPeers) => {
|
||||
const updated: Record<string, Peer> = { ...prevPeers };
|
||||
room_state.participants.forEach((player) => {
|
||||
// Only update remote peers, never overwrite local peer object
|
||||
if (!player.local && updated[player.session_id]) {
|
||||
updated[player.session_id] = {
|
||||
...updated[player.session_id],
|
||||
muted: player.muted ?? false,
|
||||
video_on: player.video_on ?? true,
|
||||
};
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
return updated;
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
case "update_name": {
|
||||
// Update local session name immediately
|
||||
if (data && typeof data.name === "string") {
|
||||
session.name = data.name;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "peer_state_update": {
|
||||
// Update peer state in peers, but do not override local mute
|
||||
setPeers((prevPeers) => {
|
||||
const updated = { ...prevPeers };
|
||||
const peerId = data.peer_id;
|
||||
if (peerId && updated[peerId]) {
|
||||
updated[peerId] = {
|
||||
...updated[peerId],
|
||||
muted: data.muted,
|
||||
video_on: data.video_on,
|
||||
};
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, [lastJsonMessage, session, sortPlayers, setPeers, setPlayers]);
|
||||
|
||||
useEffect(() => {
|
||||
if (Players !== null) {
|
||||
if (players !== null) {
|
||||
return;
|
||||
}
|
||||
sendJsonMessage({
|
||||
type: "list_Players",
|
||||
});
|
||||
}, [Players, sendJsonMessage]);
|
||||
}, [players, sendJsonMessage]);
|
||||
|
||||
return (
|
||||
<Box sx={{ position: "relative", width: "100%" }}>
|
||||
@ -144,17 +137,17 @@ const PlayerList: React.FC = () => {
|
||||
>
|
||||
<MediaAgent {...{ session, socketUrl, peers, setPeers }} />
|
||||
<List className="PlayerSelector">
|
||||
{Players?.map((Player) => (
|
||||
{players?.map((player) => (
|
||||
<Box
|
||||
key={Player.session_id}
|
||||
key={player.session_id}
|
||||
sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
|
||||
className={`PlayerEntry ${Player.local ? "PlayerSelf" : ""}`}
|
||||
className={`PlayerEntry ${player.local ? "PlayerSelf" : ""}`}
|
||||
>
|
||||
<Box>
|
||||
<Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<Box style={{ display: "flex-wrap", alignItems: "center" }}>
|
||||
<div className="Name">{Player.name ? Player.name : Player.session_id}</div>
|
||||
{Player.protected && (
|
||||
<div className="Name">{player.name ? player.name : player.session_id}</div>
|
||||
{player.protected && (
|
||||
<div
|
||||
style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
|
||||
title="This name is protected with a password"
|
||||
@ -162,26 +155,26 @@ const PlayerList: React.FC = () => {
|
||||
🔒
|
||||
</div>
|
||||
)}
|
||||
{Player.bot_instance_id && (
|
||||
{player.bot_instance_id && (
|
||||
<div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot">
|
||||
🤖
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{Player.name && !Player.live && <div className="NoNetwork"></div>}
|
||||
{player.name && !player.live && <div className="NoNetwork"></div>}
|
||||
</Box>
|
||||
{Player.name && Player.live && peers[Player.session_id] && (Player.local || Player.has_media !== false) ? (
|
||||
{player.name && player.live && peers[player.session_id] && (player.local || player.has_media !== false) ? (
|
||||
<MediaControl
|
||||
className="Medium"
|
||||
key={Player.session_id}
|
||||
peer={peers[Player.session_id]}
|
||||
isSelf={Player.local}
|
||||
sendJsonMessage={Player.local ? sendJsonMessage : undefined}
|
||||
remoteAudioMuted={peers[Player.session_id].muted}
|
||||
remoteVideoOff={peers[Player.session_id].video_on === false}
|
||||
key={player.session_id}
|
||||
peer={peers[player.session_id]}
|
||||
isSelf={player.local}
|
||||
sendJsonMessage={player.local ? sendJsonMessage : undefined}
|
||||
remoteAudioMuted={peers[player.session_id].muted}
|
||||
remoteVideoOff={peers[player.session_id].video_on === false}
|
||||
/>
|
||||
) : Player.name && Player.live && Player.has_media === false ? (
|
||||
) : player.name && player.live && player.has_media === false ? (
|
||||
<div
|
||||
className="Video fade-in"
|
||||
style={{
|
||||
|
||||
@ -26,7 +26,16 @@ const router = express.Router();
|
||||
// normalizeIncoming imported from './games/utils'
|
||||
|
||||
import { initGameDB } from "./games/store";
|
||||
import { addActivity, addChatMessage, getNextPlayerSession } from "./games/helpers";
|
||||
import {
|
||||
addActivity,
|
||||
addChatMessage,
|
||||
getNextPlayerSession,
|
||||
clearPlayer,
|
||||
canGiveBuilding,
|
||||
setForRoadPlacement,
|
||||
setForCityPlacement,
|
||||
setForSettlementPlacement,
|
||||
} from "./games/helpers";
|
||||
import type { GameDB } from "./games/store";
|
||||
|
||||
let gameDB: GameDB | undefined;
|
||||
@ -767,24 +776,6 @@ const loadGame = async (id: string) => {
|
||||
return game;
|
||||
};
|
||||
|
||||
const clearPlayer = (player: any) => {
|
||||
const color = player.color;
|
||||
for (let key in player) {
|
||||
delete player[key];
|
||||
}
|
||||
Object.assign(player, newPlayer(color));
|
||||
};
|
||||
|
||||
const canGiveBuilding = (game: any): string | undefined => {
|
||||
if (!game.turn.roll) {
|
||||
return `Admin cannot give a building until the dice have been rolled.`;
|
||||
}
|
||||
if (game.turn.actions && game.turn.actions.length !== 0) {
|
||||
return `Admin cannot give a building while other actions in play: ${game.turn.actions.join(", ")}.`;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const adminCommands = (game: any, action: string, value: string, query: any): any => {
|
||||
let color: string | undefined, parts: RegExpMatchArray | null, session: any, corners: any, corner: any, error: any;
|
||||
void color;
|
||||
@ -1317,7 +1308,6 @@ const setPlayerColor = (game: any, session: any, color: string): string | undefi
|
||||
sendUpdateToPlayers(game, update);
|
||||
return undefined;
|
||||
};
|
||||
|
||||
|
||||
const processCorner = (game: Game, color: string, cornerIndex: number, placedCorner: CornerPlacement): number => {
|
||||
/* If this corner is allocated and isn't assigned to the walking color, skip it */
|
||||
@ -1804,21 +1794,7 @@ const offerToString = (offer: any): string => {
|
||||
);
|
||||
};
|
||||
|
||||
const setForRoadPlacement = (game: Game, limits: any): void => {
|
||||
game.turn.actions = ["place-road"];
|
||||
game.turn.limits = { roads: limits };
|
||||
};
|
||||
|
||||
const setForCityPlacement = (game: Game, limits: any): void => {
|
||||
game.turn.actions = ["place-city"];
|
||||
game.turn.limits = { corners: limits };
|
||||
};
|
||||
|
||||
const setForSettlementPlacement = (game: Game, limits: number[] | undefined, _extra?: any): void => {
|
||||
// limits: array of valid corner indices
|
||||
game.turn.actions = ["place-settlement"];
|
||||
game.turn.limits = { corners: limits };
|
||||
};
|
||||
|
||||
|
||||
router.put("/:id/:action/:value?", async (req, res) => {
|
||||
const { action, id } = req.params,
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
export const addActivity = (game: any, session: any, message: string): void => {
|
||||
import type { Game, Session, Player } from "./types";
|
||||
|
||||
export const addActivity = (game: Game, session: Session | null, message: string): void => {
|
||||
let date = Date.now();
|
||||
if (!game.activities) game.activities = [] as any[];
|
||||
if (game.activities.length && game.activities[game.activities.length - 1].date === date) {
|
||||
date++;
|
||||
}
|
||||
@ -9,9 +12,10 @@ export const addActivity = (game: any, session: any, message: string): void => {
|
||||
}
|
||||
};
|
||||
|
||||
export const addChatMessage = (game: any, session: any, message: string, isNormalChat?: boolean) => {
|
||||
export const addChatMessage = (game: Game, session: Session | null, message: string, isNormalChat?: boolean) => {
|
||||
let now = Date.now();
|
||||
let lastTime = 0;
|
||||
if (!game.chat) game.chat = [] as any[];
|
||||
if (game.chat.length) {
|
||||
lastTime = game.chat[game.chat.length - 1].date;
|
||||
}
|
||||
@ -38,71 +42,151 @@ export const addChatMessage = (game: any, session: any, message: string, isNorma
|
||||
}
|
||||
};
|
||||
|
||||
export const getColorFromName = (game: any, name: string): string => {
|
||||
export const getColorFromName = (game: Game, name: string): string => {
|
||||
for (let id in game.sessions) {
|
||||
if (game.sessions[id].name === name) {
|
||||
return game.sessions[id].color;
|
||||
const s = game.sessions[id];
|
||||
if (s && s.name === name) {
|
||||
return s.color || "";
|
||||
}
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
export const getLastPlayerName = (game: any): string => {
|
||||
let index = game.playerOrder.length - 1;
|
||||
export const getLastPlayerName = (game: Game): string => {
|
||||
const index = (game.playerOrder || []).length - 1;
|
||||
const color = (game.playerOrder || [])[index];
|
||||
if (!color) return "";
|
||||
for (let id in game.sessions) {
|
||||
if (game.sessions[id].color === game.playerOrder[index]) {
|
||||
return game.sessions[id].name;
|
||||
const s = game.sessions[id];
|
||||
if (s && s.color === color) {
|
||||
return s.name || "";
|
||||
}
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
export const getFirstPlayerName = (game: any): string => {
|
||||
let index = 0;
|
||||
export const getFirstPlayerName = (game: Game): string => {
|
||||
const color = (game.playerOrder || [])[0];
|
||||
if (!color) return "";
|
||||
for (let id in game.sessions) {
|
||||
if (game.sessions[id].color === game.playerOrder[index]) {
|
||||
return game.sessions[id].name;
|
||||
const s = game.sessions[id];
|
||||
if (s && s.color === color) {
|
||||
return s.name || "";
|
||||
}
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
export const getNextPlayerSession = (game: any, name: string): any => {
|
||||
let color;
|
||||
export const getNextPlayerSession = (game: Game, name: string): Session | undefined => {
|
||||
let color: string | undefined;
|
||||
for (let id in game.sessions) {
|
||||
if (game.sessions[id].name === name) {
|
||||
color = game.sessions[id].color;
|
||||
const s = game.sessions[id];
|
||||
if (s && s.name === name) {
|
||||
color = s.color;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!color) return undefined;
|
||||
|
||||
let index = game.playerOrder.indexOf(color);
|
||||
index = (index + 1) % game.playerOrder.length;
|
||||
color = game.playerOrder[index];
|
||||
const order = game.playerOrder || [];
|
||||
let index = order.indexOf(color);
|
||||
if (index === -1) return undefined;
|
||||
index = (index + 1) % order.length;
|
||||
const nextColor = order[index];
|
||||
for (let id in game.sessions) {
|
||||
if (game.sessions[id].color === color) {
|
||||
return game.sessions[id];
|
||||
const s = game.sessions[id];
|
||||
if (s && s.color === nextColor) {
|
||||
return s;
|
||||
}
|
||||
}
|
||||
console.error(`getNextPlayerSession -- no player found!`);
|
||||
console.log(game.players);
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const getPrevPlayerSession = (game: any, name: string): any => {
|
||||
let color;
|
||||
export const getPrevPlayerSession = (game: Game, name: string): Session | undefined => {
|
||||
let color: string | undefined;
|
||||
for (let id in game.sessions) {
|
||||
if (game.sessions[id].name === name) {
|
||||
color = game.sessions[id].color;
|
||||
const s = game.sessions[id];
|
||||
if (s && s.name === name) {
|
||||
color = s.color;
|
||||
break;
|
||||
}
|
||||
}
|
||||
let index = game.playerOrder.indexOf(color);
|
||||
index = (index - 1) % game.playerOrder.length;
|
||||
if (!color) return undefined;
|
||||
const order = game.playerOrder || [];
|
||||
let index = order.indexOf(color);
|
||||
if (index === -1) return undefined;
|
||||
index = (index - 1 + order.length) % order.length;
|
||||
const prevColor = order[index];
|
||||
for (let id in game.sessions) {
|
||||
if (game.sessions[id].color === game.playerOrder[index]) {
|
||||
return game.sessions[id];
|
||||
const s = game.sessions[id];
|
||||
if (s && s.color === prevColor) {
|
||||
return s;
|
||||
}
|
||||
}
|
||||
console.error(`getNextPlayerSession -- no player found!`);
|
||||
console.error(`getPrevPlayerSession -- no player found!`);
|
||||
console.log(game.players);
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const clearPlayer = (player: Player) => {
|
||||
const color = player.color;
|
||||
for (let key in player) {
|
||||
// delete all runtime fields
|
||||
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
|
||||
delete (player as any)[key];
|
||||
}
|
||||
|
||||
// Inline minimal newPlayer factory to avoid circular import at runtime
|
||||
const base = {
|
||||
roads: 15,
|
||||
cities: 4,
|
||||
settlements: 5,
|
||||
points: 0,
|
||||
status: "Not active",
|
||||
lastActive: 0,
|
||||
resources: 0,
|
||||
order: 0,
|
||||
stone: 0,
|
||||
wheat: 0,
|
||||
sheep: 0,
|
||||
wood: 0,
|
||||
brick: 0,
|
||||
army: 0,
|
||||
development: [],
|
||||
color: color,
|
||||
name: "",
|
||||
totalTime: 0,
|
||||
turnStart: 0,
|
||||
ports: 0,
|
||||
developmentCards: 0,
|
||||
} as Player;
|
||||
|
||||
Object.assign(player, base);
|
||||
};
|
||||
|
||||
export const canGiveBuilding = (game: Game): string | undefined => {
|
||||
if (!game.turn.roll) {
|
||||
return `Admin cannot give a building until the dice have been rolled.`;
|
||||
}
|
||||
if (game.turn.actions && game.turn.actions.length !== 0) {
|
||||
return `Admin cannot give a building while other actions in play: ${game.turn.actions.join(", ")}.`;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const setForRoadPlacement = (game: Game, limits: any): void => {
|
||||
game.turn.actions = ["place-road"];
|
||||
game.turn.limits = { roads: limits };
|
||||
};
|
||||
|
||||
export const setForCityPlacement = (game: Game, limits: any): void => {
|
||||
game.turn.actions = ["place-city"];
|
||||
game.turn.limits = { corners: limits };
|
||||
};
|
||||
|
||||
export const setForSettlementPlacement = (game: Game, limits: number[] | undefined, _extra?: any): void => {
|
||||
game.turn.actions = ["place-settlement"];
|
||||
game.turn.limits = { corners: limits };
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user