Add April
parent
a409bcec07
commit
f1ae8734e1
|
@ -3,6 +3,7 @@
|
||||||
import { mdiStar } from '@mdi/js';
|
import { mdiStar } from '@mdi/js';
|
||||||
|
|
||||||
import Icon from '../../components/Icon.svelte';
|
import Icon from '../../components/Icon.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let avg;
|
export let avg;
|
||||||
export let type;
|
export let type;
|
||||||
|
@ -10,6 +11,8 @@
|
||||||
export let legendaryPity = type.id === 'weapon-event' ? 80 : 90;
|
export let legendaryPity = type.id === 'weapon-event' ? 80 : 90;
|
||||||
export let colorMultiplier = 120;
|
export let colorMultiplier = 120;
|
||||||
|
|
||||||
|
const original = [...avg.legendary.pulls];
|
||||||
|
|
||||||
let numberFormat = Intl.NumberFormat('en', {
|
let numberFormat = Intl.NumberFormat('en', {
|
||||||
maximumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
||||||
minimumFractionDigits: 0,
|
minimumFractionDigits: 0,
|
||||||
|
@ -20,6 +23,27 @@
|
||||||
return `color: hsl(${hue}, 100%, 60%);`;
|
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';
|
$: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -124,8 +148,9 @@
|
||||||
{#each avg.legendary.pulls as pull}
|
{#each avg.legendary.pulls as pull}
|
||||||
<span class="pity rate-{pull.rate} {textSize}"
|
<span class="pity rate-{pull.rate} {textSize}"
|
||||||
>{$t(pull.name)}
|
>{$t(pull.name)}
|
||||||
<span style={calculateColor((legendaryPity - pull.pity) / legendaryPity)}>{pull.pity}</span></span
|
<!-- <span style={calculateColor((legendaryPity - pull.pity) / legendaryPity)}>{pull.pity}</span> -->
|
||||||
>
|
<span class="rainbow">{pull.pity}</span>
|
||||||
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -175,4 +200,24 @@
|
||||||
break-inside: avoid;
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue