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

Racepicks: Shitty styling progress on overview boxes

Browse Source
This commit is contained in:
Christoph Urlacher
2025-01-26 15:19:07 +01:00
parent 1158efd5f1
commit cb8df4e05e
1 changed files with 56 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,50 +3,76 @@
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton"; import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config"; import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
import type { RacePick } from "$lib/schema";
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
const modalStore: ModalStore = getModalStore(); const modalStore: ModalStore = getModalStore();
const create_guess_handler = async (event: Event) => {}; const create_guess_handler = async (event: Event) => {};
const currentpick: RacePick | null =
data.racepicks.filter(
(racepick: RacePick) =>
racepick.expand.user.username === data.user?.username &&
racepick.race === data.currentrace?.id,
)[0] ?? null;
</script> </script>
<div class="pb-2"> <!-- TODO: This thing must display the boxes as a column on mobile -->
<Button width="w-full" color="tertiary" onclick={create_guess_handler}>
<b>Make Guess</b>
</Button>
</div>
{#if data.currentrace} {#if data.currentrace}
<div class="bg-surface-800"> <div class="flex w-full gap-2">
<h1>Next Race</h1> <!-- Next Guess Box -->
<div class="flex w-full gap-2 bg-surface-500"> <!-- TODO: Countdown -->
<div class="flex w-full gap-2 bg-surface-300"> <div class="w-full bg-tertiary-500 p-2 shadow rounded-container-token">
<LazyImage <h1 class="text-lg font-bold">Next Race</h1>
src={data.currentrace.pictogram_url ?? "Invalid"} <div class="mt-2 flex w-full gap-2">
imgwidth={RACE_PICTOGRAM_WIDTH} <div class="border border-black p-2 rounded-container-token">
imgheight={RACE_PICTOGRAM_HEIGHT} <LazyImage
containerstyle="width: 175px;" src={data.currentrace.pictogram_url ?? "Invalid"}
imgstyle="background: transparent;" imgwidth={RACE_PICTOGRAM_WIDTH}
/> imgheight={RACE_PICTOGRAM_HEIGHT}
<div> containerstyle="width: 175px;"
Name: {data.currentrace.name}<br /> imgstyle="background: transparent;"
Step: {data.currentrace.step}<br /> />
</div>
<div class="flex flex-col border border-black p-2 rounded-container-token">
<!-- TODO: Replace the <b></b> usages with class="font-bold" elsewhere -->
<span class="font-bold">Step {data.currentrace.step}: {data.currentrace.name}</span>
{#if data.currentrace.sprintqualidate} {#if data.currentrace.sprintqualidate}
Sprint Quali: {data.currentrace.sprintqualidate}<br /> <span>Sprint Quali: {data.currentrace.sprintqualidate}</span>
Sprint Race: {data.currentrace.sprintdate}<br /> <span>Sprint Race: {data.currentrace.sprintdate}</span>
{:else} {:else}
Sprint: No Sprint this time :)<br /> <span>Sprint: No Sprint :)</span>
{/if} {/if}
Quali: {data.currentrace.qualidate}<br /> <span>Quali: {data.currentrace.qualidate}</span>
Race: {data.currentrace.racedate} <span>Race: {data.currentrace.racedate}</span>
</div> </div>
</div> </div>
<div class="bg-surface-300">
<!-- If the user has already made a guess for the next race, display it inside a box to the right -->
Hello
</div>
</div> </div>
<!-- Your Pick Box -->
{#if currentpick}
<div class="flex flex-col gap-2">
<div class="w-full bg-tertiary-500 p-2 shadow rounded-container-token">
<h1 class="text-lg font-bold">Your Pick:</h1>
<div class="mt-2 flex flex-col border border-black p-2 rounded-container-token">
<span class="text-nowrap">P{data.currentrace.pxx}: {currentpick.pxx}</span>
<span class="text-nowrap">DNF: {currentpick.dnf}</span>
</div>
</div>
<!-- TODO: Add other button shadows -->
<Button
width="w-full"
color="tertiary"
onclick={create_guess_handler}
style="height: 100%;"
shadow
>
<b>{currentpick ? "Edit Pick" : "Make Pick"}</b>
</Button>
</div>
{/if}
</div> </div>
{/if} {/if}