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

Compare commits

base: christoph:43b0fd9aa27293423bb7606c95873fe1a5551b49
Branches Tags
christoph:master
...
compare: christoph:45929e5775df9614bb630f62df9d4aae2c964b77
Branches Tags
christoph:master

2 Commits
43b0fd9aa2 ... 45929e5775

Author SHA1 Message Date
Christoph Urlacher
45929e5775 Data/Raceresults: Use guess colorings pxx/dnf badges 2025-01-31 23:14:20 +01:00
Christoph Urlacher
bc6d9e7612 Lib: Move pxx guess colorings into config.ts 2025-01-31 23:13:44 +01:00
3 changed files with 31 additions and 31 deletions
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_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

11
src/routes/data/raceresults/+page.svelte
View File

@ -4,6 +4,7 @@
import { Button, Table, type TableColumn } from "$lib/components";
import { get_by_value } from "$lib/database";
import type { Driver } from "$lib/schema";
import { PXX_COLORS } from "$lib/config";
let { data }: { data: PageData } = $props();
@ -32,10 +33,11 @@
valuefun: async (value: string): Promise<string> => {
const pxxs_array: string[] = value.toString().split(",");
const pxxs_codes: string[] = pxxs_array.map(
(id: string) => get_by_value(data.drivers, "id", id)?.code ?? "Invalid",
(id: string, index: number) =>
`<span class='badge mr-2' style='background: ${PXX_COLORS[index]};'>${get_by_value(data.drivers, "id", id)?.code ?? "Invalid"}</span>`,
);
return pxxs_codes.join(" - ");
return pxxs_codes.join("");
},
},
{
@ -46,10 +48,11 @@
const dnfs_array: string[] = value.toString().split(",");
const dnfs_codes: string[] = dnfs_array.map(
(id: string) => get_by_value(data.drivers, "id", id)?.code ?? "Invalid",
(id: string) =>
`<span class='badge mr-2' style='background: ${PXX_COLORS[3]}'>${get_by_value(data.drivers, "id", id)?.code ?? "Invalid"}</span>`,
);
return dnfs_codes.join(" - ");
return dnfs_codes.join("");
},
},
];

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

@ -22,6 +22,7 @@
AVATAR_WIDTH,
DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH,
PXX_COLORS,
RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH,
} from "$lib/config";
@ -99,21 +100,6 @@
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>
{#if data.currentrace}
@ -258,34 +244,34 @@
<!-- Large Screens: -->
<span
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
</span>
<span
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
</span>
<span
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
</span>
<span
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
</span>
<!-- 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: {pxxcolors[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: {pxxcolors[6]};"></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: {PXX_COLORS[4]};"></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: {PXX_COLORS[6]};"></span>
</div>
</div>
@ -314,7 +300,7 @@
{@const driver = getdriver(pxx)}
<div class="flex gap-2">
<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}
</span>
</div>
@ -328,7 +314,7 @@
{@const driver = getdriver(dnf)}
<div class="flex gap-2">
<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}
</span>
</div>
@ -369,9 +355,9 @@
{#each data.raceresults as result}
{@const race = getrace(result.race)}
{@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 =
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}
<div class="mt-2 h-20 w-full border-b border-t bg-surface-300 p-1 shadow lg:p-2">