Merge pull request #21 from ItaloMedici/feature/adjusts-text-status

Feature/adjusts text status

app/(dashboard)/room/[roomId]/_components/board-toolbar.tsx → app/(dashboard)/room/[roomId]/_components/board-dock.tsx

@@ -1,12 +1,15 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { useBoard } from "@/context/board";
+import { useIsMobile } from "@/hooks/use-is-mobile";
 import { cn } from "@/lib/utils";
 
-const MAX_AVATAR_DISPLAY = 5;
+const MAX_AVATAR_DISPLAY_DESKTOP = 5;
+const MAX_AVATAR_DISPLAY_MOBILE = 2;
 
-export const BoardToolbar = () => {
+export const BoardDock = () => {
   const { others, self, handleRevealCards, reveal, handleReset } = useBoard();
+  const isMobile = useIsMobile();
 
   if (!others.length) {
     return null;
@@ -21,6 +24,7 @@ export const BoardToolbar = () => {
 
   const playersAvatar = () => {
     let avatarList = [self, ...others].map((player) => ({
+      key: player.id,
       name: player.name
         .split(" ")
         .map((name) => name[0])
@@ -29,19 +33,25 @@ export const BoardToolbar = () => {
       imageUrl: player.imageUrl ?? undefined,
     }));
 
-    if (avatarList.length > MAX_AVATAR_DISPLAY) {
-      avatarList = avatarList.slice(0, MAX_AVATAR_DISPLAY);
+    const maxAvatarDisplay = isMobile
+      ? MAX_AVATAR_DISPLAY_MOBILE
+      : MAX_AVATAR_DISPLAY_DESKTOP;
+
+    if (avatarList.length > maxAvatarDisplay) {
+      avatarList = avatarList.slice(0, maxAvatarDisplay);
+      console.log(others.length, maxAvatarDisplay);
       avatarList.push({
-        name: `+${others.length - MAX_AVATAR_DISPLAY}`,
+        name: `+${others.length - maxAvatarDisplay + 1}`,
         imageUrl: undefined,
+        key: "more",
       });
     }
 
     return (
       <div className="flex items-center gap-[-4px]">
         {avatarList.map((player, index) => (
           <Avatar
-            key={player.name}
+            key={player.key}
             className={cn("border-2 border-white", {
               "-ml-2": index > 0,
             })}

app/(dashboard)/room/[roomId]/_components/board.tsx

@@ -1,16 +1,20 @@
 "use client";
 
+import { BoardDock } from "./board-dock";
 import { BoardNavbar } from "./board-navbar";
-import { BoardToolbar } from "./board-toolbar";
 import { CardsPicker } from "./cards-picker";
 import { Deck } from "./deck";
+import { TextStatus } from "./text-status";
 
 export function Board() {
   return (
     <div className="absolute inset-0 -z-10 h-full w-full bg-gray-50 overflow-hidden">
       <BoardNavbar />
       <div className="flex h-full flex-col items-center justify-between gap-6 p-4 pt-20 pb-12">
-        <BoardToolbar />
+        <div className="flex flex-col gap-8 items-center">
+          <BoardDock />
+          <TextStatus />
+        </div>
         <Deck />
         <CardsPicker />
       </div>

app/(dashboard)/room/[roomId]/_components/deck.tsx

@@ -1,10 +1,31 @@
 import { useBoard } from "@/context/board";
+import { convertChoice } from "@/use-cases/player/convert-choice";
+import { useMemo } from "react";
 import { PlayerCard } from "./player-card";
 
 export const Deck = () => {
-  const { others, self } = useBoard();
+  const { others, self, reveal } = useBoard();
 
-  const players = [self, ...others];
+  const formatedOthers = useMemo(() => {
+    const formated = others.map((player) => ({
+      ...player,
+      choice:
+        reveal && player.choice ? convertChoice(player.choice) : player.choice,
+    }));
+
+    if (reveal) {
+      formated.sort((a, b) => {
+        if (!a.choice || !b.choice) {
+          return -1;
+        }
+
+        return b.choice.localeCompare(a.choice);
+      });
+    }
+    return formated;
+  }, [others, reveal]);
+
+  const players = [self, ...formatedOthers];
 
   if (!others.length) {
     return (
@@ -16,7 +37,7 @@ export const Deck = () => {
   }
 
   return (
-    <div className="grid grid-cols-4 gap-4">
+    <div className="flex flex-row flex-wrap gap-4 md:gap-8 items-center justify-center max-w-md">
       {players.map((player) => (
         <PlayerCard key={player.id} player={player} />
       ))}

app/(dashboard)/room/[roomId]/_components/player-card.tsx

@@ -12,11 +12,6 @@ export const PlayerCard = ({ player }: PlayerCardProps) => {
 
   const isSelf = player.id === self.id;
 
-  const formatedChoice =
-    reveal && player.choice
-      ? Buffer.from(player.choice, "base64").toString()
-      : "";
-
   return (
     <>
       {isSelf ? (
@@ -29,7 +24,7 @@ export const PlayerCard = ({ player }: PlayerCardProps) => {
       ) : (
         <PlayerNotificationPopup player={player}>
           <NumericCard
-            value={formatedChoice}
+            value={reveal ? player.choice : undefined}
             color={reveal && player.choice ? "primary" : "gray"}
             bgColor={reveal ? "white" : player.choice ? "primary" : "gray"}
             size={"large"}

app/(dashboard)/room/[roomId]/_components/text-status.tsx

@@ -0,0 +1,21 @@
+import { useBoard } from "@/context/board";
+
+export const TextStatus = () => {
+  const { reveal, totalChoices, totalPlayers } = useBoard();
+
+  let text = `${totalChoices} de ${totalPlayers} votos 🗳️`;
+
+  if (totalChoices === 0) {
+    text = "Ninguém escolheu ainda... 😴";
+  }
+
+  if (totalChoices === totalPlayers) {
+    text = "Todos escolheram! 🎉";
+  }
+
+  if (reveal) {
+    text = "Revelado!";
+  }
+
+  return <span className="text-sm text-gray-500">{text}</span>;
+};

context/board.tsx

@@ -14,6 +14,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -26,6 +27,8 @@ type BoardContextProps = {
   reveal: boolean;
   choiceOptions: ChoiceOptions;
   selfChoice?: string | null;
+  totalPlayers: number;
+  totalChoices: number;
   handleChoice: (choice: string) => Promise<void>;
   handleRevealCards: () => Promise<void>;
   handleReset: () => Promise<void>;
@@ -121,6 +124,17 @@ export const BoardProvider = ({
     };
   }, []);
 
+  const totalChoices = useMemo(() => {
+    const othersSum =
+      boardStatus?.others.reduce((acc, player) => {
+        return player.choice ? acc + 1 : acc;
+      }, 0) ?? 0;
+
+    if (!boardStatus?.self.choice) return othersSum;
+
+    return othersSum + 1;
+  }, [boardStatus?.others, boardStatus?.self.choice]);
+
   const handleNotification = async () => {
     if (!boardStatus?.self.notified) return;
 
@@ -181,13 +195,17 @@ export const BoardProvider = ({
     });
   };
 
+  const totalPlayers = boardStatus?.others.length + 1;
+
   return (
     <BoardContext.Provider
       value={{
         roomId,
         ...boardStatus,
         choiceOptions: fibonacciChoiceOptions,
         reveal: revealOptimistc,
+        totalChoices,
+        totalPlayers,
         selfChoice,
         handleChoice,
         handleRevealCards,

hooks/use-is-mobile.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return isMobile;
+}

use-cases/board/choice-options.ts

@@ -7,8 +7,10 @@ export const fibonacciChoiceOptions: ChoiceOptions = [
   { value: "5", label: "5" },
   { value: "8", label: "8" },
   { value: "13", label: "13" },
-  { value: "20", label: "20" },
-  { value: "40", label: "40" },
+  { value: "21", label: "21" },
+  { value: "34", label: "34" },
+  { value: "55", label: "55" },
+  { value: "89", label: "89" },
   { value: "☕", label: "☕" },
   { value: "?", label: "?" },
 ];

use-cases/player/convert-choice.ts

@@ -0,0 +1,3 @@
+export function convertChoice(playerChoice: string) {
+  return Buffer.from(playerChoice, "base64").toString();
+}