ctome
/
paimon-moe-fork
mirror of https://github.com/CrimsonTome/paimon-moe-fork.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Hide beginner wish if empty

pull/1/head
Made Baruna 2022-06-21 21:59:32 +07:00
parent 5a241551ec
commit 04fc4da226
4 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/routes/wish/_counter.svelte
View File

@ -292,9 +292,14 @@
rare = 0;
saveData();
}
$: hidden = id === 'beginners' && total === 0 && !manualInput;
</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">
<h2 class="font-display font-bold text-2xl text-white flex-1">{name}</h2>
{#if manualInput}

2
src/routes/wish/_monthlyGraph.svelte
View File

@ -83,6 +83,6 @@
$: data, createGraph();
</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} />
</div>

71
src/routes/wish/_summary.svelte
View File

@ -234,32 +234,51 @@
</script>
{#if !loading}
<div class="flex flex-col space-y-4">
{#if avg[types[0].id]}
<SummaryItem avg={avg[types[0].id]} type={types[0]} />
{/if}
{#if avg[types[1].id]}
<SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} />
{/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 avg[types[3].id]}
<SummaryItem avg={avg[types[3].id]} type={types[3]} />
{/if}
<div class="bg-item rounded-xl p-4 flex items-center w-full text-white" style="height: min-content;">
{$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
{numberFormat.format(wishCount * 160)}
<div class="col-span-1 md:col-span-2 w-full">
<div class="container">
{#if avg[types[0].id]}
<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 avg[types[1].id]}
<SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} order={2} />
{/if}
<div class="order-4">
{#if avg[types[3].id]}
<SummaryItem avg={avg[types[3].id]} type={types[3]} />
<div class="h-4 md:h-0" />
{/if}
<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" />
{numberFormat.format(wishCount * 160)}
</div>
<a
href="/wish/tally"
class="bg-item rounded-xl p-4 flex items-center w-full text-white hover:text-primary"
style="height: min-content;"
>
<Icon path={mdiEarth} className="mr-2" />
{$t('wish.globalWishTally')}
</a>
</div>
</div>
</div>
<a
href="/wish/tally"
class="bg-item rounded-xl p-4 flex items-center w-full text-white hover:text-primary"
style="height: min-content;"
>
<Icon path={mdiEarth} className="mr-2" />
{$t('wish.globalWishTally')}
</a>
</div>
{/if}
<style>
.container {
@apply flex flex-col gap-4;
}
@screen md {
.container {
@apply block gap-0;
column-count: 2;
column-gap: 1rem;
}
}
</style>

16
src/routes/wish/_summaryItem.svelte
View File

@ -6,6 +6,7 @@
export let avg;
export let type;
export let order = 0;
export let legendaryPity = 90;
export let colorMultiplier = 120;
@ -22,7 +23,10 @@
$: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
</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>
<tr>
<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);
@apply rounded-xl;
}
@screen md {
.summary-item {
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 1rem;
break-inside: avoid;
}
}
</style>