christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Racepicks: Color past picks based on raceresults

Browse Source
This commit is contained in:
Christoph Urlacher
2025-01-30 23:35:11 +01:00
parent 53c4462599
commit e5b43ad4f2
1 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/routes/racepicks/+page.svelte
View File

@ -89,6 +89,21 @@
const graphicfallback = (graphic: string | undefined, fallback: string): string => const graphicfallback = (graphic: string | undefined, fallback: string): string =>
graphic ?? get_by_value(data.graphics, "name", fallback)?.file_url ?? "Invalid"; graphic ?? get_by_value(data.graphics, "name", fallback)?.file_url ?? "Invalid";
// Define the background colors the picks will have depending on the raceresult
const pxxcolors: string[] = [];
pxxcolors[-1] = "auto";
pxxcolors[0] = "#C2FBCC"; // 1 Point
pxxcolors[6] = "#C2FBCC";
pxxcolors[1] = "#6CDB7E"; // 3 Points
pxxcolors[5] = "#6CDB7E";
pxxcolors[2] = "#07B725"; // 6 Points
pxxcolors[4] = "#07B725";
pxxcolors[3] = "#EFBF04"; // 10 Points
const dnfcolors: string[] = [];
dnfcolors[-1] = "auto";
dnfcolors[0] = "#EFBF04";
</script> </script>
{#if data.currentrace} {#if data.currentrace}
@ -273,12 +288,19 @@
{#each data.raceresults as result} {#each data.raceresults as result}
{@const race = getrace(result.race)} {@const race = getrace(result.race)}
{@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]} {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
{@const pxxcolor = pxxcolors[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
{@const dnfcolor =
result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? dnfcolors[0] : dnfcolors[-1]}
{#if pick} {#if pick}
<div class="card mt-1 h-20 w-full bg-surface-300 p-1 lg:mt-2 lg:p-2"> <div class="card mt-1 h-20 w-full bg-surface-300 p-1 lg:mt-2 lg:p-2">
<div class="mx-auto flex h-full w-fit flex-col justify-center"> <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
<span class="text-sm">PXX: {getdriver(pick?.pxx ?? "")?.code}</span> <span class="p-1 text-sm rounded-container-token" style="background: {pxxcolor};">
<span class="text-sm">DNF: {getdriver(pick?.dnf ?? "")?.code}</span> {getdriver(pick?.pxx ?? "")?.code}
</span>
<span class="p-1 text-sm rounded-container-token" style="background: {dnfcolor};">
{getdriver(pick?.dnf ?? "")?.code}
</span>
</div> </div>
</div> </div>
{:else} {:else}