jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Compare commits

base: jketreno:888688a019412fe46892aecd6e467789f5eaec63
Branches Tags
jketreno:master
jketreno:audio
..
compare: jketreno:f1580970f9d1bc7d8447d80a593bd828e1fd18da
Branches Tags
jketreno:master
jketreno:audio

13 Commits
888688a019 ... f1580970f9

Author SHA1 Message Date
James Ketrenos
f1580970f9 TypeScript conversion mostly completed 2025-10-07 14:47:27 -07:00
James Ketrenos
45e01d5e89 Restructuring 2025-10-07 13:22:42 -07:00
James Ketrenos
5acf71b2a3 Aligned with ai-voicebot 2025-10-07 11:14:33 -07:00
James Ketrenos
b3386bab1d Game import from JSON and listing working 2025-10-06 12:27:26 -07:00
James Ketrenos
1469282199 Adding DB persistence 2025-10-06 12:21:58 -07:00
James Ketrenos
69ccaa7560 Refactoring commit--working 2025-10-06 11:56:39 -07:00
James Ketrenos
bc8c1b1c54 Refactoring commit--working 2025-10-06 11:54:42 -07:00
James Ketrenos
c0e9b9a23c Refactoring commit 2025-10-06 11:54:17 -07:00
James Ketrenos
2c15f57ca9 Game loads and functions 2025-10-06 11:44:59 -07:00
James Ketrenos
873c229275 Continuing... 2025-10-06 11:34:21 -07:00
James Ketrenos
7df6a9a75c Continuing 2025-10-06 11:32:13 -07:00
James Ketrenos
70bbaed6e5 Working on refactoring 2025-10-06 11:29:41 -07:00
James Ketrenos
a2cb68b421 Restructuring as TypeScript 2025-10-06 11:20:54 -07:00
46 changed files with 7899 additions and 6763 deletions
Show Stats Expand all files Collapse all files

94
client/src/Actions.tsx
View File

@ -7,13 +7,6 @@ import "./Actions.css";
import { PlayerName } from "./PlayerName";
import { GlobalContext } from "./GlobalContext";
type LocalGlobalContext = {
ws?: WebSocket | null;
gameId?: string | null;
name?: string | undefined;
sendJsonMessage?: (message: any) => void;
};
type PrivateData = {
orderRoll?: boolean;
resources?: number;
@ -50,25 +43,28 @@ const Actions: React.FC<ActionsProps> = ({
houseRulesActive,
setHouseRulesActive,
}) => {
console.log("Actions component rendered");
const ctx = useContext(GlobalContext) as LocalGlobalContext;
const ws = ctx.ws ?? null;
const gameId = ctx.gameId ?? null;
const name = ctx.name ?? undefined;
const { lastJsonMessage, sendJsonMessage, name, roomName } = useContext(GlobalContext);
const [state, setState] = useState<string>("lobby");
const [color, setColor] = useState<string | undefined>(undefined);
const [priv, setPriv] = useState<PrivateData | undefined>(undefined);
const [turn, setTurn] = useState<TurnData>({});
const [edit, setEdit] = useState<string | undefined>(name);
console.log("Actions: name =", name, "edit =", edit);
const [active, setActive] = useState<number>(0);
const [players, setPlayers] = useState<Record<string, PlayerData>>({});
const [alive, setAlive] = useState<number>(0);
const fields = useMemo(() => ["state", "turn", "private", "active", "color", "players"], []);
const onWsMessage = (event: MessageEvent) => {
const data = JSON.parse(event.data);
useEffect(() => {
sendJsonMessage({ type: "get", fields });
}, [sendJsonMessage, fields]);
useEffect(() => {
if (!lastJsonMessage) {
return;
}
const data = lastJsonMessage;
switch (data.type) {
case "game-update":
console.log(`actions - game update`, data.update);
@ -99,39 +95,7 @@ const Actions: React.FC<ActionsProps> = ({
default:
break;
}
};
const refWsMessage = useRef(onWsMessage);
useEffect(() => {
refWsMessage.current = onWsMessage;
});
useEffect(() => {
if (!ctx.ws) {
return;
}
const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
ctx.ws.addEventListener("message", cbMessage as EventListener);
return () => {
ctx.ws.removeEventListener("message", cbMessage as EventListener);
};
}, [ctx.ws, refWsMessage]);
useEffect(() => {
if (!ctx.sendJsonMessage) {
return;
}
ctx.sendJsonMessage({ type: "get", fields });
}, [ctx.sendJsonMessage, fields]);
const sendMessage = useCallback(
(data: Record<string, unknown>) => {
if (!ctx.sendJsonMessage) {
console.warn(`No sendJsonMessage`);
} else {
ctx.sendJsonMessage(data);
}
},
[ctx.sendJsonMessage]
);
}, [lastJsonMessage, state, color, edit, turn, active, players, priv]);
const buildClicked = () => {
setBuildActive(!buildActive);
@ -151,7 +115,7 @@ const Actions: React.FC<ActionsProps> = ({
const setName = (update: string) => {
if (update !== name) {
sendMessage({ type: "player-name", name: update });
sendJsonMessage({ type: "player-name", name: update });
}
setEdit(name);
if (buildActive) setBuildActive(false);
@ -171,47 +135,47 @@ const Actions: React.FC<ActionsProps> = ({
discards[t] = (discards[t] || 0) + 1;
nodes[i].classList.remove("Selected");
}
sendMessage({ type: "discard", discards });
sendJsonMessage({ type: "discard", discards });
if (buildActive) setBuildActive(false);
};
const newTableClick = () => {
sendMessage({ type: "shuffle" });
sendJsonMessage({ type: "shuffle" });
if (buildActive) setBuildActive(false);
};
const tradeClick = () => {
if (!tradeActive) {
setTradeActive(true);
sendMessage({ type: "trade" });
sendJsonMessage({ type: "trade" });
} else {
setTradeActive(false);
sendMessage({ type: "trade", action: "cancel", offer: undefined });
sendJsonMessage({ type: "trade", action: "cancel", offer: undefined });
}
if (buildActive) setBuildActive(false);
};
const rollClick = () => {
sendMessage({ type: "roll" });
sendJsonMessage({ type: "roll" });
if (buildActive) setBuildActive(false);
};
const passClick = () => {
sendMessage({ type: "pass" });
sendJsonMessage({ type: "pass" });
if (buildActive) setBuildActive(false);
};
const houseRulesClick = () => {
setHouseRulesActive(!houseRulesActive);
};
const startClick = () => {
sendMessage({ type: "set", field: "state", value: "game-order" });
sendJsonMessage({ type: "set", field: "state", value: "game-order" });
if (buildActive) setBuildActive(false);
};
const resetGame = () => {
sendMessage({ type: "clear-game" });
sendJsonMessage({ type: "clear-game" });
if (buildActive) setBuildActive(false);
};
if (!gameId) {
if (!roomName) {
return <Paper className="Actions" />;
}
@ -265,22 +229,8 @@ const Actions: React.FC<ActionsProps> = ({
disableRoll = true;
}
console.log("actions - ", {
disableRoll,
robberActions,
turn,
inGame,
isTurn,
hasRolled,
volcanoActive,
inGameOrder,
hasGameOrderRolled,
});
const disableDone = volcanoActive || placeRoad || robberActions || !isTurn || !hasRolled;
console.log("Actions render: edit =", edit, "name =", name);
return (
<Paper className="Actions">
{edit === "" && <PlayerName name={name} setName={setName} />}

226
client/src/App.css
View File

@ -1,229 +1,7 @@
body {
font-family: 'Droid Sans', 'Arial Narrow', Arial, sans-serif;
overflow: hidden;
width: 100dvw;
height: 100dvh;
}
#root {
width: 100vw;
/* height: 100vh; breaks on mobile -- not needed */
}
.Table {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
flex-direction: row;
background-image: url("./assets/tabletop.png");
}
.Table .Dialogs {
z-index: 10000;
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.Table .Dialogs .Dialog {
display: flex;
position: absolute;
flex-shrink: 1;
flex-direction: column;
padding: 0.25rem;
left: 0;
right: 0;
top: 0;
bottom: 0;
justify-content: space-around;
align-items: center;
z-index: 60000;
}
.Table .Dialogs .Dialog > div {
display: flex;
padding: 1rem;
flex-direction: column;
}
.Table .Dialogs .Dialog > div > div:first-child {
padding: 1rem;
}
.Table .Dialogs .TurnNoticeDialog {
background-color: #7a680060;
}
.Table .Dialogs .ErrorDialog {
background-color: #40000060;
}
.Table .Dialogs .WarningDialog {
background-color: #00000060;
}
.Table .Game {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.Table .Board {
display: flex;
position: relative;
flex-grow: 1;
z-index: 500;
}
.Table .PlayersStatus {
z-index: 500; /* Under Hand */
}
.Table .PlayersStatus.ActivePlayer {
z-index: 1500; /* On top of Hand */
}
.Table .Hand {
display: flex;
position: relative;
height: 11rem;
z-index: 10000;
}
.Table .Sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25rem;
max-width: 25rem;
overflow: hidden;
z-index: 5000;
}
.Table .Sidebar .Chat {
display: flex;
position: relative;
flex-grow: 1;
}
.Table .Trade {
display: flex;
position: relative;
z-index: 25000;
align-self: center;
}
.Table .Dialogs {
position: absolute;
display: flex;
top: 0;
bottom: 0;
right: 0;
left: 0;
justify-content: space-around;
align-items: center;
z-index: 20000;
pointer-events: none;
}
.Table .Dialogs > * {
pointer-events: all;
}
.Table .ViewCard {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.Table .Winner {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.Table .HouseRules {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.Table .ChooseCard {
display: flex;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.Table button {
margin: 0.25rem;
background-color: white;
border: 1px solid black; /* why !important */
}
.Table .MuiButton-text {
padding: 0.25rem 0.55rem;
}
.Table button:disabled {
opacity: 0.5;
border: 1px solid #ccc; /* why !important */
}
.Table .ActivitiesBox {
display: flex;
flex-direction: column;
position: absolute;
left: 1em;
top: 1em;
}
.Table .DiceRoll {
display: flex;
flex-direction: column;
position: relative;
/*
left: 1rem;
top: 5rem;*/
flex-wrap: wrap;
justify-content: left;
align-items: left;
z-index: 1000;
}
.Table .DiceRoll div:not(:last-child) {
border: 1px solid black;
background-color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.Table .DiceRoll div:last-child {
display: flex;
flex-direction: row;
}
.Table .DiceRoll .Dice {
margin: 0.25rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.5rem;
}

672
client/src/App.tsx
View File

@ -1,593 +1,127 @@
import React, { useState, useCallback, useEffect, useRef } from "react";
import { BrowserRouter as Router, Route, Routes, useParams, useNavigate } from "react-router-dom";
import React, { useState, useEffect, useCallback } from "react";
import { Paper, Typography } from "@mui/material";
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 { 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 { Session } from "./GlobalContext";
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';
import robberAudio from './assets/robber.mp3';
import knightsAudio from './assets/the-knights-who-say-ni.mp3';
import volcanoAudio from './assets/volcano-eruption.mp3';
console.log(`Peddlers of Ketran Build: ${import.meta.env.VITE_APP_POK_BUILD}`);
const audioFiles: Record<string, string> = {
'its-your-turn.mp3': itsYourTurnAudio,
'robber.mp3': robberAudio,
'the-knights-who-say-ni.mp3': knightsAudio,
'volcano-eruption.mp3': volcanoAudio,
};
interface LoadingProps {
setError: (error: string | null) => void;
}
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;
};
const Table: React.FC = () => {
const params = useParams();
const Loading = (props: LoadingProps) => {
const navigate = useNavigate();
const [gameId, setGameId] = useState<string | undefined>(params.gameId ? (params.gameId as string) : undefined);
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);
const { setError } = props;
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 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;
}
};
const sendUpdate = (update: unknown) => {
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);
useEffect(() => {
const createRoom = async () => {
try {
const room = await sessionApi.createRoom();
console.log(`Loading - created room`, room);
navigate(`${base}/${room.name}`);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
console.error("Failed to create room:", errorMessage);
setError(errorMessage);
}
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]);
createRoom();
}, [setError]);
return (
<GlobalContext.Provider value={global}>
{/* <PingPong/> */}
<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>
</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>
<Paper sx={{ p: 2, m: 2, width: "fit-content", backgroundColor: "#ddddff" }}>
<Typography>Loading...</Typography>
</Paper>
);
};
const App: React.FC = () => {
const [playerId, setPlayerId] = useState<string | undefined>(undefined);
const [error, setError] = useState<string | undefined>(undefined);
const App = () => {
const [session, setSession] = useState<Session | null>(null);
const [error, setError] = useState<string | null>(null);
const [sessionRetryAttempt, setSessionRetryAttempt] = useState<number>(0);
useEffect(() => {
if (playerId) {
if (error) {
setTimeout(() => setError(null), 5000);
}
}, [error]);
useEffect(() => {
if (!session) {
return;
}
window
.fetch(`${base}/api/v1/games/`, {
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]);
console.log(`App - sessionId`, session.id);
}, [session]);
if (!playerId) {
return <>{error}</>;
}
const getSession = useCallback(async () => {
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 (
<Router basename={base}>
<Routes>
<Route element={<Table />} path="/:gameId" />
<Route element={<Table />} path="/" />
</Routes>
</Router>
<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>
<Route element={<RoomView {...{ setError, session, setSession }} />} path={`${base}/:roomName`} />
<Route element={<Loading {...{ setError }} />} path={`${base}`} />
</Routes>
</Router>
)}
{error && (
<Paper className="Error" sx={{ p: 2, m: 2, width: "fit-content", backgroundColor: "#ffdddd" }}>
<Typography color="red">{error}</Typography>
</Paper>
)}
</Box>
);
};

78
client/src/Board.tsx
View File

@ -95,7 +95,7 @@ const clearTooltip = () => {
};
const Board: React.FC<BoardProps> = ({ animations }) => {
const { ws, sendJsonMessage } = useContext(GlobalContext);
const { sendJsonMessage, lastJsonMessage } = useContext(GlobalContext);
const board = useRef();
const [transform, setTransform] = useState(1);
const [pipElements, setPipElements] = useState<React.ReactElement[]>([]);
@ -142,11 +142,11 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
[]
);
const onWsMessage = (event) => {
if (ws && ws !== event.target) {
console.error(`Disconnect occur?`);
useEffect(() => {
if (!lastJsonMessage) {
return;
}
const data = JSON.parse(event.data);
const data = lastJsonMessage;
switch (data.type) {
case "game-update":
console.log(`board - game update`, data.update);
@ -232,23 +232,7 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
default:
break;
}
};
const refWsMessage = useRef(onWsMessage);
useEffect(() => {
refWsMessage.current = onWsMessage;
});
useEffect(() => {
if (!ws) {
return;
}
console.log("board - bind");
const cbMessage = (e) => refWsMessage.current(e);
ws.addEventListener("message", cbMessage);
return () => {
console.log("board - unbind");
ws.removeEventListener("message", cbMessage);
};
}, [ws]);
}, [lastJsonMessage, robber, robberName]);
useEffect(() => {
if (!sendJsonMessage) {
return;
@ -305,10 +289,6 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
onResize();
useEffect(() => {
if (!ws) {
return;
}
console.log(`Generating static corner data... should only occur once per reload or socket reconnect.`);
const onCornerClicked = (event, corner) => {
let type;
@ -317,12 +297,10 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
} else {
type = "place-settlement";
}
ws.send(
JSON.stringify({
type,
index: corner.index,
})
);
sendJsonMessage({
type,
index: corner.index,
});
};
const Corner: React.FC<CornerProps> = ({ corner }) => {
return (
@ -411,27 +389,17 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
};
setCornerElements(generateCorners());
}, [ws, setCornerElements]);
}, [setCornerElements]);
useEffect(() => {
if (!ws) {
return;
}
console.log(`Generating static road data... should only occur once per reload or socket reconnect.`);
const Road: React.FC<RoadProps> = ({ road }) => {
const onRoadClicked = (road) => {
console.log(`Road clicked: ${road.index}`);
if (!ws) {
console.error(`board - onRoadClicked - ws is NULL`);
return;
}
ws.send(
JSON.stringify({
type: "place-road",
index: road.index,
})
);
sendJsonMessage({
type: "place-road",
index: road.index,
});
};
return (
@ -533,13 +501,10 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
return corners;
};
setRoadElements(generateRoads());
}, [ws, setRoadElements]);
}, [setRoadElements]);
/* Generate Pip, Tile, and Border elements */
useEffect(() => {
if (!ws) {
return;
}
console.log(`board - Generate pip, border, and tile elements`);
const Pip: React.FC<PipProps> = ({ pip, className }) => {
const onPipClicked = (pip) => {
@ -547,12 +512,10 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
console.error(`board - sendPlacement - ws is NULL`);
return;
}
ws.send(
JSON.stringify({
type: "place-robber",
index: pip.index,
})
);
sendJsonMessage({
type: "place-robber",
index: pip.index,
});
};
return (
@ -830,7 +793,6 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
tiles,
tileOrder,
animationSeeds,
ws,
state,
rules,
animations,

77
client/src/Common.ts
View File

@ -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
// accidentally include literal quotes when setting env vars (for example,
// `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
// an accidental quoted-empty value becomes an empty string.
const candidateEnvVars = [
import.meta.env.VITE_API_BASE,
// 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 = '';
const candidateEnvVars = [import.meta.env.VITE_API_BASE, import.meta.env.VITE_BASEPATH, import.meta.env.PUBLIC_URL];
let rawEnvApiBase = "";
for (const candidate of candidateEnvVars) {
if (typeof candidate === 'string' && candidate.trim() !== '') {
if (typeof candidate === "string" && candidate.trim() !== "") {
rawEnvApiBase = candidate;
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 (envApiBase === '""' || envApiBase === "''") {
envApiBase = '';
envApiBase = "";
}
// Remove surrounding single or double quotes if present.
if ((envApiBase.startsWith('"') && envApiBase.endsWith('"')) ||
(envApiBase.startsWith("'") && envApiBase.endsWith("'"))) {
if (
(envApiBase.startsWith('"') && envApiBase.endsWith('"')) ||
(envApiBase.startsWith("'") && envApiBase.endsWith("'"))
) {
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
// constructing `${base}/api/...` never produces a protocol-relative
// URL like `//api/...` which the browser resolves to `https://api/...`.
let baseCandidate = envApiBase || publicBase || '';
if (baseCandidate === '/') {
baseCandidate = '';
let baseCandidate = envApiBase || publicBase || "";
if (baseCandidate === "/") {
baseCandidate = "";
}
// Remove trailing slash if present (but keep leading slash for path bases).
if (baseCandidate.length > 1 && baseCandidate.endsWith('/')) {
baseCandidate = baseCandidate.replace(/\/+$/, '');
if (baseCandidate.length > 1 && baseCandidate.endsWith("/")) {
baseCandidate = baseCandidate.replace(/\/+$/, "");
}
// 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
// VITE_BASEPATH is `/ketr.ketran`), React Router's <Router basename="...">
// 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
// the client still renders correctly in local/dev setups.
// basename. In that situation throw an error!
try {
if (typeof window !== 'undefined' && baseCandidate) {
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 + '/'))) {
// Mismatch: fallback to empty base so router can match the URL.
// 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 = '';
if (typeof window !== "undefined" && baseCandidate) {
const pathname = window.location && window.location.pathname ? window.location.pathname : "";
if (!(pathname === baseCandidate || pathname.startsWith(baseCandidate + "/"))) {
// Mismatch: FAIL!
throw Error(`Configured base '${baseCandidate}' does not match current pathname '${pathname}'`);
}
}
} catch (e) {
@ -97,4 +68,8 @@ const base = baseCandidate;
const assetsPath = base;
const gamesPath = `${base}`;
export { base, debounce, assetsPath, gamesPath };
const ws_base: string = `${window.location.protocol === "https:" ? "wss" : "ws"}://${
window.location.host
}${base}/api/v1/games/ws`;
export { base, ws_base, assetsPath, gamesPath };

94
client/src/ConnectionStatus.tsx Normal file
View 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 };

137
client/src/GlobalContext.ts
View File

@ -1,20 +1,141 @@
import { createContext } from 'react';
import { createContext } from "react";
export type GlobalContextType = {
gameId?: string | undefined;
ws?: WebSocket | null | undefined;
roomName?: string;
name?: string;
sendJsonMessage?: (message: any) => void;
chat?: Array<unknown>;
socketUrl?: string;
session?: Session;
lastJsonMessage?: any;
};
const global: GlobalContextType = {
gameId: undefined,
ws: undefined,
roomName: undefined,
name: "",
chat: []
socketUrl: undefined,
chat: [],
session: undefined,
lastJsonMessage: undefined,
};
const GlobalContext = createContext<GlobalContextType>(global);
const GlobalContext = createContext(global);
export { GlobalContext, 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 };

18
client/src/MediaControl.tsx
View File

@ -9,6 +9,7 @@ import Videocam from "@mui/icons-material/Videocam";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import useWebSocket, { ReadyState } from "react-use-websocket";
import { Session } from "./GlobalContext";
import WebRTCStatus from "./WebRTCStatus";
import Moveable from "react-moveable";
import { flushSync } from "react-dom";
@ -17,15 +18,6 @@ const debug = true;
// When true, do not send host candidates to the signaling server. Keeps TURN relays preferred.
const FILTER_HOST_CANDIDATES = false; // Temporarily disabled to test direct connections
export type Session = {
session_id: string;
peer_name: string;
has_media?: boolean; // Whether this user provides audio/video streams
attributes?: Record<string, any>;
name: string;
id: string;
};
/* ---------- Synthetic Tracks Helpers ---------- */
// Helper to hash a string to a color
@ -1089,8 +1081,6 @@ const MediaAgent = (props: MediaAgentProps) => {
const handleWebSocketMessage = useCallback(
(data: any) => {
console.log(`media-agent - WebSocket message received:`, data.type, data.data);
switch (data.type) {
case "join_status":
setJoinStatus({ status: data.status, message: data.message });
@ -1130,13 +1120,12 @@ const MediaAgent = (props: MediaAgentProps) => {
// Join lobby when media is ready
useEffect(() => {
if (!session) return;
if (media && joinStatus.status === "Not joined" && readyState === ReadyState.OPEN) {
console.log(`media-agent - Initiating media join for ${session.name}`);
setJoinStatus({ status: "Joining" });
sendJsonMessage({ type: "join", data: {} });
}
}, [media, joinStatus.status, sendJsonMessage, readyState, session]);
}, [media, joinStatus.status, sendJsonMessage, readyState, session.name]);
// Update local peer in peers list
useEffect(() => {
@ -1190,7 +1179,6 @@ const MediaAgent = (props: MediaAgentProps) => {
console.log(`media-agent - Requesting access to local audio/video`);
const attempt = { get_audio: true, get_video: true };
let media = null;
if (!session) { return new MediaStream(); }
// Try to get user media with fallback
while (attempt.get_audio || attempt.get_video) {
@ -1271,7 +1259,7 @@ const MediaAgent = (props: MediaAgentProps) => {
hasRealVideo,
});
return finalMedia;
}, [session]);
}, [session.name]);
// Initialize media once
useEffect(() => {

161
client/src/NameSetter.tsx Normal file
View File

@ -0,0 +1,161 @@
import React, { useState, KeyboardEvent, useRef, useContext } from "react";
import {
Input,
Button,
Box,
Typography,
Tooltip,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
} from "@mui/material";
import { GlobalContext, Session } from "./GlobalContext";
interface NameSetterProps {
onNameSet?: () => void;
initialName?: string;
initialPassword?: string;
}
const NameSetter: React.FC<NameSetterProps> = ({ onNameSet, initialName = "", initialPassword = "" }) => {
const { session, sendJsonMessage } = useContext(GlobalContext);
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: "player-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;

355
client/src/PlayerList.tsx
View File

@ -1,191 +1,210 @@
import React, { useState, useEffect, useContext, useRef } from "react";
import React, { useState, useEffect, useCallback, useContext } from "react";
import Paper from "@mui/material/Paper";
import List from "@mui/material/List";
import "./PlayerList.css";
import { PlayerColor } from "./PlayerColor";
import { MediaAgent, MediaControl, Session } from "./MediaControl";
import { MediaControl, MediaAgent, Peer } from "./MediaControl";
import Box from "@mui/material/Box";
import { GlobalContext } from "./GlobalContext";
import useWebSocket from "react-use-websocket";
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
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;
};
interface PlayerListProps {
socketUrl?: string;
session?: Session;
}
const PlayerList: React.FC = () => {
const { session, socketUrl } = useContext(GlobalContext);
const [Players, setPlayers] = useState<Player[] | null>(null);
const [peers, setPeers] = useState<Record<string, Peer>>({});
const PlayerList: React.FC<PlayerListProps> = ({ socketUrl, session }) => {
const { ws, name, sendJsonMessage } = useContext(GlobalContext);
const [players, setPlayers] = useState<{ [key: string]: any }>({});
const [unselected, setUneslected] = useState<string[]>([]);
const [state, setState] = useState<string>("lobby");
const [color, setColor] = useState<string | undefined>(undefined);
const [peers, setPeers] = useState<{ [key: string]: any }>({});
const sortPlayers = useCallback(
(A: any, B: any) => {
if (!session) {
return 0;
}
/* active Player first */
if (A.name === session.name) {
return -1;
}
if (B.name === session.name) {
return +1;
}
/* Sort active Players first */
if (A.name && !B.name) {
return -1;
}
if (B.name && !A.name) {
return +1;
}
/* Otherwise, sort by color */
if (A.color && B.color) {
return A.color.localeCompare(B.color);
}
return 0;
},
[session]
);
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);
// 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;
}
if ("players" in data.update) {
let found = false;
for (const key in data.update.players) {
if (data.update.players[key].name === name) {
found = true;
setColor(key);
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,
};
}
}
if (!found) {
setColor(undefined);
}
setPlayers(data.update.players);
return updated;
});
break;
}
if ("state" in data.update && data.update.state !== state) {
setState(data.update.state);
}
break;
default:
break;
}
};
const refWsMessage = useRef(onWsMessage);
useEffect(() => {
refWsMessage.current = onWsMessage;
default:
break;
}
},
});
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) {
if (Players !== null) {
return;
}
sendJsonMessage({
type: "get",
fields: ["state", "players", "unselected"],
type: "list_Players",
});
}, [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;
}
if (B.name === name) {
return +1;
}
/* Sort active players first */
if (A.name && !B.name) {
return -1;
}
if (B.name && !A.name) {
return +1;
}
/* Ohterwise, sort by color */
return A.color.localeCompare(B.color);
};
sortedPlayers.sort(sortPlayers);
/* Array of just names... */
unselected.sort((A, B) => {
/* active player first */
if (A === name) {
return -1;
}
if (B === name) {
return +1;
}
/* Then sort alphabetically */
return A.localeCompare(B);
});
const videoClass = sortedPlayers.length <= 2 ? "Medium" : "Small";
sortedPlayers.forEach((player) => {
const playerName = player.name;
const selectable = inLobby && (player.status === "Not active" || color === player.color);
playerElements.push(
<div
data-selectable={selectable}
data-selected={player.color === color}
className="PlayerEntry"
onClick={() => {
inLobby && selectable && toggleSelected(player.color);
}}
key={`player-${player.color}`}
>
<div>
<PlayerColor color={player.color} />
<div className="Name">{playerName ? playerName : "Available"}</div>
{playerName && !player.live && <div className="NoNetwork"></div>}
</div>
{playerName && player.live && (
<MediaControl className={videoClass} peer={peers[playerName]} isSelf={player.color === color} />
)}
{!playerName && <div></div>}
</div>
);
});
const waiting = unselected.map((player) => {
return (
<div className={player === name ? "Self" : ""} key={player}>
<div>{player}</div>
<MediaControl className={"Small"} peer={peers[player]} isSelf={name === player} />
</div>
);
});
}, [Players, sendJsonMessage]);
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>
)}
</Paper>
<Box sx={{ position: "relative", width: "100%" }}>
<Paper
className={`PlayerList Medium`}
sx={{
maxWidth: { xs: "100%", sm: 500 },
p: { xs: 1, sm: 2 },
m: { xs: 0, sm: 2 },
}}
>
<MediaAgent {...{ session, socketUrl, peers, setPeers }} />
<List className="PlayerSelector">
{Players?.map((Player) => (
<Box
key={Player.session_id}
sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
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
style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
title="This name is protected with a password"
>
🔒
</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>
</Box>
);
};

229
client/src/RoomView.css Normal file
View File

@ -0,0 +1,229 @@
body {
font-family: 'Droid Sans', 'Arial Narrow', Arial, sans-serif;
overflow: hidden;
}
#root {
width: 100vw;
/* height: 100vh; breaks on mobile -- not needed */
}
.RoomView {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
flex-direction: row;
background-image: url("./assets/tabletop.png");
}
.RoomView .Dialogs {
z-index: 10000;
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RoomView .Dialogs .Dialog {
display: flex;
position: absolute;
flex-shrink: 1;
flex-direction: column;
padding: 0.25rem;
left: 0;
right: 0;
top: 0;
bottom: 0;
justify-content: space-around;
align-items: center;
z-index: 60000;
}
.RoomView .Dialogs .Dialog > div {
display: flex;
padding: 1rem;
flex-direction: column;
}
.RoomView .Dialogs .Dialog > div > div:first-child {
padding: 1rem;
}
.RoomView .Dialogs .TurnNoticeDialog {
background-color: #7a680060;
}
.RoomView .Dialogs .ErrorDialog {
background-color: #40000060;
}
.RoomView .Dialogs .WarningDialog {
background-color: #00000060;
}
.RoomView .Game {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.RoomView .Board {
display: flex;
position: relative;
flex-grow: 1;
z-index: 500;
}
.RoomView .PlayersStatus {
z-index: 500; /* Under Hand */
}
.RoomView .PlayersStatus.ActivePlayer {
z-index: 1500; /* On top of Hand */
}
.RoomView .Hand {
display: flex;
position: relative;
height: 11rem;
z-index: 10000;
}
.RoomView .Sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25rem;
max-width: 25rem;
overflow: hidden;
z-index: 5000;
}
.RoomView .Sidebar .Chat {
display: flex;
position: relative;
flex-grow: 1;
}
.RoomView .Trade {
display: flex;
position: relative;
z-index: 25000;
align-self: center;
}
.RoomView .Dialogs {
position: absolute;
display: flex;
top: 0;
bottom: 0;
right: 0;
left: 0;
justify-content: space-around;
align-items: center;
z-index: 20000;
pointer-events: none;
}
.RoomView .Dialogs > * {
pointer-events: all;
}
.RoomView .ViewCard {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.RoomView .Winner {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.RoomView .HouseRules {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.RoomView .ChooseCard {
display: flex;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.RoomView button {
margin: 0.25rem;
background-color: white;
border: 1px solid black; /* why !important */
}
.RoomView .MuiButton-text {
padding: 0.25rem 0.55rem;
}
.RoomView button:disabled {
opacity: 0.5;
border: 1px solid #ccc; /* why !important */
}
.RoomView .ActivitiesBox {
display: flex;
flex-direction: column;
position: absolute;
left: 1em;
top: 1em;
}
.RoomView .DiceRoll {
display: flex;
flex-direction: column;
position: relative;
/*
left: 1rem;
top: 5rem;*/
flex-wrap: wrap;
justify-content: left;
align-items: left;
z-index: 1000;
}
.RoomView .DiceRoll div:not(:last-child) {
border: 1px solid black;
background-color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.RoomView .DiceRoll div:last-child {
display: flex;
flex-direction: row;
}
.RoomView .DiceRoll .Dice {
margin: 0.25rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.5rem;
}

427
client/src/RoomView.tsx Normal file
View File

@ -0,0 +1,427 @@
import React, { useState, useEffect, useContext } 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, GlobalContextType } 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 "./RoomView.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";
import NameSetter from "./NameSetter";
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 = (props: RoomProps) => {
const { session, setSession, setError } = props;
const [socketUrl, setSocketUrl] = useState<string | null>(null);
const { roomName = "default" } = useParams<{ roomName: string }>();
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 [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(() => {
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]);
if (readyState !== ReadyState.OPEN || !session) {
return <ConnectionStatus readyState={readyState} reconnectAttempt={reconnectAttempt} />;
}
return (
<GlobalContext.Provider value={{ socketUrl, session, name, roomName, sendJsonMessage, lastJsonMessage }}>
<div className="RoomView">
{!name ? (
<Paper>
<NameSetter />
</Paper>
) : (
<>
<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>
)}
{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>
);
};
export { RoomView };

45
client/src/api-client.ts Normal file
View 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 };

15
client/src/index.css
View File

@ -17,16 +17,16 @@
}*/
html {
height: 100%;
width: 100%;
height: 100dvh;
width: 100dvw;
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100%;
width: 100%;
display: flex;
height: 100dvh;
width: 100dvw;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@ -35,8 +35,3 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

19
server/ai/app.js → server/ai/app.ts
View File

@ -1,10 +1,11 @@
const fetch = require('node-fetch');
const WebSocket = require('ws');
const fs = require('fs').promises;
const calculateLongestRoad = require('./longest-road.js');
// @ts-nocheck
import fetch from 'node-fetch';
import WebSocket from 'ws';
import fs from 'fs';
import calculateLongestRoad from './longest-road';
const { getValidRoads, getValidCorners } = require('../util/validLocations.js');
const { layout, staticData } = require('../util/layout.js');
import { getValidRoads, getValidCorners } from '../util/validLocations';
import { layout, staticData } from '../util/layout';
const version = '0.0.1';
@ -24,14 +25,14 @@ const server = process.argv[2];
const gameId = process.argv[3];
const name = process.argv[4];
const game = {};
const game: any = {};
const anyValue = undefined;
process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
/* Do not use arrow function as this is rebound to have
* this as the WebSocket */
let send = function (data) {
let send = function (this: WebSocket, data: any) {
if (data.type === 'get') {
console.log(`ws - send: get`, data.fields);
} else {
@ -40,7 +41,7 @@ let send = function (data) {
this.send(JSON.stringify(data));
};
const error = (e) => {
const error = (e: any) => {
console.log(`ws - error`, e);
};

21
server/ai/longest-road.js → server/ai/longest-road.ts
View File

@ -1,6 +1,7 @@
const { layout } = require('../util/layout.js');
// @ts-nocheck
import { layout } from '../util/layout';
const processCorner = (game, color, cornerIndex, placedCorner) => {
const processCorner = (game: any, color: string, cornerIndex: number, placedCorner: any): number => {
/* If this corner is allocated and isn't assigned to the walking color, skip it */
if (placedCorner.color && placedCorner.color !== color) {
return 0;
@ -13,7 +14,7 @@ const processCorner = (game, color, cornerIndex, placedCorner) => {
placedCorner.walking = true;
/* Calculate the longest road branching from both corners */
let longest = 0;
layout.corners[cornerIndex].roads.forEach(roadIndex => {
layout.corners[cornerIndex].roads.forEach((roadIndex: number) => {
const placedRoad = game.placements.roads[roadIndex];
if (placedRoad.walking) {
return;
@ -32,7 +33,7 @@ const processCorner = (game, color, cornerIndex, placedCorner) => {
return longest;
};
const buildCornerGraph = (game, color, cornerIndex, placedCorner, set) => {
const buildCornerGraph = (game: any, color: string, cornerIndex: number, placedCorner: any, set: any) => {
/* If this corner is allocated and isn't assigned to the walking color, skip it */
if (placedCorner.color && placedCorner.color !== color) {
return;
@ -44,13 +45,13 @@ const buildCornerGraph = (game, color, cornerIndex, placedCorner, set) => {
placedCorner.walking = true;
/* Calculate the longest road branching from both corners */
layout.corners[cornerIndex].roads.forEach(roadIndex => {
layout.corners[cornerIndex].roads.forEach((roadIndex: number) => {
const placedRoad = game.placements.roads[roadIndex];
buildRoadGraph(game, color, roadIndex, placedRoad, set);
});
};
const processRoad = (game, color, roadIndex, placedRoad) => {
const processRoad = (game: any, color: string, roadIndex: number, placedRoad: any): number => {
/* If this road isn't assigned to the walking color, skip it */
if (placedRoad.color !== color) {
return 0;
@ -75,7 +76,7 @@ const processRoad = (game, color, roadIndex, placedRoad) => {
return roadLength;
};
const buildRoadGraph = (game, color, roadIndex, placedRoad, set) => {
const buildRoadGraph = (game: any, color: string, roadIndex: number, placedRoad: any, set: any) => {
/* If this road isn't assigned to the walking color, skip it */
if (placedRoad.color !== color) {
return;
@ -94,7 +95,7 @@ const buildRoadGraph = (game, color, roadIndex, placedRoad, set) => {
});
};
const clearRoadWalking = (game) => {
const clearRoadWalking = (game: any) => {
/* Clear out walk markers on roads */
layout.roads.forEach((item, itemIndex) => {
delete game.placements.roads[itemIndex].walking;
@ -106,7 +107,7 @@ const clearRoadWalking = (game) => {
});
}
const calculateRoadLengths = (game) => {
const calculateRoadLengths = (game: any) => {
const color = game.color;
clearRoadWalking(game);
@ -158,4 +159,4 @@ const calculateRoadLengths = (game) => {
return final;
};
module.exports = calculateRoadLengths;
export default calculateRoadLengths;

46
server/app.js → server/app.ts
View File

@ -1,19 +1,20 @@
"use strict";
// @ts-nocheck
process.env.TZ = "Etc/GMT";
console.log("Loading ketr.ketran");
const express = require("express"),
bodyParser = require("body-parser"),
config = require("config"),
session = require('express-session'),
basePath = require("./basepath"),
cookieParser = require("cookie-parser"),
app = express(),
fs = require('fs');
import express from "express";
import bodyParser from "body-parser";
import config from "config";
import session from 'express-session';
import basePath from "./basepath";
import cookieParser from "cookie-parser";
import fs from 'fs';
import http from "http";
const server = require("http").createServer(app);
const app = express();
const server = http.createServer(app);
app.use(cookieParser());
@ -21,7 +22,7 @@ app.use(cookieParser());
// and URL for requests under the configured basePath so we can trace which
// service (server or dev proxy) is handling requests and their returned
// status during debugging. Keep this lightweight.
app.use((req, res, next) => {
app.use((req: express.Request, res: express.Response, next: express.NextFunction) => {
try {
const bp = app.get("basePath") || '/';
if (req.url && req.url.indexOf(bp) === 0) {
@ -37,16 +38,17 @@ app.use((req, res, next) => {
next();
});
const ws = require('express-ws')(app, server);
import expressWs from 'express-ws';
expressWs(app, server);
require("./console-line.js"); /* Monkey-patch console.log with line numbers */
require("./console-line"); /* Monkey-patch console.log with line numbers */
const frontendPath = config.get("frontendPath").replace(/\/$/, "") + "/",
serverConfig = config.get("server");
const frontendPath = (config.get("frontendPath") as string).replace(/\/$/, "") + "/",
serverConfig = config.get("server") as any;
console.log("Hosting server from: " + basePath);
let userDB, gameDB;
let userDB: any, gameDB: any;
app.use(bodyParser.json());
@ -86,7 +88,7 @@ const users = require("./routes/users");
app.use(basePath + "api/v1/users", users.router);
*/
app.use(function(err, req, res, next) {
app.use(function(err: any, req: express.Request, res: express.Response, next: express.NextFunction) {
console.error(err.message);
res.status(err.status || 500).json({
message: err.message,
@ -110,7 +112,9 @@ process.on('SIGINT', () => {
server.close(() => process.exit(1));
});
require("./db/games").then(function(db) {
import { initGameDB } from './routes/games/store';
initGameDB().then(function(db) {
gameDB = db;
}).then(function() {
return require("./db/users").then(function(db) {
@ -126,7 +130,7 @@ require("./db/games").then(function(db) {
process.exit(-1);
});
server.on("error", function(error) {
server.on("error", function(error: any) {
if (error.syscall !== "listen") {
throw error;
}
@ -145,3 +149,5 @@ server.on("error", function(error) {
throw error;
}
});
export { app, server };

7
server/basepath.js → server/basepath.ts
View File

@ -1,5 +1,6 @@
const fs = require('fs');
let basePathRaw = process.env.VITE_BASEPATH || '';
import fs from 'fs';
let basePathRaw = process.env['VITE_BASEPATH'] || '';
// If env not provided, try to detect a <base href="..."> in the
// built client's index.html (if present). This helps when the
@ -29,4 +30,4 @@ if (basePath === '//') basePath = '/';
console.log(`Using basepath ${basePath}`);
module.exports = basePath;
export default basePath;

30
server/console-line.js
View File

@ -1,30 +0,0 @@
/* monkey-patch console.log to prefix with file/line-number */
if (process.env.LOG_LINE) {
let cwd = process.cwd(),
cwdRe = new RegExp("^[^/]*" + cwd.replace("/", "\\/") + "\/([^:]*:[0-9]*).*$");
[ "log", "warn", "error" ].forEach(function(method) {
console[method] = (function () {
let orig = console[method];
return function () {
function getErrorObject() {
try {
throw Error('');
} catch (err) {
return err;
}
}
let err = getErrorObject(),
caller_line = err.stack.split("\n")[3],
args = [caller_line.replace(cwdRe, "$1 -")];
/* arguments.unshift() doesn't exist... */
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
orig.apply(this, args);
};
})();
});
}

28
server/console-line.ts Executable file
View File

@ -0,0 +1,28 @@
/* monkey-patch console.log to prefix with file/line-number */
if (process.env['LOG_LINE']) {
let cwd = process.cwd(),
cwdRe = new RegExp("^[^/]*" + cwd.replace("/", "\\/") + "\/([^:]*:[0-9]*).*$");
[ "log", "warn", "error" ].forEach(function(method: string) {
(console as any)[method] = (function () {
let orig = (console as any)[method];
return function (this: any, ...args: any[]) {
function getErrorObject(): Error {
try {
throw Error('');
} catch (err) {
return err as Error;
}
}
let err = getErrorObject(),
caller_line = err.stack?.split("\n")[3] || '',
prefixedArgs = [caller_line.replace(cwdRe, "$1 -")];
/* arguments.unshift() doesn't exist... */
prefixedArgs.push(...args);
orig.apply(this, prefixedArgs);
};
})();
});
}

44
server/db/games.js
View File

@ -1,44 +0,0 @@
"use strict";
const fs = require('fs'),
path = require('path'),
Sequelize = require('sequelize'),
config = require('config');
function init() {
const db = {
sequelize: new Sequelize(config.get("db.games")),
Sequelize: Sequelize
};
return db.sequelize.authenticate().then(function () {
const Game = db.sequelize.define('game', {
id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
path: Sequelize.STRING,
name: Sequelize.STRING,
}, {
timestamps: false,
classMethods: {
associate: function() {
}
}
});
return db.sequelize.sync({
force: false
}).then(function () {
return db;
});
}).catch(function (error) {
console.log("ERROR: Failed to authenticate with GAMES DB");
console.log("ERROR: " + JSON.stringify(config.get("db"), null, 2));
console.log(error);
throw error;
});
}
module.exports = init();

70
server/db/users.js
View File

@ -1,70 +0,0 @@
"use strict";
const Sequelize = require('sequelize'),
config = require('config');
function init() {
const db = {
sequelize: new Sequelize(config.get("db.users")),
Sequelize: Sequelize
};
return db.sequelize.authenticate().then(function () {
const User = db.sequelize.define('users', {
id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
displayName: Sequelize.STRING,
notes: Sequelize.STRING,
uid: Sequelize.STRING,
authToken: Sequelize.STRING,
authDate: Sequelize.DATE,
authenticated: Sequelize.BOOLEAN,
mailVerified: Sequelize.BOOLEAN,
mail: Sequelize.STRING,
memberSince: Sequelize.DATE,
password: Sequelize.STRING, /* SHA hash of user supplied password */
passwordExpires: Sequelize.DATE
}, {
timestamps: false
});
const Authentication = db.sequelize.define('authentication', {
key: {
type: Sequelize.STRING,
primaryKey: true,
allowNull: false
},
issued: Sequelize.DATE,
type: {
type: Sequelize.ENUM,
values: [ 'account-setup', 'password-reset' ]
},
userId: {
type: Sequelize.INTEGER,
allowNull: false,
references: {
model: User,
key: 'id',
}
}
}, {
timestamps: false
});
return db.sequelize.sync({
force: false
}).then(function () {
return db;
});
}).catch(function (error) {
console.log("ERROR: Failed to authenticate with USER DB");
console.log("ERROR: " + JSON.stringify(config.get("db"), null, 2));
console.log(error);
throw error;
});
}
module.exports = init();

65
server/lib/mail.js → server/lib/mail.ts
View File

@ -1,8 +1,8 @@
"use strict";
const config = require("config"),
crypto = require("crypto"),
hb = require("handlebars");
import config from "config";
import crypto from "crypto";
import hb from "handlebars";
const templates = {
"verify": {
@ -52,13 +52,13 @@ const templates = {
}
};
const sendVerifyMail = function(userDB, req, user) {
const sendVerifyMail = function(userDB: any, req: any, user: any): any {
return userDB.sequelize.query("DELETE FROM authentications WHERE userId=:id AND type='account-setup'", {
replacements: {
id: user.id
}
}).then(function() {
return new Promise(function(resolve, reject) {
return new Promise<string>(function(resolve, reject) {
crypto.randomBytes(16, function(error, buffer) {
if (error) {
return reject(error);
@ -66,7 +66,7 @@ const sendVerifyMail = function(userDB, req, user) {
return resolve(buffer.toString('hex'));
});
});
}).then(function(secret) {
}).then(function(secret: string) {
return userDB.sequelize.query(
"INSERT INTO authentications " +
"(userId,issued,key,type) " +
@ -77,11 +77,11 @@ const sendVerifyMail = function(userDB, req, user) {
}
}).then(function() {
return secret;
}).catch(function(error) {
}).catch(function(error: any) {
console.log(error);
throw error;
});
}).then(function(secret) {
}).then(function(secret: string) {
const transporter = req.app.get("transporter");
if (!transporter) {
console.log("Not sending VERIFY email; SMTP not configured.");
@ -102,36 +102,37 @@ const sendVerifyMail = function(userDB, req, user) {
text: hb.compile(templates.verify.text)(data),
html: hb.compile(templates.verify.html)(data)
};
return new Promise(function (resolve, reject) {
return new Promise<void>(function (resolve, reject) {
let attempts = 10;
function send(envelope) {
/* Rate limit to ten per second */
transporter.sendMail(envelope, function (error, info) {
if (!error) {
console.log('Message sent: ' + info.response);
return resolve();
}
function send(envelope: any) {
/* Rate limit to ten per second */
transporter.sendMail(envelope, function (error: any, info: any) {
if (!error) {
console.log('Message sent: ' + (info && info.response));
resolve();
return;
}
if (attempts == 0) {
console.log("Error sending email: ", error);
return reject(error);
}
if (attempts == 0) {
console.log("Error sending email: ", error);
return reject(error);
}
attempts--;
console.log("Unable to send mail. Trying again in 100ms (" + attempts + " attempts remain): ", error);
setTimeout(send.bind(undefined, envelope), 100);
});
}
attempts--;
console.log("Unable to send mail. Trying again in 100ms (" + attempts + " attempts remain): ", error);
setTimeout(send.bind(undefined, envelope), 100);
});
}
send(envelope);
});
}).catch(function(error) {
}).catch(function(error: any) {
console.log("Error creating account: ", error);
});
};
const sendPasswordChangedMail = function(userDB, req, user) {
const sendPasswordChangedMail = function(_userDB: any, req: any, user: any): any {
const transporter = req.app.get("transporter");
if (!transporter) {
console.log("Not sending VERIFY email; SMTP not configured.");
@ -151,14 +152,14 @@ const sendPasswordChangedMail = function(userDB, req, user) {
text: hb.compile(templates.password.text)(data),
html: hb.compile(templates.password.html)(data)
};
return new Promise(function (resolve, reject) {
return new Promise<void>(function (resolve, reject) {
let attempts = 10;
function send(envelope) {
function send(envelope: any) {
/* Rate limit to ten per second */
transporter.sendMail(envelope, function (error, info) {
transporter.sendMail(envelope, function (error: any, info: any) {
if (!error) {
console.log('Message sent: ' + info.response);
console.log('Message sent: ' + (info && info.response));
return resolve();
}
@ -177,7 +178,7 @@ const sendPasswordChangedMail = function(userDB, req, user) {
});
};
module.exports = {
export {
sendVerifyMail,
sendPasswordChangedMail
}

30
server/mail.js → server/mail.ts
View File

@ -1,7 +1,7 @@
"use strict";
const createTransport = require('nodemailer').createTransport,
{ timestamp } = require("./timestamp");
import { createTransport } from 'nodemailer';
import { timestamp } from "./timestamp";
const transporter = createTransport({
host: 'email.ketrenos.com',
@ -9,8 +9,8 @@ const transporter = createTransport({
port: 25
});
function sendMail(to, subject, message, cc) {
let envelope = {
function sendMail(to: string, subject: string, message: string, cc?: string): Promise<boolean> {
let envelope: any = {
subject: subject,
from: 'Ketr.Ketran <james_ketran@ketrenos.com>',
to: to || '',
@ -29,33 +29,29 @@ function sendMail(to, subject, message, cc) {
return new Promise(function (resolve, reject) {
let attempts = 10;
function attemptSend(envelope) {
function attemptSend(envelope: any) {
/* Rate limit to ten per second */
transporter.sendMail(envelope, function (error, info) {
transporter.sendMail(envelope, function (error, _info) {
if (error) {
if (attempts) {
attempts--;
console.warn(timestamp() + " Unable to send mail. Trying again in 100ms (" + attempts + " attempts remain): ", error);
setTimeout(send.bind(undefined, envelope), 100);
setTimeout(() => attemptSend(envelope), 100);
} else {
console.error(timestamp() + " Error sending email: ", error)
return reject(error);
reject(error);
}
} else {
console.log(timestamp() + " Mail sent to: " + envelope.to);
resolve(true);
}
console.log(timestamp() + " Mail sent to: " + envelope.to);
return resolve(true);
});
}
attemptSend(envelope);
}).then(function(success) {
if (!success) {
console.error(timestamp() + " Mail not sent to: " + envelope.to);
}
});
}
module.exports = {
sendMail: sendMail
export {
sendMail
};

22
server/package.json
View File

@ -1,12 +1,14 @@
{
"name": "peddlers-of-ketran-server",
"version": "1.0.0",
"main": "app.js",
"main": "dist/src/app.js",
"scripts": {
"start": "export $(cat ../.env | xargs) && node dist/app.js",
"start": "export $(cat ../.env | xargs) && node dist/src/app.js",
"start:legacy": "export $(cat ../.env | xargs) && node app.js",
"build": "tsc -p tsconfig.json",
"start:dev": "ts-node-dev --respawn --transpile-only src/app.ts",
"list-games": "ts-node-dev --transpile-only tools/list-games.ts",
"import-games": "ts-node-dev --transpile-only tools/import-games-to-db.ts",
"test": "jest",
"type-check": "tsc -p tsconfig.json --noEmit"
},
@ -36,9 +38,25 @@
"ws": "^8.5.0"
},
"devDependencies": {
"@types/bluebird": "^3.5.38",
"@types/config": "^3.3.1",
"@types/connect-sqlite3": "^0.9.3",
"@types/cookie-parser": "^1.4.4",
"@types/express": "^4.17.17",
"@types/express-session": "^1.17.7",
"@types/express-ws": "^3.0.1",
"@types/handlebars": "^4.1.0",
"@types/jest": "^29.5.0",
"@types/moment": "^2.13.0",
"@types/morgan": "^1.9.5",
"@types/node": "^20.0.0",
"@types/node-fetch": "^2.6.4",
"@types/node-gzip": "^1.1.0",
"@types/nodemailer": "^6.4.8",
"@types/random-words": "^1.1.0",
"@types/sequelize": "^4.28.15",
"@types/supertest": "^2.0.12",
"@types/ws": "^8.5.5",
"jest": "^29.7.0",
"supertest": "^6.3.3",
"ts-jest": "^29.1.0",

19
server/routes/basepath.js → server/routes/basepath.ts
View File

@ -1,8 +1,6 @@
"use strict";
const express = require("express"),
fs = require("fs"),
url = require("url");
import express from 'express';
import fs from 'fs';
import url from 'url';
const router = express.Router();
@ -10,9 +8,9 @@ const router = express.Router();
* to replace BASEPATH */
router.get("/*", (req, res, next) => {
const parts = url.parse(req.url),
basePath = req.app.get("basePath");
basePath = req.app.get("basePath") as string;
if (!/^\/[^/]+\.html$/.exec(parts.pathname)) {
if (!/^\/[^/]+\.html$/.exec(parts.pathname || '')) {
return next();
}
@ -20,14 +18,13 @@ router.get("/*", (req, res, next) => {
/* Replace <script>'<base href="/BASEPATH/">';</script> in index.html with
* the basePath */
fs.readFile("frontend" + parts.pathname, "utf8", function(error, content) {
fs.readFile("frontend" + (parts.pathname || ''), "utf8", function(error, content) {
if (error) {
return next();
}
res.send(content.replace(
res.send((content as string).replace(
/<script>'<base href="BASEPATH">';<\/script>/,
"<base href='" + basePath + "'>"));
});
});
module.exports = router;
export default router;

8
server/routes/debug.js → server/routes/debug.ts
View File

@ -1,6 +1,6 @@
"use strict";
const express = require("express");
import express from "express";
const router = express.Router();
/*
@ -9,7 +9,7 @@ const router = express.Router();
* by the server. It is mounted under the application's basePath so you can
* hit: /<basePath>/__debug/request
*/
router.get('/__debug/request', (req, res) => {
router.get('/__debug/request', (req: express.Request, res: express.Response) => {
try {
console.log('[debug] __debug/request hit:', req.method, req.originalUrl);
// Echo back a compact JSON summary so curl or browsers can inspect it.
@ -21,10 +21,10 @@ router.get('/__debug/request', (req, res) => {
hostname: req.hostname,
basePath: req.app && req.app.get && req.app.get('basePath')
});
} catch (e) {
} catch (e: any) {
console.error('[debug] error in __debug/request', e && e.stack || e);
res.status(500).json({ error: 'debug endpoint error' });
}
});
module.exports = router;
export default router;

5219
server/routes/games.js
View File

File diff suppressed because it is too large Load Diff

5458
server/routes/games.ts Executable file
View File

File diff suppressed because it is too large Load Diff

20
server/routes/games/constants.ts Normal file
View 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;

19
server/routes/games/serialize.ts Normal file
View File

@ -0,0 +1,19 @@
import type { GameState } from './state';
export function serializeGame(game: GameState): string {
// Use a deterministic JSON serializer for snapshots; currently use JSON.stringify
return JSON.stringify(game);
}
export function deserializeGame(serialized: string): GameState {
try {
return JSON.parse(serialized) as GameState;
} catch (e) {
// If parsing fails, return a minimal empty game state to avoid crashes
return { players: [], placements: { corners: [], roads: [] } } as GameState;
}
}
export function cloneGame(game: GameState): GameState {
return deserializeGame(serializeGame(game));
}

34
server/routes/games/state.ts Normal file
View File

@ -0,0 +1,34 @@
import { Player } from './types';
export interface PlacementCorner {
color?: string | null;
type?: string | null; // settlement/city
data?: any;
}
export interface PlacementRoad {
color?: string | null;
data?: any;
}
export interface Placements {
corners: PlacementCorner[];
roads: PlacementRoad[];
}
export interface GameState {
id?: string | number;
name?: string;
players: Player[];
placements: Placements;
rules?: Record<string, any>;
state?: string;
robber?: number;
turn?: number;
history?: any[];
createdAt?: string;
[key: string]: any;
}
export type GameId = string | number;

184
server/routes/games/store.ts Normal file
View File

@ -0,0 +1,184 @@
import type { GameState } from './state.js';
import { promises as fsp } from 'fs';
import path from 'path';
export interface GameDB {
sequelize?: any;
Sequelize?: any;
getGameById(id: string | number): Promise<GameState | null>;
saveGameState(id: string | number, state: GameState): Promise<void>;
deleteGame?(id: string | number): Promise<void>;
[k: string]: any;
}
/**
* Thin game DB initializer / accessor.
* This currently returns the underlying db module (for runtime compatibility)
* and is the single place to add typed helper methods for game persistence.
*/
export async function initGameDB(): Promise<GameDB> {
// dynamic import to preserve original runtime ordering
// path is relative to this file (routes/games)
// Prefer synchronous require at runtime when available to avoid TS module resolution
// issues during type-checking. Declare require to keep TypeScript happy.
let mod: any;
try {
// Use runtime require to load the DB module. This runs under Node (ts-node)
// so a direct require is appropriate and avoids relying on globalThis.
// eslint-disable-next-line @typescript-eslint/no-var-requires
mod = require('../../db/games');
} catch (e) {
// DB-only mode: fail fast so callers know persistence is required.
throw new Error('Game DB module could not be loaded: ' + String(e));
}
// If the module uses default export, prefer it
let db: any = (mod && (mod.default || mod));
// If the required module returned a Promise (the db initializer may), await it.
if (db && typeof db.then === 'function') {
try {
db = await db;
} catch (e) {
throw new Error('Game DB initializer promise rejected: ' + String(e));
}
}
// attach typed helper placeholders (will be implemented incrementally)
if (!db.getGameById) {
db.getGameById = async (id: string | number): Promise<GameState | null> => {
// fallback: try to query by id using raw SQL if sequelize is available
if (db && db.sequelize) {
try {
const rows = await db.sequelize.query('SELECT state FROM games WHERE id=:id', {
replacements: { id },
type: db.Sequelize.QueryTypes.SELECT
});
if (rows && rows.length) {
const r = rows[0] as any;
// state may be stored as text or JSON
if (typeof r.state === 'string') {
try {
return JSON.parse(r.state) as GameState;
} catch (e) {
return null;
}
}
return r.state as GameState;
}
} catch (e) {
// ignore and fallthrough
}
}
// If DB didn't have a state or query failed, attempt to read from the
// filesystem copy at db/games/<id> or <id>.json so the state remains editable.
try {
const gamesDir = path.resolve(__dirname, '../../../db/games');
const candidates = [path.join(gamesDir, String(id)), path.join(gamesDir, String(id) + '.json')];
for (const filePath of candidates) {
try {
const raw = await fsp.readFile(filePath, 'utf8');
return JSON.parse(raw) as GameState;
} catch (e) {
// try next candidate
}
}
return null;
} catch (err) {
return null;
}
};
}
if (!db.saveGameState) {
db.saveGameState = async (id: string | number, state: GameState): Promise<void> => {
// Always persist a JSON file so game state is inspectable/editable.
try {
const gamesDir = path.resolve(__dirname, '../../../db/games');
await fsp.mkdir(gamesDir, { recursive: true });
// Write extensionless filename to match existing files
const filePath = path.join(gamesDir, String(id));
const tmpPath = `${filePath}.tmp`;
await fsp.writeFile(tmpPath, JSON.stringify(state, null, 2), 'utf8');
await fsp.rename(tmpPath, filePath);
} catch (err) {
// Log but continue to attempt DB persistence
// eslint-disable-next-line no-console
console.error('Failed to write game JSON file for', id, err);
}
// Now attempt DB persistence if sequelize is present.
if (db && db.sequelize) {
const payload = JSON.stringify(state);
// Try an UPDATE; if it errors due to missing column, try to add the
// column and retry. If update affects no rows, try INSERT.
try {
try {
await db.sequelize.query('UPDATE games SET state=:state WHERE id=:id', {
replacements: { id, state: payload }
});
// Some dialects don't return affectedRows consistently; we'll
// still attempt insert if no row exists by checking select.
const check = await db.sequelize.query('SELECT id FROM games WHERE id=:id', {
replacements: { id },
type: db.Sequelize.QueryTypes.SELECT
});
if (!check || check.length === 0) {
await db.sequelize.query('INSERT INTO games (id, state) VALUES(:id, :state)', {
replacements: { id, state: payload }
});
}
} catch (e: any) {
const msg = String(e && e.message ? e.message : e);
// If the column doesn't exist (SQLite: no such column: state), add it.
if (/no such column: state/i.test(msg) || /has no column named state/i.test(msg) || /unknown column/i.test(msg)) {
try {
await db.sequelize.query('ALTER TABLE games ADD COLUMN state TEXT');
// retry insert/update after adding column
await db.sequelize.query('UPDATE games SET state=:state WHERE id=:id', {
replacements: { id, state: payload }
});
const check = await db.sequelize.query('SELECT id FROM games WHERE id=:id', {
replacements: { id },
type: db.Sequelize.QueryTypes.SELECT
});
if (!check || check.length === 0) {
await db.sequelize.query('INSERT INTO games (id, state) VALUES(:id, :state)', {
replacements: { id, state: payload }
});
}
} catch (inner) {
// swallow; callers should handle missing persistence
}
} else {
// For other errors, attempt insert as a fallback
try {
await db.sequelize.query('INSERT INTO games (id, state) VALUES(:id, :state)', {
replacements: { id, state: payload }
});
} catch (err) {
// swallow; callers should handle missing persistence
}
}
}
} catch (finalErr) {
// swallow; we don't want persistence errors to crash the server
}
}
};
}
if (!db.deleteGame) {
db.deleteGame = async (id: string | number): Promise<void> => {
if (db && db.sequelize) {
try {
await db.sequelize.query('DELETE FROM games WHERE id=:id', {
replacements: { id }
});
} catch (e) {
// swallow; callers should handle missing persistence
}
}
};
}
return db as GameDB;
}

133
server/routes/games/types.ts Normal file
View File

@ -0,0 +1,133 @@
export type ResourceKey = "wood" | "brick" | "sheep" | "wheat" | "stone";
export type ResourceMap = Partial<Record<ResourceKey, number>> & { [k: string]: any };
export interface Player {
name?: string;
color?: string;
order: number;
orderRoll?: number;
position?: string;
orderStatus?: string;
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;
}
export interface RoadPlacement {
color?: string;
walking?: boolean;
[key: string]: any;
}
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;
}
export interface Session {
id: string;
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;
}
export type IncomingMessage = { type: string | null; data: any };

30
server/routes/games/utils.ts Normal file
View File

@ -0,0 +1,30 @@
export function normalizeIncoming(msg: unknown): { type: string | null, data: unknown } {
if (!msg) return { type: null, data: null };
let parsed: unknown = null;
try {
if (typeof msg === 'string') {
parsed = JSON.parse(msg);
} else {
parsed = msg;
}
} catch (e) {
return { type: null, data: null };
}
if (!parsed) return { type: null, data: null };
const type = (parsed as any).type || (parsed as any).action || null;
const data = (parsed as any).data || (Object.keys(parsed as any).length ? Object.assign({}, parsed as any) : null);
return { type, data };
}
export function shuffleArray<T>(array: T[]): T[] {
let currentIndex = array.length, temporaryValue: T | undefined, randomIndex: number;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// use non-null assertions because we're swapping indices that exist
temporaryValue = array[currentIndex] as T;
array[currentIndex] = array[randomIndex] as T;
array[randomIndex] = temporaryValue as T;
}
return array;
}

20
server/routes/index.js → server/routes/index.ts
View File

@ -1,10 +1,10 @@
"use strict";
const express = require("express"),
fs = require("fs"),
url = require("url"),
config = require("config"),
basePath = require("../basepath");
import express from "express";
import fs from "fs";
import url from "url";
import config from "config";
import basePath from "../basepath";
const router = express.Router();
@ -31,24 +31,24 @@ const extensionMatch = new RegExp("^.*?(" + extensions.join("|") + ")$", "i");
* If so, 404 because the asset isn't there. otherwise assume it is a
* dynamic client side route and *then* return index.html.
*/
router.get("/*", function(req, res, next) {
router.get("/*", function(req: express.Request, res: express.Response, next: express.NextFunction) {
const parts = url.parse(req.url);
/* If req.user isn't set yet (authentication hasn't happened) then
* only allow / to be loaded--everything else chains to the next
* handler */
if (!req.user &&
if (!(req as any).user &&
req.url != "/" &&
req.url.indexOf("/games") != 0) {
return next();
}
if (req.url == "/" || req.url.indexOf("/games") == 0 || !extensionMatch.exec(parts.pathname)) {
if (req.url == "/" || req.url.indexOf("/games") == 0 || !extensionMatch.exec(parts.pathname || '')) {
console.log("Returning index for " + req.url);
/* Replace <script>'<base href="BASEPATH">';</script> in index.html with
* the basePath */
const frontendPath = config.get("frontendPath").replace(/\/$/, "") + "/",
const frontendPath = (config.get("frontendPath") as string).replace(/\/$/, "") + "/",
index = fs.readFileSync(frontendPath + "index.html", "utf8");
res.send(index.replace(
/<script>'<base href="BASEPATH">';<\/script>/,
@ -63,4 +63,4 @@ router.get("/*", function(req, res, next) {
});
});
module.exports = router;
export default router;

84
server/routes/users.js → server/routes/users.ts
View File

@ -1,19 +1,19 @@
"use strict";
const express = require("express"),
config = require("config"),
{ sendVerifyMail, sendPasswordChangedMail } = require("../lib/mail"),
crypto = require("crypto");
import express from "express";
import config from "config";
import { sendVerifyMail, sendPasswordChangedMail } from "../lib/mail";
import crypto from "crypto";
const router = express.Router();
let userDB;
let userDB: any;
require("../db/users.js").then(function(db) {
import("../db/users.js").then(function(db: any) {
userDB = db;
});
router.get("/", function(req, res/*, next*/) {
router.get("/", function(req: express.Request, res: express.Response/*, next*/) {
console.log("/users/");
return getSessionUser(req).then((user) => {
return res.status(200).send(user);
@ -23,12 +23,12 @@ router.get("/", function(req, res/*, next*/) {
});
});
router.put("/password", function(req, res) {
router.put("/password", function(req: express.Request, res: express.Response) {
console.log("/users/password");
const q = req.query as any;
const changes = {
currentPassword: req.query.c || req.body.c,
newPassword: req.query.n || req.body.n
currentPassword: q.c || req.body.c,
newPassword: q.n || req.body.n
};
if (!changes.currentPassword || !changes.newPassword) {
@ -39,7 +39,7 @@ router.put("/password", function(req, res) {
return res.status(400).send("Attempt to set new password to current password.");
}
return getSessionUser(req).then(function(user) {
return getSessionUser(req).then(function(user: any) {
return userDB.sequelize.query("SELECT id FROM users " +
"WHERE uid=:username AND password=:password", {
replacements: {
@ -48,13 +48,13 @@ router.put("/password", function(req, res) {
},
type: userDB.Sequelize.QueryTypes.SELECT,
raw: true
}).then(function(users) {
}).then(function(users: any) {
if (users.length != 1) {
return null;
}
return user;
});
}).then(function(user) {
}).then(function(user: any) {
if (!user) {
console.log("Invalid password");
/* Invalid password */
@ -77,15 +77,15 @@ router.put("/password", function(req, res) {
});
});
router.post("/create", function(req, res) {
router.post("/create", function(req: express.Request, res: express.Response) {
console.log("/users/create");
const q = req.query as any;
const user = {
uid: req.query.m || req.body.m,
displayName: req.query.n || req.body.n || "",
password: req.query.p || req.body.p || "",
mail: req.query.m || req.body.m,
notes: req.query.w || req.body.w || ""
uid: q.m || req.body.m,
displayName: q.n || req.body.n || "",
password: q.p || req.body.p || "",
mail: q.m || req.body.m,
notes: q.w || req.body.w || ""
};
if (!user.uid || !user.password || !user.displayName || !user.notes) {
@ -98,37 +98,38 @@ router.post("/create", function(req, res) {
replacements: user,
type: userDB.Sequelize.QueryTypes.SELECT,
raw: true
}).then(function(results) {
}).then(function(results: any) {
if (results.length != 0) {
return res.status(400).send("Email address already used.");
}
let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let re = /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.exec(user.mail)) {
console.log("Invalid email address: " + user.mail);
throw "Invalid email address.";
}
return;
}).then(function() {
return userDB.sequelize.query("INSERT INTO users " +
"(uid,displayName,password,mail,memberSince,authenticated,notes) " +
"VALUES(:uid,:displayName,:password,:mail,CURRENT_TIMESTAMP,0,:notes)", {
replacements: user
}).spread(function(results, metadata) {
}).spread(function(_results: any, metadata: any) {
req.session.userId = metadata.lastID;
}).then(function() {
return getSessionUser(req).then(function(user) {
return getSessionUser(req).then(function(user: any) {
res.status(200).send(user);
user.id = req.session.userId;
return sendVerifyMail(userDB, req, user);
});
}).catch(function(error) {
}).catch(function(error: any) {
console.log("Error creating account: ", error);
return res.status(401).send(error);
});
});
});
const getSessionUser = function(req) {
const getSessionUser = function(req: express.Request): Promise<any> {
return Promise.resolve().then(function() {
if (!req.session || !req.session.userId) {
throw "Unauthorized. You must be logged in.";
@ -143,7 +144,7 @@ const getSessionUser = function(req) {
},
type: userDB.Sequelize.QueryTypes.SELECT,
raw: true
}).then(function(results) {
}).then(function(results: any) {
if (results.length != 1) {
throw "Invalid account.";
}
@ -160,9 +161,9 @@ const getSessionUser = function(req) {
return user;
}
return user;
return user;
});
}).then(function(user) {
}).then(function(user: any) {
req.user = user;
/* If the user already has a restriction, or there are no album user restrictions,
@ -171,7 +172,7 @@ const getSessionUser = function(req) {
return user;
}
let allowed = config.get("restrictions");
let allowed: any = config.get("restrictions");
if (!Array.isArray(allowed)) {
allowed = [ allowed ];
}
@ -187,8 +188,8 @@ const getSessionUser = function(req) {
}).then(function(user) {
/* If there are maintainers on this album, check if this user is a maintainer */
if (config.has("maintainers")) {
let maintainers = config.get("maintainers");
if (maintainers.indexOf(user.username) != -1) {
let maintainers: any = config.get("maintainers");
if (Array.isArray(maintainers) && maintainers.indexOf(user.username) != -1) {
user.maintainer = true;
if (user.restriction) {
console.warn("User " + user.username + " is a maintainer AND has a restriction which will be ignored: " + user.restriction);
@ -212,11 +213,12 @@ const getSessionUser = function(req) {
});
}
router.post("/login", function(req, res) {
router.post("/login", function(req: express.Request, res: express.Response) {
console.log("/users/login");
const q = req.query as any;
let username = req.query.u || req.body.u || "",
password = req.query.p || req.body.p || "";
let username = q.u || req.body.u || "",
password = q.p || req.body.p || "";
console.log("Login attempt");
@ -224,7 +226,7 @@ router.post("/login", function(req, res) {
return res.status(400).send("Missing username and/or password");
}
return new Promise((reject, resolve) => {
return new Promise((resolve, _reject) => {
console.log("Looking up user in DB.");
let query = "SELECT " +
"id,mailVerified,authenticated,uid AS username,displayName AS name,mail " +
@ -235,7 +237,7 @@ router.post("/login", function(req, res) {
password: crypto.createHash('sha256').update(password).digest('base64')
},
type: userDB.Sequelize.QueryTypes.SELECT
}).then(function(users) {
}).then(function(users: any) {
if (users.length != 1) {
return resolve(null);
}
@ -243,7 +245,7 @@ router.post("/login", function(req, res) {
req.session.userId = user.id;
return resolve(user);
});
}).then(function(user) {
}).then(function(user: any) {
if (!user) {
console.log(username + " not found (or invalid password.)");
req.session.userId = null;
@ -259,7 +261,7 @@ router.post("/login", function(req, res) {
console.log(message);
}
return getSessionUser(req).then(function(user) {
return getSessionUser(req).then(function(user: any) {
return res.status(200).send(user);
});
}).catch(function(error) {
@ -277,7 +279,7 @@ router.get("/logout", function(req, res) {
res.status(200).send({});
});
module.exports = {
export {
router,
getSessionUser
};

68
server/src/app.ts
View File

@ -1,42 +1,45 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import type { Request, Response, NextFunction } from 'express';
import express from 'express';
import bodyParser from 'body-parser';
import config from 'config';
import basePath from '../basepath';
import cookieParser from 'cookie-parser';
import http from 'http';
import expressWs from 'express-ws';
process.env.TZ = "Etc/GMT";
console.log("Loading ketr.ketran");
const express = require("express");
const bodyParser = require("body-parser");
const config = require("config");
const session = require('express-session');
const basePath = require("../basepath");
const cookieParser = require("cookie-parser");
const fs = require('fs');
const app = express();
const server = require("http").createServer(app);
const server = http.createServer(app);
app.use(cookieParser());
const ws = require('express-ws')(app, server);
expressWs(app, server);
require("../console-line.js"); /* Monkey-patch console.log with line numbers */
require("../console-line"); /* Monkey-patch console.log with line numbers */
// Temporary debug routes (dev-only). Mount before static so we can
// inspect what the server receives for base-prefixed requests.
try {
app.use(basePath, require("../routes/debug.js"));
} catch (e) {
// import the debug router using ESM style; fallback to require at runtime if needed
// (some dev environments may still emit JS commonjs files)
// eslint-disable-next-line @typescript-eslint/no-var-requires
const debugRouter = require("../routes/debug").default || require("../routes/debug");
app.use(basePath, debugRouter);
} catch (e: any) {
console.error('Failed to mount debug routes (src):', e && e.stack || e);
}
const frontendPath = config.get("frontendPath").replace(/\/$/, "") + "/",
serverConfig = config.get("server");
const frontendPath = (config.get("frontendPath") as string).replace(/\/$/, "") + "/",
serverConfig = config.get("server") as { port: number };
console.log("Hosting server from: " + basePath);
let userDB: any, gameDB: any;
// DB handles are initialized by the modules below; we don't need file-scoped vars here.
app.use((req, res, next) => {
app.use((req: Request, _res: Response, next: NextFunction) => {
console.log(`${req.method} ${req.url}`);
next();
});
@ -48,19 +51,27 @@ app.use(bodyParser.json());
app.set("trust proxy", true);
app.set("basePath", basePath);
app.use(basePath, require("../routes/basepath.js"));
// basepath is a simple exported string
// eslint-disable-next-line @typescript-eslint/no-var-requires
const basepathRouter = require("../routes/basepath").default || require("../routes/basepath");
app.use(basePath, basepathRouter);
/* Handle static files first so excessive logging doesn't occur */
app.use(basePath, express.static(frontendPath, { index: false }));
const index = require("../routes/index");
// index route (may be ESM default export)
// eslint-disable-next-line @typescript-eslint/no-var-requires
const index = require("../routes/index").default || require("../routes/index");
if (config.has("admin")) {
const admin = config.get("admin");
app.set("admin", admin);
}
app.use(`${basePath}api/v1/games`, require("../routes/games"));
// games router
// eslint-disable-next-line @typescript-eslint/no-var-requires
const gamesRouter = require("../routes/games").default || require("../routes/games");
app.use(`${basePath}api/v1/games`, gamesRouter);
/* Allow loading of the app w/out being logged in */
app.use(basePath, index);
@ -82,11 +93,16 @@ process.on('SIGINT', () => {
server.close(() => process.exit(1));
});
require("../db/games").then(function(db: any) {
gameDB = db;
// database initializers
// eslint-disable-next-line @typescript-eslint/no-var-requires
import { initGameDB } from '../routes/games/store';
initGameDB().then(function(_db: any) {
// games DB initialized via store facade
}).then(function() {
return require("../db/users").then(function(db: any) {
userDB = db;
// eslint-disable-next-line @typescript-eslint/no-var-requires
return Promise.resolve((require("../db/users") as any).default || require("../db/users")).then(function(_db: any) {
// users DB initialized
});
}).then(function() {
console.log("DB connected. Opening server.");
@ -118,4 +134,4 @@ server.on("error", function(error: any) {
}
});
module.exports = { app, server };
export { app, server };

10
server/timestamp.js → server/timestamp.ts
View File

@ -1,16 +1,14 @@
"use strict";
function twoDigit(number) {
function twoDigit(number: number): string {
return ("0" + number).slice(-2);
}
function timestamp(date) {
function timestamp(date?: Date): string {
date = date || new Date();
return [ date.getFullYear(), twoDigit(date.getMonth() + 1), twoDigit(date.getDate()) ].join("-") +
return [ date.getFullYear(), twoDigit(date.getMonth() + 1), twoDigit(date.getDate()) ].join("-") +
" " +
[ twoDigit(date.getHours()), twoDigit(date.getMinutes()), twoDigit(date.getSeconds()) ].join(":");
}
module.exports = {
export {
timestamp
};

109
server/tools/import-games-to-db.ts Normal file
View File

@ -0,0 +1,109 @@
#!/usr/bin/env ts-node
import path from 'path';
import fs from 'fs/promises';
import { initGameDB } from '../routes/games/store';
async function main() {
const gamesDir = path.resolve(__dirname, '../../db/games');
let files: string[] = [];
try {
files = await fs.readdir(gamesDir);
} catch (e) {
console.error('Failed to read games dir', gamesDir, e);
process.exit(2);
}
let db: any;
try {
db = await initGameDB();
} catch (e) {
console.error('Failed to initialize DB', e);
process.exit(3);
}
if (!db || !db.sequelize) {
console.error('DB did not expose sequelize; cannot proceed.');
process.exit(4);
}
for (const f of files) {
// ignore dotfiles and .bk backup files (we don't want to import backups)
if (f.startsWith('.') || f.endsWith('.bk')) continue;
const full = path.join(gamesDir, f);
try {
const stat = await fs.stat(full);
if (!stat.isFile()) continue;
const raw = await fs.readFile(full, 'utf8');
const state = JSON.parse(raw);
// Derive id from filename (strip .json if present)
const idStr = f.endsWith('.json') ? f.slice(0, -5) : f;
const id = isNaN(Number(idStr)) ? idStr : Number(idStr);
// derive a friendly name from the saved state when present
const nameCandidate = (state && (state.name || state.id)) ? String(state.name || state.id) : undefined;
try {
if (typeof id === 'number') {
// numeric filename: use the typed helper
await db.saveGameState(id, state);
console.log(`Saved game id=${id}`);
if (nameCandidate) {
try {
await db.sequelize.query('UPDATE games SET name=:name WHERE id=:id', { replacements: { id, name: nameCandidate } });
} catch (_) {
// ignore name update failure
}
}
} else {
// string filename: try to find an existing row by path and save via id;
// otherwise insert a new row with path and the JSON state.
let found: any[] = [];
try {
found = await db.sequelize.query('SELECT id FROM games WHERE path=:path', {
replacements: { path: idStr },
type: db.Sequelize.QueryTypes.SELECT
});
} catch (qe) {
found = [];
}
if (found && found.length) {
const foundId = found[0].id;
await db.saveGameState(foundId, state);
console.log(`Saved game path=${idStr} -> id=${foundId}`);
if (nameCandidate) {
try {
await db.sequelize.query('UPDATE games SET name=:name WHERE id=:id', { replacements: { id: foundId, name: nameCandidate } });
} catch (_) {
// ignore
}
}
} else {
// ensure state column exists before inserting a new row
try {
await db.sequelize.query('ALTER TABLE games ADD COLUMN state TEXT');
} catch (_) {
// ignore
}
const payload = JSON.stringify(state);
if (nameCandidate) {
await db.sequelize.query('INSERT INTO games (path, state, name) VALUES(:path, :state, :name)', { replacements: { path: idStr, state: payload, name: nameCandidate } });
} else {
await db.sequelize.query('INSERT INTO games (path, state) VALUES(:path, :state)', { replacements: { path: idStr, state: payload } });
}
console.log(`Inserted game path=${idStr}`);
}
}
} catch (e) {
console.error('Failed to save game', idStr, e);
}
} catch (e) {
console.error('Failed to read/parse', full, e);
}
}
console.log('Import complete');
process.exit(0);
}
main();

102
server/tools/list-games.ts Normal file
View File

@ -0,0 +1,102 @@
#!/usr/bin/env ts-node
import { initGameDB } from '../routes/games/store';
type Args = {
gameId?: string;
};
function parseArgs(): Args {
const args = process.argv.slice(2);
const res: Args = {};
for (let i = 0; i < args.length; i++) {
const a = args[i];
if ((a === '-g' || a === '--game') && args[i+1]) {
res.gameId = String(args[i+1]);
i++;
}
}
return res;
}
async function main() {
const { gameId } = parseArgs();
let db: any;
try {
db = await initGameDB();
} catch (e) {
console.error('Failed to initialize game DB:', e);
process.exit(1);
}
if (!db || !db.sequelize) {
console.error('DB does not expose sequelize; cannot run queries.');
process.exit(1);
}
if (!gameId) {
// List all game ids
try {
const rows: any[] = await db.sequelize.query('SELECT id, name FROM games', { type: db.Sequelize.QueryTypes.SELECT });
if (!rows || rows.length === 0) {
console.log('No games found.');
return;
}
console.log('Games:');
rows.forEach(r => console.log(`${r.id} - ${r.name}`));
} catch (e) {
console.error('Failed to list games:', e);
process.exit(1);
}
} else {
// For a given game ID, try to print the turns history from the state
try {
const rows: any[] = await db.sequelize.query('SELECT state FROM games WHERE id=:id', {
replacements: { id: gameId },
type: db.Sequelize.QueryTypes.SELECT
});
if (!rows || rows.length === 0) {
console.error('Game not found:', gameId);
process.exit(2);
}
const r = rows[0] as any;
let state = r.state;
if (typeof state === 'string') {
try {
state = JSON.parse(state);
} catch (e) {
console.error('Failed to parse stored state JSON:', e);
process.exit(3);
}
}
if (!state) {
console.error('Empty state for game', gameId);
process.exit(4);
}
console.log(`Game ${gameId} summary:`);
console.log(` - turns: ${state.turns || 0}`);
if (state.turnHistory || state.turnsData || state.turns_list) {
const turns = state.turnHistory || state.turnsData || state.turns_list;
console.log('Turns:');
turns.forEach((t: any, idx: number) => {
console.log(`${idx}: ${JSON.stringify(t)}`);
});
} else if (state.turns && state.turns > 0) {
console.log('No explicit turn history found inside state; showing snapshot metadata.');
// Print limited snapshot details per turn if available
if (state.turnsData) {
state.turnsData.forEach((t: any, idx: number) => console.log(`${idx}: ${JSON.stringify(t)}`));
}
} else {
console.log('No turn history recorded in state.');
}
} catch (e) {
console.error('Failed to load game state for', gameId, e);
process.exit(1);
}
}
}
main();

31
server/tsconfig.json
View File

@ -1,19 +1,32 @@
{
"compilerOptions": {
"target": "ES2020",
"target": "ES2022",
"module": "CommonJS",
"outDir": "dist",
"rootDir": "src",
"rootDir": ".",
"esModuleInterop": true,
"skipLibCheck": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"allowJs": true,
"strict": false,
"noImplicitAny": false,
"allowJs": true,
"strict": true,
"noImplicitAny": true,
"moduleResolution": "Node",
"resolveJsonModule": true,
"sourceMap": true
"sourceMap": true,
"declaration": true,
"declarationMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"allowSyntheticDefaultImports": true,
"exactOptionalPropertyTypes": true,
"noFallthroughCasesInSwitch": true,
"noImplicitOverride": true,
"noImplicitReturns": true,
"noPropertyAccessFromIndexSignature": true,
"noUncheckedIndexedAccess": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
"include": ["**/*.ts", "**/*.js"],
"exclude": ["node_modules", "dist", "test-output"]
}

21
server/types/db-modules.d.ts vendored Normal file
View File

@ -0,0 +1,21 @@
declare module '../db/games' {
const value: any;
export default value;
}
declare module '../db/games.js' {
const value: any;
export default value;
}
declare module '../db/users' {
const value: any;
export default value;
}
declare module '../db/users.js' {
const value: any;
export default value;
}
export {};

19
server/types/express-session.d.ts vendored Normal file
View File

@ -0,0 +1,19 @@
import 'express';
import 'express-session';
declare global {
namespace Express {
interface Request {
// populated by getSessionUser
user?: any;
}
}
}
declare module 'express-session' {
interface SessionData {
userId?: number | null;
}
}
export {};

8
server/util/layout.js → server/util/layout.ts
View File

@ -62,7 +62,7 @@
* |
* 12 | 11 10
*/
const Tile = (corners, roads) => {
const Tile = (corners: number[], roads: number[]) => {
return {
corners: corners, /* 6 */
pip: -1,
@ -74,7 +74,7 @@ const Tile = (corners, roads) => {
/* Borders have three sections each, so they are numbered
* 0-17 clockwise. Some corners share two borders. */
const Corner = (roads, banks) => {
const Corner = (roads: number[], banks: number[]) => {
return {
roads: roads, /* max of 3 */
banks: banks, /* max of 2 */
@ -82,7 +82,7 @@ const Corner = (roads, banks) => {
};
};
const Road = (corners) => {
const Road = (corners: number[]) => {
return {
corners: corners, /* 2 */
data: undefined
@ -314,7 +314,7 @@ const staticData = {
]
};
module.exports = {
export {
layout,
staticData
};

56
server/util/validLocations.js → server/util/validLocations.ts
View File

@ -1,34 +1,41 @@
const { layout } = require('./layout.js');
import { layout } from './layout';
const isRuleEnabled = (game, rule) => {
const isRuleEnabled = (game: any, rule: string): boolean => {
return rule in game.rules && game.rules[rule].enabled;
};
const getValidRoads = (game, color) => {
const limits = [];
const getValidRoads = (game: any, color: string): number[] => {
const limits: number[] = [];
/* For each road, if the road is set, skip it.
* If no color is set, check the two corners. If the corner
* has a matching color, add this to the set. Otherwise skip.
*/
layout.roads.forEach((road, roadIndex) => {
if (game.placements.roads[roadIndex].color) {
if (!game.placements || !game.placements.roads || game.placements.roads[roadIndex]?.color) {
return;
}
let valid = false;
for (let c = 0; !valid && c < road.corners.length; c++) {
const corner = layout.corners[road.corners[c]],
cornerColor = game.placements.corners[road.corners[c]].color;
for (let c = 0; !valid && c < road.corners.length; c++) {
const cornerIndex = road.corners[c] as number;
if (cornerIndex == null || (layout as any).corners[cornerIndex] == null) {
continue;
}
const corner = (layout as any).corners[cornerIndex];
const cornerColor = (game as any).placements && (game as any).placements.corners && (game as any).placements.corners[cornerIndex] && (game as any).placements.corners[cornerIndex].color;
/* Roads do not pass through other player's settlements */
if (cornerColor && cornerColor !== color) {
continue;
}
for (let r = 0; !valid && r < corner.roads.length; r++) {
for (let r = 0; !valid && r < (corner.roads || []).length; r++) {
/* This side of the corner is pointing to the road being validated. Skip it. */
if (corner.roads[r] === roadIndex) {
if (!corner.roads || corner.roads[r] === roadIndex) {
continue;
}
if (game.placements.roads[corner.roads[r]].color === color) {
const rr = corner.roads[r];
if (rr == null) { continue; }
const placementsRoads = (game as any).placements && (game as any).placements.roads;
if (placementsRoads && placementsRoads[rr] && placementsRoads[rr].color === color) {
valid = true;
}
}
@ -41,8 +48,8 @@ const getValidRoads = (game, color) => {
return limits;
}
const getValidCorners = (game, color, type) => {
const limits = [];
const getValidCorners = (game: any, color: string, type?: string): number[] => {
const limits: number[] = [];
/* For each corner, if the corner already has a color set, skip it if type
* isn't set. If type is set, if it is a match, and the color is a match,
@ -77,14 +84,20 @@ const getValidCorners = (game, color, type) => {
valid = true; /* Not filtering based on current player */
} else {
valid = false;
for (let r = 0; !valid && r < corner.roads.length; r++) {
valid = game.placements.roads[corner.roads[r]].color === color;
for (let r = 0; !valid && r < (corner.roads || []).length; r++) {
const rr = corner.roads[r];
if (rr == null) { continue; }
const placementsRoads = (game as any).placements && (game as any).placements.roads;
valid = !!(placementsRoads && placementsRoads[rr] && placementsRoads[rr].color === color);
}
}
for (let r = 0; valid && r < corner.roads.length; r++) {
const road = layout.roads[corner.roads[r]];
for (let c = 0; valid && c < road.corners.length; c++) {
for (let r = 0; valid && r < (corner.roads || []).length; r++) {
if (!corner.roads) { break; }
const ridx = corner.roads[r] as number;
if (ridx == null || (layout as any).roads[ridx] == null) { continue; }
const road = (layout as any).roads[ridx];
for (let c = 0; valid && c < (road.corners || []).length; c++) {
/* This side of the road is pointing to the corner being validated.
* Skip it. */
if (road.corners[c] === cornerIndex) {
@ -92,7 +105,8 @@ const getValidCorners = (game, color, type) => {
}
/* There is a settlement within one segment from this
* corner, so it is invalid for settlement placement */
if (game.placements.corners[road.corners[c]].color) {
const cc = road.corners[c] as number;
if ((game as any).placements && (game as any).placements.corners && (game as any).placements.corners[cc] && (game as any).placements.corners[cc].color) {
valid = false;
}
}
@ -103,7 +117,7 @@ const getValidCorners = (game, color, type) => {
* on the volcano) */
if (!(game.state === 'initial-placement'
&& isRuleEnabled(game, 'volcano')
&& layout.tiles[game.robber].corners.indexOf(cornerIndex) !== -1
&& (layout as any).tiles && (layout as any).tiles[(game as any).robber] && Array.isArray((layout as any).tiles[(game as any).robber].corners) && (layout as any).tiles[(game as any).robber].corners.indexOf(cornerIndex as number) !== -1
)) {
limits.push(cornerIndex);
}
@ -113,7 +127,7 @@ const getValidCorners = (game, color, type) => {
return limits;
}
module.exports = {
export {
getValidCorners,
getValidRoads,
isRuleEnabled