Rewrite websocket server

codergautam · Oct 21, 2024 · f45dc83 · f45dc83
1 parent caac9a3
commit f45dc83
Show file tree

Hide file tree

Showing 20 changed files with 6,905 additions and 8,693 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,6 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
-pnpm-lock.yaml
 
 # testing
 /coverage

diff --git a/clientConfig.js b/clientConfig.js
@@ -7,6 +7,6 @@ const prefixWs = (isHttps ? "wss" : "ws")+"://";
 
   return {
   "apiUrl": prefixHttp+(process.env.NEXT_PUBLIC_API_URL ??  "localhost:3001"),
-  "websocketUrl": prefixWs+(process.env.NEXT_PUBLIC_WS_HOST ?? process.env.NEXT_PUBLIC_API_URL ?? "localhost:3001")+'/wg',
+  "websocketUrl": prefixWs+(process.env.NEXT_PUBLIC_WS_HOST ?? process.env.NEXT_PUBLIC_API_URL ?? "localhost:3002")+'/wg',
   }
 }
diff --git a/components/home.js b/components/home.js
@@ -100,6 +100,7 @@ export default function Home({ }) {
   const [loginQueued, setLoginQueued] = useState(false);
   const [options, setOptions] = useState({
   });
+  const [multiplayerError, setMultiplayerError] = useState(null);
 
   let login = null;
   if(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) {
@@ -1006,24 +1007,25 @@ setShowCountryButtons(false)
           if (data.state === "getready") {
             setMultiplayerChatEnabled(true)
 
-            if(data.map !== "all" && !countries.map((c) => c?.toLowerCase()).includes(data.map?.toLowerCase())  && !gameOptions?.extent) {
-              // calculate extent
+            // calculate extent on client
+            // if(data.map !== "all" && !countries.map((c) => c?.toLowerCase()).includes(data.map?.toLowerCase())  && !gameOptions?.extent) {
+            //   // calculate extent
 
-              fetch(`/mapLocations/${data.map}`).then((res) => res.json()).then((data) => {
-                if(data.ready) {
+            //   fetch(`/mapLocations/${data.map}`).then((res) => res.json()).then((data) => {
+            //     if(data.ready) {
 
-                  const mappedLatLongs = data.locations.map((l) => fromLonLat([l.lng, l.lat], "EPSG:4326"));
-                  let extent = boundingExtent(mappedLatLongs);
-                  console.log("extent", extent)
+            //       const mappedLatLongs = data.locations.map((l) => fromLonLat([l.lng, l.lat], "EPSG:4326"));
+            //       let extent = boundingExtent(mappedLatLongs);
+            //       console.log("extent", extent)
 
-                  setGameOptions((prev) => ({
-                    ...prev,
-                    extent
-                  }))
+            //       setGameOptions((prev) => ({
+            //         ...prev,
+            //         extent
+            //       }))
 
-                }
-              })
-            }
+            //     }
+            //   })
+            // }
 
           } else if (data.state === "guess") {
             const didIguess = (data.players ?? prev.gameData?.players)?.find((p) => p.id === prev.gameData?.myId)?.final;
@@ -1222,8 +1224,11 @@ setShowCountryButtons(false)
 
       setMultiplayerState((prev) => ({
         ...initialMultiplayerState,
-        error: text("connectionLost")
       }));
+      if(window.screen !== "home")
+      setMultiplayerError(true)
+
+
     }
 
     ws.onerror = () => {
@@ -1233,8 +1238,9 @@ setShowCountryButtons(false)
 
       setMultiplayerState((prev) => ({
         ...initialMultiplayerState,
-        error: text("connectionLost")
       }));
+      if(window.screen !== "home")
+      setMultiplayerError(true)
     }
 
 
@@ -1243,6 +1249,10 @@ setShowCountryButtons(false)
     }
   }, [ws, multiplayerState, timeOffset, gameOptions?.extent]);
 
+  useEffect(() => {
+    window.screen = screen;
+  }, [screen])
+
   useEffect(() => {
     if (multiplayerState?.connected && !multiplayerState?.inGame && multiplayerState?.nextGameQueued) {
       handleMultiplayerAction("publicDuel");
@@ -1327,6 +1337,7 @@ setShowCountryButtons(false)
 
 
     if (loading) setLoading(false);
+    if(multiplayerError) setMultiplayerError(false)
 
     if(window.learnMode) {
       // redirect to home
@@ -1924,11 +1935,11 @@ setShowCountryButtons(false)
 }
 
         {screen === "multiplayer" && <div className="home__multiplayer">
-          <MultiplayerHome handleAction={handleMultiplayerAction} session={session} ws={ws} setWs={setWs} multiplayerState={multiplayerState} setMultiplayerState={setMultiplayerState} />
+          <MultiplayerHome multiplayerError={multiplayerError} handleAction={handleMultiplayerAction} session={session} ws={ws} setWs={setWs} multiplayerState={multiplayerState} setMultiplayerState={setMultiplayerState} />
         </div>}
 
         {multiplayerState.inGame && ["guess", "getready", "end"].includes(multiplayerState.gameData?.state) && (
-          <GameUI inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} timeOffset={timeOffset} ws={ws} backBtnPressed={backBtnPressed} multiplayerChatOpen={multiplayerChatOpen} setMultiplayerChatOpen={setMultiplayerChatOpen} multiplayerState={multiplayerState} xpEarned={xpEarned} setXpEarned={setXpEarned} pinPoint={pinPoint} setPinPoint={setPinPoint} loading={loading} setLoading={setLoading} session={session} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} latLong={latLong} loadLocation={() => { }} gameOptions={{ location: "all", maxDist: 20000, extent: gameOptions?.extent }} setGameOptions={() => { }} showAnswer={(multiplayerState?.gameData?.curRound !== 1) && multiplayerState?.gameData?.state === 'getready'} setShowAnswer={guessMultiplayer} />
+          <GameUI inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} timeOffset={timeOffset} ws={ws} backBtnPressed={backBtnPressed} multiplayerChatOpen={multiplayerChatOpen} setMultiplayerChatOpen={setMultiplayerChatOpen} multiplayerState={multiplayerState} xpEarned={xpEarned} setXpEarned={setXpEarned} pinPoint={pinPoint} setPinPoint={setPinPoint} loading={loading} setLoading={setLoading} session={session} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} latLong={latLong} loadLocation={() => { }} gameOptions={{ location: "all", maxDist: 20000, extent: gameOptions?.extent ?? multiplayerState?.gameData?.extent }} setGameOptions={() => { }} showAnswer={(multiplayerState?.gameData?.curRound !== 1) && multiplayerState?.gameData?.state === 'getready'} setShowAnswer={guessMultiplayer} />
         )}
 
 

diff --git a/components/multiplayerHome.js b/components/multiplayerHome.js
@@ -8,15 +8,22 @@ import sendEvent from "./utils/sendEvent";
 import MapsModal from "./maps/mapsModal";
 
 
-export default function MultiplayerHome({ ws, setWs, multiplayerState, setMultiplayerState, session, handleAction }) {
+export default function MultiplayerHome({ ws, setWs, multiplayerError, multiplayerState, setMultiplayerState, session, handleAction }) {
   const { t: text } = useTranslation("common");
 
   const [selectCountryModalShown, setSelectCountryModalShown] = useState(false);
 
+  if(multiplayerError) {
+    return (
+      <div className="multiplayerHome">
+        <BannerText text={text("connectionLost")} shown={true} hideCompass={true} />
+      </div>
+    )
+  }
+
   return (
     <div className="multiplayerHome">
-        <BannerText text={multiplayerState.error} shown={multiplayerState.error} hideCompass={true} />
-        <BannerText text={text("connectionLost")} shown={multiplayerState.connecting && !multiplayerState?.error} />
+        {/* <BannerText text={multiplayerState.error} shown={multiplayerState.error} hideCompass={true} /> */}
 
        { multiplayerState.connected && !multiplayerState.inGame && !multiplayerState.gameQueued && multiplayerState.enteringGameCode && !multiplayerState.creatingGame && (
       <div style={{ pointerEvents: 'all', alignContent: 'center', justifyContent: 'center', textAlign: 'center' }}>