388 lines
15 KiB
Svelte
388 lines
15 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import Card from '$ui/components/primitives/Card.svelte';
|
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
|
import Button from '$ui/components/primitives/Button.svelte';
|
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
|
import Field from '$ui/components/primitives/Field.svelte';
|
|
import Input from '$ui/components/primitives/Input.svelte';
|
|
import Select from '$ui/components/primitives/Select.svelte';
|
|
|
|
interface ScriptRow {
|
|
id: number;
|
|
name: string;
|
|
target_rel_path: string;
|
|
scope_type: 'game' | 'map' | null;
|
|
scope_value: string | null;
|
|
current_version_id: number | null;
|
|
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
|
latestVersion: {
|
|
id: number; version: number; sha256: string; size: number;
|
|
state: 'untested' | 'tested' | 'test-failed'; uploaded_at: string;
|
|
} | null;
|
|
versionCount: number;
|
|
servers: string[];
|
|
runningBetaId: number | null;
|
|
}
|
|
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]>; }
|
|
|
|
let scripts = $state<ScriptRow[]>([]);
|
|
let loading = $state(true);
|
|
let flash = $state<string | null>(null);
|
|
let uploading = $state(false);
|
|
let scopeOptions = $state<ScopeOptions>({ games: [], mapsByGame: {} });
|
|
let successBanner = $state<{ name: string; scriptId: number; version: number } | null>(null);
|
|
|
|
let newName = $state('');
|
|
let newScopeType = $state<'none' | 'game' | 'map'>('none');
|
|
let newScopeGame = $state('');
|
|
let newScopeMap = $state('');
|
|
let newFile = $state<File | null>(null);
|
|
let newNotes = $state('');
|
|
|
|
const scopeValue = $derived.by(() => {
|
|
if (newScopeType === 'game') return newScopeGame;
|
|
if (newScopeType === 'map') return newScopeMap;
|
|
return '';
|
|
});
|
|
|
|
let serverCache = $state<Array<{ name: string; game: string | null; map: string | null }>>([]);
|
|
const matchingServers = $derived.by(() => {
|
|
if (newScopeType === 'none') return null;
|
|
if (!scopeValue) return null;
|
|
return serverCache
|
|
.filter((s) => (newScopeType === 'game' ? s.game : s.map) === scopeValue)
|
|
.map((s) => s.name);
|
|
});
|
|
|
|
async function load(): Promise<void> {
|
|
const [scriptsRes, scopeRes, serversRes] = await Promise.all([
|
|
fetch('/api/scripts?kind=script'),
|
|
fetch('/api/scope-options'),
|
|
fetch('/api/servers')
|
|
]);
|
|
const body = (await scriptsRes.json()) as { scripts: ScriptRow[] };
|
|
scripts = body.scripts;
|
|
scopeOptions = (await scopeRes.json()) as ScopeOptions;
|
|
const sBody = (await serversRes.json()) as { servers: Array<{ name: string; game: string | null; map: string | null }> };
|
|
serverCache = sBody.servers;
|
|
loading = false;
|
|
}
|
|
onMount(load);
|
|
|
|
function pickFile(e: Event): void {
|
|
const t = e.target as HTMLInputElement;
|
|
newFile = t.files?.[0] ?? null;
|
|
if (!newName && newFile) newName = newFile.name.replace(/\.[^.]+$/, '');
|
|
}
|
|
|
|
async function createScript(e: Event): Promise<void> {
|
|
e.preventDefault();
|
|
if (uploading || !newFile || !newName.trim()) return;
|
|
if (newScopeType !== 'none' && !scopeValue) {
|
|
flash = `Pick a ${newScopeType}`;
|
|
return;
|
|
}
|
|
uploading = true; flash = null;
|
|
const form = new FormData();
|
|
form.append('name', newName.trim());
|
|
form.append('scopeType', newScopeType);
|
|
if (scopeValue) form.append('scopeValue', scopeValue);
|
|
if (newNotes.trim()) form.append('notes', newNotes.trim());
|
|
form.append('content', newFile);
|
|
try {
|
|
const res = await fetch('/api/scripts', { method: 'POST', body: form });
|
|
const body = (await res.json()) as {
|
|
ok: boolean; error?: string;
|
|
script?: { id: number; name: string };
|
|
versionId?: number;
|
|
};
|
|
if (!res.ok || !body.ok) {
|
|
flash = body.error ?? `HTTP ${res.status}`;
|
|
return;
|
|
}
|
|
successBanner = body.script
|
|
? { name: body.script.name, scriptId: body.script.id, version: 1 }
|
|
: null;
|
|
newName = ''; newScopeType = 'none';
|
|
newScopeGame = ''; newScopeMap = '';
|
|
newNotes = ''; newFile = null;
|
|
await load();
|
|
} finally {
|
|
uploading = false;
|
|
}
|
|
}
|
|
|
|
function scopeLabel(s: ScriptRow): string {
|
|
if (!s.scope_type) return 'unscoped';
|
|
return `${s.scope_type} · ${s.scope_value ?? '?'}`;
|
|
}
|
|
function detailHref(s: ScriptRow): string {
|
|
if (s.kind === 'config' || s.kind === 'baseline') return `/configs/${s.id}`;
|
|
if (s.kind === 'plugin') return `/plugins/${s.id}`;
|
|
return `/scripts/${s.id}`;
|
|
}
|
|
function stateVariantFor(s: ScriptRow): 'online' | 'warning' | 'danger' | 'neutral' | null {
|
|
if (!s.latestVersion) return null;
|
|
if (s.current_version_id === null) return 'neutral';
|
|
if (s.latestVersion.id !== s.current_version_id) {
|
|
if (s.latestVersion.state === 'untested') return 'neutral';
|
|
if (s.latestVersion.state === 'tested') return 'online';
|
|
if (s.latestVersion.state === 'test-failed') return 'danger';
|
|
}
|
|
return null;
|
|
}
|
|
function stateLabel(s: ScriptRow): string {
|
|
if (!s.latestVersion) return '';
|
|
if (s.current_version_id === null) return 'untested';
|
|
if (s.latestVersion.id !== s.current_version_id) {
|
|
return `v${s.latestVersion.version} ${s.latestVersion.state.replace('-', ' ')}`;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
let gameOptions = $derived([
|
|
{ value: '', label: '— Pick a game —', disabled: true },
|
|
...scopeOptions.games.map((g) => ({ value: g, label: g }))
|
|
]);
|
|
let mapOptions = $derived([
|
|
{ value: '', label: '— Pick a map —', disabled: true },
|
|
...(scopeOptions.mapsByGame[newScopeGame] ?? []).map((m) => ({ value: m, label: m }))
|
|
]);
|
|
let scopeTypeOptions = [
|
|
{ value: 'none', label: 'Unscoped' },
|
|
{ value: 'game', label: 'Game' },
|
|
{ value: 'map', label: 'Map' }
|
|
];
|
|
</script>
|
|
|
|
<div class="page">
|
|
<SectionHeader title="Scripts" subtitle="Upload a script, then open a beta to test it before promotion." />
|
|
|
|
<!-- Upload form -->
|
|
<Card padding="lg">
|
|
<h2 class="panel-title">Upload a script</h2>
|
|
|
|
{#if successBanner}
|
|
<div class="banner">
|
|
<strong>v{successBanner.version} uploaded — untested.</strong>
|
|
<span>
|
|
Open a beta on <a href="/scripts/{successBanner.scriptId}">{successBanner.name}</a>
|
|
to test it before it can be promoted.
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<form onsubmit={createScript} class="upload-form">
|
|
<Field label="Name">
|
|
<Input bind:value={newName} placeholder="hud tweaks" disabled={uploading} />
|
|
</Field>
|
|
|
|
<Field label="Notes" hint="Optional. What changed in this version.">
|
|
<Input bind:value={newNotes} placeholder="what changed" disabled={uploading} />
|
|
</Field>
|
|
|
|
<Field label="Scope" hint="Where this script deploys. Unscoped ships wherever a beta targets it.">
|
|
<div class="scope-row">
|
|
<Select bind:value={newScopeType} options={scopeTypeOptions} disabled={uploading} />
|
|
{#if newScopeType === 'game' || newScopeType === 'map'}
|
|
<Select bind:value={newScopeGame} options={gameOptions} disabled={uploading} />
|
|
{/if}
|
|
{#if newScopeType === 'map'}
|
|
<Select bind:value={newScopeMap} options={mapOptions} disabled={uploading || !newScopeGame} />
|
|
{/if}
|
|
</div>
|
|
{#if newScopeType !== 'none' && scopeValue}
|
|
{@const matches = matchingServers ?? []}
|
|
{#if matches.length === 0}
|
|
<div class="preview warn">No matching servers — the promoted script will land nowhere.</div>
|
|
{:else}
|
|
<div class="preview ok">
|
|
{matches.length} matching server{matches.length === 1 ? '' : 's'}: {matches.join(', ')}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</Field>
|
|
|
|
<Field label="File">
|
|
<Input type="file" onchange={pickFile} disabled={uploading} />
|
|
</Field>
|
|
|
|
<div class="form-actions">
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
disabled={uploading || !newFile || !newName}
|
|
loading={uploading}
|
|
>
|
|
Upload script
|
|
</Button>
|
|
{#if flash}<span class="flash">{flash}</span>{/if}
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
|
|
<!-- Script list -->
|
|
<section class="section">
|
|
<div class="section-head">
|
|
<h2>All scripts</h2>
|
|
<Badge variant="neutral" size="sm">{scripts.length}</Badge>
|
|
</div>
|
|
|
|
{#if loading}
|
|
<div class="loading">Loading…</div>
|
|
{:else if scripts.length === 0}
|
|
<EmptyState title="No scripts yet" description="Upload one above to get started." />
|
|
{:else}
|
|
<div class="rows">
|
|
{#each scripts as s (s.id)}
|
|
<a class="row" href={detailHref(s)}>
|
|
<div class="row-top">
|
|
<span class="name">{s.name}</span>
|
|
<Badge
|
|
variant={s.scope_type === 'game' ? 'info' :
|
|
s.scope_type === 'map' ? 'warning' : 'neutral'}
|
|
size="sm"
|
|
>
|
|
{scopeLabel(s)}
|
|
</Badge>
|
|
{#if stateVariantFor(s)}
|
|
{@const v = stateVariantFor(s)!}
|
|
<Badge variant={v} size="sm">{stateLabel(s)}</Badge>
|
|
{/if}
|
|
{#if s.runningBetaId}
|
|
<Badge variant="warning" size="sm">β{s.runningBetaId} running</Badge>
|
|
{/if}
|
|
</div>
|
|
<div class="row-meta">
|
|
<span class="path">{s.target_rel_path}</span>
|
|
<span>v{s.latestVersion?.version ?? '—'} · {s.versionCount} version{s.versionCount === 1 ? '' : 's'}</span>
|
|
{#if s.servers.length}
|
|
<span>{s.servers.length} matching server{s.servers.length === 1 ? '' : 's'}</span>
|
|
{/if}
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
|
.loading { text-align: center; padding: var(--space-12); color: var(--text-tertiary); }
|
|
|
|
.panel-title {
|
|
margin: 0 0 var(--space-4);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-md);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-primary);
|
|
}
|
|
.banner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: var(--space-3) var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
background: rgba(124, 212, 255, 0.06);
|
|
border: 1px solid rgba(124, 212, 255, 0.22);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-primary);
|
|
}
|
|
.banner a { color: var(--state-online); text-decoration: underline; }
|
|
|
|
.upload-form {
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.scope-row {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
.scope-row :global(.wrap) { flex: 1 1 140px; min-width: 140px; }
|
|
.preview {
|
|
margin-top: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.preview.ok { background: var(--surface-sunken); color: var(--text-secondary); }
|
|
.preview.warn { background: rgba(255, 176, 32, 0.06); color: var(--state-warning); border: 1px solid rgba(255, 176, 32, 0.28); }
|
|
|
|
.form-actions {
|
|
flex-wrap: wrap;
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
}
|
|
.flash {
|
|
color: var(--state-danger);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
.section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
.section-head h2 {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-md);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
.row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
padding: var(--space-4) var(--space-5);
|
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition:
|
|
background-color var(--dur-fast) var(--ease-standard),
|
|
border-color var(--dur-fast) var(--ease-standard);
|
|
}
|
|
.row:hover { background: var(--surface-raised); border-color: var(--border-strong); }
|
|
.row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
|
.row-top {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.name {
|
|
font-size: var(--text-md);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-primary);
|
|
letter-spacing: var(--tracking-tight);
|
|
}
|
|
.row-meta {
|
|
display: flex;
|
|
gap: var(--space-5);
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
flex-wrap: wrap;
|
|
}
|
|
.path { color: var(--text-secondary); }
|
|
|
|
@media (max-width: 720px) {
|
|
.upload-form { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|