feat: auto-search IGDB on file select, pick match or type custom title
Build & Deploy / build-and-deploy (push) Successful in 54s
Build & Deploy / build-and-deploy (push) Successful in 54s
Upload flow is now: 1. Click +Upload → select a .zip file 2. IGDB is auto-searched with the filename 3. If matches found → show results as selectable cards + fallback custom title search at the bottom 4. If no matches → show 'no matches' + manual title + Upload btn + a fallback 'Use filename: xxx' button 5. Clicking a result uploads immediately with that game's title (so IGDB auto-scrape picks it up correctly) 6. Cancel button to dismiss
This commit is contained in:
David Alvarez
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { listGames, uploadGame } from "../lib/api.js";
|
||||
import { listGames, uploadGame, searchIGDB } from "../lib/api.js";
|
||||
import GameCard from "../lib/GameCard.svelte";
|
||||
|
||||
let games = $state([]);
|
||||
@@ -12,6 +12,9 @@
|
||||
let pendingFile = $state(null);
|
||||
let pendingFileName = $state("");
|
||||
let pendingTitle = $state("");
|
||||
let searching = $state(false);
|
||||
let searchError = $state("");
|
||||
let igdbResults = $state(null); // null=loading, []=no results, [{...}]=matches
|
||||
|
||||
let fileInput;
|
||||
|
||||
@@ -33,14 +36,46 @@
|
||||
pendingFile = file;
|
||||
pendingFileName = name;
|
||||
pendingTitle = "";
|
||||
// Reset input so the same file can be re-selected
|
||||
igdbResults = null;
|
||||
searching = true;
|
||||
searchError = "";
|
||||
fileInput.value = "";
|
||||
// Auto-search IGDB with the filename
|
||||
searchIGDB(name).then(data => {
|
||||
igdbResults = data.results || [];
|
||||
}).catch(err => {
|
||||
searchError = "IGDB search failed: " + err.message;
|
||||
igdbResults = [];
|
||||
}).finally(() => {
|
||||
searching = false;
|
||||
});
|
||||
}
|
||||
|
||||
async function handleManualSearch() {
|
||||
const q = pendingTitle.trim();
|
||||
if (!q) return;
|
||||
searching = true;
|
||||
searchError = "";
|
||||
igdbResults = null;
|
||||
try {
|
||||
const data = await searchIGDB(q);
|
||||
igdbResults = data.results || [];
|
||||
if (igdbResults.length === 0) {
|
||||
searchError = "No matches found on IGDB.";
|
||||
}
|
||||
} catch (err) {
|
||||
searchError = "IGDB search failed: " + err.message;
|
||||
igdbResults = [];
|
||||
}
|
||||
searching = false;
|
||||
}
|
||||
|
||||
function cancelUpload() {
|
||||
pendingFile = null;
|
||||
pendingFileName = "";
|
||||
pendingTitle = "";
|
||||
igdbResults = null;
|
||||
searchError = "";
|
||||
}
|
||||
|
||||
async function doUpload(title) {
|
||||
@@ -93,23 +128,74 @@
|
||||
<div class="upload-dialog" onclick={(e) => e.stopPropagation()} role="dialog">
|
||||
<h3>Upload Game</h3>
|
||||
<p class="upload-file-name">{pendingFileName}.zip</p>
|
||||
<div class="upload-dialog-actions">
|
||||
<button class="btn btn-primary" onclick={() => doUpload("")} disabled={uploading}>
|
||||
{uploading ? "Uploading..." : "Use filename as title"}
|
||||
</button>
|
||||
<div class="upload-custom-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter a custom title..."
|
||||
bind:value={pendingTitle}
|
||||
disabled={uploading}
|
||||
/>
|
||||
<button class="btn" onclick={() => doUpload(pendingTitle.trim())} disabled={uploading || !pendingTitle.trim()}>
|
||||
Upload
|
||||
|
||||
<div class="upload-dialog-body">
|
||||
{#if searching}
|
||||
<div class="status-msg">Searching IGDB for "{pendingFileName}"...</div>
|
||||
{:else if igdbResults !== null && igdbResults.length > 0}
|
||||
<p class="match-label">Select a match or enter a custom title:</p>
|
||||
<div class="upload-igdb-results">
|
||||
{#each igdbResults as result (result.igdb_id)}
|
||||
<button
|
||||
class="igdb-result"
|
||||
onclick={() => doUpload(result.name)}
|
||||
disabled={uploading}
|
||||
>
|
||||
{#if result.cover_url}
|
||||
<img src={result.cover_url} alt={result.name} class="igdb-thumb" loading="lazy" />
|
||||
{:else}
|
||||
<div class="igdb-thumb-placeholder">🎮</div>
|
||||
{/if}
|
||||
<div class="igdb-info">
|
||||
<strong>{result.name}</strong>
|
||||
<span class="igdb-meta">
|
||||
{result.year || "—"}
|
||||
{#if result.genres?.length} · {result.genres.slice(0, 2).join(", ")}{/if}
|
||||
</span>
|
||||
{#if result.developer}
|
||||
<span class="igdb-dev">{result.developer}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="upload-custom-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Or type a different title..."
|
||||
bind:value={pendingTitle}
|
||||
disabled={uploading}
|
||||
onkeydown={(e) => e.key === "Enter" && handleManualSearch()}
|
||||
/>
|
||||
<button class="btn" onclick={handleManualSearch} disabled={uploading || !pendingTitle.trim()}>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#if searchError}
|
||||
<div class="status-msg error-msg">{searchError}</div>
|
||||
{:else}
|
||||
<p class="match-label">No matches found on IGDB. Enter a title manually:</p>
|
||||
{/if}
|
||||
<div class="upload-custom-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter game title..."
|
||||
bind:value={pendingTitle}
|
||||
disabled={uploading}
|
||||
onkeydown={(e) => e.key === "Enter" && doUpload(pendingTitle.trim())}
|
||||
/>
|
||||
<button class="btn" onclick={() => doUpload(pendingTitle.trim())} disabled={uploading || !pendingTitle.trim()}>
|
||||
{uploading ? "Uploading..." : "Upload"}
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick={() => doUpload(pendingFileName)} disabled={uploading}>
|
||||
Use filename: {pendingFileName}
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn" onclick={cancelUpload} disabled={uploading}>Cancel</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button class="btn btn-cancel" onclick={cancelUpload} disabled={uploading}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -127,7 +213,7 @@
|
||||
<p>Upload a DOS game ZIP to get started</p>
|
||||
<label class="btn btn-primary" style="margin-top: 16px;">
|
||||
Upload your first game
|
||||
<input type="file" accept=".zip" class="hidden-input" onchange={handleUpload} />
|
||||
<input type="file" accept=".zip" class="hidden-input" onchange={handleFileSelected} />
|
||||
</label>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -231,7 +317,8 @@
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Upload dialog overlay */
|
||||
/* ─── Upload Dialog ─────────────────────────────── */
|
||||
|
||||
.upload-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -247,8 +334,11 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
max-width: 420px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.upload-dialog h3 {
|
||||
margin-bottom: 4px;
|
||||
@@ -258,14 +348,101 @@
|
||||
.upload-file-name {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.upload-dialog-actions {
|
||||
.upload-dialog-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin: 16px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.match-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.status-msg {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-style: italic;
|
||||
}
|
||||
.status-msg.error-msg {
|
||||
color: #ff6666;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* IGDB results list inside dialog */
|
||||
.upload-igdb-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.igdb-result {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
background: var(--surface-hover);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: border-color 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
.igdb-result:hover {
|
||||
border-color: var(--phosphor-dim);
|
||||
}
|
||||
.igdb-result:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
}
|
||||
.igdb-thumb {
|
||||
width: 42px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.igdb-thumb-placeholder {
|
||||
width: 42px;
|
||||
height: 56px;
|
||||
background: var(--surface);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.igdb-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.igdb-info strong {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-bright);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.igdb-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.igdb-dev {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.upload-custom-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -274,4 +451,19 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
border-color: var(--border);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.btn-cancel:hover {
|
||||
border-color: var(--text-dim);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-secondary {
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user