Merge pull request webdevcody#658 from scape76/234-race-room

234 race room

Author: danolekh

package-lock.json

@@ -72,6 +72,7 @@
  "tailwindcss": "3.3.2",
  "tailwindcss-animate": "^1.0.6",
  "unstyled-table": "^0.0.3-alpha-3",
+ "uuid": "^9.0.0",
  "zod": "^3.21.4",
  "@prettier/plugin-ruby": "^4.0.2",
  "prettier": "^3.0.0",
@@ -83,6 +84,7 @@
  "@types/node": "^20.4.1",
  "@types/react": "^18.2.15",
  "@types/react-dom": "18.2.6",
+ "@types/uuid": "^9.0.2",
  "@typescript-eslint/eslint-plugin": "^5.61.0",
  "@typescript-eslint/parser": "^5.61.0",
  "autoprefixer": "10.4.14",

packages/app/package.json

@@ -170,10 +170,7 @@ export default function AddSnippetForm({ lang }: { lang: string }) {
  <FormItem className="w-full">
  <FormLabel>Language</FormLabel>
  <FormControl>
- <LanguageDropDown
- codeLanguage={field.value}
- setCodeLanguage={field.onChange}
- />
+ <LanguageDropDown {...field} />
  </FormControl>
  <FormMessage />
  </FormItem>

packages/app/src/app/add-snippet/_components/add-snippet-form.tsx

@@ -19,25 +19,24 @@ import {
 } from "@/components/ui/popover";
 import { snippetLanguages } from "@/config/languages";
 
-const LanguageDropDown = ({
- codeLanguage,
- setCodeLanguage,
+const LanguageDropdown = ({
  className,
+ value,
+ onChange,
 }: {
- codeLanguage: string;
- setCodeLanguage: (event: string) => void;
  className?: string;
+ value: string;
+ onChange: (props: React.SetStateAction<string>) => void;
 }) => {
  const [open, setOpen] = React.useState(false);
  const [search, setSearch] = React.useState("");
 
  useEffect(() => {
  const savedCodeLanguage = window.localStorage.getItem("codeLanguage");
  if (savedCodeLanguage) {
- setCodeLanguage(savedCodeLanguage);
+ onChange(savedCodeLanguage);
  }
  }, []);
-
  return (
  <Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
@@ -48,10 +47,9 @@ const LanguageDropDown = ({
  className={cn("justify-between w-full px-4 py-3", className)}
  data-cy="language-dropdown"
  >
- {codeLanguage
- ? snippetLanguages.find(
- (language) => language.value === codeLanguage,
- )?.label
+ {value
+ ? snippetLanguages.find((language) => language.value === value)
+ ?.label
  : "Select language..."}
  <ChevronsUpDown className="w-4 h-4 ml-2 opacity-50 shrink-0" />
  </Button>
@@ -76,8 +74,8 @@ const LanguageDropDown = ({
  value={language.value}
  onSelect={(currentValue) => {
  const newCodeLanguage =
- currentValue === codeLanguage ? "" : currentValue;
- setCodeLanguage(newCodeLanguage);
+ currentValue === value ? "" : currentValue;
+ onChange(newCodeLanguage);
  window.localStorage.setItem(
  "codeLanguage",
  newCodeLanguage,
@@ -89,9 +87,7 @@ const LanguageDropDown = ({
  <Check
  className={cn(
  "mr-2 h-4 w-4",
- codeLanguage === language.value
- ? "opacity-100"
- : "opacity-0",
+ value === language.value ? "opacity-100" : "opacity-0",
  )}
  />
  {language.label}
@@ -104,4 +100,6 @@ const LanguageDropDown = ({
  );
 };
 
-export default LanguageDropDown;
+LanguageDropdown.displayName = "LanguageDropdown";
+
+export default LanguageDropdown;

packages/app/src/app/add-snippet/_components/language-dropdown.tsx

@@ -22,6 +22,7 @@ export default function HeroBanner() {
  "
  >
  <Link
+ 
  href={"/race"}
  title="Start Racing"
  prefetch

packages/app/src/app/hero-banner.tsx

@@ -1,7 +1,7 @@
 import { getCurrentUser } from "@/lib/session";
 import { redirect } from "next/navigation";
-import RaceMultiplayer from "../../_components/race/race-multiplayer";
 import { Language, isValidLanguage } from "@/config/languages";
+import RaceMultiplayerRoom from "./room";
 
 export default async function MultiplayerRacePage({
  searchParams,
@@ -23,7 +23,7 @@ export default async function MultiplayerRacePage({
 
  return (
  <main className="flex flex-col items-center justify-between py-10 lg:p-24">
- <RaceMultiplayer user={user} language={searchParams.lang as Language} />
+ <RaceMultiplayerRoom user={user} language={searchParams.lang as Language} />
  </main>
  );
 }

packages/app/src/app/race/(play)/multiplayer/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Language } from "@/config/languages";
+import React, { useEffect, useRef, useState } from "react";
+import { socket } from "@/lib/socket";
+
+// Types
+import type { User } from "next-auth";
+import { Prisma } from "@prisma/client";
+import { RaceStatus } from "@code-racer/wss/src/types";
+import { GameStateUpdatePayload } from "@code-racer/wss/src/events/server-to-client";
+
+import MultiplayerLoadingLobby from "@/app/race/_components/multiplayer-loading-lobby";
+import GameMultiplayer from "@/app/race/_components/race/game-multiplayer";
+
+type Participant = Omit<
+ GameStateUpdatePayload["raceState"]["participants"][number],
+ "socketId"
+>;
+
+export default function RaceMultiplayerRoom({
+ user,
+ language,
+}: {
+ user?: User;
+ language: Language;
+}) {
+ const [race, setRace] = React.useState<Prisma.RaceGetPayload<
+ Record<string, never>
+ > | null>(null);
+ const [raceParticipantId, setRaceParticipantId] = React.useState<string>("");
+ const [raceStatus, setRaceStatus] = React.useState<RaceStatus | null>(null);
+ const [raceStartCountdown, setRaceStartCountdown] = useState<number>(0);
+
+ const [participants, setParticipants] = React.useState<Participant[]>([]);
+
+ // Connection to wss
+ useEffect(() => {
+ socket.emit("UserGetRace", {
+ language,
+ userId: user?.id,
+ });
+
+ return () => {
+ socket.disconnect();
+ socket.off("connect");
+ };
+ }, []);
+
+ useEffect(() => {
+ socket.on("UserRaceResponse", (payload) => {
+ setRace(payload.race);
+ setParticipants(payload.participants);
+ setRaceStatus(payload.raceStatus);
+ setRaceParticipantId(payload.raceParticipantId);
+ });
+
+ socket.on("GameStateUpdate", (payload) => {
+ setParticipants(payload.raceState.participants);
+ setRaceStatus(payload.raceState.status);
+ setRaceStartCountdown(payload.raceState.countdown ?? 0);
+ });
+ });
+
+ return (
+ <>
+ {race && raceStatus !== "running" && (
+ <MultiplayerLoadingLobby participants={participants}>
+ {raceStatus === "waiting" && (
+ <div className="flex flex-col items-center text-2xl font-bold">
+ <div className="w-8 h-8 border-4 border-muted-foreground rounded-full border-t-4 border-t-warning animate-spin"></div>
+ Waiting for players
+ </div>
+ )}
+ {raceStatus === "countdown" && Boolean(raceStartCountdown) && (
+ <div className="text-center text-2xl font-bold">
+ Game starting in: {raceStartCountdown}
+ </div>
+ )}
+ </MultiplayerLoadingLobby>
+ )}
+
+ {race &&
+ raceParticipantId &&
+ (raceStatus === "running" || "finished") && (
+ <GameMultiplayer
+ race={race}
+ participants={participants}
+ currentRaceStatus={raceStatus}
+ raceId={race.id}
+ participantId={raceParticipantId}
+ user={user}
+ />
+ )}
+ </>
+ );
+}

packages/app/src/app/race/(play)/multiplayer/room.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { socket } from "@/lib/socket";
+import { useEffect } from "react";
+import { getSnippetById } from "../../(play)/loaders";
+import { toast } from "@/components/ui/use-toast";
+import { Snippet } from "@prisma/client";
+import { Room } from "./room";
+import { getCurrentUser } from "@/lib/session";
+import { redirect } from "next/navigation";
+
+export default async function RoomPage({
+ params,
+}: {
+ params: { roomId: string };
+}) {
+ const user = await getCurrentUser();
+
+ return (
+ <main className="flex flex-col items-center justify-between py-10 lg:p-24">
+ <Room user={user} roomId={params.roomId} />
+ </main>
+ );
+}