mmhhhh im not sure about that ^^

package.json

@@ -4,7 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "./start-database.sh && pnpm next dev --turbo",
+    "dev": "run-p dev:next dev:wss",
+    "dev:next": "./start-database.sh && pnpm next dev --turbo",
+    "dev:wss": "tsx src/server/wss/dev-server.ts --tsconfig tsconfig.server.json",
+    "dev:wss-watch": "tsx watch src/server/wss/dev-server.ts --tsconfig tsconfig.server.json",
     "build": "next build",
     "start": "next start",
     "check": "next lint && tsc --noEmit",
@@ -35,14 +38,11 @@
     "@trpc/client": "^11.0.0",
     "@trpc/react-query": "^11.0.0",
     "@trpc/server": "^11.0.0",
-    "@types/express": "^5.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.7",
     "drizzle-orm": "^0.41.0",
-    "express": "^4.21.2",
     "lucide-react": "^0.483.0",
-    "mysql2": "^3.11.0",
     "next": "^15.2.3",
     "next-auth": "5.0.0-beta.25",
     "next-themes": "^0.4.6",
@@ -68,6 +68,7 @@
     "eslint": "^9.23.0",
     "eslint-config-next": "^15.2.3",
     "eslint-plugin-drizzle": "^0.2.3",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",

src/app/(routes)/lobby/[id]/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation";
 import React from "react";
 import type { PublicUser } from "@/server/auth/config";
 import { auth } from "@/server/auth";
-import LobbyPage from "@/app/_components/lobby-page";
+import LobbyPage from "@/app/_components/lobby/lobby-page";
 
 async function Page({
   params,

src/app/(routes)/lobby/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { api } from "@/trpc/server";
-import CreateLobbyDialog from "@/app/_components/create-lobby-dialog";
-import LobbyCard from "@/app/_components/lobby-card";
+import CreateLobbyDialog from "@/app/_components/lobby/lobby-dialog";
+import LobbyCard from "@/app/_components/lobby/lobby-card";
 import { Button } from "@/components/ui/button";
 
 async function Page() {
@@ -11,7 +11,11 @@ async function Page() {
     <>
       <div className="w-full max-w-md space-y-4">
         <div className="flex w-full gap-4">
-          <CreateLobbyDialog className="grow" />
+          <CreateLobbyDialog
+            buttonProps={{
+              className: "grow",
+            }}
+          />
           <Button
             variant={"party"}
             size={"xxl"}

src/app/(routes)/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Sparkles, Users, Plus } from "lucide-react";
-import CreateLobbyDialog from "../_components/create-lobby-dialog";
+import LobbyDialog from "../_components/lobby/lobby-dialog";
 import { auth } from "@/server/auth";
 import { Icons } from "@/components/icons";
 import { appConfig } from "@/app.config";
@@ -26,7 +26,13 @@ export default async function QuizGameStartPage() {
         {/* Create Lobby Button */}
         <div className="space-y-6">
           {session ? (
-            <CreateLobbyDialog className="text-shadow-primary w-full" />
+            <LobbyDialog
+              buttonProps={{
+                className: "text-shadow-primary w-full",
+                size: "xxl",
+                variant: "party",
+              }}
+            />
           ) : (
             <Button
               size={"xxl"}

src/app/_components/lobby/lobby-dialog.tsx

@@ -12,25 +12,33 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import LobbyForm from "./lobby/lobby-form";
+import LobbyForm from "./lobby-form";
+import type { Lobby } from "@/server/db/schema";
+import { type ButtonProps } from "@/components/ui/button";
 
-function CreateLobbyDialog({ className }: { className?: string }) {
+function LobbyDialog({
+  server_lobby,
+  buttonProps,
+}: {
+  buttonProps?: ButtonProps;
+  server_lobby?: Partial<Lobby>;
+}) {
   const [open, setOpen] = React.useState(false);
 
+  const labelText = `${server_lobby ? "Update" : "Create"} Lobby`;
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button
-          size={"xxl"}
-          variant={"party"}
+          {...buttonProps}
           className={cn(
             "text-shadow-primary text-primary-foreground font-black",
-            className,
+            buttonProps?.className,
           )}
         >
           <>
             <Icons.logo className="size-6" />
-            Create Lobby
+            {labelText}
           </>
         </Button>
       </DialogTrigger>
@@ -38,14 +46,14 @@ function CreateLobbyDialog({ className }: { className?: string }) {
       <DialogContent className="container-bg bg-background/10">
         <DialogHeader>
           <DialogTitle className="text-shadow-primary text-4xl font-black uppercase">
-            Create Lobby
+            {labelText}
           </DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
-        <LobbyForm cb={() => setOpen(false)} />
+        <LobbyForm server_lobby={server_lobby} cb={() => setOpen(false)} />
       </DialogContent>
     </Dialog>
   );
 }
 
-export default CreateLobbyDialog;
+export default LobbyDialog;

src/app/_components/lobby/lobby-form.tsx

@@ -24,7 +24,7 @@ function LobbyForm({
   server_lobby,
   cb,
 }: {
-  server_lobby?: Lobby;
+  server_lobby?: Partial<Lobby>;
   cb?: () => void;
 }) {
   const [loading, setLoading] = React.useState(false);
@@ -34,7 +34,7 @@ function LobbyForm({
   const form = useForm<z.infer<typeof lobbyPatchSchema>>({
     resolver: zodResolver(lobbyPatchSchema),
     defaultValues: {
-      name: "",
+      name: server_lobby?.name ?? "",
     },
   });
   async function onSubmit(lobby: z.infer<typeof lobbyPatchSchema>) {
@@ -49,7 +49,7 @@ function LobbyForm({
     } else toast.error("Something went wrong.");
     setLoading(false);
   }
-
+  const labelText = `${server_lobby ? "Update" : "Create"} Lobby`;
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-8">
@@ -71,7 +71,7 @@ function LobbyForm({
           )}
         />
         <Button type="submit" disabled={loading || !form.formState.isDirty}>
-          Create Lobby
+          {labelText}
         </Button>
       </form>
     </Form>

src/app/_components/lobby/lobby-page.tsx

@@ -4,10 +4,12 @@ import React from "react";
 import type { PublicUser } from "@/server/auth/config";
 import type { Lobby } from "@/server/db/schema";
 import UserCard from "@/components/user-card";
-import DeleteLobbyDialog from "@/app/_components/delete-lobby-dialog";
-import LobbyMembershipDialog from "@/app/_components/lobby-membership-dialog";
+import DeleteLobbyDialog from "@/app/_components/lobby/delete-lobby-dialog";
+import LobbyMembershipDialog from "@/app/_components/lobby/lobby-membership-dialog";
 import { type Session } from "next-auth";
 import { Badge } from "@/components/ui/badge";
+import { api } from "@/trpc/react";
+import LobbyDialog from "./lobby-dialog";
 
 function LobbyPage({
   session,
@@ -23,7 +25,11 @@ function LobbyPage({
   const isJoined = members.find((member) => member.id === session?.user.id);
   const isOwner = lobby.createdById === session?.user.id;
 
-
+  const { data } = api.lobby.onLobbyUpdated.useSubscription(undefined, {
+    onData(data) {
+      console.log("received event data:", data);
+    },
+  });
 
   return (
     <div className="container-bg w-full max-w-md space-y-4 p-6">
@@ -45,11 +51,13 @@ function LobbyPage({
           </li>
         ))}
       </ul>
-      {JSON.stringify(memberPresence)}
-      {isOwner && <DeleteLobbyDialog lobbyId={lobby.id} />}
-      {!isOwner && (
-        <LobbyMembershipDialog lobbyId={lobby.id} join={!isJoined} />
-      )}
+      <div className="flex items-center gap-2">
+        {isOwner && <DeleteLobbyDialog lobbyId={lobby.id} />}
+        {isOwner && <LobbyDialog server_lobby={lobby as Lobby} />}
+        {!isOwner && (
+          <LobbyMembershipDialog lobbyId={lobby.id} join={!isJoined} />
+        )}
+      </div>
     </div>
   );
 }

src/components/ui/button.tsx

@@ -21,7 +21,7 @@ const buttonVariants = cva(
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-full",
         link: "text-primary underline-offset-4 hover:underline",
         party:
-          "bg-gradient-to-r from-secondary via-primary to-secondary text-shadow-primary text-primary-foreground rounded-xl border-b-4 shadow-lg  font-bold hover:translate-y-[0.1rem] hover:border-b-2 ",    
+          "bg-gradient-to-r from-secondary via-primary to-secondary text-shadow-primary text-primary-foreground rounded-xl border-b-4 shadow-lg  font-bold hover:translate-y-[0.1rem] hover:border-b-2 ",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -38,16 +38,18 @@ const buttonVariants = cva(
   },
 );
 
+export type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
 function Button({
   className,
   variant,
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
+}: ButtonProps) {
   const Comp = asChild ? Slot : "button";
 
   return (

src/server/api/event-emitter.ts

@@ -0,0 +1,20 @@
+import EventEmitter from "events";
+import type { Lobby } from "../db/schema";
+import type { User } from "next-auth";
+
+type AppEvents = {
+  // Lobby Events
+  "lobby:updated": { lobbyId: string; changes: Partial<Lobby> };
+  "lobby:deleted": { lobbyId: string };
+  "lobby:joined": { user: User; lobbyId: string };
+  "lobby:left": { userId: string; lobbyId: string };
+  "lobby:ready-status": { ready: boolean; userId: string; lobbyId: string };
+};
+
+class TypedEventEmitter extends EventEmitter {
+  emit<T extends keyof AppEvents>(event: T, ...args: [AppEvents[T]]): boolean {
+    return super.emit(event, ...args);
+  }
+}
+
+export const ee = new TypedEventEmitter();

tsconfig.server.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "dist",
+    "target": "ES2019",
+    "lib": ["ES2019", "DOM"],
+    "isolatedModules": false,
+    "noEmit": false
+  },
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+}