feat: add steam game search
This commit is contained in:
@@ -14,6 +14,9 @@ import {
|
|||||||
presetSettingsRoutes,
|
presetSettingsRoutes,
|
||||||
commentsRoutes,
|
commentsRoutes,
|
||||||
} from "@/lib/api"
|
} from "@/lib/api"
|
||||||
|
import { steamSearchRoutes } from "@/lib/api/steam-search"
|
||||||
|
import { searchUnifiedRoutes } from "@/lib/api/search-unified"
|
||||||
|
import { gameStubRoutes } from "@/lib/api/game-stub"
|
||||||
|
|
||||||
const betterAuth = new Elysia({ name: "better-auth" })
|
const betterAuth = new Elysia({ name: "better-auth" })
|
||||||
.mount(auth.handler)
|
.mount(auth.handler)
|
||||||
@@ -65,6 +68,12 @@ export const app = new Elysia({ prefix: "/api" })
|
|||||||
.use(presetSettingsRoutes)
|
.use(presetSettingsRoutes)
|
||||||
// Comments
|
// Comments
|
||||||
.use(commentsRoutes)
|
.use(commentsRoutes)
|
||||||
|
// Steam search proxy
|
||||||
|
.use(steamSearchRoutes)
|
||||||
|
// Unified search
|
||||||
|
.use(searchUnifiedRoutes)
|
||||||
|
// Game stub creation
|
||||||
|
.use(gameStubRoutes)
|
||||||
// Root
|
// Root
|
||||||
.get("/", () => ({
|
.get("/", () => ({
|
||||||
name: "DeckyVault API",
|
name: "DeckyVault API",
|
||||||
|
|||||||
@@ -0,0 +1,360 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import Image from "next/image"
|
||||||
|
import {
|
||||||
|
Gamepad2Icon,
|
||||||
|
MessageSquareIcon,
|
||||||
|
SettingsIcon,
|
||||||
|
TrendingUpIcon,
|
||||||
|
ExternalLinkIcon,
|
||||||
|
ClockIcon,
|
||||||
|
} from "lucide-react"
|
||||||
|
|
||||||
|
interface Game {
|
||||||
|
id: string
|
||||||
|
steamAppId: number | null
|
||||||
|
title: string
|
||||||
|
description: string | null
|
||||||
|
developer: string | null
|
||||||
|
publisher: string | null
|
||||||
|
genres: string[] | null
|
||||||
|
headerImage: string | null
|
||||||
|
capsuleImage: string | null
|
||||||
|
storeUrl: string | null
|
||||||
|
source: string
|
||||||
|
lastSync: string | null
|
||||||
|
syncStatus: string | null
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Counts {
|
||||||
|
benchmarks: number
|
||||||
|
presets: number
|
||||||
|
comments: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PlatformSupport {
|
||||||
|
id: string
|
||||||
|
gameId: string
|
||||||
|
hardwareSlug: string
|
||||||
|
isSupported: boolean
|
||||||
|
protonStatus: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const TABS = [
|
||||||
|
{ key: "overview", label: "Overview", icon: Gamepad2Icon },
|
||||||
|
{ key: "benchmarks", label: "Benchmarks", icon: TrendingUpIcon },
|
||||||
|
{ key: "presets", label: "Presets", icon: SettingsIcon },
|
||||||
|
{ key: "comments", label: "Comments", icon: MessageSquareIcon },
|
||||||
|
] as const
|
||||||
|
|
||||||
|
type TabKey = (typeof TABS)[number]["key"]
|
||||||
|
|
||||||
|
export function GamePageClient({
|
||||||
|
game,
|
||||||
|
counts,
|
||||||
|
platformSupport,
|
||||||
|
}: {
|
||||||
|
game: Game
|
||||||
|
counts: Counts
|
||||||
|
platformSupport: PlatformSupport[]
|
||||||
|
}) {
|
||||||
|
const [activeTab, setActiveTab] = useState<TabKey>("overview")
|
||||||
|
|
||||||
|
const headerImage = game.headerImage || game.capsuleImage
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="w-full flex flex-col">
|
||||||
|
{/* Hero */}
|
||||||
|
<div className="relative w-full h-48 sm:h-64 md:h-80 overflow-hidden">
|
||||||
|
{headerImage ? (
|
||||||
|
<Image
|
||||||
|
src={headerImage}
|
||||||
|
alt={game.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-text/10 flex items-center justify-center">
|
||||||
|
<Gamepad2Icon className="h-16 w-16 text-text/20" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 px-4 md:px-[10svw] pb-4">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-2">
|
||||||
|
{game.title}
|
||||||
|
</h1>
|
||||||
|
<div className="flex flex-wrap items-center gap-3 text-sm text-text/70">
|
||||||
|
{game.developer && <span>{game.developer}</span>}
|
||||||
|
{game.developer && game.publisher && (
|
||||||
|
<span className="text-text/40">•</span>
|
||||||
|
)}
|
||||||
|
{game.publisher && <span>{game.publisher}</span>}
|
||||||
|
{game.genres && game.genres.length > 0 && (
|
||||||
|
<>
|
||||||
|
<span className="text-text/40">•</span>
|
||||||
|
<span className="text-text/60">
|
||||||
|
{game.genres.join(", ")}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats bar */}
|
||||||
|
<div className="px-4 md:px-[10svw] border-b border-border">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-row gap-6 py-3 text-sm">
|
||||||
|
<StatBadge
|
||||||
|
icon={TrendingUpIcon}
|
||||||
|
value={counts.benchmarks}
|
||||||
|
label="Benchmarks"
|
||||||
|
/>
|
||||||
|
<StatBadge
|
||||||
|
icon={SettingsIcon}
|
||||||
|
value={counts.presets}
|
||||||
|
label="Presets"
|
||||||
|
/>
|
||||||
|
<StatBadge
|
||||||
|
icon={MessageSquareIcon}
|
||||||
|
value={counts.comments}
|
||||||
|
label="Comments"
|
||||||
|
/>
|
||||||
|
{game.storeUrl && (
|
||||||
|
<a
|
||||||
|
href={game.storeUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="ml-auto flex items-center gap-1.5 text-text/60 hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLinkIcon className="h-3.5 w-3.5" />
|
||||||
|
<span className="hidden sm:inline">Store</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="px-4 md:px-[10svw]">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<div className="flex flex-row gap-1 border-b border-border mt-4">
|
||||||
|
{TABS.map((tab) => {
|
||||||
|
const Icon = tab.icon
|
||||||
|
const isActive = activeTab === tab.key
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tab.key}
|
||||||
|
onClick={() => setActiveTab(tab.key)}
|
||||||
|
className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
isActive
|
||||||
|
? "border-primary text-primary"
|
||||||
|
: "border-transparent text-text/60 hover:text-text/80"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
<span className="hidden sm:inline">{tab.label}</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab content */}
|
||||||
|
<div className="py-6 min-h-[300px]">
|
||||||
|
{activeTab === "overview" && (
|
||||||
|
<OverviewTab game={game} platformSupport={platformSupport} />
|
||||||
|
)}
|
||||||
|
{activeTab === "benchmarks" && <BenchmarksTab count={counts.benchmarks} />}
|
||||||
|
{activeTab === "presets" && <PresetsTab count={counts.presets} />}
|
||||||
|
{activeTab === "comments" && <CommentsTab count={counts.comments} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatBadge({
|
||||||
|
icon: Icon,
|
||||||
|
value,
|
||||||
|
label,
|
||||||
|
}: {
|
||||||
|
icon: React.ElementType
|
||||||
|
value: number
|
||||||
|
label: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-1.5 text-text/70">
|
||||||
|
<Icon className="h-4 w-4 text-text/50" />
|
||||||
|
<span className="font-medium text-text">{value}</span>
|
||||||
|
<span className="hidden sm:inline text-text/50">{label}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function OverviewTab({
|
||||||
|
game,
|
||||||
|
platformSupport,
|
||||||
|
}: {
|
||||||
|
game: Game
|
||||||
|
platformSupport: PlatformSupport[]
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{game.description && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-2">
|
||||||
|
About
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-text/80 leading-relaxed max-w-3xl">
|
||||||
|
{game.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Platform Support */}
|
||||||
|
{platformSupport.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3">
|
||||||
|
Platform Support
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
{platformSupport.map((ps) => (
|
||||||
|
<div
|
||||||
|
key={ps.id}
|
||||||
|
className="flex items-center justify-between p-3 rounded-lg border border-border bg-text/5"
|
||||||
|
>
|
||||||
|
<span className="text-sm font-medium capitalize">
|
||||||
|
{ps.hardwareSlug.replace(/-/g, " ")}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className={`text-xs px-2 py-0.5 rounded-full ${
|
||||||
|
ps.isSupported
|
||||||
|
? "bg-green-500/20 text-green-400"
|
||||||
|
: "bg-red-500/20 text-red-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{ps.isSupported ? "Supported" : "Unsupported"}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-text/50 capitalize">
|
||||||
|
{ps.protonStatus}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Metadata */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3">
|
||||||
|
Details
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
|
||||||
|
<MetaItem label="Source" value={game.source} />
|
||||||
|
{game.steamAppId && (
|
||||||
|
<MetaItem label="Steam AppID" value={String(game.steamAppId)} />
|
||||||
|
)}
|
||||||
|
<MetaItem label="Added" value={formatDate(game.createdAt)} />
|
||||||
|
{game.lastSync && (
|
||||||
|
<MetaItem
|
||||||
|
label="Last Sync"
|
||||||
|
value={formatDate(game.lastSync)}
|
||||||
|
icon={ClockIcon}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MetaItem({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
icon: Icon,
|
||||||
|
}: {
|
||||||
|
label: string
|
||||||
|
value: string
|
||||||
|
icon?: React.ElementType
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<span className="text-xs text-text/50 uppercase tracking-wider">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
<span className="text-text/80 flex items-center gap-1">
|
||||||
|
{Icon && <Icon className="h-3 w-3 text-text/40" />}
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(value: string | null): string {
|
||||||
|
if (!value) return "—"
|
||||||
|
return new Date(value).toLocaleDateString()
|
||||||
|
}
|
||||||
|
|
||||||
|
function BenchmarksTab({ count }: { count: number }) {
|
||||||
|
if (count === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<TrendingUpIcon className="h-12 w-12 text-text/20" />
|
||||||
|
<p className="text-text/40 text-sm">No benchmarks yet</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<TrendingUpIcon className="h-12 w-12 text-text/20" />
|
||||||
|
<p className="text-text/40 text-sm">
|
||||||
|
{count} benchmark{count !== 1 ? "s" : ""} — coming soon
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function PresetsTab({ count }: { count: number }) {
|
||||||
|
if (count === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<SettingsIcon className="h-12 w-12 text-text/20" />
|
||||||
|
<p className="text-text/40 text-sm">No presets yet</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<SettingsIcon className="h-12 w-12 text-text/20" />
|
||||||
|
<p className="text-text/40 text-sm">
|
||||||
|
{count} preset{count !== 1 ? "s" : ""} — coming soon
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommentsTab({ count }: { count: number }) {
|
||||||
|
if (count === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<MessageSquareIcon className="h-12 w-12 text-text/20" />
|
||||||
|
<p className="text-text/40 text-sm">No comments yet</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<MessageSquareIcon className="h-12 w-12 text-text/20" />
|
||||||
|
<p className="text-text/40 text-sm">
|
||||||
|
{count} comment{count !== 1 ? "s" : ""} — coming soon
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,188 @@
|
|||||||
|
import { notFound } from "next/navigation"
|
||||||
|
import { after } from "next/server"
|
||||||
|
import { db } from "@/lib/db/index"
|
||||||
|
import {
|
||||||
|
games,
|
||||||
|
gameVersions,
|
||||||
|
performanceEntries,
|
||||||
|
communityPresets,
|
||||||
|
gameComments,
|
||||||
|
gamePlatformSupport,
|
||||||
|
} from "@/lib/db/schema"
|
||||||
|
import { eq, sql } from "drizzle-orm"
|
||||||
|
import { isSyncStale, syncSteamGame } from "@/lib/steam/sync"
|
||||||
|
import { GamePageClient } from "./game-page-client"
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Game",
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createGameStub(steamAppId: number) {
|
||||||
|
const url = new URL("https://store.steampowered.com/api/appdetails/")
|
||||||
|
url.searchParams.set("appids", String(steamAppId))
|
||||||
|
url.searchParams.set("cc", "US")
|
||||||
|
url.searchParams.set("l", "en")
|
||||||
|
|
||||||
|
const res = await fetch(url.toString(), {
|
||||||
|
headers: { Accept: "application/json" },
|
||||||
|
})
|
||||||
|
|
||||||
|
let title = `Steam App ${steamAppId}`
|
||||||
|
let developer: string | null = null
|
||||||
|
let publisher: string | null = null
|
||||||
|
let genres: string[] | null = null
|
||||||
|
let headerImage: string | null = null
|
||||||
|
let capsuleImage: string | null = null
|
||||||
|
let description: string | null = null
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
const data = (await res.json()) as Record<
|
||||||
|
string,
|
||||||
|
{ success: boolean; data: {
|
||||||
|
name: string
|
||||||
|
developers?: string[]
|
||||||
|
publishers?: string[]
|
||||||
|
genres?: { description: string }[]
|
||||||
|
header_image?: string
|
||||||
|
capsule_imagev5?: string
|
||||||
|
short_description?: string
|
||||||
|
} }
|
||||||
|
>
|
||||||
|
const entry = data[String(steamAppId)]
|
||||||
|
if (entry?.success && entry.data) {
|
||||||
|
title = entry.data.name
|
||||||
|
developer = entry.data.developers?.[0] ?? null
|
||||||
|
publisher = entry.data.publishers?.[0] ?? null
|
||||||
|
genres = entry.data.genres?.map((g) => g.description) ?? []
|
||||||
|
headerImage = entry.data.header_image ?? null
|
||||||
|
capsuleImage = entry.data.capsule_imagev5 ?? entry.data.header_image ?? null
|
||||||
|
description = entry.data.short_description ?? null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [game] = await db
|
||||||
|
.insert(games)
|
||||||
|
.values({
|
||||||
|
steamAppId,
|
||||||
|
source: "steam",
|
||||||
|
title,
|
||||||
|
developer,
|
||||||
|
publisher,
|
||||||
|
genres,
|
||||||
|
headerImage,
|
||||||
|
capsuleImage,
|
||||||
|
description,
|
||||||
|
storeUrl: `https://store.steampowered.com/app/${steamAppId}`,
|
||||||
|
lastSync: new Date(),
|
||||||
|
syncStatus: "synced",
|
||||||
|
})
|
||||||
|
.returning()
|
||||||
|
|
||||||
|
return game
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function GamePage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ id: string }>
|
||||||
|
}) {
|
||||||
|
const { id } = await params
|
||||||
|
const isNumeric = /^\d+$/.test(id)
|
||||||
|
|
||||||
|
// ── Resolve game ────────────────────────────────────────────────
|
||||||
|
let game
|
||||||
|
if (isNumeric) {
|
||||||
|
const rows = await db
|
||||||
|
.select()
|
||||||
|
.from(games)
|
||||||
|
.where(eq(games.steamAppId, Number(id)))
|
||||||
|
.limit(1)
|
||||||
|
game = rows[0]
|
||||||
|
} else {
|
||||||
|
const rows = await db
|
||||||
|
.select()
|
||||||
|
.from(games)
|
||||||
|
.where(eq(games.id, id))
|
||||||
|
.limit(1)
|
||||||
|
game = rows[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-create stub for missing Steam games
|
||||||
|
if (!game && isNumeric) {
|
||||||
|
try {
|
||||||
|
game = await createGameStub(Number(id))
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to auto-create game stub:", err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!game) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Fetch related counts ────────────────────────────────────────
|
||||||
|
const [benchmarkCount, presetCount, commentCount, platformSupport] =
|
||||||
|
await Promise.all([
|
||||||
|
db
|
||||||
|
.select({ count: sql<number>`count(*)::int` })
|
||||||
|
.from(performanceEntries)
|
||||||
|
.innerJoin(
|
||||||
|
gameVersions,
|
||||||
|
eq(performanceEntries.versionId, gameVersions.id),
|
||||||
|
)
|
||||||
|
.where(eq(gameVersions.gameId, game.id))
|
||||||
|
.then((r) => r[0]?.count ?? 0),
|
||||||
|
db
|
||||||
|
.select({ count: sql<number>`count(*)::int` })
|
||||||
|
.from(communityPresets)
|
||||||
|
.where(eq(communityPresets.gameId, game.id))
|
||||||
|
.then((r) => r[0]?.count ?? 0),
|
||||||
|
db
|
||||||
|
.select({ count: sql<number>`count(*)::int` })
|
||||||
|
.from(gameComments)
|
||||||
|
.where(eq(gameComments.gameId, game.id))
|
||||||
|
.then((r) => r[0]?.count ?? 0),
|
||||||
|
db
|
||||||
|
.select()
|
||||||
|
.from(gamePlatformSupport)
|
||||||
|
.where(eq(gamePlatformSupport.gameId, game.id))
|
||||||
|
.then((r) => r),
|
||||||
|
])
|
||||||
|
|
||||||
|
// ── Stale-While-Revalidate: schedule background sync ────────────
|
||||||
|
if (game.source === "steam" && game.steamAppId && isSyncStale(game.lastSync)) {
|
||||||
|
after(async () => {
|
||||||
|
await syncSteamGame(game.steamAppId!)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Serialize for client component (Dates → strings)
|
||||||
|
const serializedGame = {
|
||||||
|
id: game.id,
|
||||||
|
steamAppId: game.steamAppId,
|
||||||
|
title: game.title,
|
||||||
|
description: game.description,
|
||||||
|
developer: game.developer,
|
||||||
|
publisher: game.publisher,
|
||||||
|
genres: game.genres,
|
||||||
|
headerImage: game.headerImage,
|
||||||
|
capsuleImage: game.capsuleImage,
|
||||||
|
storeUrl: game.storeUrl,
|
||||||
|
source: game.source,
|
||||||
|
lastSync: game.lastSync ? game.lastSync.toISOString() : null,
|
||||||
|
syncStatus: game.syncStatus,
|
||||||
|
createdAt: game.createdAt.toISOString(),
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GamePageClient
|
||||||
|
game={serializedGame}
|
||||||
|
counts={{
|
||||||
|
benchmarks: benchmarkCount,
|
||||||
|
presets: presetCount,
|
||||||
|
comments: commentCount,
|
||||||
|
}}
|
||||||
|
platformSupport={platformSupport}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
+193
-5
@@ -1,13 +1,71 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { Suspense } from "react"
|
import { Suspense, useEffect, useState } from "react"
|
||||||
import { useSearchParams } from "next/navigation"
|
import { useRouter, useSearchParams } from "next/navigation"
|
||||||
import { Gamepad2Icon } from "lucide-react"
|
import { ExternalLinkIcon, Gamepad2Icon, MessageSquareIcon, SettingsIcon, TrendingUpIcon } from "lucide-react"
|
||||||
|
import Image from "next/image"
|
||||||
|
|
||||||
|
interface UnifiedResult {
|
||||||
|
kind: "local" | "steam"
|
||||||
|
id?: string
|
||||||
|
appId: number | null
|
||||||
|
title: string
|
||||||
|
image: string | null
|
||||||
|
developer: string | null
|
||||||
|
publisher: string | null
|
||||||
|
source: string
|
||||||
|
counts: { benchmarks: number; presets: number; comments: number } | null
|
||||||
|
}
|
||||||
|
|
||||||
function SearchContent() {
|
function SearchContent() {
|
||||||
const searchParams = useSearchParams()
|
const searchParams = useSearchParams()
|
||||||
|
const router = useRouter()
|
||||||
const query = searchParams.get("q") || ""
|
const query = searchParams.get("q") || ""
|
||||||
|
|
||||||
|
const [results, setResults] = useState<UnifiedResult[]>([])
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!query) {
|
||||||
|
setResults([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let cancelled = false
|
||||||
|
|
||||||
|
async function fetchResults() {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(
|
||||||
|
`/api/search/unified?q=${encodeURIComponent(query)}`,
|
||||||
|
)
|
||||||
|
if (!res.ok) throw new Error(await res.text())
|
||||||
|
const data = await res.json()
|
||||||
|
if (!cancelled) setResults(data.results || [])
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError("Failed to fetch search results")
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchResults()
|
||||||
|
return () => { cancelled = true }
|
||||||
|
}, [query])
|
||||||
|
|
||||||
|
function handleClick(result: UnifiedResult) {
|
||||||
|
const path = result.appId
|
||||||
|
? `/game/${result.appId}`
|
||||||
|
: `/game/${result.id}`
|
||||||
|
router.push(path)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="w-full min-h-[calc(100vh-3.6rem)] flex flex-col items-center p-4 md:px-[10svw]">
|
<section className="w-full min-h-[calc(100vh-3.6rem)] flex flex-col items-center p-4 md:px-[10svw]">
|
||||||
<div className="w-full max-w-7xl">
|
<div className="w-full max-w-7xl">
|
||||||
@@ -16,7 +74,7 @@ function SearchContent() {
|
|||||||
</h1>
|
</h1>
|
||||||
<p className="text-text/60 text-sm mb-8">
|
<p className="text-text/60 text-sm mb-8">
|
||||||
{query
|
{query
|
||||||
? "Showing results from the database..."
|
? `${results.length} result${results.length !== 1 ? "s" : ""} found`
|
||||||
: "Enter a game name or AppID to find benchmarks, settings, and reviews."}
|
: "Enter a game name or AppID to find benchmarks, settings, and reviews."}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -29,7 +87,7 @@ function SearchContent() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{query && (
|
{query && loading && (
|
||||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
<div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
|
<div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
|
||||||
<p className="text-text/60 text-sm">
|
<p className="text-text/60 text-sm">
|
||||||
@@ -37,11 +95,141 @@ function SearchContent() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{query && !loading && error && (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<p className="text-red-400 text-sm">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{query && !loading && !error && results.length === 0 && (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<Gamepad2Icon className="h-12 w-12 text-text/20" />
|
||||||
|
<p className="text-text/40 text-sm">
|
||||||
|
No results found for "{query}"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{query && !loading && !error && results.length > 0 && (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{results.map((result, idx) => (
|
||||||
|
<SearchResultCard
|
||||||
|
key={result.kind === "local" ? result.id : `steam-${result.appId}-${idx}`}
|
||||||
|
result={result}
|
||||||
|
onClick={handleClick}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function SearchResultCard({
|
||||||
|
result,
|
||||||
|
onClick,
|
||||||
|
}: {
|
||||||
|
result: UnifiedResult
|
||||||
|
onClick: (r: UnifiedResult) => void
|
||||||
|
}) {
|
||||||
|
const isLocal = result.kind === "local"
|
||||||
|
const hasData = isLocal && result.counts && (
|
||||||
|
result.counts.benchmarks > 0 ||
|
||||||
|
result.counts.presets > 0 ||
|
||||||
|
result.counts.comments > 0
|
||||||
|
)
|
||||||
|
const hasDeveloperInfo = result.developer || result.publisher
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="group flex flex-col gap-3 p-3 rounded-lg border border-border bg-text/5 hover:border-primary/50 transition-all cursor-pointer"
|
||||||
|
onClick={() => onClick(result)}
|
||||||
|
>
|
||||||
|
{/* Image */}
|
||||||
|
<div className="relative w-full aspect-[460/215] rounded-md overflow-hidden bg-text/10">
|
||||||
|
{result.image ? (
|
||||||
|
<Image
|
||||||
|
src={result.image}
|
||||||
|
alt={result.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
<Gamepad2Icon className="h-8 w-8 text-text/20" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Source badge */}
|
||||||
|
<div className="absolute top-2 right-2 flex gap-1">
|
||||||
|
{isLocal && (
|
||||||
|
<span className="text-[10px] font-medium uppercase tracking-wider bg-primary/90 text-white px-1.5 py-0.5 rounded">
|
||||||
|
In Database
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!isLocal && result.appId && (
|
||||||
|
<a
|
||||||
|
href={`https://store.steampowered.com/app/${result.appId}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[10px] font-medium uppercase tracking-wider bg-text/80 text-background px-1.5 py-0.5 rounded flex items-center gap-1"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
Steam
|
||||||
|
<ExternalLinkIcon className="h-2.5 w-2.5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<div className="flex flex-col gap-1 min-w-0">
|
||||||
|
<p className="font-medium text-sm truncate leading-tight">
|
||||||
|
{result.title}
|
||||||
|
</p>
|
||||||
|
{hasDeveloperInfo ? (
|
||||||
|
<p className="text-xs text-text/50 truncate">
|
||||||
|
{result.developer || result.publisher}
|
||||||
|
</p>
|
||||||
|
) : !isLocal && result.appId ? (
|
||||||
|
<p className="text-xs text-text/40">
|
||||||
|
AppID: {result.appId}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats (local only) */}
|
||||||
|
{isLocal && result.counts && (
|
||||||
|
<div className="flex flex-row gap-3 text-[11px] text-text/50">
|
||||||
|
{result.counts.benchmarks > 0 && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<TrendingUpIcon className="h-3 w-3" />
|
||||||
|
{result.counts.benchmarks}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{result.counts.presets > 0 && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<SettingsIcon className="h-3 w-3" />
|
||||||
|
{result.counts.presets}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{result.counts.comments > 0 && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<MessageSquareIcon className="h-3 w-3" />
|
||||||
|
{result.counts.comments}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!hasData && (
|
||||||
|
<span className="text-text/30 italic">No data yet</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default function SearchPage() {
|
export default function SearchPage() {
|
||||||
return (
|
return (
|
||||||
<Suspense>
|
<Suspense>
|
||||||
|
|||||||
+20
-13
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from "react"
|
|||||||
import { CircleXIcon, Gamepad2Icon, MenuIcon, XIcon } from "lucide-react"
|
import { CircleXIcon, Gamepad2Icon, MenuIcon, XIcon } from "lucide-react"
|
||||||
import { routes } from "@/lib/routes"
|
import { routes } from "@/lib/routes"
|
||||||
import { usePathname, useRouter, useSearchParams } from "next/navigation"
|
import { usePathname, useRouter, useSearchParams } from "next/navigation"
|
||||||
|
import { useDebounce } from "@/lib/hooks/useDebounce"
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
@@ -17,6 +18,7 @@ export default function Navbar() {
|
|||||||
const isLanding = pathname === "/"
|
const isLanding = pathname === "/"
|
||||||
|
|
||||||
const [searchQuery, setSearchQuery] = useState("")
|
const [searchQuery, setSearchQuery] = useState("")
|
||||||
|
const debouncedQuery = useDebounce(searchQuery, 300)
|
||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||||
const [isFocused, setIsFocused] = useState(false)
|
const [isFocused, setIsFocused] = useState(false)
|
||||||
const [forceFocusStyles, setForceFocusStyles] = useState(false)
|
const [forceFocusStyles, setForceFocusStyles] = useState(false)
|
||||||
@@ -24,10 +26,25 @@ export default function Navbar() {
|
|||||||
|
|
||||||
// Sync search query with URL ?q= param
|
// Sync search query with URL ?q= param
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const q = searchParams.get("q")
|
const q = searchParams.get("q") || ""
|
||||||
if (q) setSearchQuery(q)
|
setSearchQuery(q)
|
||||||
}, [searchParams])
|
}, [searchParams])
|
||||||
|
|
||||||
|
// Update URL when debounced query changes (skip if already matches)
|
||||||
|
useEffect(() => {
|
||||||
|
if (isLanding) return
|
||||||
|
const currentQ = searchParams.get("q") || ""
|
||||||
|
if (debouncedQuery === currentQ) return
|
||||||
|
|
||||||
|
const params = new URLSearchParams(searchParams.toString())
|
||||||
|
if (debouncedQuery) {
|
||||||
|
params.set("q", debouncedQuery)
|
||||||
|
} else {
|
||||||
|
params.delete("q")
|
||||||
|
}
|
||||||
|
router.replace(`/search?${params.toString()}`, { scroll: false })
|
||||||
|
}, [debouncedQuery, isLanding, router, searchParams])
|
||||||
|
|
||||||
// Maintain focus & styles when flying from landing page search
|
// Maintain focus & styles when flying from landing page search
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if (
|
||||||
@@ -47,17 +64,7 @@ export default function Navbar() {
|
|||||||
}, [isLanding, searchQuery])
|
}, [isLanding, searchQuery])
|
||||||
|
|
||||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const value = e.target.value
|
setSearchQuery(e.target.value)
|
||||||
setSearchQuery(value)
|
|
||||||
if (!isLanding) {
|
|
||||||
const params = new URLSearchParams(searchParams.toString())
|
|
||||||
if (value) {
|
|
||||||
params.set("q", value)
|
|
||||||
} else {
|
|
||||||
params.delete("q")
|
|
||||||
}
|
|
||||||
router.replace(`/search?${params.toString()}`, { scroll: false })
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSearchSubmit = () => {
|
const handleSearchSubmit = () => {
|
||||||
|
|||||||
@@ -0,0 +1,90 @@
|
|||||||
|
import { Elysia, t } from "elysia"
|
||||||
|
import { db } from "@/lib/db/index"
|
||||||
|
import { games } from "@/lib/db/schema"
|
||||||
|
import { eq } from "drizzle-orm"
|
||||||
|
|
||||||
|
interface SteamAppDetails {
|
||||||
|
steam_appid: number
|
||||||
|
name: string
|
||||||
|
developers?: string[]
|
||||||
|
publishers?: string[]
|
||||||
|
header_image?: string
|
||||||
|
capsule_imagev5?: string
|
||||||
|
genres?: { id: string; description: string }[]
|
||||||
|
website?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const gameStubRoutes = new Elysia({ prefix: "/games" }).post(
|
||||||
|
"/stub",
|
||||||
|
async ({ body, set }) => {
|
||||||
|
// Check if already exists
|
||||||
|
const [existing] = await db
|
||||||
|
.select()
|
||||||
|
.from(games)
|
||||||
|
.where(eq(games.steamAppId, body.steamAppId))
|
||||||
|
.limit(1)
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
return { game: existing, created: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch details from Steam
|
||||||
|
let details: SteamAppDetails | null = null
|
||||||
|
try {
|
||||||
|
const url = new URL("https://store.steampowered.com/api/appdetails/")
|
||||||
|
url.searchParams.set("appids", String(body.steamAppId))
|
||||||
|
url.searchParams.set("cc", "US")
|
||||||
|
url.searchParams.set("l", "en")
|
||||||
|
|
||||||
|
const res = await fetch(url.toString(), {
|
||||||
|
headers: { Accept: "application/json" },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
const data = (await res.json()) as Record<
|
||||||
|
string,
|
||||||
|
{ success: boolean; data: SteamAppDetails }
|
||||||
|
>
|
||||||
|
const entry = data[String(body.steamAppId)]
|
||||||
|
if (entry?.success) {
|
||||||
|
details = entry.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch Steam appdetails:", err)
|
||||||
|
}
|
||||||
|
|
||||||
|
const title = details?.name || `Steam App ${body.steamAppId}`
|
||||||
|
const developer = details?.developers?.[0] || null
|
||||||
|
const publisher = details?.publishers?.[0] || null
|
||||||
|
const genres = details?.genres?.map((g) => g.description) || []
|
||||||
|
const headerImage = details?.header_image || null
|
||||||
|
const capsuleImage =
|
||||||
|
details?.capsule_imagev5 || details?.header_image || null
|
||||||
|
|
||||||
|
const [game] = await db
|
||||||
|
.insert(games)
|
||||||
|
.values({
|
||||||
|
steamAppId: body.steamAppId,
|
||||||
|
source: "steam",
|
||||||
|
title,
|
||||||
|
developer,
|
||||||
|
publisher,
|
||||||
|
genres,
|
||||||
|
headerImage,
|
||||||
|
capsuleImage,
|
||||||
|
storeUrl: `https://store.steampowered.com/app/${body.steamAppId}`,
|
||||||
|
lastSync: new Date(),
|
||||||
|
syncStatus: "synced",
|
||||||
|
})
|
||||||
|
.returning()
|
||||||
|
|
||||||
|
set.status = 201
|
||||||
|
return { game, created: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
body: t.Object({
|
||||||
|
steamAppId: t.Number(),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
)
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import { Elysia, t } from "elysia"
|
||||||
|
import { db } from "@/lib/db/index"
|
||||||
|
import { games, gameVersions, performanceEntries, communityPresets, gameComments } from "@/lib/db/schema"
|
||||||
|
import { ilike, or, sql, eq, inArray } from "drizzle-orm"
|
||||||
|
|
||||||
|
interface SteamSearchItem {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
tiny_image: string
|
||||||
|
metascore: string
|
||||||
|
platforms: { windows: boolean; mac: boolean; linux: boolean }
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SteamSearchResponse {
|
||||||
|
items: SteamSearchItem[]
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
|
||||||
|
"/unified",
|
||||||
|
async ({ query, set }) => {
|
||||||
|
if (!query.q || query.q.length < 2) {
|
||||||
|
set.status = 400
|
||||||
|
return { error: "Query must be at least 2 characters" }
|
||||||
|
}
|
||||||
|
|
||||||
|
const term = `%${query.q}%`
|
||||||
|
|
||||||
|
// ── 1. Search local database ────────────────────────────────────
|
||||||
|
const localGames = await db
|
||||||
|
.select()
|
||||||
|
.from(games)
|
||||||
|
.where(
|
||||||
|
or(
|
||||||
|
ilike(games.title, term),
|
||||||
|
ilike(games.developer, term),
|
||||||
|
ilike(games.publisher, term),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.limit(20)
|
||||||
|
|
||||||
|
const localGameIds = localGames.map((g) => g.id)
|
||||||
|
const localSteamAppIds = new Set(
|
||||||
|
localGames.map((g) => g.steamAppId).filter(Boolean),
|
||||||
|
)
|
||||||
|
|
||||||
|
// ── 2. Count related data for local games ───────────────────────
|
||||||
|
let benchmarkCounts: { gameId: string; count: number }[] = []
|
||||||
|
let presetCounts: { gameId: string; count: number }[] = []
|
||||||
|
let commentCounts: { gameId: string; count: number }[] = []
|
||||||
|
|
||||||
|
if (localGameIds.length > 0) {
|
||||||
|
const [bCounts, pCounts, cCounts] = await Promise.all([
|
||||||
|
db
|
||||||
|
.select({
|
||||||
|
gameId: gameVersions.gameId,
|
||||||
|
count: sql<number>`count(*)::int`,
|
||||||
|
})
|
||||||
|
.from(performanceEntries)
|
||||||
|
.innerJoin(
|
||||||
|
gameVersions,
|
||||||
|
eq(performanceEntries.versionId, gameVersions.id),
|
||||||
|
)
|
||||||
|
.where(inArray(gameVersions.gameId, localGameIds))
|
||||||
|
.groupBy(gameVersions.gameId),
|
||||||
|
db
|
||||||
|
.select({
|
||||||
|
gameId: communityPresets.gameId,
|
||||||
|
count: sql<number>`count(*)::int`,
|
||||||
|
})
|
||||||
|
.from(communityPresets)
|
||||||
|
.where(inArray(communityPresets.gameId, localGameIds))
|
||||||
|
.groupBy(communityPresets.gameId),
|
||||||
|
db
|
||||||
|
.select({
|
||||||
|
gameId: gameComments.gameId,
|
||||||
|
count: sql<number>`count(*)::int`,
|
||||||
|
})
|
||||||
|
.from(gameComments)
|
||||||
|
.where(inArray(gameComments.gameId, localGameIds))
|
||||||
|
.groupBy(gameComments.gameId),
|
||||||
|
])
|
||||||
|
benchmarkCounts = bCounts
|
||||||
|
presetCounts = pCounts
|
||||||
|
commentCounts = cCounts
|
||||||
|
}
|
||||||
|
|
||||||
|
const countMap = new Map<
|
||||||
|
string,
|
||||||
|
{ benchmarks: number; presets: number; comments: number }
|
||||||
|
>()
|
||||||
|
for (const g of localGames) {
|
||||||
|
countMap.set(g.id, { benchmarks: 0, presets: 0, comments: 0 })
|
||||||
|
}
|
||||||
|
for (const c of benchmarkCounts) {
|
||||||
|
countMap.get(c.gameId)!.benchmarks = c.count
|
||||||
|
}
|
||||||
|
for (const c of presetCounts) {
|
||||||
|
countMap.get(c.gameId)!.presets = c.count
|
||||||
|
}
|
||||||
|
for (const c of commentCounts) {
|
||||||
|
countMap.get(c.gameId)!.comments = c.count
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 3. Search Steam ─────────────────────────────────────────────
|
||||||
|
let steamItems: SteamSearchItem[] = []
|
||||||
|
try {
|
||||||
|
const url = new URL("https://store.steampowered.com/api/storesearch/")
|
||||||
|
url.searchParams.set("term", query.q)
|
||||||
|
url.searchParams.set("cc", "US")
|
||||||
|
url.searchParams.set("l", "en")
|
||||||
|
|
||||||
|
const res = await fetch(url.toString(), {
|
||||||
|
headers: { Accept: "application/json" },
|
||||||
|
})
|
||||||
|
if (res.ok) {
|
||||||
|
const data = (await res.json()) as SteamSearchResponse
|
||||||
|
steamItems = data.items || []
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Steam search failure is non-fatal
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 4. Build unified results ────────────────────────────────────
|
||||||
|
// Local games first (they have data), then Steam-only results
|
||||||
|
const results = []
|
||||||
|
|
||||||
|
// Add local games
|
||||||
|
for (const g of localGames) {
|
||||||
|
const counts = countMap.get(g.id)!
|
||||||
|
results.push({
|
||||||
|
kind: "local" as const,
|
||||||
|
id: g.id,
|
||||||
|
appId: g.steamAppId,
|
||||||
|
title: g.title,
|
||||||
|
image: g.capsuleImage || g.headerImage,
|
||||||
|
developer: g.developer,
|
||||||
|
publisher: g.publisher,
|
||||||
|
source: g.source,
|
||||||
|
counts,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Steam-only games (deduplicated against local steamAppIds)
|
||||||
|
for (const item of steamItems) {
|
||||||
|
if (localSteamAppIds.has(item.id)) continue
|
||||||
|
results.push({
|
||||||
|
kind: "steam" as const,
|
||||||
|
appId: item.id,
|
||||||
|
title: item.name,
|
||||||
|
image: item.tiny_image,
|
||||||
|
developer: null,
|
||||||
|
publisher: null,
|
||||||
|
source: "steam" as const,
|
||||||
|
counts: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return { results, total: results.length }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
query: t.Object({
|
||||||
|
q: t.String(),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
)
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import { Elysia, t } from "elysia"
|
||||||
|
|
||||||
|
interface SteamSearchItem {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
tiny_image: string
|
||||||
|
metascore: string
|
||||||
|
platforms: {
|
||||||
|
windows: boolean
|
||||||
|
mac: boolean
|
||||||
|
linux: boolean
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const steamSearchRoutes = new Elysia({ prefix: "/search" })
|
||||||
|
.get(
|
||||||
|
"/steam",
|
||||||
|
async ({ query, set }) => {
|
||||||
|
if (!query.q || query.q.length < 2) {
|
||||||
|
set.status = 400
|
||||||
|
return { error: "Query must be at least 2 characters" }
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const url = new URL("https://store.steampowered.com/api/storesearch/")
|
||||||
|
url.searchParams.set("term", query.q)
|
||||||
|
url.searchParams.set("cc", "US")
|
||||||
|
url.searchParams.set("l", "en")
|
||||||
|
|
||||||
|
const res = await fetch(url.toString(), {
|
||||||
|
headers: { Accept: "application/json" },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
set.status = 502
|
||||||
|
return { error: "Failed to fetch from Steam" }
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await res.json()
|
||||||
|
|
||||||
|
return {
|
||||||
|
items: (data.items || []).map((item: SteamSearchItem) => ({
|
||||||
|
appId: item.id,
|
||||||
|
title: item.name,
|
||||||
|
image: item.tiny_image,
|
||||||
|
platforms: item.platforms,
|
||||||
|
metascore: item.metascore,
|
||||||
|
})),
|
||||||
|
total: data.total || 0,
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Steam search error:", err)
|
||||||
|
set.status = 500
|
||||||
|
return { error: "Internal server error" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
query: t.Object({
|
||||||
|
q: t.String(),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
)
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { useState, useEffect } from "react"
|
||||||
|
|
||||||
|
export function useDebounce<T>(value: T, delay: number): T {
|
||||||
|
const [debouncedValue, setDebouncedValue] = useState<T>(value)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => setDebouncedValue(value), delay)
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}, [value, delay])
|
||||||
|
|
||||||
|
return debouncedValue
|
||||||
|
}
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
import { db } from "@/lib/db/index"
|
||||||
|
import { games } from "@/lib/db/schema"
|
||||||
|
import { eq } from "drizzle-orm"
|
||||||
|
|
||||||
|
interface SteamAppDetails {
|
||||||
|
steam_appid: number
|
||||||
|
name: string
|
||||||
|
developers?: string[]
|
||||||
|
publishers?: string[]
|
||||||
|
header_image?: string
|
||||||
|
capsule_imagev5?: string
|
||||||
|
genres?: { id: string; description: string }[]
|
||||||
|
website?: string
|
||||||
|
short_description?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000
|
||||||
|
|
||||||
|
export function isSyncStale(lastSync: Date | null): boolean {
|
||||||
|
if (!lastSync) return true
|
||||||
|
return Date.now() - new Date(lastSync).getTime() > SEVEN_DAYS_MS
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function syncSteamGame(steamAppId: number): Promise<void> {
|
||||||
|
try {
|
||||||
|
const url = new URL("https://store.steampowered.com/api/appdetails/")
|
||||||
|
url.searchParams.set("appids", String(steamAppId))
|
||||||
|
url.searchParams.set("cc", "US")
|
||||||
|
url.searchParams.set("l", "en")
|
||||||
|
|
||||||
|
const res = await fetch(url.toString(), {
|
||||||
|
headers: { Accept: "application/json" },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
console.error(`Steam sync failed for ${steamAppId}: ${res.status}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = (await res.json()) as Record<
|
||||||
|
string,
|
||||||
|
{ success: boolean; data: SteamAppDetails }
|
||||||
|
>
|
||||||
|
const entry = data[String(steamAppId)]
|
||||||
|
|
||||||
|
if (!entry?.success || !entry.data) {
|
||||||
|
console.error(`Steam sync: no data for ${steamAppId}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const d = entry.data
|
||||||
|
|
||||||
|
await db
|
||||||
|
.update(games)
|
||||||
|
.set({
|
||||||
|
title: d.name,
|
||||||
|
developer: d.developers?.[0] || null,
|
||||||
|
publisher: d.publishers?.[0] || null,
|
||||||
|
description: d.short_description || null,
|
||||||
|
genres: d.genres?.map((g) => g.description) || [],
|
||||||
|
headerImage: d.header_image || null,
|
||||||
|
capsuleImage: d.capsule_imagev5 || d.header_image || null,
|
||||||
|
storeUrl: `https://store.steampowered.com/app/${steamAppId}`,
|
||||||
|
lastSync: new Date(),
|
||||||
|
syncStatus: "synced",
|
||||||
|
updatedAt: new Date(),
|
||||||
|
})
|
||||||
|
.where(eq(games.steamAppId, steamAppId))
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Steam sync error for ${steamAppId}:`, err)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -3,6 +3,22 @@ import type { NextConfig } from "next";
|
|||||||
const nextConfig: NextConfig = {
|
const nextConfig: NextConfig = {
|
||||||
// Elysia is Bun-native and must not be bundled by Next.js
|
// Elysia is Bun-native and must not be bundled by Next.js
|
||||||
serverExternalPackages: ["elysia", "@elysiajs/eden"],
|
serverExternalPackages: ["elysia", "@elysiajs/eden"],
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "cdn.akamai.steamstatic.com",
|
||||||
|
port: "",
|
||||||
|
pathname: "/steam/apps/**",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "shared.akamai.steamstatic.com",
|
||||||
|
port: "",
|
||||||
|
pathname: "/store_item_assets/**",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|||||||
Reference in New Issue
Block a user