Hide beginner wish if empty
parent
5a241551ec
commit
04fc4da226
|
@ -292,9 +292,14 @@
|
||||||
rare = 0;
|
rare = 0;
|
||||||
saveData();
|
saveData();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: hidden = id === 'beginners' && total === 0 && !manualInput;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bg-item rounded-xl p-4 inline-flex flex-col w-full" style="height: min-content;">
|
<div
|
||||||
|
class="bg-item rounded-xl p-4 inline-flex flex-col w-full {id === 'beginners' ? 'mb-4' : ''} {hidden ? 'hidden' : ''}"
|
||||||
|
style="height: min-content;"
|
||||||
|
>
|
||||||
<div class="flex mb-2">
|
<div class="flex mb-2">
|
||||||
<h2 class="font-display font-bold text-2xl text-white flex-1">{name}</h2>
|
<h2 class="font-display font-bold text-2xl text-white flex-1">{name}</h2>
|
||||||
{#if manualInput}
|
{#if manualInput}
|
||||||
|
|
|
@ -83,6 +83,6 @@
|
||||||
$: data, createGraph();
|
$: data, createGraph();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col bg-item rounded-xl p-4 w-full mt-4" style="height: 200px;">
|
<div class="flex flex-col bg-item rounded-xl p-4 w-full" style="height: 200px;">
|
||||||
<canvas width="500" height="200" bind:this={chart} />
|
<canvas width="500" height="200" bind:this={chart} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -234,22 +234,24 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !loading}
|
{#if !loading}
|
||||||
<div class="flex flex-col space-y-4">
|
<div class="col-span-1 md:col-span-2 w-full">
|
||||||
|
<div class="container">
|
||||||
{#if avg[types[0].id]}
|
{#if avg[types[0].id]}
|
||||||
<SummaryItem avg={avg[types[0].id]} type={types[0]} />
|
<SummaryItem avg={avg[types[0].id]} type={types[0]} order={1} />
|
||||||
|
{/if}
|
||||||
|
{#if avg[types[2].id]}
|
||||||
|
<SummaryItem avg={avg[types[2].id]} type={types[2]} order={3} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if avg[types[1].id]}
|
{#if avg[types[1].id]}
|
||||||
<SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} />
|
<SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} order={2} />
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col space-y-4">
|
|
||||||
{#if avg[types[2].id]}
|
|
||||||
<SummaryItem avg={avg[types[2].id]} type={types[2]} />
|
|
||||||
{/if}
|
{/if}
|
||||||
|
<div class="order-4">
|
||||||
{#if avg[types[3].id]}
|
{#if avg[types[3].id]}
|
||||||
<SummaryItem avg={avg[types[3].id]} type={types[3]} />
|
<SummaryItem avg={avg[types[3].id]} type={types[3]} />
|
||||||
|
<div class="h-4 md:h-0" />
|
||||||
{/if}
|
{/if}
|
||||||
<div class="bg-item rounded-xl p-4 flex items-center w-full text-white" style="height: min-content;">
|
<div class="flex flex-col">
|
||||||
|
<div class="bg-item rounded-xl p-4 flex items-center w-full text-white mb-4" style="height: min-content;">
|
||||||
{$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
|
{$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
|
||||||
{numberFormat.format(wishCount * 160)}
|
{numberFormat.format(wishCount * 160)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -262,4 +264,21 @@
|
||||||
{$t('wish.globalWishTally')}
|
{$t('wish.globalWishTally')}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
@apply flex flex-col gap-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
.container {
|
||||||
|
@apply block gap-0;
|
||||||
|
column-count: 2;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
export let avg;
|
export let avg;
|
||||||
export let type;
|
export let type;
|
||||||
|
export let order = 0;
|
||||||
export let legendaryPity = 90;
|
export let legendaryPity = 90;
|
||||||
export let colorMultiplier = 120;
|
export let colorMultiplier = 120;
|
||||||
|
|
||||||
|
@ -22,7 +23,10 @@
|
||||||
$: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
|
$: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bg-item rounded-xl p-4 flex flex-col w-full" style="height: min-content;">
|
<div
|
||||||
|
class="bg-item rounded-xl p-4 flex flex-col w-full half-width summary-item"
|
||||||
|
style="height: min-content; order: {order};"
|
||||||
|
>
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-white text-md font-semibold pr-2 md:pr-4 flex-1 w-full">{$t(`wish.types.${type.id}`)}</td>
|
<td class="text-white text-md font-semibold pr-2 md:pr-4 flex-1 w-full">{$t(`wish.types.${type.id}`)}</td>
|
||||||
|
@ -124,4 +128,14 @@
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
@apply rounded-xl;
|
@apply rounded-xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
.summary-item {
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr auto;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue