<script lang="ts">
	import { fly, fade } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	import { formatNumber } from '$lib/utils/formatNumber';

	interface Particle {
		id: number;
		x: number;
		y: number;
		gain: number;
		isDouble: boolean;
		isCrit: boolean;
	}

	let particles = $state<Particle[]>([]);
	let nextId = 0;

	export function spawn(x: number, y: number, gain: number, isDouble: boolean, isCrit: boolean) {
		const id = nextId++;
		// Random horizontal spread
		const offsetX = (Math.random() - 0.5) * 40;
		particles = [...particles, { id, x: x + offsetX, y, gain, isDouble, isCrit }];
		setTimeout(() => {
			particles = particles.filter(p => p.id !== id);
		}, 1000);
	}
</script>

<div class="fixed inset-0 pointer-events-none z-[100]">
	{#each particles as p (p.id)}
		{@const prefix = p.isCrit ? 'CRIT ' : p.isDouble ? 'x2 ' : ''}
		{@const color = p.isCrit ? '#f59e0b' : p.isDouble ? '#a78bfa' : '#34d399'}
		{@const size = p.isCrit ? '2rem' : p.isDouble ? '1.8rem' : '1.6rem'}
		<span
			class="absolute font-extrabold"
			style="
				left: {p.x}px;
				top: {p.y}px;
				color: {color};
				font-size: {size};
				font-family: var(--font);
				text-shadow: 0 0 10px {color}60, 0 2px 6px rgba(0,0,0,0.7);
			"
			in:fly={{ y: 0, duration: 50 }}
			out:fly={{ y: -90, duration: 900, easing: quintOut, opacity: 0 }}
		>
			{prefix}+{formatNumber(p.gain)}
		</span>
	{/each}
</div>
