mirror of
https://github.com/MadeBaruna/paimon-moe.git
synced 2024-10-24 09:56:41 +02:00
Update special event
This commit is contained in:
parent
3520740299
commit
69353bfd01
1 changed files with 95 additions and 6 deletions
|
@ -3,10 +3,18 @@
|
||||||
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;
|
||||||
|
|
||||||
|
const legendaryStr = JSON.stringify(avg.legendary.pulls);
|
||||||
|
let legendary = JSON.parse(legendaryStr);
|
||||||
|
let legendaryBackup = JSON.parse(legendaryStr);
|
||||||
|
let dropit = false;
|
||||||
|
let stop = false;
|
||||||
|
let running = true;
|
||||||
|
|
||||||
let numberFormat = Intl.NumberFormat('en', {
|
let numberFormat = Intl.NumberFormat('en', {
|
||||||
maximumFractionDigits: 1,
|
maximumFractionDigits: 1,
|
||||||
minimumFractionDigits: 0,
|
minimumFractionDigits: 0,
|
||||||
|
@ -17,6 +25,47 @@
|
||||||
return `color: hsl(${hue}, 100%, 60%);`;
|
return `color: hsl(${hue}, 100%, 60%);`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function suprize() {
|
||||||
|
const randomOrder = [...Array(legendary.length).keys()];
|
||||||
|
for (let i = randomOrder.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[randomOrder[i], randomOrder[j]] = [randomOrder[j], randomOrder[i]];
|
||||||
|
}
|
||||||
|
|
||||||
|
let time = 2000;
|
||||||
|
for (const index of randomOrder) {
|
||||||
|
legendary[index].name = 'Qiqi';
|
||||||
|
await sleep(time);
|
||||||
|
time = Math.max(100, time - 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
running = false;
|
||||||
|
await sleep(20000);
|
||||||
|
if (stop) return;
|
||||||
|
wow();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function wow() {
|
||||||
|
if (running) return;
|
||||||
|
dropit = true;
|
||||||
|
await sleep(3000);
|
||||||
|
dropit = false;
|
||||||
|
legendary = legendaryBackup;
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopit() {
|
||||||
|
stop = true;
|
||||||
|
wow();
|
||||||
|
}
|
||||||
|
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (type.id === 'character-event' && Math.random() > 0.5) suprize();
|
||||||
|
});
|
||||||
|
|
||||||
$: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
|
$: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -81,12 +130,12 @@
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
{#if avg.legendary.pulls.length > 0}
|
{#if legendary.length > 0}
|
||||||
<div class="flex flex-wrap mt-2 overflow-y-auto" style="max-height: 500px;">
|
<div class="flex flex-wrap mt-2 overflow-y-auto {dropit ? 'nice' : ''}" style="max-height: 500px;">
|
||||||
{#each avg.legendary.pulls as pull}
|
{#each legendary as pull}
|
||||||
<span class="pity {textSize}"
|
<span class="pity {textSize}" on:click={stopit}>
|
||||||
>{$t(pull.name)} <span style={calculateColor((90 - pull.pity) / 90)}>{pull.pity}</span></span
|
{$t(pull.name)} <span style={calculateColor((90 - pull.pity) / 90)}>{pull.pity}</span>
|
||||||
>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -121,4 +170,44 @@
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
@apply rounded-xl;
|
@apply rounded-xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nice {
|
||||||
|
animation: 3s wow steps(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wow {
|
||||||
|
0% {
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
filter: invert(0);
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
filter: drop-shadow(16px 16px 20px red) invert(75%);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
filter: invert(0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
filter: invert(0.9);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: invert(0);
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
filter: invert(0);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
filter: drop-shadow(16px 16px 20px red) invert(75%);
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
filter: invert(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue