diff --git a/src/routes/wish/_summaryItem.svelte b/src/routes/wish/_summaryItem.svelte index 45a1ca03..cae12681 100644 --- a/src/routes/wish/_summaryItem.svelte +++ b/src/routes/wish/_summaryItem.svelte @@ -3,6 +3,7 @@ import { mdiStar } from '@mdi/js'; import Icon from '../../components/Icon.svelte'; + import { onMount } from 'svelte'; export let avg; export let type; @@ -10,6 +11,8 @@ export let legendaryPity = type.id === 'weapon-event' ? 80 : 90; export let colorMultiplier = 120; + const original = [...avg.legendary.pulls]; + let numberFormat = Intl.NumberFormat('en', { maximumFractionDigits: 2, minimumFractionDigits: 0, @@ -20,6 +23,27 @@ return `color: hsl(${hue}, 100%, 60%);`; } + function wow() { + for (const pull of avg.legendary.pulls) { + if (pull.pity >= 90) continue; + pull.pity += 1; + } + + avg.legendary.pulls = avg.legendary.pulls; + } + + let interval; + onMount(() => { + interval = setInterval(() => { + wow(); + }, 500); + + setTimeout(() => { + clearInterval(interval); + avg.legendary.pulls = original; + }, 60000); + }); + $: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base'; @@ -124,8 +148,9 @@ {#each avg.legendary.pulls as pull} {$t(pull.name)} - {pull.pity} + + {pull.pity} + {/each} {/if} @@ -175,4 +200,24 @@ break-inside: avoid; } } + + .rainbow { + background-image: repeating-linear-gradient(45deg, green, yellow, orange, red); + background-size: 800% 800%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: rainbow 5s ease-in-out infinite; + } + + @keyframes rainbow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 25%; + } + 100% { + background-position: 0% 50%; + } + }