From dbffb095ab53974949347ab77ddb175db70016d7 Mon Sep 17 00:00:00 2001 From: ItaloMedici <59889993+ItaloMedici@users.noreply.github.com> Date: Thu, 22 Aug 2024 11:39:54 -0300 Subject: [PATCH 1/2] feat: create board status --- .../{board-toolbar.tsx => board-dock.tsx} | 22 ++++++++++----- .../room/[roomId]/_components/board.tsx | 8 ++++-- .../room/[roomId]/_components/deck.tsx | 27 ++++++++++++++++--- .../room/[roomId]/_components/player-card.tsx | 7 +---- .../room/[roomId]/_components/text-status.tsx | 21 +++++++++++++++ context/board.tsx | 18 +++++++++++++ hooks/use-is-mobile.ts | 16 +++++++++++ use-cases/player/convert-choice.ts | 3 +++ 8 files changed, 105 insertions(+), 17 deletions(-) rename app/(dashboard)/room/[roomId]/_components/{board-toolbar.tsx => board-dock.tsx} (74%) create mode 100644 app/(dashboard)/room/[roomId]/_components/text-status.tsx create mode 100644 hooks/use-is-mobile.ts create mode 100644 use-cases/player/convert-choice.ts diff --git a/app/(dashboard)/room/[roomId]/_components/board-toolbar.tsx b/app/(dashboard)/room/[roomId]/_components/board-dock.tsx similarity index 74% rename from app/(dashboard)/room/[roomId]/_components/board-toolbar.tsx rename to app/(dashboard)/room/[roomId]/_components/board-dock.tsx index de002fe..81c0b71 100644 --- a/app/(dashboard)/room/[roomId]/_components/board-toolbar.tsx +++ b/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,11 +33,17 @@ 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", }); } @@ -41,7 +51,7 @@ export const BoardToolbar = () => {
{avatarList.map((player, index) => ( 0, })} diff --git a/app/(dashboard)/room/[roomId]/_components/board.tsx b/app/(dashboard)/room/[roomId]/_components/board.tsx index 0df579f..bacf39e 100644 --- a/app/(dashboard)/room/[roomId]/_components/board.tsx +++ b/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 (
- +
+ + +
diff --git a/app/(dashboard)/room/[roomId]/_components/deck.tsx b/app/(dashboard)/room/[roomId]/_components/deck.tsx index dc4c73e..1d024eb 100644 --- a/app/(dashboard)/room/[roomId]/_components/deck.tsx +++ b/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 ( -
+
{players.map((player) => ( ))} diff --git a/app/(dashboard)/room/[roomId]/_components/player-card.tsx b/app/(dashboard)/room/[roomId]/_components/player-card.tsx index 14385ce..f0aa7f7 100644 --- a/app/(dashboard)/room/[roomId]/_components/player-card.tsx +++ b/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) => { ) : ( { + 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 {text}; +}; diff --git a/context/board.tsx b/context/board.tsx index dfb21e3..c1f925e 100644 --- a/context/board.tsx +++ b/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; handleRevealCards: () => Promise; handleReset: () => Promise; @@ -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,6 +195,8 @@ export const BoardProvider = ({ }); }; + const totalPlayers = boardStatus?.others.length + 1; + return ( { + const handleResize = () => { + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + }; + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + return isMobile; +} diff --git a/use-cases/player/convert-choice.ts b/use-cases/player/convert-choice.ts new file mode 100644 index 0000000..0b7136b --- /dev/null +++ b/use-cases/player/convert-choice.ts @@ -0,0 +1,3 @@ +export function convertChoice(playerChoice: string) { + return Buffer.from(playerChoice, "base64").toString(); +} From bc850c655957ea5bdc79652e0b81891a6f464220 Mon Sep 17 00:00:00 2001 From: ItaloMedici <59889993+ItaloMedici@users.noreply.github.com> Date: Thu, 22 Aug 2024 11:40:19 -0300 Subject: [PATCH 2/2] fix: adjust fibonacci options --- use-cases/board/choice-options.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/use-cases/board/choice-options.ts b/use-cases/board/choice-options.ts index a1151ee..101c763 100644 --- a/use-cases/board/choice-options.ts +++ b/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: "?" }, ];