added start and stop game

components/Party.tsx

@@ -7,6 +7,9 @@ import JoinParty from "./JoinParty";
 import StartGame from "./StartGame";
 import { Party } from "@prisma/client";
 import AdminBadge from "./AdminBadge";
+import PartyStarted from "./PartyStarted";
+
+export type User = Awaited<ReturnType<typeof getUser>>;
 
 async function getUser() {
   const session = await getServerSession();
@@ -24,6 +27,7 @@ async function getUser() {
           players: true,
         },
       },
+      target: true,
     },
   });
 
@@ -46,6 +50,10 @@ export default async function Party() {
     );
   }
 
+  if (party.started) {
+    return <PartyStarted user={user} />;
+  }
+
   const players = party.players.map((player) => (
     <li key={player.id}>
       {player.name}
@@ -54,17 +62,15 @@ export default async function Party() {
   ));
 
   return (
-    <>
-      <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-        <h1 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Code: {party.code.toUpperCase()}
-        </h1>
-        <h2>Mode: {_.startCase(_.toLower(party.mode))}</h2>
-        <h2>Players:</h2>
-        <ul>{players}</ul>
-        {party.adminId === user.id && <StartGame />}
-        <LeaveParty />
-      </div>
-    </>
+    <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+      <h1 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+        Code: {party.code.toUpperCase()}
+      </h1>
+      <h2>Mode: {_.startCase(_.toLower(party.mode))}</h2>
+      <h2>Players:</h2>
+      <ul>{players}</ul>
+      {party.adminId === user.id && <StartGame />}
+      <LeaveParty />
+    </div>
   );
 }

components/PartyStarted.tsx

@@ -0,0 +1,38 @@
+import _ from "lodash";
+import LeaveParty from "./LeaveParty";
+import { User } from "./Party";
+import StartGame from "./StartGame";
+import StopGame from "./StopGame";
+
+export default function PartyStarted({ user }: { user: User }) {
+  if (!user) {
+    throw new Error("User does not exist");
+  }
+
+  if (!user.party) {
+    throw new Error("User is not party of a party");
+  }
+
+  if (!user.party.started) {
+    throw new Error("Party has not started");
+  }
+
+  if (!user.target) {
+    throw new Error("User does not have a target");
+  }
+
+  const party = user.party;
+
+  return (
+    <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+      <h1 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+        Code: {party.code.toUpperCase()}
+      </h1>
+      <h2>Mode: {_.startCase(_.toLower(party.mode))}</h2>
+      <h2>Target:</h2>
+      <ul>{user.target.name}</ul>
+      {party.adminId === user.id && <StopGame />}
+      <LeaveParty />
+    </div>
+  );
+}

components/RemovePlayer.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export default function RemovePlayer({ playerId }: { playerId: string }) {
+  const router = useRouter();
+
+  async function removePlayer(playerId: string) {
+    const res = await fetch("/api/party/remove", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ playerId }),
+    });
+
+    if (!res.ok) {
+      throw new Error(await res.json());
+    }
+
+    router.refresh();
+  }
+
+  return (
+    <button
+      type="button"
+      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+      onClick={() => removePlayer(playerId)}
+    >
+      Remove
+    </button>
+  );
+}

components/StartGame.tsx

@@ -2,7 +2,7 @@
 
 import { useRouter } from "next/navigation";
 
-export default function StartParty() {
+export default function StartGame() {
   const router = useRouter();
 
   async function startGame() {
@@ -14,6 +14,8 @@ export default function StartParty() {
       throw new Error(await res.json());
     }
 
+    console.log(await res.json());
+
     router.refresh();
   }
 

components/StopGame.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export default function StopGame() {
+  const router = useRouter();
+
+  async function stopGame() {
+    const res = await fetch("/api/party/stop", {
+      method: "POST",
+    });
+
+    if (!res.ok) {
+      throw new Error(await res.json());
+    }
+
+    console.log(await res.json());
+
+    router.refresh();
+  }
+
+  return (
+    <button
+      type="button"
+      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+      onClick={() => stopGame()}
+    >
+      Stop Game
+    </button>
+  );
+}