finish tzar board and add public board

Author: Neofox

next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    reactStrictMode: false,
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

src/app/globals.css

@@ -76,7 +76,7 @@
 }
 
 main {
-  @apply max-w-6xl mx-auto my-3;
+  @apply max-w-7xl mx-auto my-3;
 }
 
 p {

src/components/game/game-board.tsx

@@ -1,35 +1,37 @@
 "use client";
 
-import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 import { useEffect, useOptimistic, useState } from "react";
 import { Card, CardHeader, CardTitle } from "../ui/card";
 import { cn } from "@/lib/utils";
-import { useToast } from "../ui/use-toast";
 import { Button } from "../ui/button";
 import { playWhiteCard } from "@/actions/game/actions";
+import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
+import { useRouter } from "next/navigation";
 
 export default function GameBoard({
-    rounds,
     game,
     connectedUser,
     blackCard,
     whiteCards,
     playedCards,
-    users,
+    round,
+    roundUsers,
 }: {
-    rounds: Round[];
+    round: Round;
     game: Game;
     connectedUser: string;
     blackCard: Card;
     whiteCards: { user_id: string; cards: Card[] }[];
     playedCards: Card[];
     users: User[];
+    roundUsers: RoundUser[];
 }) {
-    const supabase = createClientComponentClient<Database>();
+    const supabase = createClientComponentClient();
     const [selectedCard, setSelectedCard] = useState<Card[]>(playedCards);
     const cards = whiteCards.filter(uCard => uCard.user_id === connectedUser)[0].cards;
     const enoughCardSelected = selectedCard.length === blackCard.pick;
-    const { toast } = useToast();
+    const [URoundUsers, setRoundUsers] = useState<RoundUser[]>(roundUsers);
+    const router = useRouter();
 
     const [optimisticPlayedCard, updateOptimisticPlayedCard] = useOptimistic<Card[], Card[]>(
         playedCards,
@@ -47,26 +49,23 @@ export default function GameBoard({
                     event: "UPDATE",
                     schema: "public",
                     table: "rounds_users",
-                    filter: `round_id=eq.${rounds.at(-1)?.id}`,
+                    filter: `round_id=eq.${round.id}`,
                 },
                 payload => {
                     console.log(payload);
-                    console.log("as played", payload.new.has_played);
-                    console.log("is me", payload.new.user_id !== connectedUser); // TODO: not working
-                    if (payload.new.has_played && payload.new.user_id !== connectedUser) {
-                        toast({
-                            title: `${users.find(user => user.id === payload.new.user_id)?.username} just played!`,
-                            description: `X player left!`,
-                        });
-                    }
+                    const updatedUserRound = URoundUsers.map(ru => (ru.id === payload.new.id ? payload.new.id : ru));
+                    setRoundUsers(updatedUserRound);
                 }
             )
             .subscribe();
 
+        if (URoundUsers.every(roundUser => roundUser.has_played)) {
+            router.refresh(); // update the view to be able to select the cards
+        }
         return () => {
             supabase.removeChannel(channel);
         };
-    }, [supabase, rounds, toast, connectedUser, users]);
+    }, [supabase, round.id, URoundUsers, router]);
 
     const handleSelectedCard = (card: Card) => {
         setSelectedCard(prev => {
@@ -77,13 +76,12 @@ export default function GameBoard({
         });
     };
 
-    if (!rounds || rounds.length === 0) return <div>no rounds</div>;
     if (blackCard.pick === null) return <div>error blackcard mal formated... {blackCard.id}</div>;
 
     return (
         <main className="flex flex-col h-[90vh]">
             <div id="black_card" className="mx-auto">
-                {blackCard && <BlackCard cardContent={blackCard} />}
+                <BlackCard cardContent={blackCard} />
             </div>
             <div id="game_data" className="flex-grow justify-center items-center flex"></div>
             <div id="hand" className="relative">

src/components/game/game-lobby.tsx

@@ -2,6 +2,8 @@ import WaitingRoom from "./waiting-room";
 import GameBoard from "./game-board";
 import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
+import TzarBoard from "./tzar-board";
+import TzarBoardPublic from "./tzar-board-public";
 
 export default async function GameLobby({
     game,
@@ -20,10 +22,21 @@ export default async function GameLobby({
     const isGameInProgress = rounds !== null && rounds.length > 0;
 
     if (isGameInProgress) {
+        const currentRound = rounds.at(-1)!;
+
+        const { data: round_users } = await supabase.from("rounds_users").select();
+
+        if (!round_users) {
+            return <div>error: No User not found in current round</div>;
+        }
+
+        const isRoundFinished = round_users.filter(ru => !ru.is_tzar).every(round_user => round_user.has_played); // TODO: add timer too
+        const round_user = round_users.find(ru => ru.user_id === connectedUser)!;
+
         const { data: blackCard } = await supabase
             .from("cards")
             .select()
-            .match({ id: rounds.at(-1)?.black_card })
+            .match({ id: currentRound.black_card })
             .single();
 
         if (!blackCard) {
@@ -64,40 +77,72 @@ export default async function GameLobby({
             };
         });
 
-        const { data: round_user_id } = await supabase
-            .from("rounds_users")
+        let playedCards: Card[] = [];
+        const { data: round_users_cards } = await supabase
+            .from("rounds_users_cards")
             .select()
-            .match({ user_id: connectedUser })
-            .single();
+            .in(
+                "rounds_user_id",
+                round_users.map(ru => ru.id)
+            );
 
-        let playedCards: Card[] = [];
-        if (round_user_id !== null) {
-            const { data: playedCardIds, error } = await supabase
-                .from("rounds_users_cards")
+        if (round_users_cards !== null) {
+            const { data } = await supabase
+                .from("cards")
+                .select()
+                .in(
+                    "id",
+                    round_users_cards.map(ruc => ruc.card_id)
+                );
+            playedCards = data ?? [];
+        }
+
+        // TODO: make sure we don't make non necessary request when we go there
+        if (isRoundFinished) {
+            return (
+                <TzarBoardPublic
+                    playedCards={playedCards}
+                    users={users}
+                    roundUsers={round_users}
+                    round={currentRound}
+                    blackCard={blackCard}
+                    roundUsersCards={round_users_cards ?? []}
+                    isTzar={round_user.is_tzar}
+                    connectedUser={connectedUser}
+                />
+            );
+        }
+
+        if (round_user.is_tzar) {
+            return <TzarBoard users={users} roundUsers={round_users} round={currentRound} blackCard={blackCard} />;
+        }
+
+        const { data: userPlayedCardIds } = await supabase
+            .from("rounds_users_cards")
+            .select()
+            .match({ rounds_user_id: round_user.id });
+
+        if (userPlayedCardIds !== null) {
+            const { data } = await supabase
+                .from("cards")
                 .select()
-                .match({ rounds_user_id: round_user_id.id });
-
-            if (playedCardIds !== null) {
-                const { data } = await supabase
-                    .from("cards")
-                    .select()
-                    .in(
-                        "id",
-                        playedCardIds.map(card => card.card_id)
-                    );
-                playedCards = data ?? [];
-            }
+                .in(
+                    "id",
+                    userPlayedCardIds.map(card => card.card_id)
+                );
+            playedCards = data ?? [];
         }
 
         return (
             <GameBoard
-                rounds={rounds}
+                round={currentRound}
                 game={game}
                 blackCard={blackCard}
                 whiteCards={whiteCards}
                 connectedUser={connectedUser}
                 playedCards={playedCards}
                 users={users}
+                roundUsers={round_users}
             />
         );
     }