Racepicks: Add tooltips to small images (e.g. avatars...)

Seasonpicks: Add tooltips to small images (e.g. avatars, podiums, ...)
Seasonpicks: Remove unused awaited promise
2025-03-18 12:40:41 +01:00 · 2025-03-18 12:40:31 +01:00 · 2025-03-18 12:30:03 +01:00 · 2025-03-18 12:29:49 +01:00 · 2025-03-18 12:29:28 +01:00 · 2025-03-18 12:23:46 +01:00
7 changed files with 160 additions and 125 deletions
--- a/flake.lock
+++ b/flake.lock
@ -5,11 +5,11 @@
        "nixpkgs": "nixpkgs"
      },
      "locked": {
-        "lastModified": 1735644329,
-        "narHash": "sha256-tO3HrHriyLvipc4xr+Ewtdlo7wM1OjXNjlWRgmM7peY=",
+        "lastModified": 1741473158,
+        "narHash": "sha256-kWNaq6wQUbUMlPgw8Y+9/9wP0F8SHkjy24/mN3UAppg=",
        "owner": "numtide",
        "repo": "devshell",
-        "rev": "f7795ede5b02664b57035b3b757876703e2c3eac",
+        "rev": "7c9e793ebe66bcba8292989a68c0419b737a22a0",
        "type": "github"
      },
      "original": {
@ -54,11 +54,11 @@
    },
    "nixpkgs_2": {
      "locked": {
-        "lastModified": 1737717945,
-        "narHash": "sha256-ET91TMkab3PmOZnqiJQYOtSGvSTvGeHoegAv4zcTefM=",
+        "lastModified": 1741865919,
+        "narHash": "sha256-4thdbnP6dlbdq+qZWTsm4ffAwoS8Tiq1YResB+RP6WE=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "ecd26a469ac56357fd333946a99086e992452b6a",
+        "rev": "573c650e8a14b2faa0041645ab18aed7e60f0c9a",
        "type": "github"
      },
      "original": {
--- a/package-lock.json
+++ b/package-lock.json
@ -31,6 +31,7 @@
 				"svelte-check": "^4.1.5",
 				"tailwindcss": "^3.4.17",
 				"typescript": "^5.8.2",
+				"uuid": "^11.1.0",
 				"vite": "^6.2.2"
 			}
 		},
@ -3870,6 +3871,20 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/uuid": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+			"integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"license": "MIT",
+			"bin": {
+				"uuid": "dist/esm/bin/uuid"
+			}
+		},
 		"node_modules/vite": {
 			"version": "6.2.2",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz",
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
 		"svelte-check": "^4.1.5",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.8.2",
+		"uuid": "^11.1.0",
 		"vite": "^6.2.2"
 	},
 	"dependencies": {
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@ -2,6 +2,8 @@
  import type { HTMLImgAttributes } from "svelte/elements";
  import { lazyload } from "$lib/lazyload";
  import { fetch_image_base64 } from "$lib/image";
+  import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
+  import { v4 as uuidv4 } from "uuid";

  interface LazyImageProps extends HTMLImgAttributes {
    /** The URL to the image resource to lazyload */
@ -24,6 +26,9 @@

    /** Slightly zoom the image on mouse-hover */
    hoverzoom?: boolean;
+
+    /** Optional tooltip text */
+    tooltip?: string;
  }

  let {
@ -34,6 +39,7 @@
    containerstyle = undefined,
    imgclass = "",
    hoverzoom = false,
+    tooltip = undefined,
    ...restProps
  }: LazyImageProps = $props();

@ -49,6 +55,14 @@
  const img_opacity_handler = (node: HTMLElement) => {
    setTimeout(() => (node.style.opacity = "1"), 20);
  };
+
+  // Tooltip handling
+  const tooltipId: string = uuidv4();
+  const popupTooltip: PopupSettings = {
+    event: "hover",
+    target: tooltipId,
+    placement: "top",
+  };
 </script>

 <!-- Show a correctly sized div so the layout doesn't jump. -->
@ -67,8 +81,16 @@
        class="bg-surface-100 transition-all {imgclass} {hoverzoom ? 'hover:scale-105' : ''}"
        style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
        draggable="false"
+        use:popup={popupTooltip}
        {...restProps}
      />
    {/await}
  {/if}
 </div>
+
+{#if tooltip}
+  <div class="card variant-filled-surface p-2 shadow" data-popup={tooltipId}>
+    <p>{tooltip}</p>
+    <div class="variant-filled-surface arrow"></div>
+  </div>
+{/if}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -489,7 +489,7 @@
        </Button>
      </div>
    </div>
-  {:else if $drawerStore.id === "profile_drawer" && pbUser}
+  {:else if $drawerStore.id === "profile_drawer" && $pbUser}
    <!-- Profile Drawer -->
    <!-- Profile Drawer -->
    <!-- Profile Drawer -->
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@ -67,7 +67,8 @@
  <title>Formula 11 - Race Picks</title>
 </svelte:head>

-{#if data.currentrace}
+<!-- Only show the userguess if signed in and we have a next race -->
+{#if $pbUser && data.currentrace}
  {#await Promise.all( [data.drivers, data.currentpickedusers, pickedusers, outstandingusers], ) then [drivers, currentpicked, picked, outstanding]}
    <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
      <AccordionItem>
@ -76,10 +77,7 @@
          <span class="font-bold">Next Race Guess</span>
        </svelte:fragment>
        <svelte:fragment slot="content">
-          <div
-            class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit
-            {pbUser ? 'lg:grid-cols-6' : 'lg:grid-cols-4'}"
-          >
+          <div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-6">
            <!-- Show information about the next race -->
            <div class="card flex w-full min-w-40 flex-col p-2 shadow lg:max-w-40">
              <span class="font-bold">
@ -123,8 +121,6 @@
              />
            </div>

-            <!-- Only show the userguess if signed in -->
-            {#if pbUser}
            <!-- PXX pick -->
            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
              <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
@ -154,14 +150,13 @@
                onclick={racepick_handler}
              />
            </div>
-            {/if}

            <!-- Show users that have picked -->
-            <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
              <h1 class="text-nowrap font-bold">
                Picked ({picked.length}/{currentpicked.length}):
              </h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
                {#each picked as user}
                  <LazyImage
                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
@ -169,19 +164,18 @@
                    imgheight={AVATAR_HEIGHT}
                    containerstyle="height: 35px; width: 35px;"
                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
                  />
                {/each}
              </div>
            </div>

            <!-- Show users that have not picked yet -->
-            <div
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
-            >
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
              <h1 class="text-nowrap font-bold">
                Missing ({outstanding.length}/{currentpicked.length}):
              </h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
                {#each outstanding as user}
                  <LazyImage
                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
@ -189,6 +183,7 @@
                    imgheight={AVATAR_HEIGHT}
                    containerstyle="height: 35px; width: 35px;"
                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
                  />
                {/each}
              </div>
@ -201,7 +196,7 @@
 {/if}

 <!-- The fookin table -->
-<div class="flex">
+<div class="flex {!$pbUser ? 'mt-[-8px]' : ''}">
  <div>
    <!-- Points color coding legend -->
    <!-- Use mt-3/mt-4 to account for 2x padding around the avatar. -->
@ -320,6 +315,7 @@
              imgheight={AVATAR_HEIGHT}
              containerstyle="height: 40px; width: 40px;"
              imgclass="bg-surface-400 rounded-full"
+              tooltip={user.firstname}
            />
            <div
              style="height: 40px; line-height: 40px;"
--- a/src/routes/seasonpicks/+page.svelte
+++ b/src/routes/seasonpicks/+page.svelte
@ -61,7 +61,21 @@
 </svelte:head>

 <!-- Await this here so the accordion doesn't lag when opening -->
-{#await Promise.all( [data.drivers, data.teams, data.seasonpicks, data.seasonpickedusers, pickedusers, outstandingusers], ) then [drivers, teams, seasonpicks, currentpicked, picked, outstanding]}
+<!-- Only show the stuff if signed in -->
+{#if $pbUser}
+  {#await Promise.all( [data.drivers, data.teams, data.seasonpickedusers, pickedusers, outstandingusers], ) then [drivers, teams, currentpicked, picked, outstanding]}
+    {@const teamwinners = data.seasonpick
+      ? data.seasonpick.teamwinners
+          .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
+      : undefined}
+    {@const podiums = data.seasonpick
+      ? data.seasonpick.podiums
+          .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+          .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
+          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
+      : undefined}
+
    <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
      <AccordionItem>
        <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
@ -69,25 +83,7 @@
          <span class="font-bold">Your Season Pick</span>
        </svelte:fragment>
        <svelte:fragment slot="content">
-        <div
-          class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit {pbUser
-            ? 'lg:grid-cols-5 2xl:grid-cols-10'
-            : 'lg:grid-cols-2 2xl:grid-cols-2'}"
-        >
-          <!-- Only show the stuff if signed in -->
-          {#if $pbUser}
-            {@const teamwinners = data.seasonpick
-              ? data.seasonpick.teamwinners
-                  .map((id: string) => get_by_value(drivers, "id", id) as Driver)
-                  .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
-              : [undefined]}
-            {@const podiums = data.seasonpick
-              ? data.seasonpick.podiums
-                  .map((id: string) => get_by_value(drivers, "id", id) as Driver)
-                  .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
-                  .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
-              : [undefined]}
-
+          <div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-5 2xl:grid-cols-10">
            <!-- Hottake -->
            <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
              <h1 class="mb-2 text-nowrap font-bold">Hottake:</h1>
@ -165,91 +161,89 @@
            </div>

            <!-- Teamwinners -->
-            <div
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
-            >
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
              <h1 class="text-nowrap font-bold">Teamwinners:</h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
-                {#each teamwinners.slice(0, 12) as winner}
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#if teamwinners}
+                  {#each teamwinners as winner}
                    <LazyImage
-                    src={winner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                      src={winner.headshot_url ?? get_driver_headshot_template(data.graphics)}
                      imgwidth={AVATAR_WIDTH}
                      imgheight={AVATAR_HEIGHT}
                      containerstyle="height: 35px; width: 35px;"
                      imgclass="bg-surface-400 rounded-full"
+                      tooltip={winner ? `${winner.firstname} ${winner.lastname}` : undefined}
                    />
                  {/each}
+                {/if}
              </div>
            </div>

            <!-- Podiums -->
-            <div
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
-            >
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
              <h1 class="text-nowrap font-bold">Podiums:</h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#if podiums}
                  {#each podiums as podium}
                    <LazyImage
-                    src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                      src={podium.headshot_url ?? get_driver_headshot_template(data.graphics)}
                      imgwidth={AVATAR_WIDTH}
                      imgheight={AVATAR_HEIGHT}
                      containerstyle="height: 35px; width: 35px;"
                      imgclass="bg-surface-400 rounded-full"
+                      tooltip={podium ? `${podium.firstname} ${podium.lastname}` : undefined}
                    />
                  {/each}
-              </div>
-            </div>
                {/if}
+              </div>
+            </div>

            <!-- Show users that have picked -->
-          {#if seasonpicks.length === 0}
-            <div
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
-            >
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
              <h1 class="text-nowrap font-bold">
                Picked ({picked.length}/{currentpicked.length}):
              </h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
-                {#each picked.slice(0, 16) as user}
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#each picked as user}
                  <LazyImage
                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
                    imgwidth={AVATAR_WIDTH}
                    imgheight={AVATAR_HEIGHT}
                    containerstyle="height: 35px; width: 35px;"
                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
                  />
                {/each}
              </div>
            </div>

            <!-- Show users that have not picked yet -->
-            <div
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
-            >
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
              <h1 class="text-nowrap font-bold">
                Missing ({outstanding.length}/{currentpicked.length}):
              </h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
-                {#each outstanding.slice(0, 16) as user}
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#each outstanding as user}
                  <LazyImage
                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
                    imgwidth={AVATAR_WIDTH}
                    imgheight={AVATAR_HEIGHT}
                    containerstyle="height: 35px; width: 35px;"
                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
                  />
                {/each}
              </div>
            </div>
-          {/if}
          </div>
        </svelte:fragment>
      </AccordionItem>
    </Accordion>
-{/await}
+  {/await}
+{/if}

 <!-- The fookin table -->
-<div class="flex">
+<div class="{!$pbUser ? 'mt-[-8px]' : ''} flex">
  <div>
    <!-- TODO: Points popup? -->
    <div class="mt-4 h-10 w-7 lg:w-36"></div>
@ -274,9 +268,9 @@
        <div
          class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
        >
-          <span class="hidden text-nowrap text-sm font-bold lg:block"
-            >Constructors<br />Champion</span
-          >
+          <span class="hidden text-nowrap text-sm font-bold lg:block">
+            Constructors<br />Champion
+          </span>
          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
        </div>

@ -352,6 +346,7 @@
              imgheight={AVATAR_HEIGHT}
              containerstyle="height: 40px; width: 40px;"
              imgclass="bg-surface-400 rounded-full"
+              tooltip={user.firstname}
            />
            <div
              style="height: 40px; line-height: 40px;"
@ -380,6 +375,7 @@
                  imgheight={DRIVER_HEADSHOT_WIDTH}
                  containerstyle="height: 62px;"
                  imgclass="bg-surface-400 rounded-md"
+                  tooltip={wdcwinner ? `${wdcwinner.firstname} ${wdcwinner.lastname}` : undefined}
                />
              </div>
            </div>
@ -393,6 +389,7 @@
                  imgheight={TEAM_BANNER_HEIGHT}
                  containerstyle="height: 62px;"
                  imgclass="bg-surface-400 rounded-md"
+                  tooltip={wccwinner?.name}
                />
              </div>
            </div>
@ -406,6 +403,9 @@
                  imgheight={DRIVER_HEADSHOT_WIDTH}
                  containerstyle="height: 62px;"
                  imgclass="bg-surface-400 rounded-md"
+                  tooltip={mostovertakes
+                    ? `${mostovertakes.firstname} ${mostovertakes.lastname}`
+                    : undefined}
                />
              </div>
            </div>
@ -419,6 +419,7 @@
                  imgheight={DRIVER_HEADSHOT_WIDTH}
                  containerstyle="height: 62px;"
                  imgclass="bg-surface-400 rounded-md"
+                  tooltip={mostdnfs ? `${mostdnfs.firstname} ${mostdnfs.lastname}` : undefined}
                />
              </div>
            </div>
Author	SHA1	Message	Date
Christoph Urlacher	1fe6c49f2b	Racepicks: Add tooltips to small images (e.g. avatars...) All checks were successful Build Formula11 Docker Image / pocketbase-docker (push) Successful in 48s Details	2025-03-18 12:40:41 +01:00
Christoph Urlacher	cf4d98f480	Seasonpicks: Add tooltips to small images (e.g. avatars, podiums, ...)	2025-03-18 12:40:31 +01:00
Christoph Urlacher	8051b86d51	Seasonpicks: Remove unused awaited promise	2025-03-18 12:30:03 +01:00
Christoph Urlacher	901bcc1c05	Lib: Add tooltip capability to LazyImage	2025-03-18 12:29:49 +01:00
Christoph Urlacher	19170ebef9	Env: Add uuid npm dep	2025-03-18 12:29:28 +01:00
Christoph Urlacher	6a5be20e80	Seasonpicks: Don't slice teamwinners in accordion	2025-03-18 12:23:46 +01:00
Christoph Urlacher	8250378da4	Skeleton: Fix error in pbUser store access	2025-03-18 12:14:45 +01:00
Christoph Urlacher	8a79da8d8b	Racepicks: Hide accordion if signed out	2025-03-18 12:14:00 +01:00
Christoph Urlacher	a9b37a8884	Seasonpicks: Hide accordion if signed out	2025-03-18 12:13:54 +01:00
Christoph Urlacher	1857755cfb	Racepicks: Update accordion picked/outstanding overflows	2025-03-18 12:05:08 +01:00
Christoph Urlacher	3f31a00a09	Seasonpicks: Update accordion podiums/teamwinners/picked/outstanding overflows	2025-03-18 12:05:00 +01:00
Christoph Urlacher	0870e6510f	Env: Update flake lock	2025-03-16 15:32:20 +01:00