feat: add multi-strategy version fetchers, disable auto-fetch by default
- Add 4 version-fetch strategies (UpToDateCheck API, Store Page Scrape, Community Hub Scrape, Store API Heuristic) — no Steam API key needed - Create orchestrator that tries all strategies, prefers named version over build ID - Add test page at /test-version-fetchers for comparing strategies - Add standalone /api/version-test endpoint (direct Steam App ID, no DB) - Update /api/games/:id/steamdb-version to use new strategies - Disable auto-fetch on submit page by default (NEXT_PUBLIC_VERSION_AUTO_FETCH=true to enable) - SteamDB scraping blocked by Cloudflare; strategies preserved for later enablement
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback } from "react"
|
||||
import { RefreshCwIcon, CheckCircleIcon, XCircleIcon, AlertTriangleIcon } from "lucide-react"
|
||||
|
||||
interface StrategyResult {
|
||||
strategy: string
|
||||
versionString: string | null
|
||||
buildId: string | null
|
||||
success: boolean
|
||||
error: string | null
|
||||
}
|
||||
|
||||
export default function TestVersionFetchersPage() {
|
||||
const [appId, setAppId] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [results, setResults] = useState<StrategyResult[] | null>(null)
|
||||
const [best, setBest] = useState<StrategyResult | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const runTest = useCallback(async (id?: string) => {
|
||||
const targetId = id ?? appId
|
||||
if (!targetId.trim()) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setResults(null)
|
||||
setBest(null)
|
||||
|
||||
try {
|
||||
// Use the standalone endpoint — no DB lookup needed
|
||||
const testRes = await fetch(`/api/version-test?steamAppId=${encodeURIComponent(targetId)}`)
|
||||
if (!testRes.ok) {
|
||||
const errData = await testRes.json().catch(() => ({}))
|
||||
setError(errData.error || `API error: ${testRes.status}`)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
const testData = await testRes.json()
|
||||
|
||||
if (testData.error) {
|
||||
setError(testData.error)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
setResults(testData.results)
|
||||
setBest(testData.best)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Unknown error")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [appId])
|
||||
|
||||
const handleQuickTest = useCallback((id: string) => {
|
||||
setAppId(id)
|
||||
runTest(id)
|
||||
}, [runTest])
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
<h1 className="text-2xl font-bold mb-2">Version Fetcher — Strategy Comparison</h1>
|
||||
<p className="text-sm text-text/60 mb-8">
|
||||
Enter a <strong>Steam App ID</strong> to test all version-fetching strategies.
|
||||
The best result (priority: named version > build ID) will be highlighted.
|
||||
</p>
|
||||
|
||||
{/* Input */}
|
||||
<div className="flex gap-3 mb-8">
|
||||
<input
|
||||
type="text"
|
||||
value={appId}
|
||||
onChange={(e) => setAppId(e.target.value)}
|
||||
placeholder="Steam App ID (e.g., 730 for CS2)"
|
||||
className="flex-1 px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
||||
onKeyDown={(e) => e.key === "Enter" && runTest()}
|
||||
/>
|
||||
<button
|
||||
onClick={() => runTest()}
|
||||
disabled={loading || !appId.trim()}
|
||||
className="px-6 py-3 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<RefreshCwIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
"Test All"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="p-4 rounded-lg bg-red-500/10 border border-red-500/30 mb-8">
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{results && (
|
||||
<div className="space-y-4">
|
||||
{/* Best Result */}
|
||||
{best ? (
|
||||
<div className="p-4 rounded-lg bg-green-500/10 border border-green-500/30">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-green-400" />
|
||||
<h3 className="text-sm font-semibold text-green-400">
|
||||
Best Result: {best.strategy}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-text/40">Version String</p>
|
||||
<p className="text-lg font-mono text-text">
|
||||
{best.versionString || "—"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-text/40">Build ID</p>
|
||||
<p className="text-lg font-mono text-text">
|
||||
{best.buildId || "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/30">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangleIcon className="h-5 w-5 text-yellow-400" />
|
||||
<p className="text-sm text-yellow-400">
|
||||
No strategy found version data for this game.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* All Strategy Results */}
|
||||
<h3 className="text-sm font-semibold text-text mt-6 mb-3">
|
||||
All Strategy Results
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{results.map((r, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`p-3 rounded-lg border ${
|
||||
r.success
|
||||
? "border-green-500/20 bg-green-500/5"
|
||||
: "border-red-500/10 bg-red-500/5"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{r.success ? (
|
||||
<CheckCircleIcon className="h-4 w-4 text-green-400" />
|
||||
) : (
|
||||
<XCircleIcon className="h-4 w-4 text-red-400" />
|
||||
)}
|
||||
<span className="text-sm font-medium text-text">
|
||||
{r.strategy}
|
||||
</span>
|
||||
</div>
|
||||
{r.error && (
|
||||
<span className="text-xs text-red-400">{r.error}</span>
|
||||
)}
|
||||
</div>
|
||||
{r.success && (
|
||||
<div className="grid grid-cols-2 gap-4 ml-6">
|
||||
<div>
|
||||
<span className="text-xs text-text/40">Version: </span>
|
||||
<span className="text-sm font-mono text-text">
|
||||
{r.versionString || "—"}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-text/40">Build: </span>
|
||||
<span className="text-sm font-mono text-text">
|
||||
{r.buildId || "—"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Test Buttons */}
|
||||
<div className="mt-8 p-4 rounded-lg border border-border bg-text/2">
|
||||
<h3 className="text-xs font-semibold text-text/40 mb-3">
|
||||
Quick Test (known Steam App IDs)
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ id: "730", label: "CS2" },
|
||||
{ id: "440", label: "TF2" },
|
||||
{ id: "570", label: "Dota 2" },
|
||||
{ id: "271590", label: "GTA V" },
|
||||
{ id: "1174180", label: "RDR2" },
|
||||
{ id: "1086940", label: "BG3" },
|
||||
{ id: "1245620", label: "Elden Ring" },
|
||||
{ id: "292030", label: "Witcher 3" },
|
||||
].map((g) => (
|
||||
<button
|
||||
key={g.id}
|
||||
onClick={() => handleQuickTest(g.id)}
|
||||
className="px-3 py-1.5 rounded-md border border-border bg-text/5 text-xs text-text/60 hover:text-text hover:border-primary/50 transition-colors"
|
||||
>
|
||||
{g.label} ({g.id})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user