kris/roblox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switched theme

Browse Source
This commit is contained in:
Kris
2025-02-14 19:43:05 +02:00
parent 9ddf068049
commit cb2b4f0d86
13 changed files with 267 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/api/user/authenticated/route.ts Normal file
View File

@@ -0,0 +1,25 @@
import { type NextRequest, NextResponse } from "next/server"
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const apiUrl = "https://users.roblox.com/v1/users/authenticated";
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" });
}
}

23
app/api/user/route.ts Normal file
View File

@@ -0,0 +1,23 @@
import { NextRequest, NextResponse } from 'next/server';
export async function GET(request: NextRequest) {
const u = new URL(request.url);
const apiUrl = `https://users.roblox.com/v1/users/${u.searchParams.get("id")}`;
try {
const response = await fetch(apiUrl, {
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" });
}
}

93
app/globals.css
View File

@@ -8,31 +8,42 @@ body {
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 240 21.052631735801697% 14.901961386203766%; /* base */
--foreground: 0 0% 3.9%; --foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%; --muted: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--popover: 0 0% 100%; --muted-foreground: 227 35.29411852359772% 80.0000011920929%; /* subtext1 */
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%; --popover: 240 21.052631735801697% 14.901961386203766%; /* base */
--primary-foreground: 0 0% 98%; --popover-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%; --card: 240 21.052631735801697% 14.901961386203766%; /* base */
--muted: 0 0% 96.1%; --card-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%; --border: 234 13.20754736661911% 31.176471710205078%; /* surface1 */
--accent-foreground: 0 0% 9%; --input: 234 13.20754736661911% 31.176471710205078%; /* surface1 */
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --primary: 217 91.86992049217224% 75.88235139846802%; /* accent - Blue */
--border: 0 0% 89.8%; --primary-foreground: 240 21.052631735801697% 14.901961386203766%; /* base */
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%; --secondary: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--chart-1: 12 76% 61%; --secondary-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%; --accent: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--chart-4: 43 74% 66%; --accent-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--chart-5: 27 87% 67%;
--destructive: 343 81.25% 74.90196228027344%; /* red */
--destructive-foreground: 240 21.311475336551666% 11.96078434586525%; /* mantle */
--ring: 226 63.93442749977112% 88.03921341896057%; /* text */
--radius: 0.5rem; --radius: 0.5rem;
--chart-1: 343 81.25% 74.90196228027344%; /* red */
--chart-2: 170 57.35294222831726% 73.33333492279053%; /* teal */
--chart-3: 217 91.86992049217224% 75.88235139846802%; /* blue */
--chart-4: 41 86.04651093482971% 83.13725590705872%; /* yellow */
--chart-5: 115 54.09836173057556% 76.07843279838562%; /* green */
--sidebar-background: 0 0% 98%; --sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%; --sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%; --sidebar-primary: 240 5.9% 10%;
@@ -42,40 +53,6 @@ body {
--sidebar-border: 220 13% 91%; --sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%; --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 { @layer base {

10
app/page.tsx
View File

@@ -1,11 +1,13 @@
"use client"; "use client";
import { GameCard } from "@/components/gameCard"; import { GameCard } from "@/components/gameCard";
import { HomeLoggedInHeader } from "@/components/loggedInHeader";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { import {
getOmniRecommendationsHome, getOmniRecommendationsHome,
OmniRecommendation, OmniRecommendation,
} from "@/lib/omniRecommendation"; } from "@/lib/omniRecommendation";
import { getCookie } from "@/lib/roblox";
import { loadThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader"; import { loadThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -27,8 +29,8 @@ export default function Home() {
}) })
}) })
}); });
loadThumbnails(th).catch(a=>console.error(a))
setRec(r); setRec(r);
loadThumbnails(th).catch(a=>console.error(a))
})(); })();
}, []); }, []);
@@ -50,9 +52,9 @@ export default function Home() {
return ( return (
<div className="overflow-scroll no-scrollbar w-screen max-h-screen h-screen"> <div className="overflow-scroll no-scrollbar w-screen max-h-screen h-screen">
{"roblox x next.js when"} <HomeLoggedInHeader/>
<br/> {"roblox in nextjs"}<br/>
{"experimental (functional) roblox.com clone"} <span className="font-mono">{"require(\"@/lib/roblox\").getCookie().length = "}{getCookie().length}{";"}</span>
<div className="p-4 space-y-8 no-scrollbar"> <div className="p-4 space-y-8 no-scrollbar">
{rec.sorts {rec.sorts
.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId)) .filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))

BIN
bun.lockb
View File

Binary file not shown.

4
components/gameCard.tsx
View File

@@ -1,4 +1,4 @@
import { useGameThumbnailLazyLoad } from "@/hooks/use-lazy-load"; import { useThumbnailLazyLoad } from "@/hooks/use-lazy-load";
import { ContentMetadata } from "@/lib/omniRecommendation"; import { ContentMetadata } from "@/lib/omniRecommendation";
import LazyLoadedImage from "./lazyLoadedImage"; import LazyLoadedImage from "./lazyLoadedImage";
import { ContextMenu, ContextMenuContent, ContextMenuSeparator, ContextMenuTrigger } from "./ui/context-menu"; import { ContextMenu, ContextMenuContent, ContextMenuSeparator, ContextMenuTrigger } from "./ui/context-menu";
@@ -16,7 +16,7 @@ export function GameCard({ game }: GameCardProps) {
<div className="overflow-hidden"> <div className="overflow-hidden">
{game.primaryMediaAsset ? ( {game.primaryMediaAsset ? (
<LazyLoadedImage <LazyLoadedImage
imgId={game.rootPlaceId.toString()} imgId={'GameThumbnail_'+game.rootPlaceId.toString()}
alt={game.name} alt={game.name}
className="object-cover w-full h-full" className="object-cover w-full h-full"
/> />

4
components/lazyLoadedImage.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { useGameThumbnailLazyLoad } from '@/hooks/use-lazy-load'; import { useThumbnailLazyLoad } from '@/hooks/use-lazy-load';
interface LazyLoadedImageProps { interface LazyLoadedImageProps {
imgId: string; imgId: string;
@@ -8,7 +8,7 @@ interface LazyLoadedImageProps {
} }
const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({ imgId, alt, ...props }: LazyLoadedImageProps) => { const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({ imgId, alt, ...props }: LazyLoadedImageProps) => {
const imgUrl = useGameThumbnailLazyLoad(imgId); const imgUrl = useThumbnailLazyLoad(imgId);
return ( return (
<div> <div>

31
components/loggedInHeader.tsx Normal file
View File

@@ -0,0 +1,31 @@
import {
getLoggedInUser,
getUserByUserId,
UserProfileDetails,
} from "@/lib/profile";
import { useEffect, useState } from "react";
export function HomeLoggedInHeader() {
const [profileDetails, setProfileDetails] =
useState<UserProfileDetails | null>(null);
useEffect(() => {
(async () => {
const authed = await getLoggedInUser();
setProfileDetails(await getUserByUserId(authed.id.toString()));
})();
}, []);
if (!profileDetails) {
return (<></>)
}
return (
<div>
<span className="text-xl">Hello, {profileDetails.displayName}</span>
<span className="text-muted-foreground text-sm text-blue">{"@"}{profileDetails.name}</span>
<br/>
{profileDetails.id}
</div>
);
}

4
hooks/use-lazy-load.ts
View File

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
let gameImages: { [id: string]: string } = {}; let gameImages: { [id: string]: string } = {};
export function useGameThumbnailLazyLoad(img: string) { export function useThumbnailLazyLoad(img: string) {
const [status, setStatus] = useState<string | undefined>(undefined); const [status, setStatus] = useState<string | undefined>(undefined);
useEffect(() => { useEffect(() => {
@@ -19,6 +19,6 @@ export function useGameThumbnailLazyLoad(img: string) {
return status; return status;
} }
export function addGameThumbnail(id: string, url: string) { export function addThumbnail(id: string, url: string) {
gameImages[id] = url; gameImages[id] = url;
} }

40
lib/profile.ts Normal file
View File

@@ -0,0 +1,40 @@
import { getCookie } from "./roblox"
export type UserProfileDetails = {
description: string,
created: Date,
isBanned: boolean,
externalAppDisplayName: string,
hasVerifiedBadge: boolean,
id: number,
name: string,
displayName: string
}
export async function getLoggedInUser(): Promise<{
id: number,
name: string,
displayName: string
}> {
const data = await fetch(`${document.baseURI}api/user/authenticated`, {
method: "GET",
headers: {
Authorization: `${getCookie()}`
},
})
return (await data.json() as any) as {
id: number,
name: string,
displayName: string
}
}
export async function getUserByUserId(userid: string): Promise<UserProfileDetails> {
const data = await fetch(`${document.baseURI}api/user?id=${userid}`, {
method: "GET",
headers: {
Authorization: `${getCookie()}`
},
})
return (await data.json() as any) as UserProfileDetails
}

6
lib/thumbnailLoader.ts
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { addGameThumbnail } from "@/hooks/use-lazy-load"; import { addThumbnail } from "@/hooks/use-lazy-load";
import { getCookie } from "./roblox"; import { getCookie } from "./roblox";
export type AssetThumbnail = { export type AssetThumbnail = {
@@ -45,7 +45,9 @@ export async function getThumbnails(b: ThumbnailRequest[]): Promise<AssetThumbna
export async function loadThumbnails(b: ThumbnailRequest[]): Promise<void> { export async function loadThumbnails(b: ThumbnailRequest[]): Promise<void> {
const th = await getThumbnails(b); const th = await getThumbnails(b);
th.forEach(a=>{ th.forEach(a=>{
addGameThumbnail(a.targetId.toString(), a.imageUrl) // match GameThumbnail from 4972273297::GameThumbnail:384x216:webp:regular and any like- string
const ty = b.find(c=>c.targetId==a.targetId)!
addThumbnail(ty.type+'_'+a.targetId.toString(), a.imageUrl)
}) })
} }

1
package.json
View File

@@ -9,6 +9,7 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@catppuccin/tailwindcss": "^0.1.6",
"@hookform/resolvers": "^4.0.0", "@hookform/resolvers": "^4.0.0",
"@radix-ui/react-accordion": "^1.2.3", "@radix-ui/react-accordion": "^1.2.3",
"@radix-ui/react-alert-dialog": "^1.1.6", "@radix-ui/react-alert-dialog": "^1.1.6",

186
tailwind.config.ts
View File

@@ -1,94 +1,100 @@
import type { Config } from "tailwindcss"; import type { Config } from "tailwindcss";
export default { export default {
darkMode: ["class"], darkMode: ["class"],
content: [ content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
theme: { theme: {
extend: { extend: {
colors: { colors: {
background: 'hsl(var(--background))', background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))', foreground: 'hsl(var(--foreground))',
card: { card: {
DEFAULT: 'hsl(var(--card))', DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))' foreground: 'hsl(var(--card-foreground))'
}, },
popover: { popover: {
DEFAULT: 'hsl(var(--popover))', DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))' foreground: 'hsl(var(--popover-foreground))'
}, },
primary: { primary: {
DEFAULT: 'hsl(var(--primary))', DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))' foreground: 'hsl(var(--primary-foreground))'
}, },
secondary: { secondary: {
DEFAULT: 'hsl(var(--secondary))', DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))' foreground: 'hsl(var(--secondary-foreground))'
}, },
muted: { muted: {
DEFAULT: 'hsl(var(--muted))', DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))' foreground: 'hsl(var(--muted-foreground))'
}, },
accent: { accent: {
DEFAULT: 'hsl(var(--accent))', DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))' foreground: 'hsl(var(--accent-foreground))'
}, },
destructive: { destructive: {
DEFAULT: 'hsl(var(--destructive))', DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))' foreground: 'hsl(var(--destructive-foreground))'
}, },
border: 'hsl(var(--border))', border: 'hsl(var(--border))',
input: 'hsl(var(--input))', input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))', ring: 'hsl(var(--ring))',
chart: { chart: {
'1': 'hsl(var(--chart-1))', '1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))', '2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))', '3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))', '4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))' '5': 'hsl(var(--chart-5))'
}, },
sidebar: { sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))', DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))', foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))', primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))', accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))', border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))' ring: 'hsl(var(--sidebar-ring))'
} }
}, },
borderRadius: { borderRadius: {
lg: 'var(--radius)', lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)', md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)' sm: 'calc(var(--radius) - 4px)'
}, },
keyframes: { keyframes: {
'accordion-down': { 'accordion-down': {
from: { from: {
height: '0' height: '0'
}, },
to: { to: {
height: 'var(--radix-accordion-content-height)' height: 'var(--radix-accordion-content-height)'
} }
}, },
'accordion-up': { 'accordion-up': {
from: { from: {
height: 'var(--radix-accordion-content-height)' height: 'var(--radix-accordion-content-height)'
}, },
to: { to: {
height: '0' height: '0'
} }
} }
}, },
animation: { animation: {
'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out' 'accordion-up': 'accordion-up 0.2s ease-out'
} }
} }
}, },
plugins: [require("tailwindcss-animate")], plugins: [
require("tailwindcss-animate"),
require("@catppuccin/tailwindcss")({
prefix: false,
defaultFlavour: "mocha"
})
],
} satisfies Config; } satisfies Config;