36 lines
2.6 KiB
Svelte
36 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import type { Host } from '$lib/hosts.js';
|
|
import { formatGameBytes } from '$lib/game-files.js';
|
|
import GameFileTransferProgress from '$ui/components/GameFileTransferProgress.svelte';
|
|
let { host }: { host: Host } = $props();
|
|
</script>
|
|
|
|
<div class="preparation" aria-live="polite">
|
|
<p>The default runtime and the latest available T5 and T6 game files are prepared automatically on active hosts. Running servers keep their current files.</p>
|
|
{#if host.preparation}
|
|
<p class="status" class:blocked={host.preparation.state === 'blocked'}>Automatic setup: {host.preparation.state === 'ready' ? 'Ready' : host.preparation.state === 'preparing' ? 'In progress' : host.preparation.state === 'blocked' ? 'Needs attention' : 'Waiting'}</p>
|
|
<ul>
|
|
{#each host.preparation.items as item}
|
|
<li>
|
|
<div class="row"><strong>{item.label}</strong><span>{item.state === 'blocked' ? 'Needs attention' : item.state}</span></div>
|
|
<p class:blocked={item.state === 'blocked'}>{item.detail}</p>
|
|
{#if item.cache && item.cache.status !== 'missing'}
|
|
<div class="transfer"><GameFileTransferProgress cache={item.cache} connected={host.connected} /></div>
|
|
{:else if item.bytesTotal && item.bytesDownloaded !== undefined && item.state === 'preparing'}
|
|
<progress max={item.bytesTotal} value={item.bytesDownloaded} aria-label={`${item.label} download progress`}></progress>
|
|
<small>{formatGameBytes(item.bytesDownloaded)} / {formatGameBytes(item.bytesTotal)}</small>
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}<p>Setup progress will appear after the host connects.</p>{/if}
|
|
<p><a href="/game-files">Upload and view T5 / T6 game files →</a></p>
|
|
</div>
|
|
|
|
<style>
|
|
.preparation { display:grid; gap:12px; } p { margin:0; color:var(--text-secondary); font-size:var(--text-sm); line-height:1.6; } .status { color:var(--text-primary); }
|
|
ul { list-style:none; padding:0; margin:0; display:grid; gap:16px; } li { min-width:0; } .row { display:flex; justify-content:space-between; gap:12px; font-size:var(--text-sm); } strong { overflow-wrap:anywhere; } span { text-transform:capitalize; color:var(--text-secondary); }
|
|
li p { margin-top:4px; } .blocked { color:var(--state-danger); } progress { width:100%; margin-top:8px; accent-color:var(--accent-primary); } small { display:block; color:var(--text-secondary); font-size:var(--text-xs); } a { color:var(--accent-primary-hover); }
|
|
.transfer { margin-top:8px; }
|
|
</style>
|