Restructuring
This commit is contained in:
parent
5acf71b2a3
commit
45e01d5e89
@ -1,593 +1,127 @@
|
|||||||
import React, { useState, useCallback, useEffect, useRef } from "react";
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
import { BrowserRouter as Router, Route, Routes, useParams, useNavigate } from "react-router-dom";
|
import { Paper, Typography } from "@mui/material";
|
||||||
|
|
||||||
import Paper from "@mui/material/Paper";
|
import { Session } from "./GlobalContext";
|
||||||
import Button from "@mui/material/Button";
|
|
||||||
|
|
||||||
import { GlobalContext } from "./GlobalContext";
|
|
||||||
import { PlayerList } from "./PlayerList";
|
|
||||||
import { Chat } from "./Chat";
|
|
||||||
import { Board } from "./Board";
|
|
||||||
import { Actions } from "./Actions";
|
|
||||||
import { base } from "./Common";
|
|
||||||
import { GameOrder } from "./GameOrder";
|
|
||||||
import { Activities } from "./Activities";
|
|
||||||
import { SelectPlayer } from "./SelectPlayer";
|
|
||||||
import { PlayersStatus } from "./PlayersStatus";
|
|
||||||
import { ViewCard } from "./ViewCard";
|
|
||||||
import { ChooseCard } from "./ChooseCard";
|
|
||||||
import { Hand } from "./Hand";
|
|
||||||
import { Trade } from "./Trade";
|
|
||||||
import { Winner } from "./Winner";
|
|
||||||
import { HouseRules } from "./HouseRules";
|
|
||||||
import { Dice } from "./Dice";
|
|
||||||
import { assetsPath } from "./Common";
|
|
||||||
|
|
||||||
// history replaced by react-router's useNavigate
|
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import equal from "fast-deep-equal";
|
import { base } from "./Common";
|
||||||
|
import { Box } from "@mui/material";
|
||||||
|
import { BrowserRouter as Router, Route, Routes, useNavigate } from "react-router-dom";
|
||||||
|
import { ReadyState } from "react-use-websocket";
|
||||||
|
import { ConnectionStatus } from "./ConnectionStatus";
|
||||||
|
import { RoomView } from "./RoomView";
|
||||||
|
import { sessionApi } from "./api-client";
|
||||||
|
|
||||||
import itsYourTurnAudio from './assets/its-your-turn.mp3';
|
console.log(`Peddlers of Ketran Build: ${import.meta.env.VITE_APP_POK_BUILD}`);
|
||||||
import robberAudio from './assets/robber.mp3';
|
|
||||||
import knightsAudio from './assets/the-knights-who-say-ni.mp3';
|
|
||||||
import volcanoAudio from './assets/volcano-eruption.mp3';
|
|
||||||
|
|
||||||
const audioFiles: Record<string, string> = {
|
interface LoadingProps {
|
||||||
'its-your-turn.mp3': itsYourTurnAudio,
|
setError: (error: string | null) => void;
|
||||||
'robber.mp3': robberAudio,
|
}
|
||||||
'the-knights-who-say-ni.mp3': knightsAudio,
|
|
||||||
'volcano-eruption.mp3': volcanoAudio,
|
|
||||||
};
|
|
||||||
|
|
||||||
type AudioEffect = HTMLAudioElement & { hasPlayed?: boolean };
|
const Loading = (props: LoadingProps) => {
|
||||||
const audioEffects: Record<string, AudioEffect | undefined> = {};
|
|
||||||
|
|
||||||
const loadAudio = (src: string) => {
|
|
||||||
const audio = document.createElement("audio") as AudioEffect;
|
|
||||||
audio.src = audioFiles[src];
|
|
||||||
console.log("Loading audio:", audio.src);
|
|
||||||
audio.setAttribute("preload", "auto");
|
|
||||||
audio.setAttribute("controls", "none");
|
|
||||||
audio.style.display = "none";
|
|
||||||
document.body.appendChild(audio);
|
|
||||||
audio.load();
|
|
||||||
audio.addEventListener('error', (e) => console.error("Audio load error:", e, audio.src));
|
|
||||||
audio.addEventListener('canplay', () => console.log("Audio can play:", audio.src));
|
|
||||||
return audio;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Table: React.FC = () => {
|
|
||||||
const params = useParams();
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [gameId, setGameId] = useState<string | undefined>(params.gameId ? (params.gameId as string) : undefined);
|
const { setError } = props;
|
||||||
const [ws, setWs] = useState<WebSocket | undefined>(undefined); /* tracks full websocket lifetime */
|
|
||||||
const [connection, setConnection] = useState<WebSocket | undefined>(undefined); /* set after ws is in OPEN */
|
|
||||||
const [retryConnection, setRetryConnection] =
|
|
||||||
useState<boolean>(true); /* set when connection should be re-established */
|
|
||||||
const [name, setName] = useState<string>("");
|
|
||||||
const [error, setError] = useState<string | undefined>(undefined);
|
|
||||||
const [warning, setWarning] = useState<string | undefined>(undefined);
|
|
||||||
const [loaded, setLoaded] = useState<boolean>(false);
|
|
||||||
|
|
||||||
type Turn = { color?: string; roll?: number; actions?: string[]; select?: Record<string, number> };
|
useEffect(() => {
|
||||||
type PrivateType = { name?: string; color?: string; turnNotice?: string };
|
const createRoom = async () => {
|
||||||
|
try {
|
||||||
const [dice, setDice] = useState<number[] | undefined>(undefined);
|
const room = await sessionApi.createRoom();
|
||||||
const [state, setState] = useState<string | undefined>(undefined);
|
console.log(`Loading - created room`, room);
|
||||||
const [color, setColor] = useState<string | undefined>(undefined);
|
navigate(`${base}/${room.name}`);
|
||||||
const [priv, setPriv] = useState<PrivateType | undefined>(undefined);
|
} catch (err) {
|
||||||
const [turn, setTurn] = useState<Turn | undefined>(undefined);
|
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
|
||||||
const [buildActive, setBuildActive] = useState<boolean>(false);
|
console.error("Failed to create room:", errorMessage);
|
||||||
const [tradeActive, setTradeActive] = useState<boolean>(false);
|
setError(errorMessage);
|
||||||
const [cardActive, setCardActive] = useState<unknown>(undefined);
|
|
||||||
const [houseRulesActive, setHouseRulesActive] = useState<boolean>(false);
|
|
||||||
const [winnerDismissed, setWinnerDismissed] = useState<boolean>(false);
|
|
||||||
const [global, setGlobal] = useState<Record<string, unknown>>({});
|
|
||||||
const [count, setCount] = useState<number>(0);
|
|
||||||
const [audio, setAudio] = useState<boolean>(
|
|
||||||
localStorage.getItem("audio") ? JSON.parse(localStorage.getItem("audio") as string) : false
|
|
||||||
);
|
|
||||||
const [animations, setAnimations] = useState<boolean>(
|
|
||||||
localStorage.getItem("animations") ? JSON.parse(localStorage.getItem("animations") as string) : false
|
|
||||||
);
|
|
||||||
const [volume, setVolume] = useState<number>(
|
|
||||||
localStorage.getItem("volume") ? parseFloat(localStorage.getItem("volume") as string) : 0.5
|
|
||||||
);
|
|
||||||
const fields = ["id", "state", "color", "name", "private", "dice", "turn"];
|
|
||||||
|
|
||||||
const onWsOpen = (event: Event) => {
|
|
||||||
console.log(`ws: open`);
|
|
||||||
setError("");
|
|
||||||
|
|
||||||
setConnection(ws);
|
|
||||||
const sock = event.target as WebSocket;
|
|
||||||
sock.send(JSON.stringify({ type: "game-update" }));
|
|
||||||
sock.send(JSON.stringify({ type: "get", fields }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const onWsMessage = (event: MessageEvent) => {
|
|
||||||
const data = JSON.parse(event.data as string);
|
|
||||||
switch (data.type) {
|
|
||||||
case "error":
|
|
||||||
console.error(`App - error`, data.error);
|
|
||||||
setError(data.error);
|
|
||||||
break;
|
|
||||||
case "warning":
|
|
||||||
console.warn(`App - warning`, data.warning);
|
|
||||||
setWarning(data.warning);
|
|
||||||
setTimeout(() => {
|
|
||||||
setWarning("");
|
|
||||||
}, 3000);
|
|
||||||
break;
|
|
||||||
case "game-update":
|
|
||||||
if (!loaded) {
|
|
||||||
setLoaded(true);
|
|
||||||
}
|
|
||||||
console.log(`app - message - ${data.type}`, data.update);
|
|
||||||
|
|
||||||
if ("private" in data.update && !equal(priv, data.update.private)) {
|
|
||||||
const priv = data.update.private;
|
|
||||||
if (priv.name !== name) {
|
|
||||||
setName(priv.name);
|
|
||||||
}
|
|
||||||
if (priv.color !== color) {
|
|
||||||
setColor(priv.color);
|
|
||||||
}
|
|
||||||
setPriv(priv);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ("name" in data.update) {
|
|
||||||
if (data.update.name) {
|
|
||||||
setName(data.update.name);
|
|
||||||
} else {
|
|
||||||
setWarning("");
|
|
||||||
setError("");
|
|
||||||
setPriv(undefined);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if ("id" in data.update && data.update.id !== gameId) {
|
|
||||||
setGameId(data.update.id);
|
|
||||||
}
|
|
||||||
if ("state" in data.update && data.update.state !== state) {
|
|
||||||
if (data.update.state !== "winner" && winnerDismissed) {
|
|
||||||
setWinnerDismissed(false);
|
|
||||||
}
|
|
||||||
setState(data.update.state);
|
|
||||||
}
|
|
||||||
if ("dice" in data.update && !equal(data.update.dice, dice)) {
|
|
||||||
setDice(data.update.dice);
|
|
||||||
}
|
|
||||||
if ("turn" in data.update && !equal(data.update.turn, turn)) {
|
|
||||||
setTurn(data.update.turn);
|
|
||||||
}
|
|
||||||
if ("color" in data.update && data.update.color !== color) {
|
|
||||||
setColor(data.update.color);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
createRoom();
|
||||||
const sendUpdate = (update: unknown) => {
|
}, [setError]);
|
||||||
if (ws) ws.send(JSON.stringify(update));
|
|
||||||
};
|
|
||||||
|
|
||||||
const cbResetConnection = useCallback(() => {
|
|
||||||
let timer: number | null = null;
|
|
||||||
function reset() {
|
|
||||||
timer = null;
|
|
||||||
setRetryConnection(true);
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
if (timer) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
}
|
|
||||||
timer = window.setTimeout(reset, 5000);
|
|
||||||
};
|
|
||||||
}, [setRetryConnection]);
|
|
||||||
|
|
||||||
const resetConnection = cbResetConnection();
|
|
||||||
|
|
||||||
if (global.ws !== connection || global.name !== name || global.gameId !== gameId) {
|
|
||||||
setGlobal({
|
|
||||||
ws: connection,
|
|
||||||
name,
|
|
||||||
gameId,
|
|
||||||
sendJsonMessage: sendUpdate,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const onWsError = () => {
|
|
||||||
const error =
|
|
||||||
`Connection to Ketr Ketran game server failed! ` + `Connection attempt will be retried every 5 seconds.`;
|
|
||||||
setError(error);
|
|
||||||
setGlobal(Object.assign({}, global, { ws: undefined, sendJsonMessage: undefined }));
|
|
||||||
setWs(undefined); /* clear the socket */
|
|
||||||
setConnection(undefined); /* clear the connection */
|
|
||||||
resetConnection();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onWsClose = () => {
|
|
||||||
const error = `Connection to Ketr Ketran game was lost. ` + `Attempting to reconnect...`;
|
|
||||||
setError(error);
|
|
||||||
setGlobal(Object.assign({}, global, { ws: undefined, sendJsonMessage: undefined }));
|
|
||||||
setWs(undefined); /* clear the socket */
|
|
||||||
setConnection(undefined); /* clear the connection */
|
|
||||||
resetConnection();
|
|
||||||
};
|
|
||||||
|
|
||||||
const refWsOpen = useRef<(e: Event) => void>(() => {});
|
|
||||||
useEffect(() => {
|
|
||||||
refWsOpen.current = onWsOpen;
|
|
||||||
}, [onWsOpen]);
|
|
||||||
const refWsMessage = useRef<(e: MessageEvent) => void>(() => {});
|
|
||||||
useEffect(() => {
|
|
||||||
refWsMessage.current = onWsMessage;
|
|
||||||
}, [onWsMessage]);
|
|
||||||
const refWsClose = useRef<(e: CloseEvent) => void>(() => {});
|
|
||||||
useEffect(() => {
|
|
||||||
refWsClose.current = onWsClose;
|
|
||||||
}, [onWsClose]);
|
|
||||||
const refWsError = useRef<(e: Event) => void>(() => {});
|
|
||||||
useEffect(() => {
|
|
||||||
refWsError.current = onWsError;
|
|
||||||
}, [onWsError]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (gameId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
window
|
|
||||||
.fetch(`${base}/api/v1/games/`, {
|
|
||||||
method: "POST",
|
|
||||||
cache: "no-cache",
|
|
||||||
credentials: "same-origin",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (res.status >= 400) {
|
|
||||||
const error =
|
|
||||||
`Unable to connect to Ketr Ketran game server! ` + `Try refreshing your browser in a few seconds.`;
|
|
||||||
setError(error);
|
|
||||||
throw new Error(error);
|
|
||||||
}
|
|
||||||
return res.json();
|
|
||||||
})
|
|
||||||
.then((update) => {
|
|
||||||
if (update.id !== gameId) {
|
|
||||||
navigate(`/${update.id}`);
|
|
||||||
setGameId(update.id);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error(error);
|
|
||||||
});
|
|
||||||
}, [gameId, setGameId]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!gameId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const unbind = () => {
|
|
||||||
console.log(`table - unbind`);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!ws && !connection && retryConnection) {
|
|
||||||
const loc = window.location;
|
|
||||||
let new_uri = "";
|
|
||||||
if (loc.protocol === "https:") {
|
|
||||||
new_uri = "wss";
|
|
||||||
} else {
|
|
||||||
new_uri = "ws";
|
|
||||||
}
|
|
||||||
new_uri = `${new_uri}://${loc.host}${base}/api/v1/games/ws/${gameId}?${count}`;
|
|
||||||
setWs(new WebSocket(new_uri));
|
|
||||||
setConnection(undefined);
|
|
||||||
setRetryConnection(false);
|
|
||||||
setCount(count + 1);
|
|
||||||
return unbind;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!ws) {
|
|
||||||
return unbind;
|
|
||||||
}
|
|
||||||
|
|
||||||
const cbOpen = (e: Event) => refWsOpen.current(e);
|
|
||||||
const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
|
|
||||||
const cbClose = (e: CloseEvent) => refWsClose.current(e);
|
|
||||||
const cbError = (e: Event) => refWsError.current(e);
|
|
||||||
|
|
||||||
ws.addEventListener("open", cbOpen);
|
|
||||||
ws.addEventListener("close", cbClose);
|
|
||||||
ws.addEventListener("error", cbError);
|
|
||||||
ws.addEventListener("message", cbMessage);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unbind();
|
|
||||||
ws.removeEventListener("open", cbOpen);
|
|
||||||
ws.removeEventListener("close", cbClose);
|
|
||||||
ws.removeEventListener("error", cbError);
|
|
||||||
ws.removeEventListener("message", cbMessage);
|
|
||||||
};
|
|
||||||
}, [
|
|
||||||
ws,
|
|
||||||
setWs,
|
|
||||||
connection,
|
|
||||||
setConnection,
|
|
||||||
retryConnection,
|
|
||||||
setRetryConnection,
|
|
||||||
gameId,
|
|
||||||
refWsOpen,
|
|
||||||
refWsMessage,
|
|
||||||
refWsClose,
|
|
||||||
refWsError,
|
|
||||||
count,
|
|
||||||
setCount,
|
|
||||||
]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (state === "volcano") {
|
|
||||||
if (!audioEffects.volcano) {
|
|
||||||
audioEffects.volcano = loadAudio("volcano-eruption.mp3");
|
|
||||||
audioEffects.volcano.volume = volume * volume;
|
|
||||||
} else {
|
|
||||||
if (!audioEffects.volcano.hasPlayed && audioEffects.volcano.readyState >= 2) {
|
|
||||||
audioEffects.volcano.hasPlayed = true;
|
|
||||||
audioEffects.volcano.play().catch((e) => console.error("Audio play failed:", e));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (audioEffects.volcano) {
|
|
||||||
audioEffects.volcano.hasPlayed = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [state, volume]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (turn && turn.color === color && state !== "lobby") {
|
|
||||||
if (!audioEffects.yourTurn) {
|
|
||||||
audioEffects.yourTurn = loadAudio("its-your-turn.mp3");
|
|
||||||
audioEffects.yourTurn.volume = volume * volume;
|
|
||||||
} else {
|
|
||||||
if (!audioEffects.yourTurn.hasPlayed && audioEffects.yourTurn.readyState >= 2) {
|
|
||||||
audioEffects.yourTurn.hasPlayed = true;
|
|
||||||
audioEffects.yourTurn.play().catch((e) => console.error("Audio play failed:", e));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (turn) {
|
|
||||||
if (audioEffects.yourTurn) {
|
|
||||||
audioEffects.yourTurn.hasPlayed = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (turn && turn.roll === 7) {
|
|
||||||
if (!audioEffects.robber) {
|
|
||||||
audioEffects.robber = loadAudio("robber.mp3");
|
|
||||||
audioEffects.robber.volume = volume * volume;
|
|
||||||
} else {
|
|
||||||
if (!audioEffects.robber.hasPlayed && audioEffects.robber.readyState >= 2) {
|
|
||||||
audioEffects.robber.hasPlayed = true;
|
|
||||||
audioEffects.robber.play().catch((e) => console.error("Audio play failed:", e));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (turn) {
|
|
||||||
if (audioEffects.robber) {
|
|
||||||
audioEffects.robber.hasPlayed = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (turn && turn.actions && turn.actions.indexOf("playing-knight") !== -1) {
|
|
||||||
if (!audioEffects.knights) {
|
|
||||||
audioEffects.knights = loadAudio("the-knights-who-say-ni.mp3");
|
|
||||||
audioEffects.knights.volume = volume * volume;
|
|
||||||
} else {
|
|
||||||
if (!audioEffects.knights.hasPlayed && audioEffects.knights.readyState >= 2) {
|
|
||||||
audioEffects.knights.hasPlayed = true;
|
|
||||||
audioEffects.knights.play().catch((e) => console.error("Audio play failed:", e));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (turn && turn.actions && turn.actions.indexOf("playing-knight") === -1) {
|
|
||||||
if (audioEffects.knights) {
|
|
||||||
audioEffects.knights.hasPlayed = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [state, turn, color, volume]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
for (const key in audioEffects) {
|
|
||||||
audioEffects[key].volume = volume * volume;
|
|
||||||
}
|
|
||||||
}, [volume]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GlobalContext.Provider value={global}>
|
<Paper sx={{ p: 2, m: 2, width: "fit-content", backgroundColor: "#ddddff" }}>
|
||||||
{/* <PingPong/> */}
|
<Typography>Loading...</Typography>
|
||||||
<div className="Table">
|
|
||||||
<div className="ActivitiesBox">
|
|
||||||
<Activities />
|
|
||||||
{dice && dice.length && (
|
|
||||||
<div className="DiceRoll">
|
|
||||||
{dice.length === 1 && <div>Volcano roll!</div>}
|
|
||||||
{dice.length === 2 && <div>Current roll</div>}
|
|
||||||
<div>
|
|
||||||
<Dice pips={dice[0]} />
|
|
||||||
{dice.length === 2 && <Dice pips={dice[1]} />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="Game">
|
|
||||||
<div className="Dialogs">
|
|
||||||
{error && (
|
|
||||||
<div className="Dialog ErrorDialog">
|
|
||||||
<Paper className="Error">
|
|
||||||
<div>{error}</div>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
dismiss
|
|
||||||
</Button>
|
|
||||||
</Paper>
|
</Paper>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{priv && priv.turnNotice && (
|
|
||||||
<div className="Dialog TurnNoticeDialog">
|
|
||||||
<Paper className="TurnNotice">
|
|
||||||
<div>{priv.turnNotice}</div>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
sendUpdate({ type: "turn-notice" });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
dismiss
|
|
||||||
</Button>
|
|
||||||
</Paper>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{warning && (
|
|
||||||
<div className="Dialog WarningDialog">
|
|
||||||
<Paper className="Warning">
|
|
||||||
<div>{warning}</div>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setWarning("");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
dismiss
|
|
||||||
</Button>
|
|
||||||
</Paper>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{state === "normal" && <SelectPlayer />}
|
|
||||||
{color && state === "game-order" && <GameOrder />}
|
|
||||||
|
|
||||||
{!winnerDismissed && <Winner {...{ winnerDismissed, setWinnerDismissed }} />}
|
|
||||||
{houseRulesActive && <HouseRules {...{ houseRulesActive, setHouseRulesActive }} />}
|
|
||||||
<ViewCard {...{ cardActive, setCardActive }} />
|
|
||||||
<ChooseCard />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Board animations={animations} />
|
|
||||||
<PlayersStatus active={false} />
|
|
||||||
<PlayersStatus active={true} />
|
|
||||||
<Hand {...{ buildActive, setBuildActive, setCardActive }} />
|
|
||||||
</div>
|
|
||||||
<div className="Sidebar">
|
|
||||||
{name !== "" && volume !== undefined && (
|
|
||||||
<Paper className="Volume">
|
|
||||||
<div>Audio effects</div>{" "}
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="audio"
|
|
||||||
name="audio"
|
|
||||||
defaultChecked={audio ? true : false}
|
|
||||||
onInput={() => {
|
|
||||||
const value = !audio;
|
|
||||||
localStorage.setItem("audio", JSON.stringify(value));
|
|
||||||
setAudio(value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div>Sound effects volume</div>{" "}
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
id="volume"
|
|
||||||
name="volume"
|
|
||||||
value={volume * 100}
|
|
||||||
min="0"
|
|
||||||
max="100"
|
|
||||||
onInput={(e) => {
|
|
||||||
const alpha = parseFloat((e.currentTarget as HTMLInputElement).value) / 100;
|
|
||||||
|
|
||||||
localStorage.setItem("volume", alpha.toString());
|
|
||||||
setVolume(alpha);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div>Animations</div>{" "}
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="animations"
|
|
||||||
name="animations"
|
|
||||||
defaultChecked={animations ? true : false}
|
|
||||||
onInput={() => {
|
|
||||||
const value = !animations;
|
|
||||||
localStorage.setItem("animations", JSON.stringify(value));
|
|
||||||
setAnimations(value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
{name !== "" && <PlayerList />}
|
|
||||||
{/* Trade is an untyped JS component; assert its type to avoid `any` */}
|
|
||||||
{(() => {
|
|
||||||
const TradeComponent = Trade as unknown as React.ComponentType<{
|
|
||||||
tradeActive: boolean;
|
|
||||||
setTradeActive: (v: boolean) => void;
|
|
||||||
}>;
|
|
||||||
return <TradeComponent tradeActive={tradeActive} setTradeActive={setTradeActive} />;
|
|
||||||
})()}
|
|
||||||
{name !== "" && <Chat />}
|
|
||||||
{/* name !== "" && <VideoFeeds/> */}
|
|
||||||
{loaded && (
|
|
||||||
<Actions
|
|
||||||
{...{ buildActive, setBuildActive, tradeActive, setTradeActive, houseRulesActive, setHouseRulesActive }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</GlobalContext.Provider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App = () => {
|
||||||
const [playerId, setPlayerId] = useState<string | undefined>(undefined);
|
const [session, setSession] = useState<Session | null>(null);
|
||||||
const [error, setError] = useState<string | undefined>(undefined);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [sessionRetryAttempt, setSessionRetryAttempt] = useState<number>(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (playerId) {
|
if (error) {
|
||||||
|
setTimeout(() => setError(null), 5000);
|
||||||
|
}
|
||||||
|
}, [error]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!session) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
window
|
console.log(`App - sessionId`, session.id);
|
||||||
.fetch(`${base}/api/v1/games/`, {
|
}, [session]);
|
||||||
method: "GET",
|
|
||||||
cache: "no-cache",
|
|
||||||
credentials: "same-origin" /* include cookies */,
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (res.status >= 400) {
|
|
||||||
const error =
|
|
||||||
`Unable to connect to Ketr Ketran game server! ` + `Try refreshing your browser in a few seconds.`;
|
|
||||||
setError(error);
|
|
||||||
}
|
|
||||||
return res.json();
|
|
||||||
})
|
|
||||||
.then((data) => {
|
|
||||||
setPlayerId(data.player);
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
}, [playerId, setPlayerId]);
|
|
||||||
|
|
||||||
if (!playerId) {
|
const getSession = useCallback(async () => {
|
||||||
return <>{error}</>;
|
try {
|
||||||
|
const session = await sessionApi.getCurrent();
|
||||||
|
console.log(`App - got sessionId`, session.id);
|
||||||
|
setSession(session);
|
||||||
|
setSessionRetryAttempt(0);
|
||||||
|
} catch (err) {
|
||||||
|
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
|
||||||
|
console.error("Failed to get session:", errorMessage);
|
||||||
|
setError(errorMessage);
|
||||||
|
|
||||||
|
// Schedule retry after 5 seconds
|
||||||
|
setSessionRetryAttempt((prev) => prev + 1);
|
||||||
|
setTimeout(() => {
|
||||||
|
getSession(); // Retry
|
||||||
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (session) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
getSession();
|
||||||
|
}, [session, getSession]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Router basename={base}>
|
<Box
|
||||||
|
sx={{
|
||||||
|
p: { xs: 1, sm: 2 },
|
||||||
|
// maxWidth: { xs: "100%", sm: 800 },
|
||||||
|
margin: "0 auto",
|
||||||
|
height: "100vh",
|
||||||
|
overflowY: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!session && (
|
||||||
|
<ConnectionStatus
|
||||||
|
readyState={sessionRetryAttempt > 0 ? ReadyState.CLOSED : ReadyState.CONNECTING}
|
||||||
|
reconnectAttempt={sessionRetryAttempt}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{session && (
|
||||||
|
<Router
|
||||||
|
future={{
|
||||||
|
v7_startTransition: true,
|
||||||
|
v7_relativeSplatPath: true,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route element={<Table />} path="/:gameId" />
|
<Route element={<RoomView {...{ setError, session, setSession }} />} path={`${base}/:roomName`} />
|
||||||
<Route element={<Table />} path="/" />
|
<Route element={<Loading {...{ setError }} />} path={`${base}`} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<Paper className="Error" sx={{ p: 2, m: 2, width: "fit-content", backgroundColor: "#ffdddd" }}>
|
||||||
|
<Typography color="red">{error}</Typography>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,86 +1,57 @@
|
|||||||
|
|
||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
||||||
function debounce<T extends (...args: any[]) => void>(fn: T, ms: number): T {
|
|
||||||
let timer: any = null;
|
|
||||||
return function(...args: Parameters<T>) {
|
|
||||||
if (timer) clearTimeout(timer);
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
timer = null;
|
|
||||||
fn.apply(this, args);
|
|
||||||
}, ms);
|
|
||||||
} as T;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Prefer an explicit API/base provided via environment variable. Different
|
|
||||||
// deployments and scripts historically used different variable names
|
|
||||||
// (VITE_API_BASE, VITE_BASEPATH, PUBLIC_URL). Try them in a sensible order
|
|
||||||
// so the client correctly computes its `base` (router basename and asset
|
|
||||||
// prefix) regardless of which one is defined.
|
|
||||||
|
|
||||||
// Defensive handling: some env consumers or docker-compose YAML authors may
|
// Defensive handling: some env consumers or docker-compose YAML authors may
|
||||||
// accidentally include literal quotes when setting env vars (for example,
|
// accidentally include literal quotes when setting env vars (for example,
|
||||||
// `VITE_API_BASE=""`). That results in the string `""` being present at
|
// `VITE_API_BASE=""`). That results in the string `""` being present at
|
||||||
// runtime and ends up URL-encoded as `%22%22` in fetches. Normalize here so
|
// runtime and ends up URL-encoded as `%22%22` in fetches. Normalize here so
|
||||||
// an accidental quoted-empty value becomes an empty string.
|
// an accidental quoted-empty value becomes an empty string.
|
||||||
const candidateEnvVars = [
|
const candidateEnvVars = [import.meta.env.VITE_API_BASE, import.meta.env.VITE_BASEPATH, import.meta.env.PUBLIC_URL];
|
||||||
import.meta.env.VITE_API_BASE,
|
let rawEnvApiBase = "";
|
||||||
// Some deployments (server-side) set VITE_BASEPATH (note the case).
|
|
||||||
import.meta.env.VITE_BASEPATH,
|
|
||||||
// Older scripts or build systems sometimes populate PUBLIC_URL.
|
|
||||||
import.meta.env.PUBLIC_URL,
|
|
||||||
];
|
|
||||||
|
|
||||||
let rawEnvApiBase = '';
|
|
||||||
for (const candidate of candidateEnvVars) {
|
for (const candidate of candidateEnvVars) {
|
||||||
if (typeof candidate === 'string' && candidate.trim() !== '') {
|
if (typeof candidate === "string" && candidate.trim() !== "") {
|
||||||
rawEnvApiBase = candidate;
|
rawEnvApiBase = candidate;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let envApiBase = typeof rawEnvApiBase === 'string' ? rawEnvApiBase.trim() : '';
|
let envApiBase = typeof rawEnvApiBase === "string" ? rawEnvApiBase.trim() : "";
|
||||||
|
|
||||||
// If someone set the literal value '""' or "''", treat it as empty.
|
// If someone set the literal value '""' or "''", treat it as empty.
|
||||||
if (envApiBase === '""' || envApiBase === "''") {
|
if (envApiBase === '""' || envApiBase === "''") {
|
||||||
envApiBase = '';
|
envApiBase = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove surrounding single or double quotes if present.
|
// Remove surrounding single or double quotes if present.
|
||||||
if ((envApiBase.startsWith('"') && envApiBase.endsWith('"')) ||
|
if (
|
||||||
(envApiBase.startsWith("'") && envApiBase.endsWith("'"))) {
|
(envApiBase.startsWith('"') && envApiBase.endsWith('"')) ||
|
||||||
|
(envApiBase.startsWith("'") && envApiBase.endsWith("'"))
|
||||||
|
) {
|
||||||
envApiBase = envApiBase.slice(1, -1);
|
envApiBase = envApiBase.slice(1, -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
const publicBase = import.meta.env.BASE_URL || '';
|
const publicBase = import.meta.env.BASE_URL || "";
|
||||||
|
|
||||||
// Normalize base: treat '/' as empty, and strip any trailing slash so
|
// Normalize base: treat '/' as empty, and strip any trailing slash so
|
||||||
// constructing `${base}/api/...` never produces a protocol-relative
|
// constructing `${base}/api/...` never produces a protocol-relative
|
||||||
// URL like `//api/...` which the browser resolves to `https://api/...`.
|
// URL like `//api/...` which the browser resolves to `https://api/...`.
|
||||||
let baseCandidate = envApiBase || publicBase || '';
|
let baseCandidate = envApiBase || publicBase || "";
|
||||||
if (baseCandidate === '/') {
|
if (baseCandidate === "/") {
|
||||||
baseCandidate = '';
|
baseCandidate = "";
|
||||||
}
|
}
|
||||||
// Remove trailing slash if present (but keep leading slash for path bases).
|
// Remove trailing slash if present (but keep leading slash for path bases).
|
||||||
if (baseCandidate.length > 1 && baseCandidate.endsWith('/')) {
|
if (baseCandidate.length > 1 && baseCandidate.endsWith("/")) {
|
||||||
baseCandidate = baseCandidate.replace(/\/+$/, '');
|
baseCandidate = baseCandidate.replace(/\/+$/, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Runtime safeguard: when the app is opened at a URL that does not include
|
// Runtime safeguard: when the app is opened at a URL that does not include
|
||||||
// the configured base path (for example, dev server serving at `/` while
|
// the configured base path (for example, dev server serving at `/` while
|
||||||
// VITE_BASEPATH is `/ketr.ketran`), React Router's <Router basename="...">
|
// VITE_BASEPATH is `/ketr.ketran`), React Router's <Router basename="...">
|
||||||
// will refuse to render because the current pathname doesn't start with the
|
// will refuse to render because the current pathname doesn't start with the
|
||||||
// basename. In that situation prefer to fall back to an empty basename so
|
// basename. In that situation throw an error!
|
||||||
// the client still renders correctly in local/dev setups.
|
|
||||||
try {
|
try {
|
||||||
if (typeof window !== 'undefined' && baseCandidate) {
|
if (typeof window !== "undefined" && baseCandidate) {
|
||||||
const pathname = window.location && window.location.pathname ? window.location.pathname : '';
|
const pathname = window.location && window.location.pathname ? window.location.pathname : "";
|
||||||
// Accept either exact prefix or prefix followed by a slash
|
if (!(pathname === baseCandidate || pathname.startsWith(baseCandidate + "/"))) {
|
||||||
if (!(pathname === baseCandidate || pathname.startsWith(baseCandidate + '/'))) {
|
// Mismatch: FAIL!
|
||||||
// Mismatch: fallback to empty base so router can match the URL.
|
throw Error(`Configured base '${baseCandidate}' does not match current pathname '${pathname}'`);
|
||||||
// Keep a console message to aid debugging in browsers.
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.warn(`Configured base '${baseCandidate}' does not match current pathname '${pathname}'; falling back to ''`);
|
|
||||||
baseCandidate = '';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@ -97,4 +68,6 @@ const base = baseCandidate;
|
|||||||
const assetsPath = base;
|
const assetsPath = base;
|
||||||
const gamesPath = `${base}`;
|
const gamesPath = `${base}`;
|
||||||
|
|
||||||
export { base, debounce, assetsPath, gamesPath };
|
const ws_base: string = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}${base}/ws`;
|
||||||
|
|
||||||
|
export { base, ws_base, assetsPath, gamesPath };
|
||||||
|
|||||||
94
client/src/ConnectionStatus.tsx
Normal file
94
client/src/ConnectionStatus.tsx
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Box, Typography, CircularProgress, Paper, LinearProgress } from "@mui/material";
|
||||||
|
import { ReadyState } from "react-use-websocket";
|
||||||
|
|
||||||
|
interface ConnectionStatusProps {
|
||||||
|
readyState: ReadyState;
|
||||||
|
reconnectAttempt?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ readyState, reconnectAttempt = 0 }) => {
|
||||||
|
const [countdown, setCountdown] = useState(0);
|
||||||
|
|
||||||
|
// Start countdown when connection is closed and we're attempting to reconnect
|
||||||
|
useEffect(() => {
|
||||||
|
if (readyState === ReadyState.CLOSED && reconnectAttempt > 0) {
|
||||||
|
setCountdown(5);
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setCountdown((prev) => {
|
||||||
|
if (prev <= 1) {
|
||||||
|
clearInterval(interval);
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return prev - 1;
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, [readyState, reconnectAttempt]);
|
||||||
|
|
||||||
|
const getConnectionStatusText = () => {
|
||||||
|
switch (readyState) {
|
||||||
|
case ReadyState.CONNECTING:
|
||||||
|
return reconnectAttempt > 0 ? `Reconnecting... (attempt ${reconnectAttempt})` : "Connecting to server...";
|
||||||
|
case ReadyState.OPEN:
|
||||||
|
return "Connected";
|
||||||
|
case ReadyState.CLOSING:
|
||||||
|
return "Disconnecting...";
|
||||||
|
case ReadyState.CLOSED:
|
||||||
|
if (reconnectAttempt > 0 && countdown > 0) {
|
||||||
|
return `Connection lost. Retrying in ${countdown}s... (attempt ${reconnectAttempt})`;
|
||||||
|
}
|
||||||
|
return reconnectAttempt > 0 ? "Reconnecting..." : "Disconnected";
|
||||||
|
case ReadyState.UNINSTANTIATED:
|
||||||
|
return "Initializing...";
|
||||||
|
default:
|
||||||
|
return "Unknown connection state";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getConnectionColor = () => {
|
||||||
|
switch (readyState) {
|
||||||
|
case ReadyState.OPEN:
|
||||||
|
return "success.main";
|
||||||
|
case ReadyState.CONNECTING:
|
||||||
|
return "info.main";
|
||||||
|
case ReadyState.CLOSED:
|
||||||
|
return "error.main";
|
||||||
|
case ReadyState.CLOSING:
|
||||||
|
return "warning.main";
|
||||||
|
default:
|
||||||
|
return "text.secondary";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const shouldShowProgress =
|
||||||
|
readyState === ReadyState.CONNECTING || (readyState === ReadyState.CLOSED && reconnectAttempt > 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Paper
|
||||||
|
sx={{
|
||||||
|
p: 2,
|
||||||
|
m: 2,
|
||||||
|
width: "fit-content",
|
||||||
|
backgroundColor: readyState === ReadyState.CLOSED ? "#ffebee" : "background.paper",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||||||
|
{shouldShowProgress && <CircularProgress size={20} />}
|
||||||
|
<Typography variant="h6" color={getConnectionColor()}>
|
||||||
|
{getConnectionStatusText()}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{readyState === ReadyState.CLOSED && reconnectAttempt > 0 && countdown > 0 && (
|
||||||
|
<Box sx={{ mt: 2, width: "100%" }}>
|
||||||
|
<LinearProgress variant="determinate" value={((5 - countdown) / 5) * 100} sx={{ borderRadius: 1 }} />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { ConnectionStatus };
|
||||||
@ -1,20 +1,135 @@
|
|||||||
import { createContext } from 'react';
|
import { createContext } from "react";
|
||||||
|
|
||||||
export type GlobalContextType = {
|
export type GlobalContextType = {
|
||||||
gameId?: string | undefined;
|
roomName?: string;
|
||||||
ws?: WebSocket | null | undefined;
|
|
||||||
name?: string;
|
name?: string;
|
||||||
sendJsonMessage?: (message: any) => void;
|
sendJsonMessage?: (message: any) => void;
|
||||||
chat?: Array<unknown>;
|
chat?: Array<unknown>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const global: GlobalContextType = {
|
const global: GlobalContextType = {
|
||||||
gameId: undefined,
|
roomName: undefined,
|
||||||
ws: undefined,
|
|
||||||
name: "",
|
name: "",
|
||||||
chat: []
|
chat: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const GlobalContext = createContext<GlobalContextType>(global);
|
const GlobalContext = createContext<GlobalContextType>(global);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RoomModel
|
||||||
|
* @description Core room model used across components
|
||||||
|
*/
|
||||||
|
export interface RoomModel {
|
||||||
|
/** Id */
|
||||||
|
id: string;
|
||||||
|
/** Name */
|
||||||
|
name: string;
|
||||||
|
/**
|
||||||
|
* Private
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
private?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RoomCreateData
|
||||||
|
* @description Data for room creation
|
||||||
|
*/
|
||||||
|
export interface RoomCreateData {
|
||||||
|
/** Name */
|
||||||
|
name: string;
|
||||||
|
/**
|
||||||
|
* Private
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
private?: boolean;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* RoomCreateRequest
|
||||||
|
* @description Request for creating a room
|
||||||
|
*/
|
||||||
|
export interface RoomCreateRequest {
|
||||||
|
/**
|
||||||
|
* Type
|
||||||
|
* @constant
|
||||||
|
*/
|
||||||
|
type: "room_create";
|
||||||
|
data: RoomCreateData;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* RoomCreateResponse
|
||||||
|
* @description Response for room creation
|
||||||
|
*/
|
||||||
|
export interface RoomCreateResponse {
|
||||||
|
/**
|
||||||
|
* Type
|
||||||
|
* @constant
|
||||||
|
*/
|
||||||
|
type: "room_created";
|
||||||
|
data: RoomModel;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* RoomListItem
|
||||||
|
* @description Room item for list responses
|
||||||
|
*/
|
||||||
|
export interface RoomListItem {
|
||||||
|
/** Id */
|
||||||
|
id: string;
|
||||||
|
/** Name */
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* RoomModel
|
||||||
|
* @description Core room model used across components
|
||||||
|
*/
|
||||||
|
export interface RoomModel {
|
||||||
|
/** Id */
|
||||||
|
id: string;
|
||||||
|
/** Name */
|
||||||
|
name: string;
|
||||||
|
/**
|
||||||
|
* Private
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
private?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SessionResponse
|
||||||
|
* @description Session response model
|
||||||
|
*/
|
||||||
|
export interface SessionResponse {
|
||||||
|
/** Id */
|
||||||
|
id: string;
|
||||||
|
/** Name */
|
||||||
|
name: string;
|
||||||
|
/** Lobbies */
|
||||||
|
lobbies: RoomModel[];
|
||||||
|
/**
|
||||||
|
* Protected
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
protected?: boolean;
|
||||||
|
/**
|
||||||
|
* Has Media
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
has_media?: boolean;
|
||||||
|
/** Bot Run Id */
|
||||||
|
bot_run_id?: string | null;
|
||||||
|
/** Bot Provider Id */
|
||||||
|
bot_provider_id?: string | null;
|
||||||
|
/** Bot Instance Id */
|
||||||
|
bot_instance_id?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-export types from api-client for backwards compatibility
|
||||||
|
export type Room = RoomModel;
|
||||||
|
|
||||||
|
// Extended Session type that allows name to be null initially (before user sets it)
|
||||||
|
export type Session = Omit<SessionResponse, "name"> & {
|
||||||
|
name: string | null;
|
||||||
|
has_media?: boolean; // Whether this session provides audio/video streams
|
||||||
|
};
|
||||||
|
|
||||||
export { GlobalContext, global };
|
export { GlobalContext, global };
|
||||||
|
|||||||
162
client/src/NameSetter.tsx
Normal file
162
client/src/NameSetter.tsx
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
import React, { useState, KeyboardEvent, useRef } from "react";
|
||||||
|
import { Input, Button, Box, Typography, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions } from "@mui/material";
|
||||||
|
import { Session } from "./GlobalContext";
|
||||||
|
|
||||||
|
interface NameSetterProps {
|
||||||
|
session: Session;
|
||||||
|
sendJsonMessage: (message: any) => void;
|
||||||
|
onNameSet?: () => void;
|
||||||
|
initialName?: string;
|
||||||
|
initialPassword?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NameSetter: React.FC<NameSetterProps> = ({
|
||||||
|
session,
|
||||||
|
sendJsonMessage,
|
||||||
|
onNameSet,
|
||||||
|
initialName = "",
|
||||||
|
initialPassword = "",
|
||||||
|
}) => {
|
||||||
|
const [editName, setEditName] = useState<string>(initialName);
|
||||||
|
const [editPassword, setEditPassword] = useState<string>(initialPassword);
|
||||||
|
const [showDialog, setShowDialog] = useState<boolean>(!session.name);
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const passwordInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const setName = (name: string) => {
|
||||||
|
setIsSubmitting(true);
|
||||||
|
sendJsonMessage({
|
||||||
|
type: "set_name",
|
||||||
|
data: { name, password: editPassword ? editPassword : undefined },
|
||||||
|
});
|
||||||
|
if (onNameSet) {
|
||||||
|
onNameSet();
|
||||||
|
}
|
||||||
|
setShowDialog(false);
|
||||||
|
setIsSubmitting(false);
|
||||||
|
setEditName("");
|
||||||
|
setEditPassword("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNameKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
event.preventDefault();
|
||||||
|
if (passwordInputRef.current) {
|
||||||
|
passwordInputRef.current.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePasswordKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
event.preventDefault();
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
const newName = editName.trim();
|
||||||
|
if (!newName || (session?.name && session.name === newName)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setName(newName);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenDialog = () => {
|
||||||
|
setEditName(session.name || "");
|
||||||
|
setEditPassword("");
|
||||||
|
setShowDialog(true);
|
||||||
|
// Focus the name input when dialog opens
|
||||||
|
setTimeout(() => {
|
||||||
|
if (nameInputRef.current) {
|
||||||
|
nameInputRef.current.focus();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseDialog = () => {
|
||||||
|
setShowDialog(false);
|
||||||
|
setEditName("");
|
||||||
|
setEditPassword("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasNameChanged = editName.trim() !== (session.name || "");
|
||||||
|
const canSubmit = editName.trim() && hasNameChanged && !isSubmitting;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ gap: 1, display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||||
|
{session.name && !showDialog && (
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||||
|
<Typography>You are logged in as: {session.name}</Typography>
|
||||||
|
<Button variant="outlined" size="small" onClick={handleOpenDialog}>
|
||||||
|
Change Name
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Dialog for name change */}
|
||||||
|
<Dialog open={showDialog} onClose={handleCloseDialog} maxWidth="sm" fullWidth>
|
||||||
|
<DialogTitle>
|
||||||
|
{session.name ? "Change Your Name" : "Enter Your Name"}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2, pt: 1 }}>
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
{session.name
|
||||||
|
? "Enter a new name to change your current name."
|
||||||
|
: "Enter your name to join the lobby."
|
||||||
|
}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="caption" color="text.secondary">
|
||||||
|
You can optionally set a password to reserve this name; supply it again to takeover the name from another client.
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
inputRef={nameInputRef}
|
||||||
|
type="text"
|
||||||
|
value={editName}
|
||||||
|
onChange={(e): void => {
|
||||||
|
setEditName(e.target.value);
|
||||||
|
}}
|
||||||
|
onKeyDown={handleNameKeyDown}
|
||||||
|
placeholder="Your name"
|
||||||
|
fullWidth
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
inputRef={passwordInputRef}
|
||||||
|
type="password"
|
||||||
|
value={editPassword}
|
||||||
|
onChange={(e): void => setEditPassword(e.target.value)}
|
||||||
|
onKeyDown={handlePasswordKeyDown}
|
||||||
|
placeholder="Optional password"
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Tooltip title="Optional: choose a short password to reserve this name. Keep it secret.">
|
||||||
|
<span />
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleCloseDialog} disabled={isSubmitting}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={!canSubmit}
|
||||||
|
color={hasNameChanged ? "primary" : "inherit"}
|
||||||
|
>
|
||||||
|
{isSubmitting ? "Changing..." : (session.name ? "Change Name" : "Join")}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NameSetter;
|
||||||
@ -1,191 +1,216 @@
|
|||||||
import React, { useState, useEffect, useContext, useRef } from "react";
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
import Paper from "@mui/material/Paper";
|
import Paper from "@mui/material/Paper";
|
||||||
import List from "@mui/material/List";
|
import List from "@mui/material/List";
|
||||||
|
|
||||||
import "./PlayerList.css";
|
import "./PlayerList.css";
|
||||||
import { PlayerColor } from "./PlayerColor";
|
import { MediaControl, MediaAgent, Peer } from "./MediaControl";
|
||||||
import { MediaAgent, MediaControl, Session } from "./MediaControl";
|
import Box from "@mui/material/Box";
|
||||||
|
import { Session, Room } from "./GlobalContext";
|
||||||
|
import useWebSocket from "react-use-websocket";
|
||||||
|
|
||||||
import { GlobalContext } from "./GlobalContext";
|
type Player = {
|
||||||
|
name: string;
|
||||||
|
session_id: string;
|
||||||
|
live: boolean;
|
||||||
|
local: boolean /* Client side variable */;
|
||||||
|
protected?: boolean;
|
||||||
|
has_media?: boolean; // Whether this Player provides audio/video streams
|
||||||
|
bot_run_id?: string;
|
||||||
|
bot_provider_id?: string;
|
||||||
|
bot_instance_id?: string; // For bot instances
|
||||||
|
muted?: boolean;
|
||||||
|
video_on?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
|
type PlayerListProps = {
|
||||||
|
socketUrl: string;
|
||||||
|
session: Session;
|
||||||
|
roomId: string;
|
||||||
|
};
|
||||||
|
|
||||||
interface PlayerListProps {
|
const PlayerList: React.FC<PlayerListProps> = (props: PlayerListProps) => {
|
||||||
socketUrl?: string;
|
const { socketUrl, session, roomId } = props;
|
||||||
session?: Session;
|
const [Players, setPlayers] = useState<Player[] | null>(null);
|
||||||
}
|
const [peers, setPeers] = useState<Record<string, Peer>>({});
|
||||||
|
|
||||||
const PlayerList: React.FC<PlayerListProps> = ({ socketUrl, session }) => {
|
const sortPlayers = useCallback(
|
||||||
const { ws, name, sendJsonMessage } = useContext(GlobalContext);
|
(A: any, B: any) => {
|
||||||
const [players, setPlayers] = useState<{ [key: string]: any }>({});
|
if (!session) {
|
||||||
const [unselected, setUneslected] = useState<string[]>([]);
|
return 0;
|
||||||
const [state, setState] = useState<string>("lobby");
|
|
||||||
const [color, setColor] = useState<string | undefined>(undefined);
|
|
||||||
const [peers, setPeers] = useState<{ [key: string]: any }>({});
|
|
||||||
|
|
||||||
const onWsMessage = (event: MessageEvent) => {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
switch (data.type) {
|
|
||||||
case "game-update":
|
|
||||||
console.log(`player-list - game update`, data.update);
|
|
||||||
|
|
||||||
if ("unselected" in data.update) {
|
|
||||||
setUneslected(data.update.unselected);
|
|
||||||
}
|
}
|
||||||
|
/* active Player first */
|
||||||
if ("players" in data.update) {
|
if (A.name === session.name) {
|
||||||
let found = false;
|
|
||||||
for (const key in data.update.players) {
|
|
||||||
if (data.update.players[key].name === name) {
|
|
||||||
found = true;
|
|
||||||
setColor(key);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!found) {
|
|
||||||
setColor(undefined);
|
|
||||||
}
|
|
||||||
setPlayers(data.update.players);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ("state" in data.update && data.update.state !== state) {
|
|
||||||
setState(data.update.state);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const refWsMessage = useRef(onWsMessage);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
refWsMessage.current = onWsMessage;
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!ws) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
|
|
||||||
ws.addEventListener("message", cbMessage);
|
|
||||||
return () => {
|
|
||||||
ws.removeEventListener("message", cbMessage);
|
|
||||||
};
|
|
||||||
}, [ws, refWsMessage]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!sendJsonMessage) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
sendJsonMessage({
|
|
||||||
type: "get",
|
|
||||||
fields: ["state", "players", "unselected"],
|
|
||||||
});
|
|
||||||
}, [ws]);
|
|
||||||
|
|
||||||
const toggleSelected = (key: string) => {
|
|
||||||
ws!.send(
|
|
||||||
JSON.stringify({
|
|
||||||
type: "set",
|
|
||||||
field: "color",
|
|
||||||
value: color === key ? "" : key,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const playerElements: React.ReactElement[] = [];
|
|
||||||
|
|
||||||
const inLobby = state === "lobby";
|
|
||||||
const sortedPlayers: any[] = [];
|
|
||||||
|
|
||||||
for (const key in players) {
|
|
||||||
sortedPlayers.push(players[key]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sortPlayers = (A: any, B: any) => {
|
|
||||||
/* active player first */
|
|
||||||
if (A.name === name) {
|
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
if (B.name === name) {
|
if (B.name === session.name) {
|
||||||
return +1;
|
return +1;
|
||||||
}
|
}
|
||||||
|
/* Sort active Players first */
|
||||||
/* Sort active players first */
|
|
||||||
if (A.name && !B.name) {
|
if (A.name && !B.name) {
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
if (B.name && !A.name) {
|
if (B.name && !A.name) {
|
||||||
return +1;
|
return +1;
|
||||||
}
|
}
|
||||||
|
/* Otherwise, sort by color */
|
||||||
/* Ohterwise, sort by color */
|
if (A.color && B.color) {
|
||||||
return A.color.localeCompare(B.color);
|
return A.color.localeCompare(B.color);
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
[session]
|
||||||
|
);
|
||||||
|
|
||||||
|
// 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,
|
||||||
};
|
};
|
||||||
|
|
||||||
sortedPlayers.sort(sortPlayers);
|
|
||||||
|
|
||||||
/* Array of just names... */
|
|
||||||
unselected.sort((A, B) => {
|
|
||||||
/* active player first */
|
|
||||||
if (A === name) {
|
|
||||||
return -1;
|
|
||||||
}
|
}
|
||||||
if (B === name) {
|
});
|
||||||
return +1;
|
return updated;
|
||||||
|
});
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
/* Then sort alphabetically */
|
case "update_name": {
|
||||||
return A.localeCompare(B);
|
// 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;
|
||||||
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const videoClass = sortedPlayers.length <= 2 ? "Medium" : "Small";
|
useEffect(() => {
|
||||||
|
if (Players !== null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
sendJsonMessage({
|
||||||
|
type: "list_Players",
|
||||||
|
});
|
||||||
|
}, [Players, sendJsonMessage]);
|
||||||
|
|
||||||
sortedPlayers.forEach((player) => {
|
return (
|
||||||
const playerName = player.name;
|
<Box sx={{ position: "relative", width: "100%" }}>
|
||||||
const selectable = inLobby && (player.status === "Not active" || color === player.color);
|
<Paper
|
||||||
playerElements.push(
|
className={`PlayerList Medium`}
|
||||||
<div
|
sx={{
|
||||||
data-selectable={selectable}
|
maxWidth: { xs: "100%", sm: 500 },
|
||||||
data-selected={player.color === color}
|
p: { xs: 1, sm: 2 },
|
||||||
className="PlayerEntry"
|
m: { xs: 0, sm: 2 },
|
||||||
onClick={() => {
|
|
||||||
inLobby && selectable && toggleSelected(player.color);
|
|
||||||
}}
|
}}
|
||||||
key={`player-${player.color}`}
|
|
||||||
>
|
>
|
||||||
<div>
|
<MediaAgent {...{ session, socketUrl, peers, setPeers }} />
|
||||||
<PlayerColor color={player.color} />
|
<List className="PlayerSelector">
|
||||||
<div className="Name">{playerName ? playerName : "Available"}</div>
|
{Players?.map((Player) => (
|
||||||
{playerName && !player.live && <div className="NoNetwork"></div>}
|
<Box
|
||||||
</div>
|
key={Player.session_id}
|
||||||
{playerName && player.live && (
|
sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
|
||||||
<MediaControl className={videoClass} peer={peers[playerName]} isSelf={player.color === color} />
|
className={`PlayerEntry ${Player.local ? "PlayerSelf" : ""}`}
|
||||||
)}
|
>
|
||||||
{!playerName && <div></div>}
|
<Box>
|
||||||
</div>
|
<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 && (
|
||||||
const waiting = unselected.map((player) => {
|
<div
|
||||||
return (
|
style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
|
||||||
<div className={player === name ? "Self" : ""} key={player}>
|
title="This name is protected with a password"
|
||||||
<div>{player}</div>
|
>
|
||||||
<MediaControl className={"Small"} peer={peers[player]} isSelf={name === player} />
|
🔒
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Paper className={`PlayerList ${videoClass}`}>
|
|
||||||
{socketUrl && session && <MediaAgent {...{ socketUrl, setPeers, peers, session }} />}
|
|
||||||
<List className="PlayerSelector">{playerElements}</List>
|
|
||||||
{unselected && unselected.length !== 0 && (
|
|
||||||
<div className="Unselected">
|
|
||||||
<div>In lobby</div>
|
|
||||||
<div>{waiting}</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{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>}
|
||||||
|
</Box>
|
||||||
|
{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}
|
||||||
|
/>
|
||||||
|
) : Player.name && Player.live && Player.has_media === false ? (
|
||||||
|
<div
|
||||||
|
className="Video fade-in"
|
||||||
|
style={{
|
||||||
|
background: "#333",
|
||||||
|
color: "#fff",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
fontSize: "14px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
💬 Chat Only
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<video className="Video"></video>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
</Paper>
|
</Paper>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
434
client/src/RoomView.tsx
Normal file
434
client/src/RoomView.tsx
Normal file
@ -0,0 +1,434 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import useWebSocket, { ReadyState } from "react-use-websocket";
|
||||||
|
|
||||||
|
import Paper from "@mui/material/Paper";
|
||||||
|
import Button from "@mui/material/Button";
|
||||||
|
|
||||||
|
import { GlobalContext } from "./GlobalContext";
|
||||||
|
import { PlayerList } from "./PlayerList";
|
||||||
|
import { Chat } from "./Chat";
|
||||||
|
import { Board } from "./Board";
|
||||||
|
import { Actions } from "./Actions";
|
||||||
|
import { ws_base, base } from "./Common";
|
||||||
|
import { GameOrder } from "./GameOrder";
|
||||||
|
import { Activities } from "./Activities";
|
||||||
|
import { SelectPlayer } from "./SelectPlayer";
|
||||||
|
import { PlayersStatus } from "./PlayersStatus";
|
||||||
|
import { ViewCard } from "./ViewCard";
|
||||||
|
import { ChooseCard } from "./ChooseCard";
|
||||||
|
import { Hand } from "./Hand";
|
||||||
|
import { Trade } from "./Trade";
|
||||||
|
import { Winner } from "./Winner";
|
||||||
|
import { HouseRules } from "./HouseRules";
|
||||||
|
import { Dice } from "./Dice";
|
||||||
|
import { assetsPath } from "./Common";
|
||||||
|
import { Session, Room } from "./GlobalContext";
|
||||||
|
// history replaced by react-router's useNavigate
|
||||||
|
import "./App.css";
|
||||||
|
import equal from "fast-deep-equal";
|
||||||
|
|
||||||
|
import itsYourTurnAudio from "./assets/its-your-turn.mp3";
|
||||||
|
import robberAudio from "./assets/robber.mp3";
|
||||||
|
import knightsAudio from "./assets/the-knights-who-say-ni.mp3";
|
||||||
|
import volcanoAudio from "./assets/volcano-eruption.mp3";
|
||||||
|
import { ConnectionStatus } from "./ConnectionStatus";
|
||||||
|
|
||||||
|
const audioFiles: Record<string, string> = {
|
||||||
|
"its-your-turn.mp3": itsYourTurnAudio,
|
||||||
|
"robber.mp3": robberAudio,
|
||||||
|
"the-knights-who-say-ni.mp3": knightsAudio,
|
||||||
|
"volcano-eruption.mp3": volcanoAudio,
|
||||||
|
};
|
||||||
|
|
||||||
|
type AudioEffect = HTMLAudioElement & { hasPlayed?: boolean };
|
||||||
|
const audioEffects: Record<string, AudioEffect | undefined> = {};
|
||||||
|
|
||||||
|
const loadAudio = (src: string) => {
|
||||||
|
const audio = document.createElement("audio") as AudioEffect;
|
||||||
|
audio.src = audioFiles[src];
|
||||||
|
console.log("Loading audio:", audio.src);
|
||||||
|
audio.setAttribute("preload", "auto");
|
||||||
|
audio.setAttribute("controls", "none");
|
||||||
|
audio.style.display = "none";
|
||||||
|
document.body.appendChild(audio);
|
||||||
|
audio.load();
|
||||||
|
audio.addEventListener("error", (e) => console.error("Audio load error:", e, audio.src));
|
||||||
|
audio.addEventListener("canplay", () => console.log("Audio can play:", audio.src));
|
||||||
|
return audio;
|
||||||
|
};
|
||||||
|
|
||||||
|
type RoomProps = {
|
||||||
|
session: Session;
|
||||||
|
setSession: React.Dispatch<React.SetStateAction<Session | null>>;
|
||||||
|
setError: React.Dispatch<React.SetStateAction<string | null>>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const RoomView: React.FC<RoomProps> = (props: RoomProps) => {
|
||||||
|
const { session, setSession, setError } = props;
|
||||||
|
const [socketUrl, setSocketUrl] = useState<string | null>(null);
|
||||||
|
const { roomName = "default" } = useParams<{ roomName: string }>();
|
||||||
|
const [creatingRoom, setCreatingRoom] = useState<boolean>(false);
|
||||||
|
const [reconnectAttempt, setReconnectAttempt] = useState<number>(0);
|
||||||
|
|
||||||
|
const [name, setName] = useState<string>("");
|
||||||
|
const [warning, setWarning] = useState<string | undefined>(undefined);
|
||||||
|
const [loaded, setLoaded] = useState<boolean>(false);
|
||||||
|
|
||||||
|
type Turn = { color?: string; roll?: number; actions?: string[]; select?: Record<string, number> };
|
||||||
|
type PrivateType = { name?: string; color?: string; turnNotice?: string };
|
||||||
|
|
||||||
|
const [dice, setDice] = useState<number[] | undefined>(undefined);
|
||||||
|
const [state, setState] = useState<string | undefined>(undefined);
|
||||||
|
const [color, setColor] = useState<string | undefined>(undefined);
|
||||||
|
const [priv, setPriv] = useState<PrivateType | undefined>(undefined);
|
||||||
|
const [turn, setTurn] = useState<Turn | undefined>(undefined);
|
||||||
|
const [buildActive, setBuildActive] = useState<boolean>(false);
|
||||||
|
const [tradeActive, setTradeActive] = useState<boolean>(false);
|
||||||
|
const [cardActive, setCardActive] = useState<unknown>(undefined);
|
||||||
|
const [houseRulesActive, setHouseRulesActive] = useState<boolean>(false);
|
||||||
|
const [winnerDismissed, setWinnerDismissed] = useState<boolean>(false);
|
||||||
|
const [global, setGlobal] = useState<Record<string, unknown>>({});
|
||||||
|
const [count, setCount] = useState<number>(0);
|
||||||
|
const [audio, setAudio] = useState<boolean>(
|
||||||
|
localStorage.getItem("audio") ? JSON.parse(localStorage.getItem("audio") as string) : false
|
||||||
|
);
|
||||||
|
const [animations, setAnimations] = useState<boolean>(
|
||||||
|
localStorage.getItem("animations") ? JSON.parse(localStorage.getItem("animations") as string) : false
|
||||||
|
);
|
||||||
|
const [volume, setVolume] = useState<number>(
|
||||||
|
localStorage.getItem("volume") ? parseFloat(localStorage.getItem("volume") as string) : 0.5
|
||||||
|
);
|
||||||
|
const fields = ["id", "state", "color", "name", "private", "dice", "turn"];
|
||||||
|
|
||||||
|
const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(socketUrl, {
|
||||||
|
onOpen: () => {
|
||||||
|
console.log("app - WebSocket connection opened.");
|
||||||
|
if (reconnectAttempt > 0) {
|
||||||
|
console.log("app - WebSocket reconnected after connection loss, refreshing room state");
|
||||||
|
}
|
||||||
|
sendJsonMessage({ type: "get", fields });
|
||||||
|
setReconnectAttempt(0);
|
||||||
|
},
|
||||||
|
onClose: () => {
|
||||||
|
console.log("app - WebSocket connection closed.");
|
||||||
|
setReconnectAttempt((prev) => prev + 1);
|
||||||
|
},
|
||||||
|
onError: (event: Event) => {
|
||||||
|
console.error("app - WebSocket error observed:", event);
|
||||||
|
// If we get a WebSocket error, it might be due to invalid room ID
|
||||||
|
// Reset the room state to force recreation
|
||||||
|
console.log("app - WebSocket error, clearing room state to force refresh");
|
||||||
|
setSocketUrl(null);
|
||||||
|
},
|
||||||
|
shouldReconnect: (closeEvent) => {
|
||||||
|
// Don't reconnect if the room doesn't exist (4xx errors)
|
||||||
|
if (closeEvent.code >= 4000 && closeEvent.code < 5000) {
|
||||||
|
console.log("app - WebSocket closed with client error, not reconnecting");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
reconnectInterval: 5000, // Retry every 5 seconds
|
||||||
|
onReconnectStop: (numAttempts) => {
|
||||||
|
console.log(`Stopped reconnecting after ${numAttempts} attempts`);
|
||||||
|
},
|
||||||
|
share: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const socketUrl = `${ws_base}/${roomName}`;
|
||||||
|
console.log("app - connecting to", socketUrl);
|
||||||
|
setSocketUrl(socketUrl);
|
||||||
|
}, [roomName, session.id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!lastJsonMessage || !session) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data: any = lastJsonMessage;
|
||||||
|
switch (data.type) {
|
||||||
|
case "error":
|
||||||
|
console.error(`App - error`, data.error);
|
||||||
|
setError(data.error);
|
||||||
|
break;
|
||||||
|
case "warning":
|
||||||
|
console.warn(`App - warning`, data.warning);
|
||||||
|
setWarning(data.warning);
|
||||||
|
setTimeout(() => {
|
||||||
|
setWarning("");
|
||||||
|
}, 3000);
|
||||||
|
break;
|
||||||
|
case "game-update":
|
||||||
|
if (!loaded) {
|
||||||
|
setLoaded(true);
|
||||||
|
}
|
||||||
|
console.log(`app - message - ${data.type}`, data.update);
|
||||||
|
|
||||||
|
if ("private" in data.update && !equal(priv, data.update.private)) {
|
||||||
|
const priv = data.update.private;
|
||||||
|
if (priv.name !== name) {
|
||||||
|
setName(priv.name);
|
||||||
|
}
|
||||||
|
if (priv.color !== color) {
|
||||||
|
setColor(priv.color);
|
||||||
|
}
|
||||||
|
setPriv(priv);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ("name" in data.update) {
|
||||||
|
if (data.update.name) {
|
||||||
|
setName(data.update.name);
|
||||||
|
} else {
|
||||||
|
setWarning("");
|
||||||
|
setError("");
|
||||||
|
setPriv(undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ("state" in data.update && data.update.state !== state) {
|
||||||
|
if (data.update.state !== "winner" && winnerDismissed) {
|
||||||
|
setWinnerDismissed(false);
|
||||||
|
}
|
||||||
|
setState(data.update.state);
|
||||||
|
}
|
||||||
|
if ("dice" in data.update && !equal(data.update.dice, dice)) {
|
||||||
|
setDice(data.update.dice);
|
||||||
|
}
|
||||||
|
if ("turn" in data.update && !equal(data.update.turn, turn)) {
|
||||||
|
setTurn(data.update.turn);
|
||||||
|
}
|
||||||
|
if ("color" in data.update && data.update.color !== color) {
|
||||||
|
setColor(data.update.color);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}, [lastJsonMessage, session, setError, setSession]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log("app - WebSocket connection status: ", readyState);
|
||||||
|
}, [readyState]);
|
||||||
|
|
||||||
|
if (global.name !== name || global.roomName !== roomName) {
|
||||||
|
setGlobal({
|
||||||
|
name,
|
||||||
|
roomName,
|
||||||
|
sendJsonMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (state === "volcano") {
|
||||||
|
if (!audioEffects.volcano) {
|
||||||
|
audioEffects.volcano = loadAudio("volcano-eruption.mp3");
|
||||||
|
audioEffects.volcano.volume = volume * volume;
|
||||||
|
} else {
|
||||||
|
if (!audioEffects.volcano.hasPlayed && audioEffects.volcano.readyState >= 2) {
|
||||||
|
audioEffects.volcano.hasPlayed = true;
|
||||||
|
audioEffects.volcano.play().catch((e) => console.error("Audio play failed:", e));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (audioEffects.volcano) {
|
||||||
|
audioEffects.volcano.hasPlayed = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [state, volume]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (turn && turn.color === color && state !== "room") {
|
||||||
|
if (!audioEffects.yourTurn) {
|
||||||
|
audioEffects.yourTurn = loadAudio("its-your-turn.mp3");
|
||||||
|
audioEffects.yourTurn.volume = volume * volume;
|
||||||
|
} else {
|
||||||
|
if (!audioEffects.yourTurn.hasPlayed && audioEffects.yourTurn.readyState >= 2) {
|
||||||
|
audioEffects.yourTurn.hasPlayed = true;
|
||||||
|
audioEffects.yourTurn.play().catch((e) => console.error("Audio play failed:", e));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (turn) {
|
||||||
|
if (audioEffects.yourTurn) {
|
||||||
|
audioEffects.yourTurn.hasPlayed = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (turn && turn.roll === 7) {
|
||||||
|
if (!audioEffects.robber) {
|
||||||
|
audioEffects.robber = loadAudio("robber.mp3");
|
||||||
|
audioEffects.robber.volume = volume * volume;
|
||||||
|
} else {
|
||||||
|
if (!audioEffects.robber.hasPlayed && audioEffects.robber.readyState >= 2) {
|
||||||
|
audioEffects.robber.hasPlayed = true;
|
||||||
|
audioEffects.robber.play().catch((e) => console.error("Audio play failed:", e));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (turn) {
|
||||||
|
if (audioEffects.robber) {
|
||||||
|
audioEffects.robber.hasPlayed = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (turn && turn.actions && turn.actions.indexOf("playing-knight") !== -1) {
|
||||||
|
if (!audioEffects.knights) {
|
||||||
|
audioEffects.knights = loadAudio("the-knights-who-say-ni.mp3");
|
||||||
|
audioEffects.knights.volume = volume * volume;
|
||||||
|
} else {
|
||||||
|
if (!audioEffects.knights.hasPlayed && audioEffects.knights.readyState >= 2) {
|
||||||
|
audioEffects.knights.hasPlayed = true;
|
||||||
|
audioEffects.knights.play().catch((e) => console.error("Audio play failed:", e));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (turn && turn.actions && turn.actions.indexOf("playing-knight") === -1) {
|
||||||
|
if (audioEffects.knights) {
|
||||||
|
audioEffects.knights.hasPlayed = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [state, turn, color, volume]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
for (const key in audioEffects) {
|
||||||
|
audioEffects[key].volume = volume * volume;
|
||||||
|
}
|
||||||
|
}, [volume]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GlobalContext.Provider value={global}>
|
||||||
|
<div className="Room">
|
||||||
|
{readyState !== ReadyState.OPEN || !session ? (
|
||||||
|
<ConnectionStatus readyState={readyState} reconnectAttempt={reconnectAttempt} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="ActivitiesBox">
|
||||||
|
<Activities />
|
||||||
|
{dice && dice.length && (
|
||||||
|
<div className="DiceRoll">
|
||||||
|
{dice.length === 1 && <div>Volcano roll!</div>}
|
||||||
|
{dice.length === 2 && <div>Current roll</div>}
|
||||||
|
<div>
|
||||||
|
<Dice pips={dice[0]} />
|
||||||
|
{dice.length === 2 && <Dice pips={dice[1]} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="Game">
|
||||||
|
<div className="Dialogs">
|
||||||
|
{priv && priv.turnNotice && (
|
||||||
|
<div className="Dialog TurnNoticeDialog">
|
||||||
|
<Paper className="TurnNotice">
|
||||||
|
<div>{priv.turnNotice}</div>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
sendJsonMessage({ type: "turn-notice" });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
dismiss
|
||||||
|
</Button>
|
||||||
|
</Paper>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{warning && (
|
||||||
|
<div className="Dialog WarningDialog">
|
||||||
|
<Paper className="Warning">
|
||||||
|
<div>{warning}</div>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setWarning("");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
dismiss
|
||||||
|
</Button>
|
||||||
|
</Paper>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{state === "normal" && <SelectPlayer />}
|
||||||
|
{color && state === "game-order" && <GameOrder />}
|
||||||
|
|
||||||
|
{!winnerDismissed && <Winner {...{ winnerDismissed, setWinnerDismissed }} />}
|
||||||
|
{houseRulesActive && <HouseRules {...{ houseRulesActive, setHouseRulesActive }} />}
|
||||||
|
<ViewCard {...{ cardActive, setCardActive }} />
|
||||||
|
<ChooseCard />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Board animations={animations} />
|
||||||
|
<PlayersStatus active={false} />
|
||||||
|
<PlayersStatus active={true} />
|
||||||
|
<Hand {...{ buildActive, setBuildActive, setCardActive }} />
|
||||||
|
</div>
|
||||||
|
<div className="Sidebar">
|
||||||
|
{name !== "" && volume !== undefined && (
|
||||||
|
<Paper className="Volume">
|
||||||
|
<div>Audio effects</div>{" "}
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="audio"
|
||||||
|
name="audio"
|
||||||
|
defaultChecked={audio ? true : false}
|
||||||
|
onInput={() => {
|
||||||
|
const value = !audio;
|
||||||
|
localStorage.setItem("audio", JSON.stringify(value));
|
||||||
|
setAudio(value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div>Sound effects volume</div>{" "}
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="volume"
|
||||||
|
name="volume"
|
||||||
|
value={volume * 100}
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
onInput={(e) => {
|
||||||
|
const alpha = parseFloat((e.currentTarget as HTMLInputElement).value) / 100;
|
||||||
|
|
||||||
|
localStorage.setItem("volume", alpha.toString());
|
||||||
|
setVolume(alpha);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div>Animations</div>{" "}
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="animations"
|
||||||
|
name="animations"
|
||||||
|
defaultChecked={animations ? true : false}
|
||||||
|
onInput={() => {
|
||||||
|
const value = !animations;
|
||||||
|
localStorage.setItem("animations", JSON.stringify(value));
|
||||||
|
setAnimations(value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
<PlayerList socketUrl={socketUrl} session={session} roomId={roomName} />
|
||||||
|
{/* Trade is an untyped JS component; assert its type to avoid `any` */}
|
||||||
|
{(() => {
|
||||||
|
const TradeComponent = Trade as unknown as React.ComponentType<{
|
||||||
|
tradeActive: boolean;
|
||||||
|
setTradeActive: (v: boolean) => void;
|
||||||
|
}>;
|
||||||
|
return <TradeComponent tradeActive={tradeActive} setTradeActive={setTradeActive} />;
|
||||||
|
})()}
|
||||||
|
{name !== "" && <Chat />}
|
||||||
|
{/* name !== "" && <VideoFeeds/> */}
|
||||||
|
{loaded && (
|
||||||
|
<Actions
|
||||||
|
{...{
|
||||||
|
buildActive,
|
||||||
|
setBuildActive,
|
||||||
|
tradeActive,
|
||||||
|
setTradeActive,
|
||||||
|
houseRulesActive,
|
||||||
|
setHouseRulesActive,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</GlobalContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { RoomView };
|
||||||
45
client/src/api-client.ts
Normal file
45
client/src/api-client.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { Session, Room } from "./GlobalContext";
|
||||||
|
import { base } from "./Common";
|
||||||
|
const sessionApi = {
|
||||||
|
getCurrent: async (): Promise<Session> => {
|
||||||
|
const response = await fetch(`${base}/api/v1/games/`, {
|
||||||
|
method: "GET",
|
||||||
|
cache: "no-cache",
|
||||||
|
credentials: "same-origin", /* include cookies */
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Unable to connect to Ketr Ketran game server! Try refreshing your browser in a few seconds.`);
|
||||||
|
}
|
||||||
|
const session : any = await response.json();
|
||||||
|
if (!session.id) {
|
||||||
|
session.id = session.player;
|
||||||
|
}
|
||||||
|
return session;
|
||||||
|
},
|
||||||
|
createRoom: async (name?: string): Promise<Room> => {
|
||||||
|
const response = await fetch(`${base}/api/v1/games/${name || ''}`, {
|
||||||
|
method: "POST",
|
||||||
|
cache: "no-cache",
|
||||||
|
credentials: "same-origin",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch session: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const room : Room = await response.json();
|
||||||
|
if (!room.name) {
|
||||||
|
room.name = room.id;
|
||||||
|
}
|
||||||
|
if (!room.id) {
|
||||||
|
room.id = room.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
return room;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export { sessionApi };
|
||||||
File diff suppressed because it is too large
Load Diff
20
server/routes/games/constants.ts
Normal file
20
server/routes/games/constants.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
export const MAX_SETTLEMENTS = 5;
|
||||||
|
export const MAX_CITIES = 4;
|
||||||
|
export const MAX_ROADS = 15;
|
||||||
|
|
||||||
|
export const types: string[] = [ 'wheat', 'stone', 'sheep', 'wood', 'brick' ];
|
||||||
|
|
||||||
|
export const debug = {
|
||||||
|
audio: false,
|
||||||
|
get: true,
|
||||||
|
set: true,
|
||||||
|
update: false,
|
||||||
|
road: false
|
||||||
|
};
|
||||||
|
|
||||||
|
export const all = `[ all ]`;
|
||||||
|
export const info = `[ info ]`;
|
||||||
|
export const todo = `[ todo ]`;
|
||||||
|
|
||||||
|
export const SEND_THROTTLE_MS = 50;
|
||||||
|
export const INCOMING_GET_BATCH_MS = 20;
|
||||||
@ -1,25 +1,132 @@
|
|||||||
|
export type ResourceKey = "wood" | "brick" | "sheep" | "wheat" | "stone";
|
||||||
|
|
||||||
|
export type ResourceMap = Partial<Record<ResourceKey, number>> & { [k: string]: any };
|
||||||
|
|
||||||
export interface Player {
|
export interface Player {
|
||||||
|
name?: string;
|
||||||
|
color?: string;
|
||||||
order: number;
|
order: number;
|
||||||
orderRoll?: number;
|
orderRoll?: number;
|
||||||
position?: string;
|
position?: string;
|
||||||
orderStatus?: string;
|
orderStatus?: string;
|
||||||
tied?: boolean;
|
tied?: boolean;
|
||||||
|
roads?: number;
|
||||||
|
settlements?: number;
|
||||||
|
cities?: number;
|
||||||
|
longestRoad?: number;
|
||||||
|
mustDiscard?: number;
|
||||||
|
sheep?: number;
|
||||||
|
wheat?: number;
|
||||||
|
stone?: number;
|
||||||
|
brick?: number;
|
||||||
|
wood?: number;
|
||||||
|
points?: number;
|
||||||
|
resources?: number;
|
||||||
|
lastActive?: number;
|
||||||
|
live?: boolean;
|
||||||
|
status?: string;
|
||||||
|
developmentCards?: number;
|
||||||
|
development?: DevelopmentCard[];
|
||||||
|
[key: string]: any; // allow incremental fields until fully typed
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CornerPlacement {
|
||||||
|
color?: string;
|
||||||
|
type?: "settlement" | "city";
|
||||||
|
walking?: boolean;
|
||||||
|
longestRoad?: number;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Game {
|
export interface RoadPlacement {
|
||||||
id?: string | number;
|
color?: string;
|
||||||
placements?: any;
|
walking?: boolean;
|
||||||
rules?: any;
|
[key: string]: any;
|
||||||
state?: string;
|
}
|
||||||
robber?: number;
|
|
||||||
players?: Player[];
|
export interface Placements {
|
||||||
|
corners: CornerPlacement[];
|
||||||
|
roads: RoadPlacement[];
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Turn {
|
||||||
|
name?: string;
|
||||||
|
color?: string;
|
||||||
|
actions?: string[];
|
||||||
|
limits?: any;
|
||||||
|
roll?: number;
|
||||||
|
volcano?: number | null | undefined;
|
||||||
|
free?: boolean;
|
||||||
|
freeRoads?: number;
|
||||||
|
select?: Record<string, number>;
|
||||||
|
active?: string;
|
||||||
|
robberInAction?: boolean;
|
||||||
|
placedRobber?: number;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevelopmentCard {
|
||||||
|
card?: number | string;
|
||||||
|
type?: string;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Session {
|
export interface Session {
|
||||||
id?: string | number;
|
id: string;
|
||||||
userId?: number;
|
userId?: number;
|
||||||
|
name?: string;
|
||||||
|
color?: string;
|
||||||
|
ws?: any; // WebSocket instance; keep as any to avoid dependency on ws types
|
||||||
|
player?: Player;
|
||||||
|
live?: boolean;
|
||||||
|
lastActive?: number;
|
||||||
|
keepAlive?: any;
|
||||||
|
_initialSnapshotSent?: boolean;
|
||||||
|
_getBatch?: { fields: Set<string>; timer?: any };
|
||||||
|
_pendingMessage?: any;
|
||||||
|
_pendingTimeout?: any;
|
||||||
|
resources?: number;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OfferItem {
|
||||||
|
type: string; // 'bank' or resource key or other
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Offer {
|
||||||
|
gets: OfferItem[];
|
||||||
|
gives: OfferItem[];
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Game {
|
||||||
|
id: string;
|
||||||
|
developmentCards: DevelopmentCard[];
|
||||||
|
players: Record<string, Player>;
|
||||||
|
sessions: Record<string, Session>;
|
||||||
|
unselected?: any[];
|
||||||
|
active?: number;
|
||||||
|
rules?: any;
|
||||||
|
step?: number;
|
||||||
|
placements: Placements;
|
||||||
|
turn: Turn;
|
||||||
|
pipOrder?: number[];
|
||||||
|
tileOrder?: number[];
|
||||||
|
borderOrder?: number[];
|
||||||
|
tiles?: any[];
|
||||||
|
pips?: any[];
|
||||||
|
dice?: number[];
|
||||||
|
chat?: any[];
|
||||||
|
activities?: any[];
|
||||||
|
playerOrder?: string[];
|
||||||
|
state?: string;
|
||||||
|
robber?: number;
|
||||||
|
robberName?: string;
|
||||||
|
turns?: number;
|
||||||
|
longestRoad?: string | false;
|
||||||
|
longestRoadLength?: number;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user