Stan Runge
0ee9ed0abb
All checks were successful
Test and deploy staging / staging (push) Successful in 2m29s
- Scale the COD page to the screen: larger gun art, text and progress ribbon, sized from one viewport unit so it fills a MacBook Pro 16" and big monitors and still fits 1280x720 without scrolling. - Five columns on wide screens and four below, picked by CSS, so the server-rendered page already has the final layout. - Replace the tabs/filters/overview rows with one toolbar of matching controls. - Player and weapon ranks step with + and -: level 55 + 1 is the next prestige at level 1, up to max prestige. Presses show at once, batch while a save is running, and stepRank does the arithmetic in SQL. - Clicking a rank still opens exact entry for big jumps. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
60 lines
1.7 KiB
Svelte
60 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { base } from '$app/paths';
|
|
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
|
import artwork from '../../../data/cod-art.json';
|
|
let {
|
|
game,
|
|
name,
|
|
icon,
|
|
compact = false
|
|
}: {
|
|
game: string;
|
|
name: string;
|
|
icon: string | null;
|
|
/** Fill the parent box instead of using a fixed thumbnail size. */
|
|
compact?: boolean;
|
|
} = $props();
|
|
const source = $derived(
|
|
artwork.find((a) => a.game === game && a.name.toLowerCase() === name.toLowerCase())
|
|
);
|
|
const src = $derived(source ? `${base}${source.path}` : icon);
|
|
</script>
|
|
|
|
{#if src}
|
|
<Dialog.Root>
|
|
<Dialog.Trigger
|
|
class={compact
|
|
? 'block h-full w-full cursor-zoom-in rounded-md focus-visible:outline-2'
|
|
: 'shrink-0 overflow-hidden rounded-md border focus-visible:outline-2'}
|
|
aria-label={`View ${name} artwork`}
|
|
><img
|
|
{src}
|
|
alt=""
|
|
loading="lazy"
|
|
width="112"
|
|
height="64"
|
|
class={compact ? 'h-full w-full object-contain' : 'h-28 w-56 object-contain'}
|
|
/></Dialog.Trigger
|
|
>
|
|
<Dialog.Content class="sm:max-w-3xl"
|
|
><Dialog.Header
|
|
><Dialog.Title>{name}</Dialog.Title><Dialog.Description
|
|
>{source?.credit ?? 'Weapon artwork'}</Dialog.Description
|
|
></Dialog.Header
|
|
><img
|
|
{src}
|
|
alt={`${name} weapon reference for ${game.replaceAll('-', ' ')}`}
|
|
class="max-h-[65dvh] w-full object-contain"
|
|
/>{#if source}<!-- Catalog or validated external URL. -->
|
|
<!-- eslint-disable svelte/no-navigation-without-resolve -->
|
|
<a
|
|
href={source.source}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
class="text-xs text-muted-foreground underline">Image source ↗</a
|
|
>
|
|
<!-- eslint-enable svelte/no-navigation-without-resolve -->{/if}</Dialog.Content
|
|
>
|
|
</Dialog.Root>
|
|
{/if}
|