feat: Picking card logic

Author: ruymon

apps/web/src/app/(protected)/room/[roomCode]/game.tsx

@@ -22,7 +22,6 @@ export const Game = () => {
        *
        * - [ ] Leave room button
        * - [ ] Toggle sound button
-       * - [ ] Toggle fullscreen button
        *
        */}
     </div>

apps/web/src/components/game/cards/black-card.tsx

@@ -6,51 +6,65 @@ import { CardFooter } from './card-footer';
 import { CardHeader } from './card-header';
 
 export function BlackCard() {
-  const { currentBlackCard } = useGame();
-  // Determine text size class based on character count
-  const textSizeClass = useMemo(() => {
-    const text = currentBlackCard?.text || '';
-    const charCount = text.length;
+  const { currentBlackCard, selectedWhiteCards, handleUnpickWhiteCard } =
+    useGame();
+
+  const combinedTextLength = useMemo(() => {
+    if (!currentBlackCard?.text) return 0;
+
+    const blackCardText = currentBlackCard.text;
+    const whiteCardsText =
+      selectedWhiteCards?.map(card => card.text).join('') || '';
 
-    // Text size thresholds based on character count
-    if (charCount <= 74) return 'text-4xl'; // Up to 74 chars
-    if (charCount <= 100) return 'text-3xl'; // Up to 100 chars
-    if (charCount <= 150) return 'text-2xl'; // Up to 150 chars
-    if (charCount <= 200) return 'text-xl'; // Up to 200 chars
-    return 'text-lg'; // More than 200 chars
-  }, [currentBlackCard?.text]);
+    return blackCardText.length + whiteCardsText.length;
+  }, [currentBlackCard?.text, selectedWhiteCards]);
+
+  const textSizeClass = useMemo(() => {
+    if (combinedTextLength <= 50) return 'text-3xl';
+    if (combinedTextLength <= 70) return 'text-2xl';
+    if (combinedTextLength <= 100) return 'text-xl';
+    if (combinedTextLength <= 150) return 'text-lg';
+    return 'text-base';
+  }, [combinedTextLength]);
 
-  // Process text to replace "___" with styled lines
   const processedContent = useMemo(() => {
     const text = currentBlackCard?.text || '';
-
-    // If no fill-in-the-gap markers, return the text as is
     if (!text.includes('___')) return text;
 
-    // Split by the fill-in-the-gap marker
     const segments = text.split('___');
+    const whiteCards = selectedWhiteCards || [];
 
-    // Map through segments and join with styled lines
     return segments.map((segment, index) => {
-      // Last segment doesn't need a line after it
       if (index === segments.length - 1) {
         // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-        return <span key={index}>{segment}</span>;
+        return <span key={`segment-${index}`}>{segment}</span>;
       }
 
-      // Add a line after each segment (except the last)
+      const hasWhiteCard = index < whiteCards.length;
+
       return (
         // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-        <span key={index}>
+        <span key={`segment-${index}`}>
           {segment}
-          <span className="mx-1 inline-block h-4 w-24 border-b-2 border-zinc-50 align-middle" />
+          {hasWhiteCard ? (
+            <button
+              type="button"
+              onClick={() => handleUnpickWhiteCard(whiteCards[index])}
+              className="my-1 inline-block rounded bg-white px-2 py-1 text-left font-bold text-zinc-950"
+            >
+              {whiteCards[index].text}
+            </button>
+          ) : (
+            // Display empty blank
+            <span className="mx-1 inline-block h-4 w-24 border-b-2 border-white align-middle" />
+          )}
         </span>
       );
     });
-  }, [currentBlackCard?.text]);
+  }, [currentBlackCard?.text, selectedWhiteCards, handleUnpickWhiteCard]);
 
   return (
-    <div className="flex aspect-card h-[30rem] flex-col justify-between gap-5 rounded-2xl border border-zinc-950 bg-zinc-950 p-9 dark:border-zinc-50">
+    <div className="flex aspect-card h-96 flex-col justify-between gap-2 rounded-2xl border border-zinc-950 bg-zinc-950 p-6 dark:border-zinc-50">
       <CardHeader packId={currentBlackCard?.packId || ''} variant="blackCard" />
 
       <div className="flex flex-1 items-center">

apps/web/src/components/game/cards/white-card.tsx

@@ -1,5 +1,8 @@
+'use client';
+
 import type { WhiteCard as WhiteCardType } from '@caho/schemas';
 import { cn } from '@/utils/cn';
+import { useGame } from '@/hooks/game';
 import { CardFooter } from './card-footer';
 import { CardHeader } from './card-header';
 
@@ -9,12 +12,18 @@ type WhiteCardProps = {
 };
 
 export function WhiteCard({ data, className }: WhiteCardProps) {
+  const { handlePickWhiteCard, isWhiteCardPickingDisabled } = useGame();
   const { packId, text } = data;
 
   return (
-    <div
+    <button
+      type="button"
+      disabled={isWhiteCardPickingDisabled}
+      onClick={() => handlePickWhiteCard(data)}
       className={cn(
-        'flex aspect-card h-72 flex-col justify-between gap-2 rounded-xl border border-zinc-950 bg-zinc-50 p-5 transition-all hover:scale-110 dark:border-zinc-50',
+        'flex aspect-card h-72 flex-col justify-between gap-2 rounded-xl border-2 border-zinc-100 bg-white p-5 text-left shadow-xl transition-all disabled:cursor-not-allowed dark:border-zinc-50',
+        !isWhiteCardPickingDisabled &&
+          'hover:-translate-y-4 hover:scale-110 hover:cursor-pointer',
         className
       )}
     >
@@ -25,6 +34,6 @@ export function WhiteCard({ data, className }: WhiteCardProps) {
       </div>
 
       <CardFooter variant="whiteCard" />
-    </div>
+    </button>
   );
 }

apps/web/src/components/game/game-player-deck.tsx

@@ -1,15 +1,16 @@
 'use client';
 
+import { cn } from '@/utils/cn';
 import { useGame } from '@/hooks/game';
+import { Button } from '../ui/button';
 import { WhiteCard } from './cards/white-card';
 
 export function GamePlayerDeck() {
-  // TODO: -space-x-10 group hover:space-x-8 stack arc */
-  const { currentWhiteCards, currentPlayer } = useGame();
-
+  const { currentWhiteCards, currentPlayer, isWhiteCardPickingDisabled } =
+    useGame();
   const isJudge = currentPlayer.isJudge;
 
-  console.log(currentPlayer);
+  currentWhiteCards.sort((a, b) => a.text.localeCompare(b.text));
 
   if (isJudge) {
     return (
@@ -20,10 +21,31 @@ export function GamePlayerDeck() {
   }
 
   return (
-    <div className="flex w-full items-center justify-center space-x-4">
+    <div
+      className={cn(
+        'relative flex h-full max-h-96 w-full max-w-full snap-x snap-mandatory snap-always flex-row items-center justify-center -space-x-32 overflow-x-auto scroll-smooth hover:overflow-x-scroll'
+      )}
+    >
       {currentWhiteCards.map(card => (
         <WhiteCard key={card.id} data={card} />
       ))}
+
+      <div
+        className={cn(
+          'absolute inset-0 z-10 flex flex-col items-center justify-center gap-8 overflow-clip backdrop-blur-sm before:absolute before:bottom-0 before:-z-10 before:aspect-square before:h-1/2 before:translate-y-1/2 before:rounded-full before:bg-zinc-950 before:blur-[120px] after:absolute after:inset-0 after:-z-20 after:bg-gradient-to-b after:from-white after:to-white/10 after:content-[""] before:dark:bg-zinc-400 after:dark:from-zinc-950  after:dark:to-zinc-950/90',
+          !isWhiteCardPickingDisabled && 'hidden'
+        )}
+      >
+        <header className="flex max-w-xs flex-col items-center justify-center gap-1 text-center ">
+          <h3 className="text-2xl font-bold">Escolheu sua atrocidade?</h3>
+          <span className="text-balance text-sm text-zinc-700 dark:text-zinc-300">
+            Para desfazer uma carta jogada, basta clicar no texto dela na carta
+            preta e ela retornará ao baralho
+          </span>
+        </header>
+
+        <Button size="lg">Estou pronto!</Button>
+      </div>
     </div>
   );
 }

apps/web/src/components/game/ongoing/ongoing.tsx

@@ -6,8 +6,10 @@ export const Ongoing = () => {
   return (
     <main className="flex h-[calc(100vh-4rem)] w-full flex-1">
       <GameRankingSidebar />
-      <div className="flex flex-1 flex-col items-center justify-between p-8">
-        <BlackCard />
+      <div className="flex flex-1 flex-col">
+        <div className="flex flex-1 items-center justify-center p-8">
+          <BlackCard />
+        </div>
 
         <GamePlayerDeck />
       </div>

apps/web/src/components/game/ranking/game-ranking-sidebar.tsx

@@ -29,7 +29,7 @@ export function GameRankingSidebar() {
     <ScrollArea
       className={cn(
         'h-[calc(100vh-4rem)] flex-col items-center justify-between border-r border-zinc-200 p-4 dark:border-zinc-900',
-        isCollapsed ? 'w-28' : 'relative max-w-sm flex-1'
+        isCollapsed ? 'w-28' : 'relative w-96 shrink-0'
       )}
     >
       <GameRankingHeader />

apps/web/src/hooks/game.tsx

@@ -5,15 +5,18 @@ import type { PlayerEvent, RoomEvent } from '@caho/contracts';
 import type { BlackCard, Player, Room, WhiteCard } from '@caho/schemas';
 import { env } from '@/env.mjs';
 
-// 30 seconds
-const PING_INTERVAL = 30000;
+const PING_INTERVAL_IN_SECONDS = 30 * 1000;
 
 type GameContextType = {
-  currentPlayer: Player;
-  players: Player[];
   room: Room;
+  currentPlayer: Player;
   currentBlackCard: BlackCard | null;
   currentWhiteCards: WhiteCard[];
+  selectedWhiteCards: WhiteCard[];
+  handlePickWhiteCard: (card: WhiteCard) => void;
+  handleUnpickWhiteCard: (card: WhiteCard) => void;
+  isWhiteCardPickingDisabled: boolean;
+  players: Player[];
 };
 
 type WebsocketEvent = PlayerEvent | RoomEvent;
@@ -47,6 +50,43 @@ export const GameContextProvider = ({
   const [currentWhiteCards, setCurrentWhiteCards] = useState<WhiteCard[]>(
     initialWhiteCards ?? []
   );
+  const [selectedWhiteCards, setSelectedWhiteCards] = useState<WhiteCard[]>([]);
+
+  const cardsToPickAmount = currentBlackCard?.pick ?? 0;
+  const isWhiteCardPickingDisabled =
+    selectedWhiteCards?.length === cardsToPickAmount;
+
+  const handlePickWhiteCard = (card: WhiteCard) => {
+    const isAlreadySelected = selectedWhiteCards.some(
+      existingCard => existingCard.id === card.id
+    );
+
+    if (isAlreadySelected || isWhiteCardPickingDisabled) {
+      return;
+    }
+
+    setSelectedWhiteCards(prev => {
+      if (isAlreadySelected) {
+        return prev.filter(prevCard => prevCard.id !== card.id);
+      }
+
+      return [...prev, card];
+    });
+
+    setCurrentWhiteCards(prev => {
+      return prev.filter(prevCard => prevCard.id !== card.id);
+    });
+  };
+
+  const handleUnpickWhiteCard = (card: WhiteCard) => {
+    setSelectedWhiteCards(prev =>
+      prev.filter(prevCard => prevCard.id !== card.id)
+    );
+
+    setCurrentWhiteCards(prev => {
+      return [...prev, card];
+    });
+  };
 
   useEffect(() => {
     const roomWs = new WebSocket(
@@ -125,7 +165,7 @@ export const GameContextProvider = ({
             ws.send('ping');
             console.log('[WS]: Ping sent');
           }
-        }, PING_INTERVAL);
+        }, PING_INTERVAL_IN_SECONDS);
 
         ws.onclose = () => {
           console.log(`[WS]: Disconnected from the WebSocket server ${ws.url}`);
@@ -157,6 +197,10 @@ export const GameContextProvider = ({
         currentPlayer,
         currentBlackCard,
         currentWhiteCards,
+        handlePickWhiteCard,
+        handleUnpickWhiteCard,
+        isWhiteCardPickingDisabled,
+        selectedWhiteCards,
         players
       }}
     >

apps/web/src/styles/globals.css

@@ -65,4 +65,3 @@
 
   /*TODO: remove ugly input type number arrow button at the right */  
 }
-