feat: set username

pixselve-school · Jan 24, 2024 · 866ca18 · 866ca18
1 parent cd3a172
commit 866ca18
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/packages/client/src/app/page.tsx b/packages/client/src/app/page.tsx
@@ -8,9 +8,9 @@ import logo from "../assets/logo.png";
 
 export default function HomePage() {
   const [serverUrl, setServerUrl] = useState<string>("http://localhost:4000");
-  const api = useApi(serverUrl);
   const [isCentered, setIsCentered] = useState<boolean>(false);
   const [username, setUsername] = useState("");
+  const api = useApi(username, serverUrl);
 
   return (
     <main className="dustBackground flex h-full flex-col items-center justify-center">

diff --git a/packages/client/src/hooks/useApi.ts b/packages/client/src/hooks/useApi.ts
@@ -12,7 +12,7 @@ const URL =
   process.env.NODE_ENV === "production" ? undefined : "http://localhost:4000";
 const socket = io(URL!, { autoConnect: false });
 
-export function useApi(serverUrl?: string) {
+export function useApi(username: string, serverUrl?: string) {
   const {
     sharedState: { isConnected, me, scene },
     updateSharedState,
@@ -36,6 +36,7 @@ export function useApi(serverUrl?: string) {
 
   useEffect(() => {
     function handleConnect() {
+      socket.emit(SOCKET_EVENTS.JOIN, username);
       updateSharedState({ isConnected: true });
     }
     function handleDisconnect() {
@@ -52,7 +53,7 @@ export function useApi(serverUrl?: string) {
       socket.off("disconnect", handleDisconnect);
       socket.off(SOCKET_EVENTS.FRAME, handleFrame);
     };
-  }, [updateSharedState]);
+  }, [updateSharedState, username]);
 
   return {
     connect: () => {

diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
@@ -30,7 +30,7 @@ io.on(SOCKET_EVENTS.CONNECT, (socket) => {
 
   const player: Player = {
     id: socket.id,
-    name: "Player 1",
+    name: "TEMP USERNAME",
     color: randomDarkColor(),
     body: [{ x: 0, y: 0 }],
     isSprinting: false,
@@ -56,6 +56,10 @@ io.on(SOCKET_EVENTS.CONNECT, (socket) => {
     player.isSprinting = move.isSprinting;
     player.desiredAngle = move.angle;
   });
+
+  socket.on(SOCKET_EVENTS.JOIN, (name) => {
+    player.name = name;
+  });
 });
 
 setInterval(() => {

diff --git a/packages/shared/src/constants.ts b/packages/shared/src/constants.ts
@@ -59,6 +59,7 @@ export const MIN_SCORE_TO_SPRINT = SCORE_PER_BODY_PART * 4;
  */
 export enum SOCKET_EVENTS {
   CONNECT = "connect",
+  JOIN = "join",
   DISCONNECT = "disconnect",
   MOVE = "move",
   FRAME = "frame",