feat: judge does not play...

Author: ruymon

apps/web/packs/base-pack.ts

@@ -1,4 +1,4 @@
-import { type CardPack } from 'types/pack';
+import type { CardPack } from 'types/pack';
 
 const basePack: CardPack = {
   id: 'base-pack',

apps/web/packs/snowye-pack.ts

@@ -1,4 +1,4 @@
-import { type CardPack } from 'types/pack';
+import type { CardPack } from 'types/pack';
 
 const snowyePack: CardPack = {
   id: 'snowye-base',

apps/web/packs/xmas-pack.ts

@@ -1,4 +1,4 @@
-import { type CardPack } from 'types/pack';
+import type { CardPack } from 'types/pack';
 
 const xmasPack: CardPack = {
   id: 'xmas-pack',

apps/web/src/components/brand/logo-text.tsx

@@ -2,9 +2,7 @@ import Link from 'next/link';
 import { siteConfig } from 'config/site';
 import { LogoIcon } from './logo-icon';
 
-interface LogoTextProps {}
-
-export function LogoText({}: LogoTextProps) {
+export function LogoText() {
   return (
     <Link href={'/'} className="flex w-fit items-center gap-2">
       <LogoIcon />

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

@@ -1,20 +1,63 @@
+'use client';
+
+import { useMemo } from 'react';
 import { useGame } from '@/hooks/game';
 import { CardFooter } from './card-footer';
 import { CardHeader } from './card-header';
 
 export function BlackCard() {
   const { currentBlackCard } = useGame();
-  // TODO:
-  // - [ ] Handle pick (Fill in the blanks)
-  // - [ ] Blank fill style
+  // Determine text size class based on character count
+  const textSizeClass = useMemo(() => {
+    const text = currentBlackCard?.text || '';
+    const charCount = text.length;
+
+    // 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]);
+
+  // 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('___');
+
+    // 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>;
+      }
+
+      // Add a line after each segment (except the last)
+      return (
+        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+        <span key={index}>
+          {segment}
+          <span className="mx-1 inline-block h-4 w-24 border-b-2 border-zinc-50 align-middle" />
+        </span>
+      );
+    });
+  }, [currentBlackCard?.text]);
 
   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">
       <CardHeader packId={currentBlackCard?.packId || ''} variant="blackCard" />
 
-      <div className="flex-1">
-        <span className="text-4xl font-bold leading-snug text-zinc-50">
-          {currentBlackCard?.text || ''}
+      <div className="flex flex-1 items-center">
+        <span
+          className={`${textSizeClass} font-bold leading-snug text-zinc-50`}
+        >
+          {processedContent}
         </span>
       </div>
 

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

@@ -5,9 +5,20 @@ import { WhiteCard } from './cards/white-card';
 
 export function GamePlayerDeck() {
   // TODO: -space-x-10 group hover:space-x-8 stack arc */
-  const { currentWhiteCards } = useGame();
+  const { currentWhiteCards, currentPlayer } = useGame();
+
+  const isJudge = currentPlayer.isJudge;
+
+  console.log(currentPlayer);
+
+  if (isJudge) {
+    return (
+      <div>
+        <span>Como já esperado, Juiz não trabalha no Brasil...</span>
+      </div>
+    );
+  }
 
-  console.log('currentWhiteCards', currentWhiteCards);
   return (
     <div className="flex w-full items-center justify-center space-x-4">
       {currentWhiteCards.map(card => (