Tetardtek
f6bff6e389
All checks were successful
CI/CD — Build & Deploy / Build & Deploy (push) Successful in 22s
Core logic portable (economy, balance, cosmetics, migrateSave) — zero rewrite. 136 tests green, identiques. Backend inchangé. - Svelte 5 runes stores (game, auth, toast) remplacent Zustand - SvelteKit adapter-static SPA (dist/ output, fallback index.html) - Tailwind v4 conservé, design system .gp-* porté - Transitions natives : slide, fly, scale, fade sur toute l'UI - Sidebar tabbée (Production/Evolution/Collection) + CollapsiblePanel - Mobile bottom sheet avec FAB toggle + backdrop blur - Click particles réactifs Svelte (plus de DOM impératif) - TadpoleSprite bounce + glow ring au clic - Guide refait en accordéon, Achievements avec filtres - a11y : focus-visible, Escape modals, aria-current, aria-labels - CI/CD adapté (tests + build + rsync) - Build 504K (vs ~1.2MB React)
37 lines
1.4 KiB
Svelte
37 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { fly, scale } from 'svelte/transition';
|
|
import { backOut, quintOut } from 'svelte/easing';
|
|
import { getToasts } from '$lib/stores/toast.svelte';
|
|
|
|
const variantStyles: Record<string, { color: string; border: string; bg: string }> = {
|
|
success: { color: '#34d399', border: 'rgba(52,211,153,0.3)', bg: 'rgba(16,185,129,0.08)' },
|
|
info: { color: '#60a5fa', border: 'rgba(96,165,250,0.3)', bg: 'rgba(59,130,246,0.08)' },
|
|
reward: { color: '#fbbf24', border: 'rgba(251,191,36,0.3)', bg: 'rgba(245,158,11,0.08)' },
|
|
warning: { color: '#f87171', border: 'rgba(248,113,113,0.3)', bg: 'rgba(239,68,68,0.08)' },
|
|
};
|
|
</script>
|
|
|
|
{#if getToasts().length > 0}
|
|
<div class="fixed top-24 right-4 z-50 flex flex-col gap-2 pointer-events-none">
|
|
{#each getToasts() as t (t.id)}
|
|
{@const style = variantStyles[t.variant] || variantStyles.info}
|
|
<div
|
|
class="pointer-events-auto px-4 py-2.5 rounded-xl font-semibold text-sm shadow-2xl"
|
|
style="
|
|
background: rgba(17,17,17,0.9);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid {style.border};
|
|
color: {style.color};
|
|
font-family: var(--font);
|
|
box-shadow: 0 0 20px {style.bg}, 0 8px 32px rgba(0,0,0,0.4);
|
|
"
|
|
in:fly={{ x: 80, duration: 350, easing: backOut }}
|
|
out:scale={{ duration: 200, start: 0.95, opacity: 0 }}
|
|
role="alert"
|
|
>
|
|
{t.message}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|