diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..633a125 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +indent_style = tab +indent_size = 4 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = false +insert_final_newline = false \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..1035938 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 4, + "useTabs": true, + "semi": true +} diff --git a/app/api/discovery/omni-recommendation/route.ts b/app/api/discovery/omni-recommendation/route.ts new file mode 100644 index 0000000..ef15d14 --- /dev/null +++ b/app/api/discovery/omni-recommendation/route.ts @@ -0,0 +1,52 @@ +import { type NextRequest, NextResponse } from "next/server" + +export async function GET(request: NextRequest) { + const { searchParams } = new URL(request.url); + const apiUrl = "https://apis.roblox.com/discovery-api/omni-recommendation"; + + const url = `${apiUrl}?${searchParams.toString()}`; + + try { + const response = await fetch(url, { + headers: { + "User-Agent": "OCbwoy3ChanAI/1.0", + "Accept": "application/json, text/plain, */*", + "Accept-Encoding": "gzip, deflate, br, zstd", + "Content-Type": "application/json;charset=UTF-8", + "Cookie": request.headers.get("Authorization") || "", + }, + }); + + return NextResponse.json(await response.json()); + } catch (error) { + console.error("Error proxying request:", error); + return NextResponse.json({ error: "Internal Server Error" }); + } +} + +export async function POST(request: NextRequest) { + const { searchParams } = new URL(request.url); + const apiUrl = "https://apis.roblox.com/discovery-api/omni-recommendation"; + const url = `${apiUrl}?${searchParams.toString()}`; + + try { + const body = await request.json() + const response = await fetch(url, { + method: "POST", + headers: { + "User-Agent": "OCbwoy3ChanAI/1.0", + "Accept": "application/json, text/plain, */*", + "Accept-Encoding": "gzip, deflate, br, zstd", + "Content-Type": "application/json;charset=UTF-8", + "Cookie": request.headers.get("Authorization") || "", + }, + body: JSON.stringify(body), + }); + + return NextResponse.json(await response.json()); + } catch (error) { + console.error("Error proxying request:", error); + return NextResponse.json({ error: "Internal Server Error" }); + } +} + diff --git a/app/api/thumbnails/batch/route.ts b/app/api/thumbnails/batch/route.ts new file mode 100644 index 0000000..2d0a12c --- /dev/null +++ b/app/api/thumbnails/batch/route.ts @@ -0,0 +1,52 @@ +import { type NextRequest, NextResponse } from "next/server" + +export async function GET(request: NextRequest) { + const { searchParams } = new URL(request.url); + const apiUrl = "https://thumbnails.roblox.com/v1/batch"; + + const url = `${apiUrl}?${searchParams.toString()}`; + + try { + const response = await fetch(url, { + headers: { + "User-Agent": "OCbwoy3ChanAI/1.0", + "Accept": "application/json, text/plain, */*", + "Accept-Encoding": "gzip, deflate, br, zstd", + "Content-Type": "application/json;charset=UTF-8", + "Cookie": request.headers.get("Authorization") || "", + }, + }); + + return NextResponse.json(await response.json()); + } catch (error) { + console.error("Error proxying request:", error); + return NextResponse.json({ error: "Internal Server Error" }); + } +} + +export async function POST(request: NextRequest) { + const { searchParams } = new URL(request.url); + const apiUrl = "https://thumbnails.roblox.com/v1/batch"; + const url = `${apiUrl}?${searchParams.toString()}`; + + try { + const body = await request.json() + const response = await fetch(url, { + method: "POST", + headers: { + "User-Agent": "OCbwoy3ChanAI/1.0", + "Accept": "application/json, text/plain, */*", + "Accept-Encoding": "gzip, deflate, br, zstd", + "Content-Type": "application/json;charset=UTF-8", + "Cookie": request.headers.get("Authorization") || "", + }, + body: JSON.stringify(body), + }); + + return NextResponse.json(await response.json()); + } catch (error) { + console.error("Error proxying request:", error); + return NextResponse.json({ error: "Internal Server Error" }); + } +} + diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/globals.css b/app/globals.css index 6b717ad..a4d605b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,20 +2,98 @@ @tailwind components; @tailwind utilities; -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; + font-family: Arial, Helvetica, sans-serif; +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + +/* https://dev.to/derick1530/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar-4mbd */ +@layer utilities { + .no-scrollbar::-webkit-scrollbar { + display: none; + } + .no-scrollbar { + -ms-overflow-style: none; + scrollbar-width: 0; + } } diff --git a/app/page.tsx b/app/page.tsx index 9007252..09233ec 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,101 +1,78 @@ -import Image from "next/image"; +"use client"; + +import { GameCard } from "@/components/gameCard"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { + getOmniRecommendationsHome, + OmniRecommendation, +} from "@/lib/omniRecommendation"; +import { loadThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader"; +import { useEffect, useState } from "react"; export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
+ const [rec, setRec] = useState(null); + const SORTS_ALLOWED_IDS = [100000003, 100000001]; + useEffect(() => { + (async () => { + const r = await getOmniRecommendationsHome(); + console.log("[ROBLOX]", "got omni recommendation from api", r); + let th: ThumbnailRequest[] = []; + r.sorts.filter(a=>SORTS_ALLOWED_IDS.includes(a.topicId)).forEach(b=>{ + (b.recommendationList || []).forEach(c=>{ + th.push({ + type: "GameThumbnail", + targetId: r.contentMetadata.Game[c.contentId.toString()].rootPlaceId, + format: "webp", + size: "384x216" + }) + }) + }); + loadThumbnails(th).catch(a=>console.error(a)) + setRec(r); + })(); + }, []); -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
- ); + if (!rec) { + return ( +
+ + +
+
+ Loading... +
+
+ + +
+ ); + } + + return ( +
+ {"roblox x next.js when"} +
+ {"experimental (functional) roblox.com clone"} +
+ {rec.sorts + .filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId)) + .map((sort, idx) => ( +
+

{sort.topic}

+
+ {(sort.recommendationList || []).map( + (recommendation, idxb) => { + const game = + rec.contentMetadata.Game[ + recommendation.contentId.toString() + ]; + return ; + } + )} +
+
+ ))} +
+
+ ); } diff --git a/bun.lockb b/bun.lockb index da9d983..7856b31 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components.json b/components.json new file mode 100644 index 0000000..dea737b --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/components/gameCard.tsx b/components/gameCard.tsx new file mode 100644 index 0000000..9f83944 --- /dev/null +++ b/components/gameCard.tsx @@ -0,0 +1,64 @@ +import { useGameThumbnailLazyLoad } from "@/hooks/use-lazy-load"; +import { ContentMetadata } from "@/lib/omniRecommendation"; +import LazyLoadedImage from "./lazyLoadedImage"; +import { ContextMenu, ContextMenuContent, ContextMenuSeparator, ContextMenuTrigger } from "./ui/context-menu"; +import { ContextMenuItem } from "@radix-ui/react-context-menu"; + +interface GameCardProps { + game: ContentMetadata; +} + +export function GameCard({ game }: GameCardProps) { + return ( + + +
+
+ {game.primaryMediaAsset ? ( + + ) : ( +
+ No image +
+ )} +
+
+ {game.playerCount.toLocaleString()} +
+
+ + + + {game.name} + + + {Math.round((game.totalUpVotes/(game.totalUpVotes+game.totalDownVotes))*100)}% rating - {game.playerCount} players + + + {window.location.href = (`https://roblox.com/games/${game.rootPlaceId}`)}}> + Open + + {window.location.href = (`roblox://placeId=${game.rootPlaceId}`)}}> + Play + + + {navigator.clipboard.writeText(`https://roblox.com/games/${game.rootPlaceId}`)}}> + copy game url + + {navigator.clipboard.writeText(`${game.rootPlaceId}`)}}> + copy game id + + {navigator.clipboard.writeText(`${game.universeId}`)}}> + copy universe id + + {navigator.clipboard.writeText(`roblox://placeId=${game.rootPlaceId}`)}}> + copy roblox:// uri + + + + ); +} diff --git a/components/lazyLoadedImage.tsx b/components/lazyLoadedImage.tsx new file mode 100644 index 0000000..55b2dee --- /dev/null +++ b/components/lazyLoadedImage.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { useGameThumbnailLazyLoad } from '@/hooks/use-lazy-load'; + +interface LazyLoadedImageProps { + imgId: string; + alt: string; + [prop: string]: string +} + +const LazyLoadedImage: React.FC = ({ imgId, alt, ...props }: LazyLoadedImageProps) => { + const imgUrl = useGameThumbnailLazyLoad(imgId); + + return ( +
+ {imgUrl ? ( + {alt} + ) : ( +

Loading...

+ )} +
+ ); +}; + +export default LazyLoadedImage; \ No newline at end of file diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..2f55a32 --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,57 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..57760f2 --- /dev/null +++ b/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx new file mode 100644 index 0000000..5afd41d --- /dev/null +++ b/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..d6a5226 --- /dev/null +++ b/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx new file mode 100644 index 0000000..e87d62b --- /dev/null +++ b/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>