Migrating to useWebSocket

client/src/Actions.tsx

@@ -11,6 +11,7 @@ type LocalGlobalContext = {
   ws?: WebSocket | null;
   gameId?: string | null;
   name?: string | undefined;
+  sendJsonMessage?: (message: any) => void;
 };
 
 type PrivateData = {
@@ -105,31 +106,31 @@ const Actions: React.FC<ActionsProps> = ({
     refWsMessage.current = onWsMessage;
   });
   useEffect(() => {
-    if (!ws) {
+    if (!ctx.ws) {
       return;
     }
     const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
-    ws.addEventListener("message", cbMessage as EventListener);
+    ctx.ws.addEventListener("message", cbMessage as EventListener);
     return () => {
-      ws.removeEventListener("message", cbMessage as EventListener);
+      ctx.ws.removeEventListener("message", cbMessage as EventListener);
     };
-  }, [ws, refWsMessage]);
+  }, [ctx.ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!ctx.sendJsonMessage) {
       return;
     }
-    ws.send(JSON.stringify({ type: "get", fields }));
+    ctx.sendJsonMessage({ type: "get", fields });
-  }, [ws, fields]);
+  }, [ctx.sendJsonMessage, fields]);
 
   const sendMessage = useCallback(
     (data: Record<string, unknown>) => {
-      if (!ws) {
+      if (!ctx.sendJsonMessage) {
-        console.warn(`No socket`);
+        console.warn(`No sendJsonMessage`);
       } else {
-        ws.send(JSON.stringify(data));
+        ctx.sendJsonMessage(data);
       }
     },
-    [ws]
+    [ctx.sendJsonMessage]
   );
 
   const buildClicked = () => {

client/src/Activities.tsx

@@ -87,7 +87,7 @@ const Activity: React.FC<ActivityProps> = ({ keep, activity }) => {
 };
 
 const Activities: React.FC = () => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [activities, setActivities] = useState<ActivityData[]>([]);
   const [turn, setTurn] = useState<TurnData | undefined>(undefined);
   const [color, setColor] = useState<string | undefined>(undefined);
@@ -169,16 +169,14 @@ const Activities: React.FC = () => {
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   if (!timestamp) {
     return <></>;

client/src/App.tsx

@@ -82,7 +82,7 @@ const Table: React.FC = () => {
   const protocol = loc.protocol === "https:" ? "wss" : "ws";
   const socketUrl = gameId ? `${protocol}://${loc.host}${base}/api/v1/games/ws/${gameId}` : null;
 
-  const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(socketUrl, {
+  const { sendJsonMessage, lastJsonMessage, readyState, getWebSocket } = useWebSocket(socketUrl, {
     shouldReconnect: (closeEvent) => true,
     reconnectInterval: 5000,
     onOpen: () => {
@@ -181,10 +181,11 @@ const Table: React.FC = () => {
   }, [lastJsonMessage]);
 
   const globalValue = useMemo(() => ({
-    ws: readyState === ReadyState.OPEN ? {} : undefined,
+    ws: getWebSocket(),
     name,
     gameId,
-  }), [readyState, name, gameId]);
+    sendJsonMessage,
+  }), [getWebSocket, name, gameId, sendJsonMessage]);
 
   useEffect(() => {
     setGlobal(globalValue);
@@ -504,7 +505,13 @@ const App: React.FC = () => {
   }
 
   return (
-    <Router basename={base}>
+    <Router
+      basename={base}
+      future={{
+        v7_startTransition: true,
+        v7_relativeSplatPath: true,
+      }}
+    >
       <Routes>
         <Route element={<Table />} path="/" />
         <Route element={<Table />} path="/:gameId" />

client/src/Board.tsx

@@ -95,7 +95,7 @@ const clearTooltip = () => {
 };
 
 const Board: React.FC<BoardProps> = ({ animations }) => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const board = useRef();
   const [transform, setTransform] = useState(1);
   const [pipElements, setPipElements] = useState<React.ReactElement[]>([]);
@@ -252,16 +252,14 @@ const Board: React.FC<BoardProps> = ({ animations }) => {
     };
   }, [ws]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   useEffect(() => {
     const boardBox = board.current.querySelector(".BoardBox");

client/src/Chat.tsx

@@ -34,7 +34,7 @@ const Chat: React.FC = () => {
     return () => clearInterval(timer);
   }, []);
 
-  const { ws, name } = useContext(GlobalContext);
+  const { ws, name, sendJsonMessage } = useContext(GlobalContext);
   const fields = useMemo(() => ["chat", "startTime"], []);
   const onWsMessage = (event: MessageEvent) => {
     const data = JSON.parse(event.data);
@@ -71,13 +71,11 @@ const Chat: React.FC = () => {
     if (!ws) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [ws, fields, sendJsonMessage]);
-  }, [ws, fields]);
 
   const chatKeyPress = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -87,7 +85,7 @@ const Chat: React.FC = () => {
         }
 
         if (ws) {
-          ws.send(JSON.stringify({ type: "chat", message: (event.target as HTMLInputElement).value }));
+          sendJsonMessage({ type: "chat", message: (event.target as HTMLInputElement).value });
           (event.target as HTMLInputElement).value = "";
         }
       }

client/src/ChooseCard.tsx

@@ -12,7 +12,7 @@ import { GlobalContext } from "./GlobalContext";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 const ChooseCard: React.FC = () => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [turn, setTurn] = useState<any>(undefined);
   const [color, setColor] = useState<string | undefined>(undefined);
   const [state, setState] = useState<string | undefined>(undefined);
@@ -53,26 +53,22 @@ const ChooseCard: React.FC = () => {
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   const selectResources = useCallback(() => {
-    if (!ws) return;
+    if (!sendJsonMessage) return;
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "select-resources",
       cards,
-      })
+    });
-    );
+  }, [sendJsonMessage, cards]);
-  }, [ws, cards]);
 
   let count = 0;
   if (turn && turn.actions && turn.actions.indexOf("select-resources") !== -1) {

client/src/GameOrder.tsx

@@ -21,7 +21,7 @@ interface PlayerItem {
 }
 
 const GameOrder: React.FC = () => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [players, setPlayers] = useState<{ [key: string]: any }>({});
   const [color, setColor] = useState<string | undefined>(undefined);
   const fields = useMemo(() => ["players", "color"], []);
@@ -57,16 +57,14 @@ const GameOrder: React.FC = () => {
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   const sendMessage = (data: any) => {
     ws!.send(JSON.stringify(data));

client/src/GlobalContext.ts

@@ -2,8 +2,9 @@ import { createContext } from 'react';
 
 export type GlobalContextType = {
   gameId?: string | undefined;
-  ws?: WebSocket | undefined;
+  ws?: WebSocket | null | undefined;
   name?: string;
+  sendJsonMessage?: (message: any) => void;
   chat?: Array<unknown>;
 };
 

client/src/Hand.tsx

@@ -34,7 +34,7 @@ interface HandProps {
 }
 
 const Hand: React.FC<HandProps> = ({ buildActive, setBuildActive, setCardActive }) => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [priv, setPriv] = useState<any>(undefined);
   const [color, setColor] = useState<string | undefined>(undefined);
   const [turn, setTurn] = useState<any>(undefined);
@@ -95,16 +95,14 @@ const Hand: React.FC<HandProps> = ({ buildActive, setBuildActive, setCardActive
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   useEffect(() => {
     if (!priv) {

client/src/HouseRules.tsx

@@ -44,14 +44,14 @@ const categoryImages: { [key: string]: string } = {
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 interface VolcanoProps {
-  ws: WebSocket | null;
+  sendJsonMessage: (message: any) => void;
   rules: any;
   field: string;
   disabled: boolean;
 }
 
 /* Volcano based on https://www.ultraboardgames.com/catan/the-volcano.php */
-const Volcano: React.FC<VolcanoProps> = ({ ws, rules, field, disabled }) => {
+const Volcano: React.FC<VolcanoProps> = ({ sendJsonMessage, rules, field, disabled }) => {
   const init =
     Math.random() > 0.5
       ? Math.floor(8 + Math.random() * 5) /* Do not include 7 */
@@ -79,33 +79,29 @@ const Volcano: React.FC<VolcanoProps> = ({ ws, rules, field, disabled }) => {
         update = true;
       }
 
-      if (update && ws) {
+      if (update && sendJsonMessage) {
-        ws.send(
+        sendJsonMessage({
-          JSON.stringify({
           type: "rules",
           rules: rules,
-          })
+        });
-        );
       }
     }
-  }, [rules, field, init, ws]);
+  }, [rules, field, init, sendJsonMessage]);
 
   const toggleGold = () => {
-    if (!ws) return;
+    if (!sendJsonMessage) return;
     rules[field].gold = !gold;
     rules[field].number = number;
     setGold(rules[field].gold);
 
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "rules",
       rules: rules,
-      })
+    });
-    );
   };
 
   const update = (delta: number) => {
-    if (!ws) return;
+    if (!sendJsonMessage) return;
     let value = number + delta;
     if (value < 2 || value > 12) {
       return;
@@ -117,12 +113,10 @@ const Volcano: React.FC<VolcanoProps> = ({ ws, rules, field, disabled }) => {
     setNumber(value);
     rules[field].gold = gold;
     rules[field].number = value;
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "rules",
       rules: rules,
-      })
+    });
-    );
   };
 
   return (
@@ -218,12 +212,12 @@ const Volcano: React.FC<VolcanoProps> = ({ ws, rules, field, disabled }) => {
 };
 
 interface VictoryPointsProps {
-  ws: WebSocket | null;
+  sendJsonMessage: (message: any) => void;
   rules: any;
   field: string;
 }
 
-const VictoryPoints: React.FC<VictoryPointsProps> = ({ ws, rules, field }) => {
+const VictoryPoints: React.FC<VictoryPointsProps> = ({ sendJsonMessage, rules, field }) => {
   const minVP = 10;
   const [points, setPoints] = useState<number>(rules[field].points || minVP);
   console.log(`house-rules - ${field} - `, rules[field]);
@@ -239,7 +233,7 @@ const VictoryPoints: React.FC<VictoryPointsProps> = ({ ws, rules, field }) => {
   }
 
   const update = (value: number) => {
-    if (!ws) return;
+    if (!sendJsonMessage) return;
     const points = (rules[field].points || minVP) + value;
     if (points < minVP) {
       return;
@@ -247,12 +241,10 @@ const VictoryPoints: React.FC<VictoryPointsProps> = ({ ws, rules, field }) => {
     if (points !== rules[field].points) {
       setPoints(points);
       rules[field].points = points;
-      ws.send(
+      sendJsonMessage({
-        JSON.stringify({
         type: "rules",
         rules: rules,
-        })
+      });
-      );
     }
   };
 
@@ -279,7 +271,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
   houseRulesActive,
   setHouseRulesActive,
 }) => {
-  const { ws, name } = useContext(GlobalContext);
+  const { ws, name, sendJsonMessage } = useContext(GlobalContext);
   const [rules, setRules] = useState<any>({});
   const [state, setState] = useState<any>({});
   const [gameState, setGameState] = useState<string>("");
@@ -316,16 +308,14 @@ const HouseRules: React.FC<HouseRulesProps> = ({
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   const dismissClicked = useCallback(() => {
     setHouseRulesActive(false);
@@ -333,19 +323,17 @@ const HouseRules: React.FC<HouseRulesProps> = ({
 
   const setRule = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>, key: string) => {
-      if (!ws) return;
+      if (!sendJsonMessage) return;
       const checked = event.target.checked;
       console.log(`house-rules - set rule ${key} to ${checked}`);
       rules[key].enabled = checked;
       setRules({ ...rules });
-      ws.send(
+      sendJsonMessage({
-        JSON.stringify({
         type: "rules",
         rules: rules,
-        })
+      });
-      );
     },
-    [rules, ws]
+    [rules, sendJsonMessage]
   );
 
   const ruleList = useMemo(
@@ -359,7 +347,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
           defaultChecked: false,
           element: (
             <Volcano
-              ws={ws}
+              sendJsonMessage={sendJsonMessage}
               rules={rules}
               field={"volcano"}
               disabled={gameState !== "lobby"}
@@ -373,7 +361,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
           category: "rules",
           defaultChecked: false,
           element: (
-            <VictoryPoints ws={ws} rules={rules} field={"victory-points"} />
+            <VictoryPoints sendJsonMessage={sendJsonMessage} rules={rules} field={"victory-points"} />
           ),
         },
         {

client/src/Placard.tsx

@@ -16,12 +16,12 @@ type PlacardProps = {
 };
 
 const Placard: React.FC<PlacardProps> = ({ type, disabled, count, buildActive, setBuildActive, className, sx }) => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const sendMessage = useCallback(
     (data: Record<string, unknown>) => {
-      ws.send(JSON.stringify(data));
+      sendJsonMessage(data);
     },
-    [ws]
+    [sendJsonMessage]
   );
 
   const dismissClicked = () => {

client/src/PlayerList.tsx

@@ -11,7 +11,7 @@ import { GlobalContext } from "./GlobalContext";
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
 
 const PlayerList: React.FC = () => {
-  const { ws, name } = useContext(GlobalContext);
+  const { ws, name, sendJsonMessage } = useContext(GlobalContext);
   const [players, setPlayers] = useState<{ [key: string]: any }>({});
   const [unselected, setUneslected] = useState<string[]>([]);
   const [state, setState] = useState<string>("lobby");
@@ -69,15 +69,13 @@ const PlayerList: React.FC = () => {
   }, [ws, refWsMessage]);
 
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields: ["state", "players", "unselected"],
-      })
+    });
-    );
   }, [ws]);
 
   const toggleSelected = (key: string) => {

client/src/PlayersStatus.tsx

@@ -133,7 +133,7 @@ interface PlayersStatusProps {
 }
 
 const PlayersStatus: React.FC<PlayersStatusProps> = ({ active }) => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [players, setPlayers] = useState<any>(undefined);
   const [color, setColor] = useState<string | undefined>(undefined);
   const [largestArmy, setLargestArmy] = useState<string | undefined>(undefined);
@@ -184,16 +184,14 @@ const PlayersStatus: React.FC<PlayersStatusProps> = ({ active }) => {
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   if (!players) {
     return <></>;

client/src/SelectPlayer.tsx

@@ -11,7 +11,7 @@ import { GlobalContext } from "./GlobalContext";
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
 
 const SelectPlayer: React.FC = () => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [turn, setTurn] = useState<any>(undefined);
   const [color, setColor] = useState<string | undefined>(undefined);
   const fields = useMemo(() => ["turn", "color"], []);
@@ -47,27 +47,23 @@ const SelectPlayer: React.FC = () => {
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   const playerClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      ws!.send(
+      sendJsonMessage({
-        JSON.stringify({
         type: "steal-resource",
         color: event.currentTarget.getAttribute("data-color"),
-        })
+      });
-      );
     },
-    [ws]
+    [sendJsonMessage]
   );
 
   if (!color || !turn || turn.color !== color || !turn.limits || !turn.limits.players) {

client/src/Trade.tsx

@@ -43,7 +43,7 @@ const empty: Resources = {
 };
 
 const Trade: React.FC = () => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [gives, setGives] = useState<Resources>(Object.assign({}, empty));
   const [gets, setGets] = useState<Resources>(Object.assign({}, empty));
   const [turn, setTurn] = useState<any>(undefined);
@@ -90,16 +90,14 @@ const Trade: React.FC = () => {
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
   const transfer = useCallback(
     (type: string, direction: string) => {
       if (direction === "give") {
@@ -168,17 +166,15 @@ const Trade: React.FC = () => {
 
   const sendTrade = useCallback(
     (action: string, offer: any) => {
-      if (ws) {
+      if (sendJsonMessage) {
-        ws.send(
+        sendJsonMessage({
-          JSON.stringify({
           type: "trade",
           action,
           offer,
-          })
+        });
-        );
       }
     },
-    [ws]
+    [sendJsonMessage]
   );
 
   useEffect(() => {

client/src/ViewCard.tsx

@@ -16,7 +16,7 @@ interface ViewCardProps {
 }
 
 const ViewCard: React.FC<ViewCardProps> = ({ cardActive, setCardActive }) => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [priv, setPriv] = useState<any>(undefined);
   const [turns, setTurns] = useState<number>(0);
   const [rules, setRules] = useState<any>({});
@@ -55,28 +55,24 @@ const ViewCard: React.FC<ViewCardProps> = ({ cardActive, setCardActive }) => {
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   const playCard = useCallback(() => {
-    if (ws) {
+    if (sendJsonMessage) {
-      ws.send(
+      sendJsonMessage({
-        JSON.stringify({
         type: "play-card",
         card: cardActive,
-        })
+      });
-      );
     }
     setCardActive(undefined);
-  }, [ws, cardActive, setCardActive]);
+  }, [sendJsonMessage, cardActive, setCardActive]);
 
   const close = () => {
     setCardActive(undefined);

client/src/Winner.tsx

@@ -17,7 +17,7 @@ interface WinnerProps {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const Winner: React.FC<WinnerProps> = ({ winnerDismissed, setWinnerDismissed }) => {
-  const { ws } = useContext(GlobalContext);
+  const { ws, sendJsonMessage } = useContext(GlobalContext);
   const [winner, setWinner] = useState<any>(undefined);
   const [state, setState] = useState<string | undefined>(undefined);
   const fields = useMemo(() => ["winner", "state"], []);
@@ -56,27 +56,23 @@ const Winner: React.FC<WinnerProps> = ({ winnerDismissed, setWinnerDismissed })
     };
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) {
+    if (!sendJsonMessage) {
       return;
     }
-    ws.send(
+    sendJsonMessage({
-      JSON.stringify({
       type: "get",
       fields,
-      })
+    });
-    );
+  }, [sendJsonMessage, fields]);
-  }, [ws, fields]);
 
   const quitClicked = useCallback(() => {
     if (!winnerDismissed) {
       setWinnerDismissed(true);
-      ws.send(
+      sendJsonMessage({
-        JSON.stringify({
         type: "goto-lobby",
-        })
+      });
-      );
     }
-  }, [ws, winnerDismissed, setWinnerDismissed]);
+  }, [sendJsonMessage, winnerDismissed, setWinnerDismissed]);
 
   if (!winner || winnerDismissed) {
     return <></>;