diff --git a/app/games/[id]/content.tsx b/app/games/[id]/content.tsx index ebf8fce..953a320 100644 --- a/app/games/[id]/content.tsx +++ b/app/games/[id]/content.tsx @@ -74,7 +74,7 @@ export default function GamePageContent({ return (
-
+
diff --git a/bun.lock b/bun.lock index af0fe7b..b97934d 100644 --- a/bun.lock +++ b/bun.lock @@ -5,7 +5,8 @@ "": { "name": "roblox", "dependencies": { - "@catppuccin/tailwindcss": "^1.0.0", + "@catppuccin/palette": "^1.7.1", + "@catppuccin/tailwindcss": "0.1.6", "@hookform/resolvers": "^5.2.2", "@ocbwoy3/libocbwoy3": "^0.0.6", "@radix-ui/react-accordion": "^1.2.12", @@ -76,7 +77,9 @@ "packages": { "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="], - "@catppuccin/tailwindcss": ["@catppuccin/tailwindcss@1.0.0", "", {}, "sha512-l8pOlcYe2ncGd8a1gUmL5AHmKlxR2+CHuG5kt4Me6IZwzntW1DoLmj89BH+DcsPHBsdDGLrTSv35emlYyU3FeQ=="], + "@catppuccin/palette": ["@catppuccin/palette@1.7.1", "", {}, "sha512-aRc1tbzrevOTV7nFTT9SRdF26w/MIwT4Jwt4fDMc9itRZUDXCuEDBLyz4TQMlqO9ZP8mf5Hu4Jr6D03NLFc6Gw=="], + + "@catppuccin/tailwindcss": ["@catppuccin/tailwindcss@0.1.6", "", { "peerDependencies": { "tailwindcss": ">=3.0.0" } }, "sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA=="], "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="], diff --git a/components/roblox/GameCard.tsx b/components/roblox/GameCard.tsx index b1a3aeb..088e0da 100644 --- a/components/roblox/GameCard.tsx +++ b/components/roblox/GameCard.tsx @@ -14,13 +14,34 @@ import Link from "next/link"; import { useGameLaunch } from "@/components/providers/GameLaunchProvider"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import GamePageContent from "@/app/games/[id]/content"; -import { Maximize2 } from "lucide-react"; +import { Maximize2, ThumbsUp, User } from "lucide-react"; import { useRouter } from "next/navigation"; interface GameCardProps { game: ContentMetadata; } +const formatPlayerCount = (count: number) => { + if (count <= 1000) { + return count.toLocaleString(); + } + + const units = [ + { value: 1_000_000_000, suffix: "B" }, + { value: 1_000_000, suffix: "M" }, + { value: 1_000, suffix: "K" } + ]; + + const unit = units.find(({ value }) => count >= value); + if (!unit) { + return count.toLocaleString(); + } + + const scaled = count / unit.value; + const digits = scaled < 10 ? 1 : 0; + return `${scaled.toFixed(digits).replace(/\.0$/, "")}${unit.suffix}`; +}; + export const GameCard = React.memo(function GameCard({ game }: GameCardProps) { const { launchGame } = useGameLaunch(); const totalVotes = game.totalUpVotes + game.totalDownVotes; @@ -32,81 +53,52 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) { return ( - - - - - - - Open - - { - launchGame(game.rootPlaceId.toString()); - }} - > - Play - - - { - navigator.clipboard.writeText( - `${game.rootPlaceId}` - ); - }} - > - Copy placeId - - { - navigator.clipboard.writeText(`${game.universeId}`); - }} - > - Copy universeId - - - +
+
+
+

+ {game.name} +

+

+ + {" "} + {rating}% + + + {" "} + {formatPlayerCount(game.playerCount)} + +

+
+
+