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 {
: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%;
--background: 240 21.052631735801697% 14.901961386203766%; /* base */
--foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--muted: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--muted-foreground: 227 35.29411852359772% 80.0000011920929%; /* subtext1 */
--popover: 240 21.052631735801697% 14.901961386203766%; /* base */
--popover-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--card: 240 21.052631735801697% 14.901961386203766%; /* base */
--card-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--border: 234 13.20754736661911% 31.176471710205078%; /* surface1 */
--input: 234 13.20754736661911% 31.176471710205078%; /* surface1 */
--primary: 217 91.86992049217224% 75.88235139846802%; /* accent - Blue */
--primary-foreground: 240 21.052631735801697% 14.901961386203766%; /* base */
--secondary: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--secondary-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--accent: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--accent-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */
--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;
--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-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
@@ -42,40 +53,6 @@ body {
--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 {

10
app/page.tsx
View File

@@ -1,11 +1,13 @@
"use client";
import { GameCard } from "@/components/gameCard";
import { HomeLoggedInHeader } from "@/components/loggedInHeader";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
getOmniRecommendationsHome,
OmniRecommendation,
} from "@/lib/omniRecommendation";
import { getCookie } from "@/lib/roblox";
import { loadThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
import { useEffect, useState } from "react";
@@ -27,8 +29,8 @@ export default function Home() {
})
})
});
loadThumbnails(th).catch(a=>console.error(a))
setRec(r);
loadThumbnails(th).catch(a=>console.error(a))
})();
}, []);
@@ -50,9 +52,9 @@ export default function Home() {
return (
<div className="overflow-scroll no-scrollbar w-screen max-h-screen h-screen">
{"roblox x next.js when"}
<br/>
{"experimental (functional) roblox.com clone"}
<HomeLoggedInHeader/>
{"roblox in nextjs"}<br/>
<span className="font-mono">{"require(\"@/lib/roblox\").getCookie().length = "}{getCookie().length}{";"}</span>
<div className="p-4 space-y-8 no-scrollbar">
{rec.sorts
.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 LazyLoadedImage from "./lazyLoadedImage";
import { ContextMenu, ContextMenuContent, ContextMenuSeparator, ContextMenuTrigger } from "./ui/context-menu";
@@ -16,7 +16,7 @@ export function GameCard({ game }: GameCardProps) {
<div className="overflow-hidden">
{game.primaryMediaAsset ? (
<LazyLoadedImage
imgId={game.rootPlaceId.toString()}
imgId={'GameThumbnail_'+game.rootPlaceId.toString()}
alt={game.name}
className="object-cover w-full h-full"
/>

4
components/lazyLoadedImage.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { useGameThumbnailLazyLoad } from '@/hooks/use-lazy-load';
import { useThumbnailLazyLoad } from '@/hooks/use-lazy-load';
interface LazyLoadedImageProps {
imgId: string;
@@ -8,7 +8,7 @@ interface LazyLoadedImageProps {
}
const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({ imgId, alt, ...props }: LazyLoadedImageProps) => {
const imgUrl = useGameThumbnailLazyLoad(imgId);
const imgUrl = useThumbnailLazyLoad(imgId);
return (
<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 } = {};
export function useGameThumbnailLazyLoad(img: string) {
export function useThumbnailLazyLoad(img: string) {
const [status, setStatus] = useState<string | undefined>(undefined);
useEffect(() => {
@@ -19,6 +19,6 @@ export function useGameThumbnailLazyLoad(img: string) {
return status;
}
export function addGameThumbnail(id: string, url: string) {
export function addThumbnail(id: string, url: string) {
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";
import { addGameThumbnail } from "@/hooks/use-lazy-load";
import { addThumbnail } from "@/hooks/use-lazy-load";
import { getCookie } from "./roblox";
export type AssetThumbnail = {
@@ -45,7 +45,9 @@ export async function getThumbnails(b: ThumbnailRequest[]): Promise<AssetThumbna
export async function loadThumbnails(b: ThumbnailRequest[]): Promise<void> {
const th = await getThumbnails(b);
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"
},
"dependencies": {
"@catppuccin/tailwindcss": "^0.1.6",
"@hookform/resolvers": "^4.0.0",
"@radix-ui/react-accordion": "^1.2.3",
"@radix-ui/react-alert-dialog": "^1.1.6",

8
tailwind.config.ts
View File

@@ -90,5 +90,11 @@ export default {
}
}
},
plugins: [require("tailwindcss-animate")],
plugins: [
require("tailwindcss-animate"),
require("@catppuccin/tailwindcss")({
prefix: false,
defaultFlavour: "mocha"
})
],
} satisfies Config;