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%;
+ }
+ }