website/src/lib/game-tracker/RankStepper.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { deserialize } from '$app/forms';
	import Minus from 'lucide-svelte/icons/minus';
	import Plus from 'lucide-svelte/icons/plus';
	import type { RankLimits } from './rank-limits';
	import { maxUncappedLevel, rankProgress, stepRank, type Rank } from './rank-progress';

	type SavedRank = Rank & { itemId: number | null };
	let {
		itemId,
		name,
		level,
		prestige,
		limits,
		disabled,
		large = false,
		onupdate,
		children
	}: {
		/** null steps the player rank. */
		itemId: number | null;
		name: string;
		level: number;
		prestige: number;
		limits: RankLimits;
		disabled: boolean;
		large?: boolean;
		onupdate: (rank: SavedRank) => void;
		children?: Snippet;
	} = $props();

	let error = $state('');
	let status = $state('');
	// Presses show immediately; presses made while a save is running go out as one batch.
	let unsent = 0;
	let saving = false;
	let confirmed: Rank = { level: 1, prestige: 0 };

	const progress = $derived(rankProgress(limits, { level, prestige }));
	const atTop = $derived(
		limits.maxLevel === null ? level >= maxUncappedLevel : progress.value >= progress.total
	);
	const atBottom = $derived(level <= 1 && (limits.maxLevel === null || prestige <= 0));

	function press(delta: 1 | -1) {
		const next = stepRank(limits, { level, prestige }, delta);
		if (next.level === level && next.prestige === prestige) return;
		if (!saving && !unsent) confirmed = { level, prestige };
		unsent += delta;
		error = '';
		onupdate({ itemId, ...next });
		void save();
	}

	async function save() {
		if (saving || !unsent) return;
		saving = true;
		status = 'Saving…';
		// The server accepts at most 100 levels per request; any rest goes in the next one.
		const delta = Math.max(-100, Math.min(100, unsent));
		unsent -= delta;
		const body = new FormData();
		if (itemId !== null) body.set('itemId', String(itemId));
		body.set('delta', String(delta));
		try {
			const result = deserialize(
				await (await fetch('?/stepRank', { method: 'POST', body })).text()
			);
			if (result.type !== 'success')
				throw new Error(
					result.type === 'failure'
						? String(result.data?.message ?? 'Could not save.')
						: 'Could not save.'
				);
			const rank = result.data?.rank as SavedRank;
			confirmed = { level: rank.level, prestige: rank.prestige };
		} catch (e) {
			unsent = 0;
			error = e instanceof Error ? e.message : 'Could not save. Try again.';
		}
		saving = false;
		if (unsent) return save();
		status = error ? '' : 'Saved';
		onupdate({ itemId, ...confirmed });
	}
</script>

<div class="stepper" class:large>
	<button
		type="button"
		class="step"
		aria-label={`Level down ${name}`}
		disabled={disabled || atBottom}
		onclick={() => press(-1)}><Minus aria-hidden="true" /></button
	>
	{@render children?.()}
	<button
		type="button"
		class="step up"
		aria-label={`Level up ${name}`}
		disabled={disabled || atTop}
		onclick={() => press(1)}><Plus aria-hidden="true" /></button
	>
	<span role="status" class={error ? 'error' : 'sr-only'}>{error || status}</span>
</div>

<style>
	.stepper {
		--size: calc(30 * var(--u, 1px));
		position: relative;
		display: flex;
		flex-shrink: 0;
		align-items: center;
		gap: calc(4 * var(--u, 1px));
	}
	.large {
		--size: 40px;
		gap: 10px;
	}
	.step {
		display: grid;
		place-items: center;
		width: var(--size);
		height: var(--size);
		border: 1px solid var(--site-border);
		border-radius: calc(var(--size) / 4);
		background: var(--background);
		color: var(--site-text);
		cursor: pointer;
		transition:
			background 0.15s,
			border-color 0.15s;
	}
	.step :global(svg) {
		width: 55%;
		height: 55%;
	}
	.step.up {
		border-color: color-mix(in srgb, #f59e0b 55%, var(--site-border));
		background: color-mix(in srgb, #f59e0b 14%, var(--background));
	}
	.step:hover:not(:disabled) {
		border-color: #f59e0b;
		background: color-mix(in srgb, #f59e0b 26%, var(--background));
	}
	.step:focus-visible {
		outline: 2px solid #f59e0b;
		outline-offset: 1px;
	}
	.step:disabled {
		cursor: default;
		opacity: 0.35;
	}
	.error {
		position: absolute;
		top: calc(100% + 4px);
		right: 0;
		z-index: 20;
		width: 13rem;
		border-radius: 6px;
		background: var(--destructive);
		padding: 6px 8px;
		font-size: 12px;
		color: white;
	}
</style>