fix: move generating roomId to wss server

Author: danolekh

package-lock.json

@@ -77,7 +77,6 @@
  "tailwindcss": "3.3.2",
  "tailwindcss-animate": "^1.0.6",
  "unstyled-table": "^0.0.3-alpha-3",
- "uuid": "^9.0.0",
  "zod": "^3.21.4"
  },
  "devDependencies": {

packages/app/package.json

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import { v4 as uuidv4 } from "uuid";
 
 import { useForm } from "react-hook-form";
 import * as z from "zod";
@@ -33,8 +32,6 @@ type CreateRoomForm = z.infer<typeof createRoomSchema>;
 export const CreateRoomForm = () => {
  const [isLoading, setIsLoading] = React.useState(false);
 
- const roomId = uuidv4();
-
  const router = useRouter();
 
  const form = useForm<CreateRoomForm>({
@@ -47,7 +44,6 @@ export const CreateRoomForm = () => {
  function onSubmit({ language }: CreateRoomForm) {
  setIsLoading(true);
  socket.emit("UserCreateRoom", {
- roomId,
  // TODO: make typescript happy
  language: language as Language,
  });
@@ -89,15 +85,6 @@ export const CreateRoomForm = () => {
  )}
  />
 
- <div>
- <p className="mb-2 text-sm font-medium">Room ID</p>
-
- <div className="flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm text-muted-foreground">
- <span>{roomId}</span>
- <CopyButton value={roomId} />
- </div>
- </div>
-
  <Button type="submit" className="mt-2 w-full">
  {isLoading ? (
  <Icons.spinner className="h-4 w-4 animate-spin" />

packages/app/src/app/race/_components/create-room-form.tsx

@@ -1,9 +1,8 @@
 import { z } from "zod";
 import { isValidUUID } from "@/lib/utils";
 
-
 export const createRoomSchema = z.object({
- language: z.string(),
+ language: z.string().nonempty(),
 });
 
 export const joinRoomSchema = z.object({

packages/app/src/lib/validations/room.ts

@@ -15,7 +15,8 @@
  "dependencies": {
  "@code-racer/app": "file:../app",
  "express": "^4.18.2",
- "socket.io": "^4.7.1"
+ "socket.io": "^4.7.1",
+ "uuid": "^9.0.0"
  },
  "devDependencies": {
  "@types/express": "^4.17.17",

packages/wss/package.json

@@ -27,7 +27,6 @@ export type UserGetRacePayload = {
 };
 
 export type UserCreateRoomPayload = {
- roomId: string;
  language: Language;
 };
 

packages/wss/src/events/client-to-server.ts

@@ -12,7 +12,7 @@ import { type ServerToClientEvents } from "./events/server-to-client";
 import { createRace, raceMatchMaking } from "./match-making";
 import { RaceStatus, raceStatus } from "./types";
 import { getRandomSnippet } from "@code-racer/app/src/app/race/(play)/loaders";
-import { getRoomParticipantId } from "@code-racer/app/src/lib/wss-app-utils";
+import { v4 as uuidv4 } from "uuid";
 
 export type SocketId = string;
 type RaceId = string;
@@ -70,10 +70,12 @@ export class Game {
  return;
  }
 
+ const roomId = uuidv4();
+
  // race id is associated with the room id
- const race = await createRace(snippet, payload.roomId);
+ const race = await createRace(snippet, roomId);
 
- this.races.set(payload.roomId, {
+ this.races.set(roomId, {
  ...race,
  participants: [],
  status: "waiting",