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

Lib: Move pxx guess colorings into config.ts

Browse Source
This commit is contained in:
Christoph Urlacher
2025-01-31 23:13:44 +01:00
parent 43b0fd9aa2
commit bc6d9e7612
2 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/config.ts
View File

@ -32,3 +32,14 @@ export const RACE_PICTOGRAM_HEIGHT: number = 384;
// export const SUBSTITUTION_CARD_ASPECT_WIDTH: number = 413; // export const SUBSTITUTION_CARD_ASPECT_WIDTH: number = 413;
// export const SUBSTITUTION_CARD_ASPECT_HEIGHT: number = 625; // export const SUBSTITUTION_CARD_ASPECT_HEIGHT: number = 625;
// Define the background colors the picks will have depending on the raceresult
export const PXX_COLORS: string[] = [];
PXX_COLORS[-1] = "auto";
PXX_COLORS[0] = "#C2FBCC"; // 1 Point
PXX_COLORS[6] = "#C2FBCC";
PXX_COLORS[1] = "#6CDB7E"; // 3 Points
PXX_COLORS[5] = "#6CDB7E";
PXX_COLORS[2] = "#07B725"; // 6 Points
PXX_COLORS[4] = "#07B725";
PXX_COLORS[3] = "#EFBF04"; // 10 Points

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

@ -22,6 +22,7 @@
AVATAR_WIDTH, AVATAR_WIDTH,
DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH, DRIVER_HEADSHOT_WIDTH,
PXX_COLORS,
RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH, RACE_PICTOGRAM_WIDTH,
} from "$lib/config"; } from "$lib/config";
@ -99,21 +100,6 @@
placement: "right", placement: "right",
}; };
}; };
// 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}
@ -258,34 +244,34 @@
<!-- Large Screens: --> <!-- Large Screens: -->
<span <span
class="hidden h-full w-full text-center align-middle text-sm lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[3]}; line-height: 20px;" style="background: {PXX_COLORS[3]}; line-height: 20px;"
> >
10 10
</span> </span>
<span <span
class="hidden h-full w-full text-center align-middle text-sm lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[4]}; line-height: 20px;" style="background: {PXX_COLORS[4]}; line-height: 20px;"
> >
6 6
</span> </span>
<span <span
class="hidden h-full w-full text-center align-middle text-sm lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[5]}; line-height: 20px;" style="background: {PXX_COLORS[5]}; line-height: 20px;"
> >
3 3
</span> </span>
<span <span
class="hidden h-full w-full text-center align-middle text-sm lg:block" class="hidden h-full w-full text-center align-middle text-sm lg:block"
style="background: {pxxcolors[6]}; line-height: 20px;" style="background: {PXX_COLORS[6]}; line-height: 20px;"
> >
1 1
</span> </span>
<!-- Small Screens: --> <!-- Small Screens: -->
<span class="block h-full w-full lg:hidden" style="background: {pxxcolors[3]};"></span> <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[3]};"></span>
<span class="block h-full w-full lg:hidden" style="background: {pxxcolors[4]};"></span> <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[4]};"></span>
<span class="block h-full w-full lg:hidden" style="background: {pxxcolors[5]};"></span> <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[5]};"></span>
<span class="block h-full w-full lg:hidden" style="background: {pxxcolors[6]};"></span> <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[6]};"></span>
</div> </div>
</div> </div>
@ -314,7 +300,7 @@
{@const driver = getdriver(pxx)} {@const driver = getdriver(pxx)}
<div class="flex gap-2"> <div class="flex gap-2">
<span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span> <span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
<span class="badge w-10 p-1" style="background: {pxxcolors[index]};"> <span class="badge w-10 p-1" style="background: {PXX_COLORS[index]};">
{driver?.code} {driver?.code}
</span> </span>
</div> </div>
@ -328,7 +314,7 @@
{@const driver = getdriver(dnf)} {@const driver = getdriver(dnf)}
<div class="flex gap-2"> <div class="flex gap-2">
<span class="w-8">DNF:</span> <span class="w-8">DNF:</span>
<span class="badge w-10 p-1" style="background: {dnfcolors[0]};"> <span class="badge w-10 p-1" style="background: {PXX_COLORS[3]};">
{driver?.code} {driver?.code}
</span> </span>
</div> </div>
@ -369,9 +355,9 @@
{#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 pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
{@const dnfcolor = {@const dnfcolor =
result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? dnfcolors[0] : dnfcolors[-1]} result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
{#if pick} {#if pick}
<div class="mt-2 h-20 w-full border-b border-t bg-surface-300 p-1 shadow lg:p-2"> <div class="mt-2 h-20 w-full border-b border-t bg-surface-300 p-1 shadow lg:p-2">