feat: tap-to-preview stickers in gallery with glow effect

Add full rarity glow to gallery stickers matching the reward popup style.
Tapping an owned sticker opens a large preview card. Allow calendar
stickers to overdraw their cell on hover.
This commit is contained in:
2026-04-07 20:38:05 +02:00
parent a26fa5d005
commit 973783cf53
4 changed files with 23 additions and 8 deletions
@@ -155,7 +155,6 @@
border-radius: 8px;
border: 1px solid transparent;
transition: background 120ms;
overflow: hidden;
}
.cal-day.outside {
opacity: 0.25;
+7 -5
View File
@@ -3,7 +3,7 @@
import { elasticOut } from 'svelte/easing';
import { getRarityColor } from '$lib/utils/stickers';
let { sticker, onclose } = $props();
let { sticker, onclose, title = 'Sticker erhalten!', buttonText = 'Toll!', bounce = true } = $props();
const rarityLabels = /** @type {Record<string, string>} */ ({
common: 'Gewöhnlich',
@@ -17,19 +17,21 @@
<div class="popup-backdrop" transition:fade={{ duration: 200 }} onclick={onclose} onkeydown={e => e.key === 'Escape' && onclose?.()}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="popup-card" transition:scale={{ start: 0.5, duration: 500, easing: elasticOut }} onclick={e => e.stopPropagation()}>
<div class="popup-card" transition:scale={bounce ? { start: 0.5, duration: 500, easing: elasticOut } : { start: 0.85, duration: 200 }} onclick={e => e.stopPropagation()}>
<div class="sticker-display" style="--rarity-color: {getRarityColor(sticker.rarity)}">
<img class="sticker-img" src="/stickers/{sticker.image}" alt={sticker.name} />
</div>
<div class="popup-text">
<h3>Sticker erhalten!</h3>
<p class="sticker-name">{sticker.name}</p>
<h3>{title}</h3>
{#if title !== sticker.name}
<p class="sticker-name">{sticker.name}</p>
{/if}
<p class="sticker-desc">{sticker.description}</p>
<span class="rarity-badge" style="color: {getRarityColor(sticker.rarity)}">
{rarityLabels[sticker.rarity] || sticker.rarity}
</span>
</div>
<button class="btn-close" onclick={onclose}>Toll!</button>
<button class="btn-close" onclick={onclose}>{buttonText}</button>
</div>
</div>