Adjust pity color on weapon banner
parent
8802f50098
commit
5a241551ec
|
@ -239,7 +239,7 @@
|
||||||
<SummaryItem avg={avg[types[0].id]} type={types[0]} />
|
<SummaryItem avg={avg[types[0].id]} type={types[0]} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if avg[types[1].id]}
|
{#if avg[types[1].id]}
|
||||||
<SummaryItem avg={avg[types[1].id]} type={types[1]} />
|
<SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col space-y-4">
|
<div class="flex flex-col space-y-4">
|
||||||
|
|
|
@ -6,6 +6,8 @@
|
||||||
|
|
||||||
export let avg;
|
export let avg;
|
||||||
export let type;
|
export let type;
|
||||||
|
export let legendaryPity = 90;
|
||||||
|
export let colorMultiplier = 120;
|
||||||
|
|
||||||
let numberFormat = Intl.NumberFormat('en', {
|
let numberFormat = Intl.NumberFormat('en', {
|
||||||
maximumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
||||||
|
@ -13,7 +15,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
function calculateColor(percentage) {
|
function calculateColor(percentage) {
|
||||||
const hue = percentage * 120;
|
const hue = percentage * colorMultiplier;
|
||||||
return `color: hsl(${hue}, 100%, 60%);`;
|
return `color: hsl(${hue}, 100%, 60%);`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,7 +87,8 @@
|
||||||
<div class="flex flex-wrap mt-2 overflow-y-auto" style="max-height: 500px;">
|
<div class="flex flex-wrap mt-2 overflow-y-auto" style="max-height: 500px;">
|
||||||
{#each avg.legendary.pulls as pull}
|
{#each avg.legendary.pulls as pull}
|
||||||
<span class="pity {textSize}"
|
<span class="pity {textSize}"
|
||||||
>{$t(pull.name)} <span style={calculateColor((90 - pull.pity) / 90)}>{pull.pity}</span></span
|
>{$t(pull.name)}
|
||||||
|
<span style={calculateColor((legendaryPity - pull.pity) / legendaryPity)}>{pull.pity}</span></span
|
||||||
>
|
>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue