The-Creative-Programming-Group · dongjin2008 · Sep 13, 2023 · Sep 13, 2023 · Sep 13, 2023 · Sep 14, 2023
diff --git a/.gitignore b/.gitignore
@@ -33,12 +33,12 @@ yarn-error.log*
 # local env files
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
-.env*.local
+.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 
-.env.local
+.env
diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts
@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.2.1.
+ * Generated by convex@1.3.1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

diff --git a/convex/_generated/api.js b/convex/_generated/api.js
@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.2.1.
+ * Generated by convex@1.3.1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

diff --git a/convex/_generated/dataModel.d.ts b/convex/_generated/dataModel.d.ts
@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.2.1.
+ * Generated by convex@1.3.1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

diff --git a/convex/_generated/server.d.ts b/convex/_generated/server.d.ts
@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.2.1.
+ * Generated by convex@1.3.1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

diff --git a/convex/_generated/server.js b/convex/_generated/server.js
@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.2.1.
+ * Generated by convex@1.3.1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

diff --git a/convex/openai.ts b/convex/openai.ts
@@ -4,10 +4,13 @@ import { action } from "./_generated/server";
 import { v } from "convex/values";
 import { api } from "../convex/_generated/api";
 import OpenAI from "openai";
+import dotenv from "dotenv";
 
+dotenv.config();
+const apiKey: string = process.env.OPENAI_API_KEY || "";
 // Initialize the OpenAI client with the given API key
 const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY, // This is also the default, can be omitted
+  apiKey: apiKey,
 });
 // start a game
 export const startGames = action({

diff --git a/package.json b/package.json
@@ -15,10 +15,12 @@
     "@total-typescript/ts-reset": "^0.5.1",
     "clsx": "^2.0.0",
     "convex": "^1.2.1",
-    "next": "^13.4.2",
+    "dotenv": "^16.3.1",
+    "next": "^13.4.19",
     "openai": "^4.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "valtio": "^1.11.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/ConvexClientProvider.tsx b/src/app/ConvexClientProvider.tsx
@@ -0,0 +1,14 @@
+"use client";
+import { ReactNode } from "react";
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+import * as process from "process";
+
+const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+
+export default function ConvexClientProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <ConvexProvider client={convex}>{children}</ConvexProvider>;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import "~/styles/globals.css";
 import { Poppins } from "next/font/google";
 import { cn } from "~/lib/utils";
+import ConvexClientProvider from "~/app/ConvexClientProvider";
 
 const poppins = Poppins({
   variable: "--font-poppins",
@@ -23,7 +24,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn("bg-background text-primary", poppins.className)}>
-        {children}
+        <ConvexClientProvider>{children}</ConvexClientProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,27 +1,79 @@
+"use client";
 import { Button } from "~/ui/button";
 import { Input } from "~/ui/input";
 import { Switch } from "~/ui/switch";
+import { useMutation } from "convex/react";
+import { useState } from "react";
+import { api } from "../../convex/_generated/api";
 import { SmallInput } from "~/ui/small-input";
+import { useRouter } from "next/navigation";
+import { useSnapshot } from "valtio";
+import { state } from "~/app/state";
 
 export default function HomePage() {
+  const [chatEnabled, setChatEnabled] = useState(false);
+  const [pairs, setPairs] = useState(false);
+  const [timeLimit, setTimeLimit] = useState(600);
+  const [username, setUsername] = useState("");
+  const createRoom = useMutation(api.rooms.createRoom);
+  const router = useRouter();
+  const snap = useSnapshot(state);
+
+  const handleClick = async () => {
+    try {
+      const result = await createRoom({
+        username: username,
+        chatEnabled: chatEnabled,
+        timeLimit: timeLimit,
+        pairs: pairs,
+      });
+      const roomId = result.roomId;
+      const playId = result.playId;
+      snap.setPlayerId(playId);
+      snap.setUsername(username);
+      router.push(`/room/${roomId}`);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
-    <main className="w-screen flex min-h-fullDVH flex-col items-center justify-between">
+    <main className="w-screen flex min-h-screen flex-col items-center justify-between">
       <h1 className="text-[2.9375rem] sm:text-[5.75rem] mt-6 font-extrabold">
         SketchIt
       </h1>
       <form className="flex flex-col gap-6 w-full sm:w-auto max-w-[20rem] sm:max-w-none">
-        <Input placeholder="Enter the username" />
-        <Button className="font-bold" type="submit">
+        <Input
+          placeholder="Enter the username"
+          onChange={(event) => setUsername(event.target.value)}
+        />
+        <Button
+          className="font-bold"
+          type="submit"
+          onClick={(event) => {
+            {
+              event.preventDefault();
+              handleClick().catch((error) => console.log(error));
+            }
+          }}
+        >
           Create Room
         </Button>
         <div className="mt-10 flex justify-between">
-          <Switch description="Chat" />
+          <Switch
+            description="Chat"
+            onCheckedChange={(checked) => setChatEnabled(checked)}
+          />
           <SmallInput
             type="number"
             defaultValue={600}
-            description="Time limit"
+            description="Time Limit"
+            onChange={(event) => setTimeLimit(parseInt(event.target.value))}
+          />
+          <Switch
+            description="Pairplay"
+            onCheckedChange={(checked) => setPairs(checked)}
           />
-          <Switch description="Pairplay" />
         </div>
       </form>
       <div />

diff --git a/src/app/room/[slug]/layout.tsx b/src/app/room/[slug]/layout.tsx
@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+import Navbar from "../../../ui/navbar";
+import Profile from "../../../ui/Profile";
+import { useSnapshot } from "valtio";
+import { state } from "~/app/state";
+
+export default function playerLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const snap = useSnapshot(state);
+  return (
+    <section className="h-screen px-10 py-14 flex flex-col">
+      <Navbar>
+        <Profile type="nav" initial={snap.user.charAt(0).toUpperCase()} />
+        <Profile type="nav" initial={snap.user.charAt(0).toUpperCase()} />
+        <Profile type="nav" initial={snap.user.charAt(0).toUpperCase()} />
+      </Navbar>
+      {children}
+    </section>
+  );
+}
diff --git a/src/app/room/[slug]/page.tsx b/src/app/room/[slug]/page.tsx
@@ -0,0 +1,10 @@
+import Chat from "~/ui/chat";
+
+export default function RoomPage({ params }: { params: { slug: string } }) {
+  return (
+    <main className="h-full flex justify-between min-h-0 gap-12">
+      <div className="h-full w-full"></div>
+      <Chat roomId={params.slug} />
+    </main>
+  );
+}
diff --git a/src/app/state.ts b/src/app/state.ts
@@ -0,0 +1,13 @@
+import { proxy } from "valtio";
+
+export const state = proxy({
+  playerId: "",
+  setPlayerId: (id: string) => {
+    state.playerId = id;
+  },
+
+  user: "",
+  setUsername: (username: string) => {
+    state.user = username;
+  },
+});
diff --git a/src/ui/Profile.tsx b/src/ui/Profile.tsx
@@ -0,0 +1,20 @@
+const Profile = ({ type, initial }) => {
+  return (
+    <div>
+      {type === "nav" && (
+        <div className="flex flex-col items-center justify-center w-[99px] h-[79px] bg-primary rounded-3xl">
+          <div className="w-[46px] h-[46px] bg-background rounded-full flex justify-center items-center">
+            <p className="text-primary font-extrabold text-2xl">{initial}</p>
+          </div>
+        </div>
+      )}
+      {type === "chat" && (
+        <div className="w-[37px] h-[37px] bg-background rounded-full flex justify-center items-center">
+          <p className="text-primary font-extrabold text-2xl">{initial}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Profile;
diff --git a/src/ui/button.tsx b/src/ui/button.tsx
@@ -3,6 +3,7 @@
 import * as React from "react";
 import { experimental_useFormStatus } from "react-dom";
 import { twMerge } from "tailwind-merge";
+import { cn } from "~/lib/utils";
 
 export const Button = React.forwardRef<
   HTMLButtonElement,
@@ -12,8 +13,8 @@ export const Button = React.forwardRef<
 
   return (
     <button
-      className={twMerge(
-        "inline-flex w-full items-center justify-center rounded-[1.25rem] bg-primary py-[0.63rem] px-5 text-3xl sm:text-[2.9375rem] leading-[4.438rem] font-medium text-background ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className={cn(
+        "inline-flex w-full items-center justify-center rounded-[1.25rem] bg-primary py-[0.63rem] px-5 text-[2.9375rem] leading-[4.438rem] font-bold text-background ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
         className,
       )}
       disabled={props.disabled || pending}