update styles for party

minhd-vu · Feb 25, 2024 · 945f894 · 945f894
1 parent 86da49d
commit 945f894
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 35 deletions.
diff --git a/components/JoinParty.tsx b/components/JoinParty.tsx
@@ -10,12 +10,17 @@ export default function JoinParty() {
     event.preventDefault();
 
     const data = new FormData(event.currentTarget);
+    let code = data.get("code");
+    if (code) {
+      code = code.toString().toLowerCase();
+    }
+
     const res = await fetch("/api/party/join", {
       method: "POST",
       headers: {
         "Content-type": "application/json",
       },
-      body: JSON.stringify({ code: data.get("code") }),
+      body: JSON.stringify({ code }),
     });
 
     if (!res.ok) {

diff --git a/components/KillTarget.tsx b/components/KillTarget.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { useSWRConfig } from "swr";
 
 export default function KillTarget() {
-  const router = useRouter();
+  const { mutate } = useSWRConfig();
 
   async function killTarget() {
     const res = await fetch("/api/kill", {
@@ -16,11 +16,11 @@ export default function KillTarget() {
 
     console.log(await res.json());
 
-    router.refresh();
+    mutate("/api/user");
   }
 
   return (
-    <button className="btn btn-warning" onClick={() => killTarget()}>
+    <button className="btn btn-accent" onClick={() => killTarget()}>
       Kill Target
     </button>
   );

diff --git a/components/Party.tsx b/components/Party.tsx
@@ -14,6 +14,7 @@ import StopGame from "./StopGame";
 import Alert from "./Alert";
 import PromotePlayer from "./PromotePlayer";
 import RemovePlayer from "./RemovePlayer";
+import KillTarget from "./KillTarget";
 
 export default function Party() {
   const fetcher: Fetcher<User, string> = (url) =>
@@ -52,31 +53,46 @@ export default function Party() {
     }
 
     return (
-      <div className="card w-96 bg-base-300 shadow-xl">
+      <div className="card w-96 bg-base-100 shadow-xl">
         <div className="card-body">
-          <h1 className="card-title">Code: {party.code.toUpperCase()}</h1>
+          <h1 className="card-title text-3xl">
+            Code: {party.code.toUpperCase()}
+          </h1>
           <h2>Target: {user.target.name}</h2>
-          {party.adminId === user.id && <StopGame />}
-          <LeaveParty />
+          <div className="card-actions justify-center">
+            <KillTarget />
+            {party.adminId === user.id && <StopGame />}
+            <LeaveParty />
+          </div>
         </div>
       </div>
     );
   }
 
-  const players = party.players.map((player) => (
-    <li key={player.id}>
-      <div className="border rounded-lg px-3 py-2 flex justify-between items-center">
-        <div>
-          {player.name}
-          {party.adminId === player.id && <AdminBadge />}
-        </div>
-        <div className="flex space-x-1">
-          <PromotePlayer playerId={player.id} />
-          <RemovePlayer playerId={player.id} />
+  const isAdmin = party.adminId === user.id;
+
+  const players = party.players.map((player) => {
+    const isUser = user.id === player.id;
+
+    return (
+      <li key={player.id}>
+        <div className="border rounded-lg px-3 py-2 flex justify-between items-center">
+          <span className="flex items-center">
+            {player.name}
+            {party.adminId === player.id && <AdminBadge />}
+          </span>
+          <div className="flex space-x-1">
+            {isAdmin && !isUser && (
+              <>
+                <PromotePlayer playerId={player.id} />
+                <RemovePlayer playerId={player.id} />
+              </>
+            )}
+          </div>
         </div>
-      </div>
-    </li>
-  ));
+      </li>
+    );
+  });
 
   return (
     <div className="card w-96 bg-base-100 shadow-xl">
@@ -85,10 +101,15 @@ export default function Party() {
           Code: {party.code.toUpperCase()}
         </h1>
         <h2>Mode: {_.startCase(_.toLower(party.mode))}</h2>
+        {!isAdmin && (
+          <p className="text-sm">
+            Waiting for party leader to start the party...
+          </p>
+        )}
         <h2>Players:</h2>
-        <ul>{players}</ul>
+        <ul className="space-y-2">{players}</ul>
         <div className="card-actions justify-center">
-          <StartGame visible={party.adminId === user.id} />
+          {isAdmin && <StartGame />}
           <LeaveParty />
         </div>
       </div>

diff --git a/components/StartGame.tsx b/components/StartGame.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-export default function StartGame({ visible }: { visible: boolean }) {
-  if (!visible) {
-    return;
-  }
-
+export default function StartGame() {
   async function startGame() {
     const res = await fetch("/api/party/start", {
       method: "POST",

diff --git a/components/StopGame.tsx b/components/StopGame.tsx
@@ -1,6 +1,10 @@
 "use client";
 
+import { useSWRConfig } from "swr";
+
 export default function StopGame() {
+  const { mutate } = useSWRConfig();
+
   async function stopGame() {
     const res = await fetch("/api/party/stop", {
       method: "POST",
@@ -10,15 +14,11 @@ export default function StopGame() {
       throw new Error(await res.json());
     }
 
-    console.log(await res.json());
+    mutate("/api/user");
   }
 
   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()}
-    >
+    <button className="btn btn-warning" onClick={() => stopGame()}>
       Stop Game
     </button>
   );