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:
@@ -155,7 +155,6 @@
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
transition: background 120ms;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cal-day.outside {
|
||||
opacity: 0.25;
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user