fix for types in app.tsx and cleanup "throttling" of nickname updates (…

…#58) * fix for types in app.tsx and add throttle() usage * temp disabled google auth for testing * try debounce instead * cleanup nickname throttling logic * adding comments * cleansing package-lock file * re-enable google auth
hathora · May 10, 2024 · a933236 · a933236
1 parent a416c42
commit a933236
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -1,7 +1,6 @@
 import ReactDOM from "react-dom/client";
 import React, { useEffect, useState } from "react";
 import { GoogleOAuthProvider } from "@react-oauth/google";
-import * as errors from "@hathora/cloud-sdk-typescript/models/errors";
 import { HathoraConnection } from "@hathora/client-sdk";
 
 import { SessionMetadata, RoomConfig } from "../../common/types";
@@ -56,7 +55,7 @@ function App() {
         }
 
         try {
-          const roomConfig = JSON.parse(lobbyInfo.roomConfig) as RoomConfig;
+          const roomConfig = JSON.parse(lobbyInfo.roomConfig || "") as RoomConfig;
 
           if (!roomConfig.isGameEnd) {
             const connect = new HathoraConnection(roomIdFromUrl, connectionInfo);

diff --git a/client/src/scenes/GameScene.ts b/client/src/scenes/GameScene.ts
@@ -7,6 +7,7 @@ import { ClientMessageType, ServerMessageType } from "../../../common/messages";
 import map from "../../../common/map.json";
 
 const BULLETS_MAX = 3;
+let lastServerReqTimestamp = Date.now();
 
 export class GameScene extends Scene {
   private preloaderContainer!: HTMLDivElement;
@@ -39,9 +40,8 @@ export class GameScene extends Scene {
   private respawnText: Phaser.GameObjects.Text | undefined = undefined;
   private endText: Phaser.GameObjects.Text | undefined = undefined;
   private disconnectText: Phaser.GameObjects.Text | undefined = undefined;
-  private serverRequestBuffer: number = Date.now();
 
-  static SERVER_REQ_BUFFER_LENGTH = 500;
+  static SERVER_REQ_THROTTLE_MS = 500;
   static NAME = "scene-game";
 
   constructor() {
@@ -336,16 +336,7 @@ export class GameScene extends Scene {
     state.players
       .filter((p) => p.id === this.currentUserID && p.nickname !== sessionStorage.getItem("bullet-mania-nickname"))
       .forEach(() => {
-        if (
-          sessionStorage.getItem("bullet-mania-nickname") &&
-          Date.now() - this.serverRequestBuffer > GameScene.SERVER_REQ_BUFFER_LENGTH
-        ) {
-          this.serverRequestBuffer = Date.now();
-          this.connection?.writeJson({
-            type: ClientMessageType.SetNickname,
-            nickname: sessionStorage.getItem("bullet-mania-nickname"),
-          });
-        }
+        setNicknameThrottled(sessionStorage.getItem("bullet-mania-nickname"), this.connection);
       });
 
     // calc leaderboard
@@ -580,3 +571,15 @@ function lerpBullet(from: Bullet, to: Bullet, pctElapsed: number): Bullet {
     },
   };
 }
+
+// We throttle setNickname here because it calls an update server req and we don't want to potentially make this call
+// every tick.
+function setNicknameThrottled(nickname: string | null, connection: HathoraConnection | undefined) {
+  if (nickname && Date.now() - lastServerReqTimestamp > GameScene.SERVER_REQ_THROTTLE_MS) {
+    lastServerReqTimestamp = Date.now();
+    connection?.writeJson({
+      type: ClientMessageType.SetNickname,
+      nickname: nickname,
+    });
+  }
+}