Pocketbase: Update workflow to v0.33.0

.envrc

@@ -1,2 +0,0 @@
-use flake
-layout node

.gitea/workflows/pocketbase-docker.yaml

@@ -20,6 +20,6 @@ jobs:
           username: ${{ secrets.CONTAINER_REGISTRY_USER }}
           password: ${{ secrets.CONTAINER_REGISTRY_TOKEN }}
       - name: Build Pocketbase Docker Image
-        run: docker build --build-arg PB_VERSION=0.25.0 --file pocketbase.dockerfile --tag gitea.vps.chriphost.de/christoph/pocketbase:0.25.0 .
+        run: docker build --build-arg PB_VERSION=0.33.0 --file pocketbase.dockerfile --tag gitea.vps.chriphost.de/christoph/pocketbase:0.33.0 .
       - name: Push Pocketbase Docker Image
-        run: docker push gitea.vps.chriphost.de/christoph/pocketbase:0.25.0
+        run: docker push gitea.vps.chriphost.de/christoph/pocketbase:0.33.0

flake.lock

@@ -1,15 +1,40 @@
 {
   "nodes": {
-    "devshell": {
+    "clj-nix": {
       "inputs": {
-        "nixpkgs": "nixpkgs"
+        "devshell": "devshell",
+        "nix-fetcher-data": "nix-fetcher-data",
+        "nixpkgs": [
+          "nixpkgs"
+        ]
       },
       "locked": {
-        "lastModified": 1735644329,
+        "lastModified": 1763549559,
-        "narHash": "sha256-tO3HrHriyLvipc4xr+Ewtdlo7wM1OjXNjlWRgmM7peY=",
+        "narHash": "sha256-w7qhicMuDyfm9/dJKs5+47XqhZmGXRfkZjyn8XjO+c0=",
+        "owner": "jlesquembre",
+        "repo": "clj-nix",
+        "rev": "a55b9fbce3da4aa35c94221f76d40c79e6de4d81",
+        "type": "github"
+      },
+      "original": {
+        "owner": "jlesquembre",
+        "repo": "clj-nix",
+        "type": "github"
+      }
+    },
+    "devshell": {
+      "inputs": {
+        "nixpkgs": [
+          "clj-nix",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1741473158,
+        "narHash": "sha256-kWNaq6wQUbUMlPgw8Y+9/9wP0F8SHkjy24/mN3UAppg=",
         "owner": "numtide",
         "repo": "devshell",
-        "rev": "f7795ede5b02664b57035b3b757876703e2c3eac",
+        "rev": "7c9e793ebe66bcba8292989a68c0419b737a22a0",
         "type": "github"
       },
       "original": {
@@ -18,6 +43,24 @@
         "type": "github"
       }
     },
+    "flake-parts": {
+      "inputs": {
+        "nixpkgs-lib": "nixpkgs-lib"
+      },
+      "locked": {
+        "lastModified": 1719745305,
+        "narHash": "sha256-xwgjVUpqSviudEkpQnioeez1Uo2wzrsMaJKJClh+Bls=",
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "rev": "c3c5ecc05edc7dafba779c6c1a61cd08ac6583e9",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "type": "github"
+      }
+    },
     "flake-utils": {
       "inputs": {
         "systems": "systems"
@@ -36,43 +79,80 @@
         "type": "github"
       }
     },
-    "nixpkgs": {
+    "nix-fetcher-data": {
+      "inputs": {
+        "flake-parts": "flake-parts",
+        "nixpkgs": [
+          "clj-nix",
+          "nixpkgs"
+        ]
+      },
       "locked": {
-        "lastModified": 1722073938,
+        "lastModified": 1728229178,
-        "narHash": "sha256-OpX0StkL8vpXyWOGUD6G+MA26wAXK6SpT94kLJXo6B4=",
+        "narHash": "sha256-p5Fx880uBYstIsbaDYN7sECJT11oHxZQKtHgMAVblWA=",
-        "owner": "NixOS",
+        "owner": "jlesquembre",
-        "repo": "nixpkgs",
+        "repo": "nix-fetcher-data",
-        "rev": "e36e9f57337d0ff0cf77aceb58af4c805472bfae",
+        "rev": "f3a73c34d28db49ef90fd7872a142bfe93120e55",
         "type": "github"
       },
       "original": {
-        "owner": "NixOS",
+        "owner": "jlesquembre",
-        "ref": "nixpkgs-unstable",
+        "repo": "nix-fetcher-data",
-        "repo": "nixpkgs",
         "type": "github"
       }
     },
-    "nixpkgs_2": {
+    "nixpkgs": {
       "locked": {
-        "lastModified": 1737717945,
+        "lastModified": 1763618868,
-        "narHash": "sha256-ET91TMkab3PmOZnqiJQYOtSGvSTvGeHoegAv4zcTefM=",
+        "narHash": "sha256-v5afmLjn/uyD9EQuPBn7nZuaZVV9r+JerayK/4wvdWA=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "ecd26a469ac56357fd333946a99086e992452b6a",
+        "rev": "a8d610af3f1a5fb71e23e08434d8d61a466fc942",
         "type": "github"
       },
       "original": {
-        "owner": "NixOS",
+        "id": "nixpkgs",
-        "ref": "nixpkgs-unstable",
+        "type": "indirect"
-        "repo": "nixpkgs",
+      }
-        "type": "github"
+    },
+    "nixpkgs-lib": {
+      "locked": {
+        "lastModified": 1717284937,
+        "narHash": "sha256-lIbdfCsf8LMFloheeE6N31+BMIeixqyQWbSr2vk79EQ=",
+        "type": "tarball",
+        "url": "https://github.com/NixOS/nixpkgs/archive/eb9ceca17df2ea50a250b6b27f7bf6ab0186f198.tar.gz"
+      },
+      "original": {
+        "type": "tarball",
+        "url": "https://github.com/NixOS/nixpkgs/archive/eb9ceca17df2ea50a250b6b27f7bf6ab0186f198.tar.gz"
       }
     },
     "root": {
       "inputs": {
-        "devshell": "devshell",
+        "clj-nix": "clj-nix",
         "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs_2"
+        "nixpkgs": "nixpkgs",
+        "rust-overlay": "rust-overlay"
+      }
+    },
+    "rust-overlay": {
+      "inputs": {
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1763865987,
+        "narHash": "sha256-DJpzM8Jz3B0azJcAoF+YFHr8rEbxYLJ0wy1kWZ29HOw=",
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "rev": "042d905c01a6eec3bcae8530dacb19cda9758a63",
+        "type": "github"
+      },
+      "original": {
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "type": "github"
       }
     },
     "systems": {

flake.nix

@@ -1,111 +1,329 @@
-{
+rec {
-  description = "Svelte F1 Guessgame";
+  description = "Formula11";
 
-  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+  inputs = {
-  inputs.flake-utils.url = "github:numtide/flake-utils";
+    nixpkgs.url = "nixpkgs"; # Use nixpkgs from system registry
-  inputs.devshell.url = "github:numtide/devshell";
+    flake-utils.url = "github:numtide/flake-utils";
+
+    rust-overlay.url = "github:oxalica/rust-overlay";
+    rust-overlay.inputs.nixpkgs.follows = "nixpkgs";
+
+    clj-nix.url = "github:jlesquembre/clj-nix";
+    clj-nix.inputs.nixpkgs.follows = "nixpkgs";
+  };
 
   outputs = {
     self,
     nixpkgs,
     flake-utils,
-    devshell,
+    rust-overlay,
+    clj-nix,
   }:
+  # Create a shell (and possibly package) for each possible system, not only x86_64-linux
     flake-utils.lib.eachDefaultSystem (system: let
       pkgs = import nixpkgs {
         inherit system;
         config.allowUnfree = true;
-        overlays = [devshell.overlays.default];
+        overlays = [
-      };
+          rust-overlay.overlays.default
-
-      timple = pkgs.python312Packages.buildPythonPackage rec {
-        pname = "timple";
-        version = "0.1.8";
-
-        src = pkgs.python312Packages.fetchPypi {
-          inherit pname version;
-          hash = "sha256-u8EgMA8BA6OpPlSg0ASRxLcIcv5psRIEcBpIicagXw8=";
-        };
-
-        doCheck = false;
-        pyproject = true;
-
-        # Build time deps
-        nativeBuildInputs = with pkgs.python312Packages; [
-          setuptools
-        ];
-
-        # Run time deps
-        dependencies = with pkgs.python312Packages; [
-          matplotlib
-          numpy
         ];
       };
+      inherit (pkgs) lib stdenv;
 
-      fastf1 = pkgs.python312Packages.buildPythonPackage rec {
+      # ===========================================================================================
-        pname = "fastf1";
+      # Define custom dependencies
-        version = "3.4.4";
+      # ===========================================================================================
 
-        src = pkgs.python312Packages.fetchPypi {
+      # Python package example
-          inherit pname version;
+      # typed-ffmpeg = pkgs.python313Packages.buildPythonPackage rec {
-          hash = "sha256-nELQtvzlLsUYyVaPe1KqvMmzHy5l5W7u1I6m8r8md/4=";
+      #   pname = "typed_ffmpeg";
-        };
+      #   version = "3.6";
+      #
+      #   src = pkgs.python313Packages.fetchPypi {
+      #     inherit pname version;
+      #     hash = "sha256-YPspq/lqI/jx/9FCQntmQPw4lrPIsdxtHTUg0F0QbrM=";
+      #   };
+      #
+      #   pyproject = true;
+      #   build-system = [
+      #     pkgs.python313Packages.setuptools
+      #     pkgs.python313Packages.setuptools-scm
+      #   ];
+      # };
 
-        doCheck = false;
+      # python = pkgs.python313.withPackages (p:
-        pyproject = true;
+      #   with p; [
+      #     # numpy
+      #     # matplotlib
+      #     # typed-ffmpeg
+      #     # pyside6
+      #   ]);
 
-        # Build time deps
+      # rust = pkgs.rust-bin.stable.latest.default.override {
-        nativeBuildInputs = with pkgs.python312Packages; [
+      #   extensions = ["rust-src"]; # Include the Rust stdlib source (for IntelliJ)
-          hatchling
+      # };
-          hatch-vcs
-        ];
 
-        # Run time deps
+      # 64 bit C/C++ compilers that don't collide (use the same libc)
-        dependencies = with pkgs.python312Packages; [
+      # bintools = pkgs.wrapBintoolsWith {
-          matplotlib
+      #   bintools = pkgs.bintools.bintools; # Unwrapped bintools
-          numpy
+      #   libc = pkgs.glibc;
-          pandas
+      # };
-          python-dateutil
+      # gcc = pkgs.hiPrio (pkgs.wrapCCWith {
-          requests
+      #   cc = pkgs.gcc.cc; # Unwrapped gcc
-          requests-cache
+      #   libc = pkgs.glibc;
-          scipy
+      #   bintools = bintools;
-          rapidfuzz
+      # });
-          websockets
+      # clang = pkgs.wrapCCWith {
-          timple
+      #   cc = pkgs.clang.cc; # Unwrapped clang
-        ];
+      #   libc = pkgs.glibc;
-      };
+      #   bintools = bintools;
-    in {
+      # };
-      devShell = pkgs.devshell.mkShell {
-        name = "Formula11";
 
-        packages = with pkgs; [
+      # Multilib C/C++ compilers that don't collide (use the same libc)
-          nodejs_23
+      # bintools_multilib = pkgs.wrapBintoolsWith {
-          pocketbase
+      #   bintools = pkgs.bintools.bintools; # Unwrapped bintools
-        ];
+      #   libc = pkgs.glibc_multi;
+      # };
+      # gcc_multilib = pkgs.hiPrio (pkgs.wrapCCWith {
+      #   cc = pkgs.gcc.cc; # Unwrapped gcc
+      #   libc = pkgs.glibc_multi;
+      #   bintools = bintools_multilib;
+      # });
+      # clang_multilib = pkgs.wrapCCWith {
+      #   cc = pkgs.clang.cc; # Unwrapped clang
+      #   libc = pkgs.glibc_multi;
+      #   bintools = bintools_multilib;
+      # };
 
-        # Use $1 for positional args
+      # ===========================================================================================
-        commands = [
+      # Specify dependencies
-          {
+      # https://nixos.org/manual/nixpkgs/stable/#ssec-stdenv-dependencies-overview
-            name = "pb";
+      # Just for a "nix develop" shell, buildInputs can be used for everything.
-            help = "Serve PocketBase";
+      # ===========================================================================================
-            command = "pocketbase serve --http 192.168.86.50:8090";
+
-          }
+      # Add dependencies to nativeBuildInputs if they are executed during the build:
-          {
+      # - Those which are needed on $PATH during the build, for example cmake and pkg-config
-            name = "dev";
+      # - Setup hooks, for example makeWrapper
-            help = "Serve Formula 11 (Dev)";
+      # - Interpreters needed by patchShebangs for build scripts (with the --build flag), which can be the case for e.g. perl
-            command = "npm run dev -- --host --port 5173";
+      nativeBuildInputs = with pkgs; [
-          }
+        nodejs_24
-          {
+        pocketbase
-            name = "prod";
+
-            help = "Serve Formula 11 (Prod)";
+        sqlite # For sqlite console
-            command = "npm run build && npm run preview -- --host --port 5173";
+        sqlitebrowser # To check low-level pocketbase data
-          }
+
-          {
+        # Languages:
-            name = "check";
+        # python
-            help = "Continuously monitor for SvelteKit issues";
+        # rust
-            command = "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch";
+        # bintools
-          }
+        # gcc
-        ];
+        # clang
+        # bintools_multilib
+        # gcc_multilib
+        # clang_multilib
+        # clojure
+        # jdk
+
+        # C/C++:
+        # gdb
+        # valgrind
+        # gnumake
+        # cmake
+        # pkg-config
+
+        # Clojure:
+        # leiningen
+        # clj-nix.packages.${system}.deps-lock
+
+        # Java:
+        # gradle
+
+        # Python:
+        # hatch
+        # py-spy
+
+        # Qt:
+        # qt6.wrapQtAppsHook # For the shellHook
+      ];
+
+      # Add dependencies to buildInputs if they will end up copied or linked into the final output or otherwise used at runtime:
+      # - Libraries used by compilers, for example zlib
+      # - Interpreters needed by patchShebangs for scripts which are installed, which can be the case for e.g. perl
+      buildInputs = with pkgs; [
+        # C/C++:
+        # boost
+        # sfml
+
+        # Qt:
+        # qt6.qtbase
+        # qt6.full
+      ];
+      # ===========================================================================================
+      # Define buildable + installable packages
+      # ===========================================================================================
+      # package = stdenv.mkDerivation {
+      #   inherit nativeBuildInputs buildInputs;
+      #   pname = "";
+      #   version = "1.0.0";
+      #   src = ./.;
+      #
+      #   installPhase = ''
+      #     mkdir -p $out/bin
+      #     mv ./BINARY $out/bin
+      #   '';
+      # };
+      # package = clj-nix.lib.mkCljApp {
+      #   inherit pkgs;
+      #   modules = [
+      #     # Option list: https://jlesquembre.github.io/clj-nix/options/
+      #     {
+      #       name = "";
+      #       version = "1.0.0";
+      #       main-ns = "";
+      #       projectSrc = ./.;
+      #       withLeiningen = true;
+      #       buildCommand = "lein uberjar"; # Requires "withLeiningen = true;"
+      #       jdk = pkgs.jdk; # Default is pkgs.jdk_headless
+      #       # customJdk.enable = true;
+      #       # nativeImage.enable = true;
+      #     }
+      #   ];
+      # };
+    in rec {
+      # Provide package for "nix build"
+      # defaultPackage = package;
+      # defaultApp = flake-utils.lib.mkApp {
+      #   drv = defaultPackage;
+      # };
+
+      # Provide environment for "nix develop"
+      devShell = pkgs.mkShell {
+        inherit nativeBuildInputs buildInputs;
+        name = description;
+
+        # =========================================================================================
+        # Define environment variables
+        # =========================================================================================
+
+        # Rust stdlib source:
+        # RUST_SRC_PATH = "${rust}/lib/rustlib/src/rust/library";
+
+        # Custom dynamic libraries:
+        # LD_LIBRARY_PATH = builtins.concatStringsSep ":" [
+        #   # Rust Bevy GUI app:
+        #   # "${pkgs.xorg.libX11}/lib"
+        #   # "${pkgs.xorg.libXcursor}/lib"
+        #   # "${pkgs.xorg.libXrandr}/lib"
+        #   # "${pkgs.xorg.libXi}/lib"
+        #   # "${pkgs.libGL}/lib"
+        #
+        #   # JavaFX app:
+        #   # "${pkgs.libGL}/lib"
+        #   # "${pkgs.gtk3}/lib"
+        #   # "${pkgs.glib.out}/lib"
+        #   # "${pkgs.xorg.libXtst}/lib"
+        # ];
+
+        # Dynamic libraries from buildinputs:
+        # LD_LIBRARY_PATH = nixpkgs.lib.makeLibraryPath buildInputs;
+
+        # QT imports to use with "qmlls -E"
+        # QML_IMPORT_PATH = "${pkgs.qt6.full}/lib/qt-6/qml";
+
+        # Set PYTHONPATH
+        # PYTHONPATH = ".";
+
+        # Set matplotlib backend
+        # MPLBACKEND = "TkAgg";
+
+        # =========================================================================================
+        # Define shell environment
+        # =========================================================================================
+
+        # Setup the shell when entering the "nix develop" environment (bash script).
+        shellHook = let
+          mkCmakeScript = type: let
+            typeLower = lib.toLower type;
+          in
+            pkgs.writers.writeFish "cmake-${typeLower}.fish" ''
+              cd $FLAKE_PROJECT_ROOT
+
+              echo "Removing build directory ./cmake-build-${typeLower}/"
+              rm -rf ./cmake-build-${typeLower}
+
+              echo "Creating build directory"
+              mkdir cmake-build-${typeLower}
+              cd cmake-build-${typeLower}
+
+              echo "Running cmake"
+              cmake -G "Unix Makefiles" -DCMAKE_BUILD_TYPE="${type}" -DCMAKE_EXPORT_COMPILE_COMMANDS="On" ..
+
+              echo "Linking compile_commands.json"
+              cd ..
+              ln -sf ./cmake-build-${typeLower}/compile_commands.json ./compile_commands.json
+            '';
+
+          cmakeDebug = mkCmakeScript "Debug";
+          cmakeRelease = mkCmakeScript "Release";
+
+          mkBuildScript = type: let
+            typeLower = lib.toLower type;
+          in
+            pkgs.writers.writeFish "cmake-build.fish" ''
+              cd $FLAKE_PROJECT_ROOT/cmake-build-${typeLower}
+
+              echo "Running cmake"
+              cmake --build .
+            '';
+
+          buildDebug = mkBuildScript "Debug";
+          buildRelease = mkBuildScript "Release";
+
+          # Use this to specify commands that should be ran after entering fish shell
+          initProjectShell = pkgs.writers.writeFish "init-shell.fish" ''
+            echo "Entering \"${description}\" environment..."
+
+            # Determine the project root, used e.g. in cmake scripts
+            set -g -x FLAKE_PROJECT_ROOT (git rev-parse --show-toplevel)
+
+            # Rust Bevy:
+            # abbr -a build-release-windows "CARGO_FEATURE_PURE=1 cargo xwin build --release --target x86_64-pc-windows-msvc"
+
+            # C/C++:
+            # abbr -a cmake-debug "${cmakeDebug}"
+            # abbr -a cmake-release "${cmakeRelease}"
+            # abbr -a build-debug "${buildDebug}"
+            # abbr -a build-release "${buildRelease}"
+
+            # Clojure:
+            # abbr -a clojure-deps "deps-lock --lein"
+
+            # Python:
+            # abbr -a run "python ./app/main.py"
+            # abbr -a profile "py-spy record -o profile.svg -- python ./app/main.py && firefox profile.svg"
+            # abbr -a ptop "py-spy top -- python ./app/main.py"
+
+            # Formula11:
+            abbr -a pb "pocketbase serve --http 192.168.86.50:8090 --dev"
+            abbr -a dev "npm run dev -- --host --port 5173"
+            abbr -a prod "npm run build && npm run preview -- --host --port 5173"
+            abbr -a check "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+          '';
+        in
+          builtins.concatStringsSep "\n" [
+            # Launch into pure fish shell
+            ''
+              exec "$(type -p fish)" -C "source ${initProjectShell} && abbr -a menu '${pkgs.bat}/bin/bat "${initProjectShell}"'"
+            ''
+
+            # Qt: Launch into wrapped fish shell
+            # https://nixos.org/manual/nixpkgs/stable/#sec-language-qt
+            # ''
+            #   fishdir=$(mktemp -d)
+            #   makeWrapper "$(type -p fish)" "$fishdir/fish" "''${qtWrapperArgs[@]}"
+            #   exec "$fishdir/fish" -C "source ${initProjectShell} && abbr -a menu '${pkgs.bat}/bin/bat "${initProjectShell}"'"
+            # ''
+          ];
       };
     });
 }

package.json

@@ -10,6 +10,7 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
+		"@carbon/charts-svelte": "^1.22.18",
 		"@floating-ui/dom": "^1.6.13",
 		"@fsouza/prettierd": "^0.26.1",
 		"@skeletonlabs/skeleton": "^2.10.4",
@@ -20,16 +21,19 @@
 		"@tailwindcss/forms": "^0.5.10",
 		"@types/node": "^22.13.10",
 		"autoprefixer": "^10.4.21",
+		"cheerio": "^1.0.0",
 		"date-fns": "^4.1.0",
 		"pocketbase": "^0.25.2",
 		"postcss": "^8.5.3",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
+		"runes2": "^1.1.4",
 		"svelte": "^5.23.0",
 		"svelte-check": "^4.1.5",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.8.2",
+		"uuid": "^11.1.0",
 		"vite": "^6.2.2"
 	},
 	"dependencies": {

pocketbase.dockerfile

@@ -2,7 +2,7 @@
 # because fucking Docker thinks "toomanyrequests". Fuckers
 FROM docker.io/library/alpine:3.21.2
 
-ARG PB_VERSION=0.25.0
+ARG PB_VERSION=0.33.0
 
 RUN apk add --no-cache \
     unzip \

src/lib/chart.ts

@@ -0,0 +1,60 @@
+import { type LineChartOptions, ScaleTypes } from "@carbon/charts-svelte";
+
+export const make_chart_options = (
+  title: string,
+  bottom: string,
+  left: string,
+  group: string = "group",
+  width: string = "100%",
+  height: string = "400px",
+): LineChartOptions => {
+  return {
+    title: title,
+    axes: {
+      bottom: {
+        mapsTo: bottom,
+        scaleType: ScaleTypes.LABELS,
+      },
+      left: {
+        mapsTo: left,
+        scaleType: ScaleTypes.LINEAR,
+      },
+    },
+    data: {
+      groupMapsTo: group,
+    },
+    curve: "curveMonotoneX",
+    // toolbar: {
+    //   enabled: false,
+    // },
+    animations: true,
+    // canvasZoom: {
+    //   enabled: false,
+    // },
+    grid: {
+      x: {
+        enabled: true,
+        alignWithAxisTicks: true,
+      },
+      y: {
+        enabled: true,
+        alignWithAxisTicks: true,
+      },
+    },
+    legend: {
+      enabled: true,
+      clickable: true,
+      position: "top",
+    },
+    points: {
+      enabled: true,
+      radius: 5,
+    },
+    tooltip: {
+      showTotal: false,
+    },
+    resizable: true,
+    width: width,
+    height: height,
+  };
+};

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}

src/lib/components/Table.svelte

@@ -8,17 +8,20 @@
     /** The columns the table should have. */
     columns: TableColumn[];
 
+    /** Optional height classes */
+    height?: string;
+
     /** An optional function handling clicking on a table row */
     handler?: (event: Event, id: string) => Promise<void>;
   }
 
-  let { data, columns, handler = undefined }: TableProps = $props();
+  let { data, columns, height = "", handler = undefined }: TableProps = $props();
 </script>
 
 {#if data.length > 0}
-  <div class="table-container bg-white shadow">
+  <div class="table-container bg-white shadow {height}">
-    <table class="table table-compact bg-white">
+    <table class="table table-compact !overflow-scroll bg-white">
-      <thead>
+      <thead class="sticky top-0">
         <tr class="bg-surface-500">
           {#each columns as col}
             <th class="!px-3">{col.label}</th>

src/lib/components/cards/DriverCard.svelte

@@ -121,6 +121,14 @@
             toastStore.trigger(get_error_toast("Invalid driver id!"));
             return;
           }
+          // TODO: Not sure if we want to switch teams without creating a new driver
+          if (team_select_value !== driver.team) {
+            toastStore.trigger(
+              get_error_toast("Please use the team switch button to change teams!"),
+            );
+            return;
+          }
+
           await pb.collection("drivers").update(driver.id, driver_data);
         }
         modalStore.close();

src/lib/components/cards/RaceCard.svelte

@@ -187,13 +187,21 @@
   imgonclick={(event: Event) => modalStore.close()}
 >
   <div class="flex flex-col gap-2">
-    <!-- Driver name input -->
+    <!-- Race name input -->
-    <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
+    <Input
+      bind:value={name_value}
+      autocomplete="off"
+      placeholder="Has to end with an emoji"
+      {labelwidth}
+      {disabled}
+      {required}
+    >
       Name
     </Input>
     <Input
       bind:value={step_value}
       autocomplete="off"
+      placeholder="The step in the race calendar"
       type="number"
       min={1}
       max={24}
@@ -206,6 +214,7 @@
     <Input
       bind:value={pxx_value}
       autocomplete="off"
+      placeholder="The place to guess"
       type="number"
       min={1}
       max={20}

src/lib/components/cards/RaceResultCard.svelte

@@ -8,7 +8,7 @@
     type ModalStore,
     type ToastStore,
   } from "@skeletonlabs/skeleton";
-  import { Button, Card, Dropdown } from "$lib/components";
+  import { Button, Card, Dropdown, type DropdownOption } from "$lib/components";
   import type { Driver, Race, RaceResult, Substitution } from "$lib/schema";
   import { get_by_value } from "$lib/database";
   import { race_dropdown_options } from "$lib/dropdown";
@@ -46,6 +46,9 @@
   let substitutions: Substitution[] | undefined = $state(undefined);
   data.substitutions.then((s: Substitution[]) => (substitutions = s));
 
+  let raceresults: RaceResult[] | undefined = $state(undefined);
+  data.raceresults.then((r: RaceResult[]) => (raceresults = r));
+
   // Constants
   const labelwidth: string = "70px";
 
@@ -58,6 +61,11 @@
     get_by_value<Race>(races ?? [], "id", race_select_value) ?? undefined,
   );
 
+  let present_results: string[] = $derived.by(() => {
+    if (!raceresults || raceresults.length === 0) return [];
+    return raceresults.map((raceresult: RaceResult) => raceresult.race);
+  });
+
   let pxxs_placeholder: string = $derived(
     currentrace
       ? `Select P${(currentrace.pxx ?? -10) - 3} to P${(currentrace.pxx ?? -10) + 3}...`
@@ -136,7 +144,7 @@
     pxxs_input = "";
 
     // Manage ids that are submitted via form
-    const id: string = get_by_value(drivers, "code", event.detail.value)?.id ?? "Invalid";
+    const id: string = get_by_value(drivers.filter((driver: Driver) => driver.active), "code", event.detail.value)?.id ?? "Invalid";
     if (!pxxs_ids.includes(id)) {
       pxxs_ids.push(id);
     }
@@ -157,7 +165,7 @@
     dnfs_input = "";
 
     // Manage ids that are submitted via form
-    const id: string = get_by_value(drivers, "code", event.detail.value)?.id ?? "Invalid";
+    const id: string = get_by_value(drivers.filter((driver: Driver) => driver.active), "code", event.detail.value)?.id ?? "Invalid";
     if (!dnfs_ids.includes(id)) {
       dnfs_ids.push(id);
     }
@@ -174,10 +182,11 @@
         toastStore.trigger(get_error_toast("Please select a race!"));
         return;
       }
-      if (!pxxs_ids || pxxs_ids.length !== 7) {
+      // If enough drivers DNF/DSQ, theoretically pxxs_ids could be empty
-        toastStore.trigger(get_error_toast("Please select all 7 driver placements!"));
+      // if (!pxxs_ids || pxxs_ids.length !== 7) {
-        return;
+      //   toastStore.trigger(get_error_toast("Please select all 7 driver placements!"));
-      }
+      //   return;
+      // }
 
       const raceresult_data = {
         race: race_select_value,
@@ -227,7 +236,9 @@
       <Dropdown
         name="race"
         bind:value={race_select_value}
-        options={race_dropdown_options(races)}
+        options={race_dropdown_options(races).filter(
+          (option: DropdownOption) => result || !present_results.includes(option.value),
+        )}
         {labelwidth}
         {disabled}
         {required}

src/lib/components/cards/SubstitutionCard.svelte

@@ -113,10 +113,10 @@
   };
 </script>
 
-{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
+{#await data.drivers then drivers}
   <Card
-    imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
+    imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
-      get_driver_headshot_template(graphics)}
+      get_driver_headshot_template(data.graphics)}
     imgid="headshot_preview"
     width="w-full sm:w-auto"
     imgwidth={DRIVER_HEADSHOT_WIDTH}

src/lib/components/cards/TeamSwitchCard.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import {
+    getModalStore,
+    getToastStore,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
+  import { Card, Button, Dropdown } from "$lib/components";
+  import type { Driver } from "$lib/schema";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import type { PageData } from "../../../routes/data/season/drivers/$types";
+  import { driver_dropdown_options, team_dropdown_options } from "$lib/dropdown";
+
+  interface TeamCardProps {
+    /** Data from the page context */
+    data: PageData;
+  }
+
+  let { data }: TeamCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    data = meta.data;
+  }
+
+  const toastStore: ToastStore = getToastStore();
+
+  // Await promises
+  let drivers: Driver[] | undefined = $state(undefined);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  // Constants
+  const labelwidth: string = "110px";
+
+  // Reactive state
+  let required: boolean = true;
+  let disabled: boolean = $derived(!$pbUser?.admin);
+  let driver_value: string = $state("");
+  let team_value: string = $state("");
+
+  // Update preview
+  $effect(() => {
+    if (!drivers) return;
+    const src: string = get_by_value(drivers, "id", driver_value)?.headshot_url ?? "";
+    const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
+    if (img) img.src = src;
+  });
+
+  // Database actions
+  const update_driver = (): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!driver_value || driver_value === "") {
+        toastStore.trigger(get_error_toast("Please select a driver!"));
+        return;
+      }
+      const old_driver: Driver | undefined = get_by_value(await data.drivers, "id", driver_value);
+      if (!old_driver) {
+        toastStore.trigger(get_error_toast("Unable to lookup driver!"));
+        return;
+      }
+      if (!old_driver.headshot_url) {
+        toastStore.trigger(get_error_toast("Unable to lookup driver headshot!"));
+        return;
+      }
+      if (!team_value || team_value === "" || team_value === old_driver.team) {
+        toastStore.trigger(get_error_toast("Please select a new team!"));
+        return;
+      }
+
+      // Create a new driver
+      const headshot_response = await fetch(old_driver.headshot_url);
+      const headshot_blob = await headshot_response.blob();
+      let new_driver_data = {
+        code: old_driver.code,
+        firstname: old_driver.firstname,
+        lastname: old_driver.lastname,
+        headshot: headshot_blob, // NOTE: Duplicates the image, but no issue for low volume
+        team: team_value,
+        active: true,
+        started_active: false,
+      };
+      try {
+        await pb.collection("drivers").create(new_driver_data);
+
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+        return;
+      }
+
+      // Disable the old driver
+      let old_driver_data = {
+        active: false,
+      };
+      try {
+        await pb.collection("drivers").update(driver_value, old_driver_data);
+
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+</script>
+
+<Card
+  imgsrc={get_driver_headshot_template(data.graphics)}
+  imgid="headshot_preview"
+  width="w-full sm:w-auto"
+  imgwidth={DRIVER_HEADSHOT_WIDTH}
+  imgheight={DRIVER_HEADSHOT_HEIGHT}
+  imgonclick={(event: Event) => modalStore.close()}
+>
+  <div class="flex flex-col gap-2">
+    <!-- Driver select -->
+    {#await data.drivers then drivers}
+      <Dropdown
+        bind:value={driver_value}
+        options={driver_dropdown_options(drivers.filter((driver: Driver) => driver.active))}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Driver
+      </Dropdown>
+    {/await}
+
+    <!-- New team select -->
+    {#await data.teams then teams}
+      <Dropdown
+        bind:value={team_value}
+        options={team_dropdown_options(teams)}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        New Team
+      </Dropdown>
+    {/await}
+
+    <!-- Save/Delete buttons -->
+    <div class="flex justify-end gap-2">
+      <Button onclick={update_driver()} color="tertiary" {disabled} width="w-full">
+        Switch Team
+      </Button>
+    </div>
+  </div>
+</Card>

src/lib/components/form/Button.svelte

@@ -21,6 +21,9 @@
     /** Make the button act as a link. */
     href?: string;
 
+    /** Open the link inside a new tab. */
+    newtab?: boolean;
+
     /** Add a width class to the button. */
     width?: string;
 
@@ -54,6 +57,7 @@
     color = undefined,
     submit = false,
     href = undefined,
+    newtab = false,
     width = "w-auto",
     activate = false,
     activate_href = false,
@@ -70,6 +74,8 @@
 {#if href}
   <a
     {href}
+    target={newtab ? "_blank" : undefined}
+    rel={newtab ? "noopener noreferrer" : undefined}
     class="btn m-0 select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {width} {activate
       ? 'btn-hover'
       : ''} {activate_href && is_at_path(href) ? 'btn-hover' : ''} {shadow

src/lib/components/index.ts

@@ -15,6 +15,7 @@ import RaceResultCard from "./cards/RaceResultCard.svelte";
 import SeasonPickCard from "./cards/SeasonPickCard.svelte";
 import SubstitutionCard from "./cards/SubstitutionCard.svelte";
 import TeamCard from "./cards/TeamCard.svelte";
+import TeamSwitchCard from "./cards/TeamSwitchCard.svelte";
 
 import type { DropdownOption } from "./form/Dropdown";
 import type { TableColumn } from "./Table";
@@ -48,6 +49,7 @@ export {
   SeasonPickCard,
   SubstitutionCard,
   TeamCard,
+  TeamSwitchCard,
 
   // Types
   type DropdownOption,

src/lib/date.ts

@@ -24,5 +24,8 @@ export const timeformat: string = "HH:mm";
  * Format a [Date] object using a [date-fns] formatstring.
  * This function uses localtime instead of UTC.
  */
-export const format_date = <T extends Date | string>(date: T, formatstring: string): string =>
+export const format_date = <T extends Date | string>(date: T, formatstring: string): string => {
-  format(new Date(date), formatstring);
+  if (!date) return "";
+
+  return format(new Date(date), formatstring);
+};

src/lib/dropdown.ts

@@ -30,7 +30,7 @@ export const team_dropdown_options = (teams: Team[]): DropdownOption[] =>
  */
 export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] =>
   drivers
-    .sort((a: Driver, b: Driver) => a.firstname.localeCompare(b.firstname))
+    .sort((a: Driver, b: Driver) => a.lastname.localeCompare(b.lastname))
     .map((driver: Driver) => {
       return {
         label: `${driver.firstname} ${driver.lastname}`,

src/lib/fetch.ts

@@ -7,7 +7,15 @@ import type {
   Hottake,
   Race,
   RacePick,
+  RacePickPoints,
+  RacePickPointsAcc,
+  RacePickPointsTotal,
   RaceResult,
+  ScrapedDriverStanding,
+  ScrapedRaceResult,
+  ScrapedRaceResultAcc,
+  ScrapedStartingGrid,
+  ScrapedTeamStanding,
   SeasonPick,
   SeasonPickedUser,
   Substitution,
@@ -261,3 +269,107 @@ export const fetch_seasonpickedusers = async (
 
   return seasonpickedusers;
 };
+
+/**
+ * Fetch all [RacePickPoints] from the database
+ */
+export const fetch_racepickpoints = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePickPoints[]> => {
+  const racepickpoints: RacePickPoints[] = await pb
+    .collection("racepickpoints")
+    .getFullList({ fetch: fetch });
+
+  return racepickpoints;
+};
+
+/**
+ * Fetch all [RacePickPointsAcc] from the database, ordered ascendingly by step.
+ */
+export const fetch_racepickpointsacc = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePickPointsAcc[]> => {
+  const racepickpointsacc: RacePickPointsAcc[] = await pb
+    .collection("racepickpointsacc")
+    .getFullList({ fetch: fetch });
+
+  return racepickpointsacc;
+};
+
+/**
+ * Fetch all [RacePickPointsTotal] from the database, ordered descendingly by total points.
+ */
+export const fetch_racepickpointstotal = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePickPointsTotal[]> => {
+  const racepickpointstotal: RacePickPointsTotal[] = await pb
+    .collection("racepickpointstotal")
+    .getFullList({ fetch: fetch });
+
+  return racepickpointstotal;
+};
+
+/**
+ * Fetch all [ScrapedDriverStandings] from the database, ordered ascendingly by position.
+ */
+export const fetch_scraped_driverstandings = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<ScrapedDriverStanding[]> => {
+  const scraped_driverstandings: ScrapedDriverStanding[] = await pb
+    .collection("scraped_driverstandings")
+    .getFullList({ fetch: fetch, sort: "+position" });
+
+  return scraped_driverstandings;
+};
+
+/**
+ * Fetch all [ScrapedTeamStandings] from the database, ordered ascendingly by position.
+ */
+export const fetch_scraped_teamstandings = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<ScrapedTeamStanding[]> => {
+  const scraped_teamstandings: ScrapedTeamStanding[] = await pb
+    .collection("scraped_teamstandings")
+    .getFullList({ fetch: fetch, sort: "+position" });
+
+  return scraped_teamstandings;
+};
+
+/**
+ * Fetch all [ScrapedStartingGrids] from the database, ordered descendingly by race step.
+ */
+export const fetch_scraped_startinggrids = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<ScrapedStartingGrid[]> => {
+  const scraped_startinggrids: ScrapedStartingGrid[] = await pb
+    .collection("scraped_startinggrids")
+    .getFullList({ fetch: fetch, sort: "-race_step,+position" });
+
+  return scraped_startinggrids;
+};
+
+/**
+ * Fetch all [ScrapedRaceResults] from the database, ordered descendingly by race step.
+ */
+export const fetch_scraped_raceresults = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<ScrapedRaceResult[]> => {
+  const scraped_raceresults: ScrapedRaceResult[] = await pb
+    .collection("scraped_raceresults")
+    .getFullList({ fetch: fetch, sort: "-race_step,+position" });
+
+  return scraped_raceresults;
+};
+
+/**
+ * Fetch all [ScrapedRaceResultsAcc] from the database, ordered ascendingly by race step.
+ */
+export const fetch_scraped_raceresultsacc = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<ScrapedRaceResultAcc[]> => {
+  const scraped_raceresultsacc: ScrapedRaceResultAcc[] = await pb
+    .collection("scraped_raceresultsacc")
+    .getFullList({ fetch: fetch, sort: "+race_step" });
+
+  return scraped_raceresultsacc;
+};

src/lib/schema.ts

@@ -41,6 +41,7 @@ export interface Driver {
   headshot_url?: string;
   team: string;
   active: boolean;
+  started_active: boolean;
 }
 
 export interface Race {
@@ -127,3 +128,71 @@ export interface SeasonPickedUser {
   admin: boolean;
   picked: string | null;
 }
+
+// Points Data
+
+export interface RacePickPoints {
+  id: string;
+  user: string;
+  step: number;
+  pxx_points: number;
+  dnf_points: number;
+}
+
+export interface RacePickPointsAcc {
+  id: string;
+  user: string;
+  step: number;
+  acc_pxx_points: number;
+  acc_dnf_points: number;
+  acc_points: number;
+}
+
+export interface RacePickPointsTotal {
+  id: string;
+  user: string;
+  total_pxx_points: number;
+  total_dnf_points: number;
+  total_points: number;
+  total_points_per_pick: number;
+}
+
+// Scraped Data
+
+export interface ScrapedStartingGrid {
+  id: string;
+  race_step: number; // This maps to races
+  driver_code: string; // This maps to drivers
+  position: number;
+  time: string;
+}
+
+export interface ScrapedRaceResult {
+  id: string;
+  race_step: number; // This maps to races
+  driver_code: string; // This maps to drivers
+  position: number;
+  status: string; // Either contains time to leader or DNF/DSQ...
+  points: number;
+}
+
+export interface ScrapedRaceResultAcc {
+  id: string;
+  race_step: number; // This maps to races
+  driver_code: string; // This maps to drivers
+  acc_points: number;
+}
+
+export interface ScrapedDriverStanding {
+  id: string;
+  driver_code: string; // This maps to drivers
+  position: number;
+  points: number;
+}
+
+export interface ScrapedTeamStanding {
+  id: string;
+  team_fullname: string; // TODO: This does NOT map to teams! Add fullname to team data!
+  position: number;
+  points: number;
+}

src/lib/server/scrape.ts

@@ -0,0 +1,181 @@
+import type {
+  ScrapedDriverStanding,
+  ScrapedStartingGrid,
+  ScrapedRaceResult,
+  ScrapedTeamStanding,
+} from "$lib/schema";
+import * as cheerio from "cheerio";
+
+// TODO: Validate the generated stuff
+
+export const base_url: string = "https://www.formula1.com/en/results/2025";
+
+/**
+ * Returns a list of links to all past races of the season,
+ * based on official f1.com data.
+ */
+export const scrape_race_links = async (): Promise<string[]> => {
+  const races_response = await fetch(`${base_url}/races`);
+  const races_text = await races_response.text();
+
+  const $ = cheerio.load(races_text);
+
+  const race_links: string[] = [];
+  $("tbody > tr > td:first-child > p > a[href]", "table.f1-table").each((_, element) => {
+    const href: string = element.attribs["href"];
+
+    // Keks changed the link format, cut off the start
+    const substring: string = href.replace("/../../en/results/2025/", "");
+
+    race_links.push(substring);
+  });
+  console.log(`Found ${race_links.length} races...`);
+  console.log(race_links);
+
+  return race_links;
+};
+
+/**
+ * Returns a list of [ScrapedStartingGrids] for all races contained in [race_links],
+ * based on official f1.com data.
+ */
+export const scrape_starting_grids = async (
+  race_links: string[],
+): Promise<ScrapedStartingGrid[]> => {
+  // Update the race_links to point to the qualifications
+  const starting_grid_links: string[] = race_links.map((link: string) =>
+    link.replace("/race-result", "/starting-grid"),
+  );
+
+  const starting_grids: ScrapedStartingGrid[] = [];
+  await Promise.all(
+    starting_grid_links.map(async (link: string, index: number) => {
+      console.log(`Fetching qualifying results from ${base_url}/${link}...`);
+      const starting_grids_response = await fetch(`${base_url}/${link}`);
+      const starting_grids_text = await starting_grids_response.text();
+
+      const $ = cheerio.load(starting_grids_text);
+
+      // Obtain the positions for this starting grid for each driver
+      $("tbody > tr", "table.f1-table").each((driver_index, element) => {
+        const $$ = cheerio.load(element);
+
+        let result: ScrapedStartingGrid = {
+          id: "",
+          race_step: index + 1,
+          driver_code: $$(
+            "td:nth-child(3) > p > span:first-child > span:last-child > span:last-child",
+          ).text(),
+          position: driver_index + 1, // parseInt($$("td:nth-child(1) > p").text()),
+          time: $$("td:nth-child(5) > p").text(),
+        };
+
+        starting_grids.push(result);
+      });
+    }),
+  );
+  console.log(`Scraped ${starting_grids.length} starting grids...`);
+  // console.log(starting_grids);
+
+  return starting_grids;
+};
+
+/**
+ * Returns a list of [ScrapedRaceResults] for all races contained in [race_links],
+ * based on official f1.com data.
+ */
+export const scrape_race_results = async (race_links: string[]): Promise<ScrapedRaceResult[]> => {
+  const race_results: ScrapedRaceResult[] = [];
+  await Promise.all(
+    race_links.map(async (link: string, index: number) => {
+      console.log(`Fetching race results from ${base_url}/${link}...`);
+      const race_response = await fetch(`${base_url}/${link}`);
+      const race_text = await race_response.text();
+
+      const $ = cheerio.load(race_text);
+
+      // Obtain the results for this race for each driver
+      $("tbody > tr", "table.f1-table").each((driver_index, element) => {
+        const $$ = cheerio.load(element);
+
+        let result: ScrapedRaceResult = {
+          id: "",
+          race_step: index + 1,
+          driver_code: $$(
+            "td:nth-child(3) > p > span:first-child > span:last-child > span:last-child",
+          ).text(),
+          position: driver_index + 1, // parseInt($$("td:nth-child(1) > p").text()),
+          status: $$("td:nth-child(6) > p").text(),
+          points: parseInt($$("td:nth-child(7) > p").text()),
+        };
+
+        // DSQ'd/DNF'd drivers have NaN positions
+        // if (Number.isNaN(result.position)) {
+        //   result.position = driver_index;
+        // }
+
+        race_results.push(result);
+      });
+    }),
+  );
+  console.log(`Scraped ${race_results.length} race results...`);
+  // console.log(race_results);
+
+  return race_results;
+};
+
+/**
+ * Returns a list of [ScrapedDriverStandings], based on official f1.com data.
+ */
+export const scrape_driver_standings = async (): Promise<ScrapedDriverStanding[]> => {
+  const standings_response = await fetch(`${base_url}/drivers`);
+  const standings_text = await standings_response.text();
+
+  const $ = cheerio.load(standings_text);
+
+  const driver_standings: ScrapedDriverStanding[] = [];
+  $("tbody > tr", "table.f1-table").each((driver_index, element) => {
+    const $$ = cheerio.load(element);
+
+    let standing: ScrapedDriverStanding = {
+      id: "",
+      driver_code: $$("td:nth-child(2) > p > a > span:last-child > span:last-child").text(),
+      position: driver_index + 1,
+      points: parseInt($$("td:nth-child(5) > p").text()),
+    };
+
+    driver_standings.push(standing);
+  });
+  console.log(`Scraped ${driver_standings.length} driver standings...`);
+  // console.log(driver_standings);
+
+  return driver_standings;
+};
+
+/**
+ * Returns a list of [ScrapedTeamStandings], based on official f1.com data.
+ */
+export const scrape_team_standings = async (): Promise<ScrapedTeamStanding[]> => {
+  const standings_response = await fetch(`${base_url}/team`);
+  const standings_text = await standings_response.text();
+
+  const $ = cheerio.load(standings_text);
+
+  const team_standings: ScrapedTeamStanding[] = [];
+  $("tbody > tr", "table.f1-table").each((team_index, element) => {
+    const $$ = cheerio.load(element);
+
+    let standing: ScrapedTeamStanding = {
+      id: "",
+      team_fullname: $$("td:nth-child(2) > p > a").text(),
+      position: team_index + 1,
+      points: parseInt($$("td:nth-child(3) > p").text()),
+    };
+
+    team_standings.push(standing);
+  });
+  console.log(`Scraped ${team_standings.length} team standings...`);
+  // console.log(team_standings);
+
+  return team_standings;
+};

src/lib/toast.ts

@@ -1,28 +1,63 @@
 import type { ToastSettings } from "@skeletonlabs/skeleton";
 
-export const get_info_toast = (message: string, timeout: number = 2000): ToastSettings => {
+export const get_info_toast = (
-  return {
+  message: string,
-    message,
+  timeout: number | null = 2000,
-    hideDismiss: true,
+  action_label: string | undefined = undefined,
-    timeout,
+  action_response: (() => void) | undefined = undefined,
-    background: "variant-filled-tertiary",
+): ToastSettings =>
-  };
+  get_toast(message, "variant-filled-tertiary", timeout, action_label, action_response);
-};
 
-export const get_warning_toast = (message: string, timeout: number = 2000): ToastSettings => {
+export const get_warning_toast = (
-  return {
+  message: string,
-    message,
+  timeout: number | null = 2000,
-    hideDismiss: true,
+  action_label: string | undefined = undefined,
-    timeout,
+  action_response: (() => void) | undefined = undefined,
-    background: "variant-filled-secondary",
+): ToastSettings =>
-  };
+  get_toast(message, "variant-filled-secondary", timeout, action_label, action_response);
-};
 
-export const get_error_toast = (message: string, timeout: number = 2000): ToastSettings => {
+export const get_error_toast = (
+  message: string,
+  timeout: number | null = 2000,
+  action_label: string | undefined = undefined,
+  action_response: (() => void) | undefined = undefined,
+): ToastSettings =>
+  get_toast(message, "variant-filled-primary", timeout, action_label, action_response);
+
+/**
+ * Utility function to create [ToastSettings].
+ * If [timeout] is defined, the toast will disappear automatically and the dismiss-button will be hidden.
+ * If [timeout] is undefined, the toast will stay until dismissed from the dismiss-button.
+ * If [action_label] and [action_response] are defined, a callback function will be executed after accepting.
+ * In this case, [timeout] behaves as if undefined.
+ */
+const get_toast = (
+  message: string,
+  background: string,
+  timeout: number | null = 2000,
+  action_label: string | undefined = undefined,
+  action_response: (() => void) | undefined = undefined,
+): ToastSettings => {
   return {
     message,
-    hideDismiss: true,
+    background,
-    timeout,
+
-    background: "variant-filled-primary",
+    // If we have a timeout and no action, dismiss is hidden
+    hideDismiss: !!timeout && (!action_label || !action_response),
+
+    // If we have a timeout and no action, the timeout is used
+    timeout: !!timeout && (!action_label || !action_response) ? timeout : undefined,
+
+    // If we have a timeout and no action, autohide is true
+    autohide: !!timeout && (!action_label || !action_response),
+
+    // If we have a label and a response, use the action
+    action:
+      !!action_label && !!action_response
+        ? {
+            label: action_label,
+            response: action_response,
+          }
+        : undefined,
   };
 };

src/routes/+layout.svelte

@@ -19,6 +19,7 @@
     RaceResultCard,
     SeasonPickCard,
     EMailIcon,
+    TeamSwitchCard,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
   import {
@@ -58,13 +59,14 @@
   const modalStore: ModalStore = getModalStore();
   const modalRegistry: Record<string, ModalComponent> = {
     // Card data (e.g. team, driver etc.) is passed using $modalStore[0].meta
-    teamCard: { ref: TeamCard },
     driverCard: { ref: DriverCard },
     raceCard: { ref: RaceCard },
     racePickCard: { ref: RacePickCard },
     raceResultCard: { ref: RaceResultCard },
     seasonPickCard: { ref: SeasonPickCard },
     substitutionCard: { ref: SubstitutionCard },
+    teamCard: { ref: TeamCard },
+    teamSwitchCard: { ref: TeamSwitchCard },
   };
 
   // Toast config
@@ -99,7 +101,7 @@
   const drawer_settings_base: DrawerSettings = {
     position: "top",
     height: "auto",
-    padding: "lg:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
+    padding: "2xl:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
     bgDrawer: "bg-surface-100",
     duration: 150,
   };
@@ -327,6 +329,10 @@
       "seasonpicks",
       "substitutions",
       "teams",
+      "scraped_startinggrids",
+      "scraped_raceresults",
+      "scraped_driverstandings",
+      "scraped_teamstandings",
 
       // The view collections do not receive realtime events
     ]),
@@ -342,6 +348,10 @@
       "seasonpicks",
       "substitutions",
       "teams",
+      "scraped_startinggrids",
+      "scraped_raceresults",
+      "scraped_driverstandings",
+      "scraped_teamstandings",
     ]),
   );
 </script>
@@ -374,6 +384,16 @@
       <Button href="/rules" onclick={close_drawer} color="surface" width="w-full" shadow>
         Rules
       </Button>
+      <Button
+        href="https://gitea.vps.chriphost.de/christoph/svelte-formula11/projects/1"
+        onclick={close_drawer}
+        color="surface"
+        width="w-full"
+        shadow
+        newtab
+      >
+        Roadmap
+      </Button>
     </div>
   {:else if $drawerStore.id === "data_drawer"}
     <!-- Data Drawer -->
@@ -392,6 +412,15 @@
       >
         Season
       </Button>
+      <Button
+        href="/data/official/driverstandings"
+        onclick={close_drawer}
+        color="surface"
+        width="w-full"
+        shadow
+      >
+        Official
+      </Button>
       <Button href="/data/users" onclick={close_drawer} color="surface" width="w-full" shadow>
         Users
       </Button>
@@ -489,7 +518,7 @@
         </Button>
       </div>
     </div>
-  {:else if $drawerStore.id === "profile_drawer" && pbUser}
+  {:else if $drawerStore.id === "profile_drawer" && $pbUser}
     <!-- Profile Drawer -->
     <!-- Profile Drawer -->
     <!-- Profile Drawer -->
@@ -570,6 +599,14 @@
         <Button href="/leaderboard" color="primary" activate_href>Leaderboard</Button>
         <Button href="/statistics" color="primary" activate_href>Statistics</Button>
         <Button href="/rules" color="primary" activate_href>Rules</Button>
+        <Button
+          href="https://gitea.vps.chriphost.de/christoph/svelte-formula11/projects/1"
+          color="primary"
+          activate_href
+          newtab
+        >
+          Roadmap
+        </Button>
       </div>
 
       <svelte:fragment slot="trail">

src/routes/api/scrape/+server.ts

@@ -0,0 +1,164 @@
+import {
+  fetch_scraped_driverstandings,
+  fetch_scraped_raceresults,
+  fetch_scraped_startinggrids,
+  fetch_scraped_teamstandings,
+} from "$lib/fetch";
+import { pb } from "$lib/pocketbase";
+import type {
+  ScrapedDriverStanding,
+  ScrapedRaceResult,
+  ScrapedStartingGrid,
+  ScrapedTeamStanding,
+} from "$lib/schema";
+import {
+  scrape_driver_standings,
+  scrape_race_links,
+  scrape_race_results,
+  scrape_starting_grids,
+  scrape_team_standings,
+} from "$lib/server/scrape";
+import type { RequestHandler } from "./$types";
+
+/**
+ * This route is available at /api/scrape.
+ * It will fetch current statistics from f1.com and insert them into the database.
+ */
+// TODO: If this function aborts, it will leave the official data in an inconsistent state...
+//       Would be nice to use transactions for this, do I need to implement this as PB extension?
+export const POST: RequestHandler = async ({ request }) => {
+  console.log("Fetching race results from f1.com...");
+
+  // Obtain the results for each race
+  const racelinks: string[] = await scrape_race_links();
+  const startinggrids: ScrapedStartingGrid[] = await scrape_starting_grids(racelinks);
+  const raceresults: ScrapedRaceResult[] = await scrape_race_results(racelinks);
+  const driverstandings: ScrapedDriverStanding[] = await scrape_driver_standings();
+  const teamstandings: ScrapedTeamStanding[] = await scrape_team_standings();
+
+  // Clear existing PocketBase data
+  // TODO: Do I really have to fetch everything just to delete it???
+  let deleted: number = 0;
+  const scraped_startinggrids: ScrapedStartingGrid[] = await fetch_scraped_startinggrids(fetch);
+  for (const grid of scraped_startinggrids) {
+    try {
+      await pb.collection("scraped_startinggrids").delete(grid.id);
+    } catch (e) {
+      console.log(e);
+      return new Response(); // TODO: Return error
+    }
+    deleted++;
+  }
+  console.log(`Deleted ${deleted}/${scraped_startinggrids.length} starting grids`);
+
+  deleted = 0;
+  const scraped_raceresults: ScrapedRaceResult[] = await fetch_scraped_raceresults(fetch);
+  for (const result of scraped_raceresults) {
+    try {
+      await pb.collection("scraped_raceresults").delete(result.id);
+    } catch (e) {
+      console.log(e);
+      return new Response(); // TODO: Return error
+    }
+    deleted++;
+  }
+  console.log(`Deleted ${deleted}/${scraped_raceresults.length} race results.`);
+
+  deleted = 0;
+  const scraped_driverstandings: ScrapedDriverStanding[] =
+    await fetch_scraped_driverstandings(fetch);
+  for (const standing of scraped_driverstandings) {
+    try {
+      await pb.collection("scraped_driverstandings").delete(standing.id);
+    } catch (e) {
+      console.log(e);
+      return new Response(); // TODO: Return error
+    }
+    deleted++;
+  }
+  console.log(`Deleted ${deleted}/${scraped_driverstandings.length} driver standings.`);
+
+  deleted = 0;
+  const scraped_teamstandings: ScrapedTeamStanding[] = await fetch_scraped_teamstandings(fetch);
+  for (const standing of scraped_teamstandings) {
+    try {
+      await pb.collection("scraped_teamstandings").delete(standing.id);
+    } catch (e) {
+      console.log(e);
+      return new Response(); // TODO: Return error
+    }
+    deleted++;
+  }
+  console.log(`Deleted ${deleted}/${scraped_teamstandings.length} team standings.`);
+
+  // Submit new data to PocketBase
+  let submissions: number = 0;
+  for (const grid of startinggrids) {
+    try {
+      // TODO: Authenticate this
+      await pb.collection("scraped_startinggrids").create(grid);
+    } catch (e) {
+      console.log("Error occured while submitting scraped data to PocketBase:");
+      console.log(e);
+      console.log("Error occured for this starting grid:");
+      console.log(grid);
+      console.log("Aborting submissions...");
+      return new Response(); // TODO: Return error
+    }
+    submissions++;
+  }
+  console.log(`Submitted ${submissions}/${startinggrids.length} starting grids.`);
+
+  submissions = 0;
+  for (const result of raceresults) {
+    try {
+      // TODO: Authenticate this
+      await pb.collection("scraped_raceresults").create(result);
+    } catch (e) {
+      console.log("Error occured while submitting scraped data to PocketBase:");
+      console.log(e);
+      console.log("Error occured for this race result:");
+      console.log(result);
+      console.log("Aborting submissions...");
+      return new Response(); // TODO: Return error
+    }
+    submissions++;
+  }
+  console.log(`Submitted ${submissions}/${raceresults.length} race results.`);
+
+  submissions = 0;
+  for (const standing of driverstandings) {
+    try {
+      // TODO: Authenticate this
+      await pb.collection("scraped_driverstandings").create(standing);
+    } catch (e) {
+      console.log("Error occured while submitting scraped data to PocketBase:");
+      console.log(e);
+      console.log("Error occured for this driver standing:");
+      console.log(standing);
+      console.log("Aborting submissions...");
+      return new Response(); // TODO: Return error
+    }
+    submissions++;
+  }
+  console.log(`Submitted ${submissions}/${driverstandings.length} driver standings.`);
+
+  submissions = 0;
+  for (const standing of teamstandings) {
+    try {
+      // TODO: Authenticate this
+      await pb.collection("scraped_teamstandings").create(standing);
+    } catch (e) {
+      console.log("Error occured while submitting scraped data to PocketBase:");
+      console.log(e);
+      console.log("Error occured for this team standing:");
+      console.log(standing);
+      console.log("Aborting submissions...");
+      return new Response(); // TODO: Return error
+    }
+    submissions++;
+  }
+  console.log(`Submitted ${submissions}/${teamstandings.length} team standings.`);
+
+  return new Response(); // TODO: Return success
+};

src/routes/data/official/+layout.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { invalidate } from "$app/navigation";
+  import { Button } from "$lib/components";
+  import { pbUser } from "$lib/pocketbase";
+  import { get_error_toast, get_warning_toast } from "$lib/toast";
+  import { getToastStore, type ToastStore } from "@skeletonlabs/skeleton";
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
+
+  const toastStore: ToastStore = getToastStore();
+
+  const scrape_message: string =
+    "This will clear and redownload all data from f1.com. Please don't refresh the page during the process.";
+
+  // This callback will be executed once the admin presses the "Proceed"-button in the warning toast
+  const scrape_callback = async () => {
+    const response: Response = await fetch("/api/scrape", { method: "POST" });
+    invalidate("data:official");
+  };
+
+  const scrape_official_data = async () => {
+    if (!$pbUser || !$pbUser.admin) {
+      toastStore.trigger(get_error_toast("Only admins may perform this action!"));
+      return;
+    }
+
+    // No timeout + action toast
+    toastStore.trigger(get_warning_toast(scrape_message, null, "Proceed", scrape_callback));
+  };
+</script>
+
+<div class="fixed left-0 right-0 top-14 z-10 flex justify-center">
+  <div
+    class="mx-2 flex w-full justify-center gap-2 bg-primary-500 pb-2 pt-3 shadow rounded-bl-container-token rounded-br-container-token"
+  >
+    <Button href="driverstandings" color="primary" activate_href>Drivers</Button>
+    <Button href="teamstandings" color="primary" activate_href>Teams</Button>
+    <Button href="startinggrids" color="primary" activate_href>Grids</Button>
+    <Button href="raceresults" color="primary" activate_href>Race Results</Button>
+  </div>
+</div>
+
+<!-- Each child's contents will be inserted here -->
+<div style="margin-top: 56px;">
+  <div class="pb-2">
+    <Button
+      width="w-full"
+      color="tertiary"
+      onclick={scrape_official_data}
+      shadow
+      disabled={!$pbUser?.admin}
+    >
+      <span class="font-bold">Refresh All Data</span>
+    </Button>
+  </div>
+  {@render children()}
+</div>

src/routes/data/official/driverstandings/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import type { PageData } from "./$types";
+
+  let { data }: { data: PageData } = $props();
+
+  const standings_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "driver_code",
+      label: "Driver",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "position",
+      label: "Position",
+    },
+    {
+      data_value_name: "points",
+      label: "Points",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Official Driver Standings</title>
+</svelte:head>
+
+{#await data.scraped_driverstandings then standings}
+  <Table
+    data={standings}
+    columns={standings_columns}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
+{/await}

src/routes/data/official/driverstandings/+page.ts

@@ -0,0 +1,11 @@
+import { fetch_drivers, fetch_scraped_driverstandings } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:official", "data:drivers");
+
+  return {
+    scraped_driverstandings: fetch_scraped_driverstandings(fetch),
+    drivers: fetch_drivers(fetch),
+  };
+};

src/routes/data/official/raceresults/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
+  import type { Race } from "$lib/schema";
+
+  let { data }: { data: PageData } = $props();
+
+  const results_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "race_step",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> => {
+        const racename: string = get_by_value(await data.races, "step", value)?.name ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${racename}</span>`;
+      },
+    },
+    {
+      data_value_name: "race_step",
+      label: "Step",
+    },
+    {
+      data_value_name: "driver_code",
+      label: "Driver",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "position",
+      label: "Position",
+    },
+    {
+      data_value_name: "status",
+      label: "Status",
+    },
+    {
+      data_value_name: "points",
+      label: "Points",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Official Race Results</title>
+</svelte:head>
+
+{#await data.scraped_raceresults then results}
+  <Table
+    data={results}
+    columns={results_columns}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
+{/await}

src/routes/data/official/raceresults/+page.ts

@@ -0,0 +1,12 @@
+import { fetch_drivers, fetch_races, fetch_scraped_raceresults } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:official", "data:races", "data:drivers");
+
+  return {
+    scraped_raceresults: fetch_scraped_raceresults(fetch),
+    races: fetch_races(fetch),
+    drivers: fetch_drivers(fetch),
+  };
+};

src/routes/data/official/startinggrids/+page.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
+  import type { Race } from "$lib/schema";
+
+  let { data }: { data: PageData } = $props();
+
+  const grids_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "race_step",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> => {
+        const racename: string = get_by_value(await data.races, "step", value)?.name ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${racename}</span>`;
+      },
+    },
+    {
+      data_value_name: "race_step",
+      label: "Step",
+    },
+    {
+      data_value_name: "driver_code",
+      label: "Driver",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "position",
+      label: "Position",
+    },
+    {
+      data_value_name: "time",
+      label: "Time",
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Official Starting Grids</title>
+</svelte:head>
+
+{#await data.scraped_startinggrids then grids}
+  <Table
+    data={grids}
+    columns={grids_columns}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
+{/await}

src/routes/data/official/startinggrids/+page.ts

@@ -0,0 +1,12 @@
+import { fetch_drivers, fetch_races, fetch_scraped_startinggrids } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:official", "data:races", "data:drivers");
+
+  return {
+    scraped_startinggrids: fetch_scraped_startinggrids(fetch),
+    races: fetch_races(fetch),
+    drivers: fetch_drivers(fetch),
+  };
+};

src/routes/data/official/teamstandings/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import type { PageData } from "./$types";
+
+  let { data }: { data: PageData } = $props();
+
+  const standings_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "team_fullname",
+      label: "Team",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "position",
+      label: "Position",
+    },
+    {
+      data_value_name: "points",
+      label: "Points",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Official Team Standings</title>
+</svelte:head>
+
+{#await data.scraped_teamstandings then standings}
+  <Table
+    data={standings}
+    columns={standings_columns}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
+{/await}

src/routes/data/official/teamstandings/+page.ts

@@ -0,0 +1,11 @@
+import { fetch_scraped_teamstandings, fetch_teams } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:official", "data:teams");
+
+  return {
+    scraped_teamstandings: fetch_scraped_teamstandings(fetch),
+    teams: fetch_teams(fetch),
+  };
+};

src/routes/data/raceresults/+page.svelte

@@ -54,6 +54,8 @@
       data_value_name: "pxxs",
       label: "Standing",
       valuefun: async (value: string): Promise<string> => {
+        if (value.length === 0 || value === "") return "";
+
         const pxxs_array: string[] = value.toString().split(",");
         const pxxs_codes: string[] = await Promise.all(
           pxxs_array.map(
@@ -95,5 +97,10 @@
   </Button>
 </div>
 {#await data.raceresults then results}
-  <Table data={results} columns={results_columns} handler={result_handler} />
+  <Table
+    data={results}
+    columns={results_columns}
+    handler={result_handler}
+    height="h-[calc(100vh-210px)] lg:h-[calc(100vh-126px)]"
+  />
 {/await}

src/routes/data/raceresults/+page.ts

@@ -2,7 +2,7 @@ import { fetch_drivers, fetch_raceresults, fetch_races, fetch_substitutions } fr
 import type { PageLoad } from "../../$types";
 
 export const load: PageLoad = async ({ fetch, depends }) => {
-  depends("data:drivers", "data:races", "data:raceresults");
+  depends("data:drivers", "data:races", "data:raceresults", "data:substitutions");
 
   return {
     drivers: fetch_drivers(fetch),

src/routes/data/season/drivers/+page.svelte

@@ -24,6 +24,17 @@
 
     modalStore.trigger(modalSettings);
   };
+  const teamswitch_handler = async (event: Event, id?: string) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamSwitchCard",
+      meta: {
+        data,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
 
   const drivers_columns: TableColumn[] = $derived([
     {
@@ -39,7 +50,7 @@
       label: "Team",
       valuefun: async (value: string): Promise<string> => {
         const team: Team | undefined = get_by_value(await data.teams, "id", value);
-        return `<span class='badge border mr-2' style='color: ${team?.color ?? "#FFFFFF"}; background: ${team?.color ?? "#FFFFFF"};'>C</span>${team?.name ?? "Invalid"}`;
+        return `<span class='badge mr-2' style='color: ${team?.color ?? "#FFFFFF"}; background: ${team?.color ?? "#FFFFFF"};'>C</span>${team?.name ?? "Invalid"}`;
       },
     },
     {
@@ -48,6 +59,12 @@
       valuefun: async (value: boolean): Promise<string> =>
         `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
     },
+    {
+      data_value_name: "started_active",
+      label: "Started Active",
+      valuefun: async (value: boolean): Promise<string> =>
+        `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
+    },
   ]);
 </script>
 
@@ -55,11 +72,19 @@
   <title>Formula 11 - Drivers</title>
 </svelte:head>
 
-<div class="pb-2">
+<div class="flex gap-2 pb-2">
   <Button width="w-full" color="tertiary" onclick={driver_handler} shadow>
     <span class="font-bold">Create New Driver</span>
   </Button>
+  <Button width="w-full" color="secondary" onclick={teamswitch_handler} shadow>
+    <span class="font-bold">Switch Driver Team</span>
+  </Button>
 </div>
 {#await data.drivers then drivers}
-  <Table data={drivers} columns={drivers_columns} handler={driver_handler} />
+  <Table
+    data={drivers}
+    columns={drivers_columns}
+    handler={driver_handler}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
 {/await}

src/routes/data/season/races/+page.svelte

@@ -69,5 +69,10 @@
   </Button>
 </div>
 {#await data.races then races}
-  <Table data={races} columns={races_columns} handler={race_handler} />
+  <Table
+    data={races}
+    columns={races_columns}
+    handler={race_handler}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
 {/await}

src/routes/data/season/substitutions/+page.svelte

@@ -69,5 +69,10 @@
   </Button>
 </div>
 {#await data.substitutions then substitutions}
-  <Table data={substitutions} columns={substitutions_columns} handler={substitution_handler} />
+  <Table
+    data={substitutions}
+    columns={substitutions_columns}
+    handler={substitution_handler}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
 {/await}

src/routes/data/season/teams/+page.svelte

@@ -37,7 +37,7 @@
       data_value_name: "color",
       label: "Color",
       valuefun: async (value: string): Promise<string> =>
-        `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
+        `<span class='badge mr-2' style='color: ${value}; background: ${value};'>C</span>`,
     },
   ]);
 </script>
@@ -52,5 +52,10 @@
   </Button>
 </div>
 {#await data.teams then teams}
-  <Table data={teams} columns={teams_columns} handler={team_handler} />
+  <Table
+    data={teams}
+    columns={teams_columns}
+    handler={team_handler}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
 {/await}

src/routes/data/users/+page.svelte

@@ -43,4 +43,9 @@
   <title>Formula 11 - Users</title>
 </svelte:head>
 
-<Table data={data.users} columns={users_columns} handler={users_handler} />
+<Table
+  data={data.users}
+  columns={users_columns}
+  handler={users_handler}
+  height="h-[calc(100vh-160px)] lg:h-[calc(100vh-76px)]"
+/>

src/routes/leaderboard/+page.svelte

@@ -1,3 +1,96 @@
+<script lang="ts">
+  import { make_chart_options } from "$lib/chart";
+  import { Table, type TableColumn } from "$lib/components";
+  import { get_by_value } from "$lib/database";
+  import type { RacePickPoints, RacePickPointsAcc, User } from "$lib/schema";
+  import type { PageData } from "./$types";
+  import {
+    LineChart,
+    ScaleTypes,
+    type ChartTabularData,
+    type LineChartOptions,
+  } from "@carbon/charts-svelte";
+  import "@carbon/charts-svelte/styles.css";
+
+  let { data }: { data: PageData } = $props();
+
+  // Await promises
+  let users: User[] | undefined = $state(undefined);
+  data.users.then((u: User[]) => (users = u));
+
+  let racepickpoints: RacePickPoints[] | undefined = $state(undefined);
+  data.racepickpoints.then((r: RacePickPoints[]) => (racepickpoints = r));
+
+  let racepickpointsacc: RacePickPointsAcc[] | undefined = $state(undefined);
+  data.racepickpointsacc.then((r: RacePickPointsAcc[]) => (racepickpointsacc = r));
+
+  const leaderboard_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "user",
+      label: "User",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${get_by_value(await data.users, "id", value)?.firstname ?? "Invalid"}</span>`,
+    },
+    {
+      data_value_name: "total_points",
+      label: "Total",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "total_pxx_points",
+      label: "PXX",
+    },
+    {
+      data_value_name: "total_dnf_points",
+      label: "DNF",
+    },
+    {
+      data_value_name: "total_points_per_pick",
+      label: "Per Pick",
+      valuefun: async (value: string): Promise<string> => Number.parseFloat(value).toFixed(2),
+    },
+  ]);
+
+  const points_chart_data: ChartTabularData = $derived.by(() => {
+    if (!users || !racepickpointsacc) return [];
+
+    return users
+      .map((user: User) => {
+        return {
+          group: user.firstname,
+          step: "0",
+          points: 0,
+        };
+      })
+      .concat(
+        racepickpointsacc.map((points: RacePickPointsAcc) => {
+          return {
+            group: get_by_value(users ?? [], "id", points.user)?.firstname || "INVALID",
+            step: points.step.toString(),
+            points: points.acc_points,
+          };
+        }),
+      );
+  });
+
+  const points_chart_options: LineChartOptions = make_chart_options(
+    "I ❤️ CumSum",
+    "step",
+    "points",
+  );
+</script>
+
 <svelte:head>
   <title>Formula 11 - Leaderboard</title>
 </svelte:head>
+
+<div class="card w-full bg-surface-100 p-2 shadow">
+  <LineChart data={points_chart_data} options={points_chart_options} />
+</div>
+
+<div class="mt-2">
+  {#await data.racepickpointstotal then racepickpointstotal}
+    <Table data={racepickpointstotal} columns={leaderboard_columns} />
+  {/await}
+</div>

src/routes/leaderboard/+page.ts

@@ -0,0 +1,18 @@
+import {
+  fetch_users,
+  fetch_racepickpoints,
+  fetch_racepickpointsacc,
+  fetch_racepickpointstotal,
+} from "$lib/fetch";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:users", "data:raceresults");
+
+  return {
+    users: fetch_users(fetch),
+    racepickpoints: fetch_racepickpoints(fetch),
+    racepickpointsacc: fetch_racepickpointsacc(fetch),
+    racepickpointstotal: fetch_racepickpointstotal(fetch),
+  };
+};

src/routes/racepicks/+page.svelte

@@ -19,6 +19,7 @@
     RACE_PICTOGRAM_HEIGHT,
     RACE_PICTOGRAM_WIDTH,
   } from "$lib/config";
+  import { runes, substring } from "runes2";
   import { format_date, shortdatetimeformat } from "$lib/date";
   import type { CurrentPickedUser, RacePick } from "$lib/schema";
   import { get_by_value, get_driver_headshot_template } from "$lib/database";
@@ -58,7 +59,7 @@
     return {
       event: "click",
       target: target,
-      placement: "right",
+      placement: "right-start",
     };
   };
 </script>
@@ -67,19 +68,22 @@
   <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">
+    <!-- HACK: relative was required to get the shadow to show up above the upper table occluder? -->
+    <Accordion
+      class="card relative z-20 mx-auto bg-surface-500 shadow"
+      regionPanel="pt-0"
+      width="w-full"
+    >
       <AccordionItem>
         <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
         <svelte:fragment slot="summary">
           <span class="font-bold">Next Race Guess</span>
         </svelte:fragment>
         <svelte:fragment slot="content">
-          <div
+          <div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-6">
-            class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit
-            {pbUser ? 'lg:grid-cols-6' : 'lg:grid-cols-4'}"
-          >
             <!-- 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,45 +127,42 @@
               />
             </div>
 
-            <!-- Only show the userguess if signed in -->
+            <!-- PXX pick -->
-            {#if pbUser}
+            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
-              <!-- PXX pick -->
+              <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
-              <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+              <LazyImage
-                <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
+                src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
-                <LazyImage
+                  get_driver_headshot_template(data.graphics)}
-                  src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
+                imgwidth={DRIVER_HEADSHOT_WIDTH}
-                    get_driver_headshot_template(data.graphics)}
+                imgheight={DRIVER_HEADSHOT_HEIGHT}
-                  imgwidth={DRIVER_HEADSHOT_WIDTH}
+                containerstyle="height: 115px; margin: auto;"
-                  imgheight={DRIVER_HEADSHOT_HEIGHT}
+                imgclass="bg-transparent cursor-pointer"
-                  containerstyle="height: 115px; margin: auto;"
+                hoverzoom
-                  imgclass="bg-transparent cursor-pointer"
+                onclick={racepick_handler}
-                  hoverzoom
+              />
-                  onclick={racepick_handler}
+            </div>
-                />
-              </div>
 
-              <!-- DNF pick -->
+            <!-- DNF pick -->
-              <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <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 DNF Pick:</h1>
+              <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
-                <LazyImage
+              <LazyImage
-                  src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
+                src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
-                    get_driver_headshot_template(data.graphics)}
+                  get_driver_headshot_template(data.graphics)}
-                  imgwidth={DRIVER_HEADSHOT_WIDTH}
+                imgwidth={DRIVER_HEADSHOT_WIDTH}
-                  imgheight={DRIVER_HEADSHOT_HEIGHT}
+                imgheight={DRIVER_HEADSHOT_HEIGHT}
-                  containerstyle="height: 115px; margin: auto;"
+                containerstyle="height: 115px; margin: auto;"
-                  imgclass="bg-transparent cursor-pointer"
+                imgclass="bg-transparent cursor-pointer"
-                  hoverzoom
+                hoverzoom
-                  onclick={racepick_handler}
+                onclick={racepick_handler}
-                />
+              />
-              </div>
+            </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 +170,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
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll 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 +189,7 @@
                     imgheight={AVATAR_HEIGHT}
                     containerstyle="height: 35px; width: 35px;"
                     imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
                   />
                 {/each}
               </div>
@@ -201,14 +202,20 @@
 {/if}
 
 <!-- The fookin table -->
-<div class="flex">
+<div
-  <div>
+  class="{!$pbUser
+    ? 'mt-[-8px]'
+    : ''} relative h-[calc(100vh-200px)] w-[calc(100vw-16px)] scroll-pl-8 scroll-pt-[72px] flex-col overflow-scroll max-lg:hide-scrollbar lg:h-[calc(100vh-116px)] lg:scroll-pl-[152px]"
+>
+  <div class="sticky top-0 z-[15] flex w-full min-w-fit">
     <!-- Points color coding legend -->
     <!-- Use mt-3/mt-4 to account for 2x padding around the avatar. -->
-    <div class="mt-4 h-10 w-7 lg:w-36">
+    <div
+      class="sticky left-0 z-20 h-16 w-7 min-w-7 max-w-7 bg-surface-50 pt-2 lg:w-36 lg:min-w-36 lg:max-w-36 lg:pt-4"
+    >
       <div class="hidden h-5 text-sm font-bold lg:block">Points:</div>
       <div
-        class="flex h-full flex-col overflow-hidden rounded-b-lg rounded-t-lg shadow lg:h-5 lg:flex-row lg:!rounded-l-lg lg:!rounded-r-lg lg:rounded-b-none lg:rounded-t-none"
+        class="flex h-full flex-col overflow-hidden rounded-b-lg rounded-t-lg lg:h-5 lg:flex-row lg:!rounded-l-lg lg:!rounded-r-lg lg:rounded-b-none lg:rounded-t-none"
       >
         <!-- Large Screens: -->
         <span
@@ -244,122 +251,138 @@
       </div>
     </div>
 
-    {#await Promise.all( [data.races, data.raceresults, data.drivers], ) then [races, raceresults, drivers]}
+    <!-- Avatars -->
-      {#each raceresults as result}
+    <div class="flex h-16 w-full bg-surface-50">
-        {@const race = get_by_value(races, "id", result.race)}
+      {#await data.currentpickedusers then currentpicked}
-
+        {#each currentpicked as user}
-        <!-- Race name display -->
+          <div
-        <div
+            class="card ml-1 mt-2 w-full min-w-14 rounded-b-none bg-surface-400 py-2
-          use:popup={race_popupsettings(race?.id ?? "Invalid")}
+            {$pbUser && $pbUser.username === user.username ? '!bg-primary-400' : ''}"
-          class="card mt-2 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
+          >
-        >
+            <!-- Avatar + name display at the top -->
-          <!-- For large screens -->
+            <div class="m-auto flex h-10 w-fit">
-          <span class="hidden text-sm font-bold lg:block">
+              <LazyImage
-            {race?.step}: {race?.name}
+                src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
-          </span>
+                imgwidth={AVATAR_WIDTH}
-          <span class="hidden text-sm lg:block">
+                imgheight={AVATAR_HEIGHT}
-            Date: {format_date(race?.racedate ?? "", shortdatetimeformat)}
+                containerstyle="height: 40px; width: 40px;"
-          </span>
+                imgclass="bg-surface-400 rounded-full"
-          <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
+                tooltip={user.firstname}
-
+              />
-          <!-- For small screens -->
+              <div
-          <span class="block rotate-90 text-xs font-bold lg:hidden">
+                style="height: 40px; line-height: 40px;"
-            {race?.name.slice(0, 9)}{(race?.name.length ?? 9) > 9 ? "." : ""}
+                class="ml-2 hidden text-nowrap text-center align-middle max-2xl:text-sm max-xl:text-xs lg:block"
-          </span>
+              >
-        </div>
+                {user.firstname}
-
-        <!-- The race result popup is triggered on click on the race -->
-        <div data-popup={race?.id ?? "Invalid"} class="card z-50 p-2 shadow">
-          <span class="font-bold">Result:</span>
-          <div class="mt-2 flex flex-col gap-1">
-            {#each result.pxxs as pxx, index}
-              {@const driver = get_by_value(drivers, "id", pxx)}
-              <div class="flex gap-2">
-                <span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
-                <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index]};">
-                  {driver?.code}
-                </span>
               </div>
-            {/each}
+            </div>
-
-            {#if result.dnfs.length > 0}
-              <hr class="border-black" style="border-style: inset;" />
-            {/if}
-
-            {#each result.dnfs as dnf}
-              {@const driver = get_by_value(drivers, "id", dnf)}
-              <div class="flex gap-2">
-                <span class="w-8">DNF:</span>
-                <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[3]};">
-                  {driver?.code}
-                </span>
-              </div>
-            {/each}
           </div>
-        </div>
+        {/each}
-      {/each}
+      {/await}
-    {/await}
+    </div>
   </div>
 
-  <!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
+  <div class="flex w-full min-w-fit">
-  <div class="flex w-full overflow-x-scroll pb-2">
+    <!-- Race name display -->
-    <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
+    <div
-    {#await Promise.all( [data.currentpickedusers, data.racepicks, data.races, data.drivers, data.raceresults], ) then [currentpicked, racepicks, races, drivers, raceresults]}
+      class="sticky left-0 z-10 w-7 min-w-7 max-w-7 bg-surface-50 lg:w-36 lg:min-w-36 lg:max-w-36"
-      {#each currentpicked as user}
+    >
-        {@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
+      {#await Promise.all( [data.races, data.raceresults, data.drivers], ) then [races, raceresults, drivers]}
+        {#each raceresults as result}
+          {@const race = get_by_value(races, "id", result.race)}
 
-        <div
+          <div
-          class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 lg:min-w-40
+            use:popup={race_popupsettings(race?.id ?? "Invalid")}
-          {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
+            class="card mt-1 flex h-16 w-7 cursor-pointer flex-col !rounded-r-none bg-surface-400 lg:h-20 lg:w-36 lg:p-2"
-        >
+          >
-          <!-- Avatar + name display at the top -->
+            <!-- For large screens -->
-          <div class="mx-auto flex h-10 w-fit">
+            <span class="hidden text-sm font-bold lg:block">
-            <LazyImage
+              {race?.step}: {race?.name}
-              src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
+            </span>
-              imgwidth={AVATAR_WIDTH}
+            <span class="hidden text-sm lg:block">
-              imgheight={AVATAR_HEIGHT}
+              Date: {format_date(race?.racedate ?? "", shortdatetimeformat)}
-              containerstyle="height: 40px; width: 40px;"
+            </span>
-              imgclass="bg-surface-400 rounded-full"
+            <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
-            />
+
-            <div
+            <!-- For small screens -->
-              style="height: 40px; line-height: 40px;"
+            <!-- TODO: This requires the race name to end with an emoji, but this is never enforced -->
-              class="ml-2 hidden text-nowrap text-center align-middle lg:block"
+            <div class="mx-[2px] my-[18px] block text-lg font-bold lg:hidden">
-            >
+              {runes(race?.name ?? "Invalid").at(-1)}
-              <!-- TODO: Setting to toggle between username or firstname display -->
-              {user.firstname}
             </div>
           </div>
 
-          {#each raceresults as result}
+          <!-- The race result popup is triggered on click on the race -->
-            {@const race = get_by_value(races, "id", result.race)}
+          <div data-popup={race?.id ?? "Invalid"} class="card z-50 bg-surface-400 p-2 shadow">
-            {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
+            <span class="font-bold">Result:</span>
-            {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
+            <div class="mt-2 flex flex-col gap-1">
-            {@const dnfcolor =
+              {#each result.pxxs as pxx, index}
-              result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
+                {@const driver = get_by_value(drivers, "id", pxx)}
-
+                <div class="flex gap-2">
-            {#if pick}
+                  <span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
-              <div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
+                  <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index]};">
-                <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
+                    {driver?.code}
-                  <span
-                    class="w-10 p-1 text-center text-sm rounded-container-token"
-                    style="background: {pxxcolor};"
-                  >
-                    {get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
-                  </span>
-                  <span
-                    class="w-10 p-1 text-center text-sm rounded-container-token"
-                    style="background: {dnfcolor};"
-                  >
-                    {get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
                   </span>
                 </div>
-              </div>
+              {/each}
-            {:else}
+
-              <div class="mt-2 h-20 w-full"></div>
+              {#if result.dnfs.length > 0}
-            {/if}
+                <hr class="border-black" style="border-style: inset;" />
-          {/each}
+              {/if}
-        </div>
+
-      {/each}
+              {#each result.dnfs as dnf}
-    {/await}
+                {@const driver = get_by_value(drivers, "id", dnf)}
+                <div class="flex gap-2">
+                  <span class="w-8">DNF:</span>
+                  <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[3]};">
+                    {driver?.code}
+                  </span>
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/each}
+      {/await}
+    </div>
+
+    <!-- Picks -->
+    <div class="flex w-full">
+      <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
+      {#await Promise.all( [data.currentpickedusers, data.racepicks, data.races, data.drivers, data.raceresults], ) then [currentpicked, racepicks, races, drivers, raceresults]}
+        {#each currentpicked as user}
+          {@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
+
+          <div class="ml-1 w-full min-w-14">
+            {#each raceresults as result}
+              {@const race = get_by_value(races, "id", result.race)}
+              {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
+              {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
+              {@const dnfcolor =
+                result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
+
+              {#if pick}
+                <div class="mt-1 h-16 w-full border bg-surface-200 px-1 py-2 lg:h-20 lg:px-2">
+                  <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
+                    <span
+                      class="w-10 p-1 text-center text-xs rounded-container-token lg:text-sm"
+                      style="background: {pxxcolor};"
+                    >
+                      {get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
+                    </span>
+                    <span
+                      class="w-10 p-1 text-center text-xs rounded-container-token lg:text-sm"
+                      style="background: {dnfcolor};"
+                    >
+                      {get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
+                    </span>
+                  </div>
+                </div>
+              {:else}
+                <div class="mt-1 h-16 w-full px-1 py-2 lg:h-20 lg:px-2"></div>
+              {/if}
+            {/each}
+          </div>
+        {/each}
+      {/await}
+    </div>
   </div>
 </div>

src/routes/racepicks/+page.ts

@@ -12,12 +12,13 @@ import type { PageLoad } from "../$types";
 
 export const load: PageLoad = async ({ fetch, depends }) => {
   depends(
-    "data:racepicks",
     "data:user",
+    "data:racepicks",
     "data:users",
     "data:raceresults",
     "data:drivers",
     "data:races",
+    "data:substitutions",
   );
 
   return {

src/routes/seasonpicks/+page.svelte

@@ -61,41 +61,42 @@
 </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 -->
-  <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
+{#if $pbUser}
-    <AccordionItem>
+  {#await Promise.all( [data.drivers, data.teams, data.seasonpickedusers, pickedusers, outstandingusers], ) then [drivers, teams, currentpicked, picked, outstanding]}
-      <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
+    {@const teamwinners = data.seasonpick
-      <svelte:fragment slot="summary">
+      ? data.seasonpick.teamwinners
-        <span class="font-bold">Your Season Pick</span>
+          .map((id: string) => get_by_value(drivers, "id", id) as Driver)
-      </svelte:fragment>
+          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
-      <svelte:fragment slot="content">
+      : undefined}
-        <div
+    {@const podiums = data.seasonpick
-          class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit {pbUser
+      ? data.seasonpick.podiums
-            ? 'lg:grid-cols-5 2xl:grid-cols-10'
+          .map((id: string) => get_by_value(drivers, "id", id) as Driver)
-            : 'lg:grid-cols-2 2xl:grid-cols-2'}"
+          .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
-        >
+          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
-          <!-- Only show the stuff if signed in -->
+      : undefined}
-          {#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]}
 
+    <!-- HACK: relative was required to get the shadow to show up above the upper table occluder? -->
+    <Accordion
+      class="card relative z-20 mx-auto bg-surface-500 shadow"
+      regionPanel="pt-2"
+      width="w-full"
+    >
+      <AccordionItem>
+        <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
+        <svelte:fragment slot="summary">
+          <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 lg:grid-cols-5 2xl:grid-cols-10">
             <!-- Hottake -->
-            <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Hottake:</h1>
               <span class="text-sm">{data.seasonpick?.hottake}</span>
             </div>
 
             <!-- Doohanstarts -->
-            <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
               {#if data.seasonpick}
                 <span class="text-sm">
@@ -105,7 +106,7 @@
             </div>
 
             <!-- WDC -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">WDC:</h1>
               <LazyImage
                 src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "")?.headshot_url ??
@@ -120,7 +121,7 @@
             </div>
 
             <!-- WDC -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">WCC:</h1>
               <LazyImage
                 src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ??
@@ -135,7 +136,7 @@
             </div>
 
             <!-- Overtakes -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Most Overtakes:</h1>
               <LazyImage
                 src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "")
@@ -150,7 +151,7 @@
             </div>
 
             <!-- DNFs -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Most DNFs:</h1>
               <LazyImage
                 src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ??
@@ -165,334 +166,353 @@
             </div>
 
             <!-- Teamwinners -->
-            <div
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll 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">
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
-                {#each teamwinners.slice(0, 12) as winner}
+                {#if teamwinners}
-                  <LazyImage
+                  {#each teamwinners as winner}
-                    src={winner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                    <LazyImage
-                    imgwidth={AVATAR_WIDTH}
+                      src={winner.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                    imgheight={AVATAR_HEIGHT}
+                      imgwidth={AVATAR_WIDTH}
-                    containerstyle="height: 35px; width: 35px;"
+                      imgheight={AVATAR_HEIGHT}
-                    imgclass="bg-surface-400 rounded-full"
+                      containerstyle="height: 35px; width: 35px;"
-                  />
+                      imgclass="bg-surface-400 rounded-full"
-                {/each}
+                      tooltip={winner ? `${winner.firstname} ${winner.lastname}` : undefined}
+                    />
+                  {/each}
+                {/if}
               </div>
             </div>
 
             <!-- Podiums -->
-            <div
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll 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">
-                {#each podiums as podium}
+                {#if podiums}
-                  <LazyImage
+                  {#each podiums as podium}
-                    src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                    <LazyImage
-                    imgwidth={AVATAR_WIDTH}
+                      src={podium.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                    imgheight={AVATAR_HEIGHT}
+                      imgwidth={AVATAR_WIDTH}
-                    containerstyle="height: 35px; width: 35px;"
+                      imgheight={AVATAR_HEIGHT}
-                    imgclass="bg-surface-400 rounded-full"
+                      containerstyle="height: 35px; width: 35px;"
-                  />
+                      imgclass="bg-surface-400 rounded-full"
-                {/each}
+                      tooltip={podium ? `${podium.firstname} ${podium.lastname}` : undefined}
+                    />
+                  {/each}
+                {/if}
               </div>
             </div>
-          {/if}
 
-          <!-- Show users that have picked -->
+            <!-- Show users that have picked -->
-          {#if seasonpicks.length === 0}
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
-            <div
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll 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.slice(0, 16) as user}
+                {#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
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
-              class="card max-h-[155px] w-full min-w-40 overflow-y-scroll 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.slice(0, 16) as user}
+                {#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>
-        </div>
+        </svelte:fragment>
-      </svelte:fragment>
+      </AccordionItem>
-    </AccordionItem>
+    </Accordion>
-  </Accordion>
+  {/await}
-{/await}
+{/if}
 
-<!-- The fookin table -->
+<!-- HACK: Subtract additional ~100px from height because fucking Safari reports the viewport height as if the urlbar was hidden. Original size should be calc(100vh-116px). -->
-<div class="flex">
+<div
-  <div>
+  class="{!$pbUser
+    ? 'mt-[-8px]'
+    : ''} relative h-[calc(100vh-200px)] w-[calc(100vw-16px)] scroll-pl-8 scroll-pt-[72px] flex-col overflow-scroll max-lg:hide-scrollbar lg:h-[calc(100vh-116px)] lg:scroll-pl-[152px]"
+>
+  <div class="sticky top-0 z-[15] flex w-full min-w-fit">
     <!-- TODO: Points popup? -->
-    <div class="mt-4 h-10 w-7 lg:w-36"></div>
+    <div
+      class="sticky left-0 z-20 h-16 w-7 min-w-7 max-w-7 bg-surface-50 lg:w-36 lg:min-w-36 lg:max-w-36"
+    ></div>
 
-    <!-- Hottake -->
+    <!-- Avatars -->
-    <div class="card mt-2 flex h-32 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36">
+    <div class="flex h-16 w-full bg-surface-50">
-      <span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
+      {#await data.seasonpickedusers then seasonpicked}
-      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
+        {#each seasonpicked as user}
+          <div
+            class="card ml-1 mt-2 w-full min-w-36 rounded-b-none bg-surface-400 py-2
+            {$pbUser && $pbUser.username === user.username ? '!bg-primary-400' : ''}"
+          >
+            <!-- Avatar + name display at the top -->
+            <div class="m-auto flex h-10 w-fit">
+              <LazyImage
+                src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
+                imgwidth={AVATAR_WIDTH}
+                imgheight={AVATAR_HEIGHT}
+                containerstyle="height: 40px; width: 40px;"
+                imgclass="bg-surface-400 rounded-full"
+                tooltip={user.firstname}
+              />
+              <div
+                style="height: 40px; line-height: 40px;"
+                class="ml-2 text-nowrap text-center align-middle"
+              >
+                {user.firstname}
+              </div>
+            </div>
+          </div>
+        {/each}
+      {/await}
     </div>
-
-    {#await data.seasonpicks then seasonpicks}
-      {#if seasonpicks.length > 0}
-        <!-- Drivers Champion -->
-        <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">Drivers<br />Champion</span>
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span>
-        </div>
-
-        <!-- Constructors Champion -->
-        <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="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
-        </div>
-
-        <!-- Overtakes -->
-        <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">Most Overtakes</span>
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span>
-        </div>
-
-        <!-- DNFs -->
-        <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">Most DNFs</span>
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span>
-        </div>
-
-        <!-- Doohan Starts -->
-        <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">Doohan Starts</span>
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span>
-        </div>
-
-        <!-- Teamwinners -->
-        <div
-          class="card mt-2 flex h-64 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">Team-Battle<br />Winners</span
-          >
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Teamwinners</span>
-        </div>
-
-        <!-- Podiums -->
-        <div
-          class="card mt-2 flex h-64 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">Podiums</span>
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
-        </div>
-      {/if}
-    {/await}
   </div>
 
-  <!-- TODO: Add user option to display driver codes instead of headshots (or both) -->
+  <div class="flex w-full min-w-fit">
-  <div class="flex w-full overflow-x-scroll pb-2">
+    <!-- Categories -->
-    {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.hottakes, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, hottakes, drivers, teams]}
+    <div
-      {#each seasonpicked as user}
+      class="sticky left-0 z-10 w-7 min-w-7 max-w-7 bg-surface-50 lg:w-36 lg:min-w-36 lg:max-w-36"
-        {@const hottake = hottakes.filter((take: Hottake) => take.user === user.id)[0] ?? undefined}
+    >
-        {@const pick =
+      <!-- Hottake -->
-          seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0] ?? undefined}
+      <div class="card mt-1 flex h-32 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-        {@const wdcwinner = pick ? get_by_value(drivers, "id", pick.wdcwinner) : undefined}
+        <span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
-        {@const wccwinner = pick ? get_by_value(teams, "id", pick.wccwinner) : undefined}
+        <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
-        {@const mostovertakes = pick ? get_by_value(drivers, "id", pick.mostovertakes) : undefined}
+      </div>
-        {@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined}
-        {@const drivers_sorted = drivers
-          .filter((driver: Driver) => driver.active)
-          .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
-          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))}
 
-        <div
+      {#await data.seasonpicks then seasonpicks}
-          class="card ml-1 mt-2 w-full min-w-36 overflow-hidden py-2 shadow lg:ml-2
+        {#if seasonpicks.length > 0}
-          {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
+          <!-- Drivers Champion -->
-        >
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-          <!-- Avatar + name display at the top -->
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Drivers<br />Champion</span>
-          <div class="mx-auto flex h-10 w-fit">
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span>
-            <LazyImage
-              src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
-              imgwidth={AVATAR_WIDTH}
-              imgheight={AVATAR_HEIGHT}
-              containerstyle="height: 40px; width: 40px;"
-              imgclass="bg-surface-400 rounded-full"
-            />
-            <div
-              style="height: 40px; line-height: 40px;"
-              class="ml-2 hidden text-nowrap text-center align-middle lg:block"
-            >
-              <!-- TODO: Setting to toggle between username or firstname display -->
-              {user.firstname}
-            </div>
           </div>
 
-          <!-- Hottake -->
+          <!-- Constructors Champion -->
-          <div
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-            class="mt-2 h-32 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
+            <span class="hidden text-nowrap text-sm font-bold lg:block">
-          >
+              Constructors<br />Champion
-            <div class="mx-auto w-fit text-xs font-bold lg:text-sm">{hottake?.hottake ?? "?"}</div>
+            </span>
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
           </div>
 
-          {#if seasonpicks.length > 0}
+          <!-- Overtakes -->
-            <!-- Drivers Champion -->
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-            <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Most Overtakes</span>
-              <div class="mx-auto w-fit">
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span>
-                <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
+          </div>
-                <LazyImage
-                  src={wdcwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                  imgheight={DRIVER_HEADSHOT_WIDTH}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                />
-              </div>
-            </div>
 
-            <!-- Constructors Champion -->
+          <!-- DNFs -->
-            <div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-              <div class="mx-auto w-fit">
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Most DNFs</span>
-                <LazyImage
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span>
-                  src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
+          </div>
-                  imgwidth={TEAM_BANNER_WIDTH}
-                  imgheight={TEAM_BANNER_HEIGHT}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                />
-              </div>
-            </div>
 
-            <!-- Most Overtakes -->
+          <!-- Doohan Starts -->
-            <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-              <div class="mx-auto w-fit">
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Doohan Starts</span>
-                <LazyImage
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span>
-                  src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+          </div>
-                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                  imgheight={DRIVER_HEADSHOT_WIDTH}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                />
-              </div>
-            </div>
 
-            <!-- Most DNFs -->
+          <!-- Teamwinners -->
-            <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+          <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-              <div class="mx-auto w-fit">
+            <span class="hidden text-nowrap text-sm font-bold lg:block"
-                <LazyImage
+              >Team-Battle<br />Winners</span
-                  src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                  imgheight={DRIVER_HEADSHOT_WIDTH}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                />
-              </div>
-            </div>
-
-            <!-- Doohan Starts -->
-            <div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
-              <div class="mx-auto w-fit text-xs lg:text-sm">
-                Jack Doohan startet <span class="font-bold">{pick?.doohanstarts ?? "?"}</span> mal.
-              </div>
-            </div>
-
-            <!-- Teamwinners -->
-            <div
-              class="mt-2 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2"
             >
-              {#if pick && pick.teamwinners}
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Teamwinners</span>
-                <div class="grid grid-cols-2 gap-1">
+          </div>
-                  {#each drivers_sorted as driver}
+
-                    {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+          <!-- Podiums -->
-                    <div class="mx-auto w-fit text-xs lg:text-sm">
+          <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
-                      <div
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span>
-                        class="flex gap-1"
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
-                        style="opacity: {pick.teamwinners.includes(driver.id) ? 1.0 : 0.1};"
+          </div>
-                      >
+        {/if}
-                        <span
+      {/await}
-                          class="badge h-5 w-5"
+    </div>
-                          style="color: {color}; background-color: {color};"
+
-                        >
+    <!-- Picks -->
-                        </span>
+    <div class="flex w-full">
-                        <span class="w-7 align-middle" style="line-height: 20px;">
+      {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.hottakes, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, hottakes, drivers, teams]}
-                          {driver?.code}
+        {#each seasonpicked as user}
-                        </span>
+          {@const hottake =
-                      </div>
+            hottakes.filter((take: Hottake) => take.user === user.id)[0] ?? undefined}
-                    </div>
+          {@const pick =
-                  {/each}
+            seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0] ?? undefined}
-                </div>
+          {@const wdcwinner = pick ? get_by_value(drivers, "id", pick.wdcwinner) : undefined}
-              {/if}
+          {@const wccwinner = pick ? get_by_value(teams, "id", pick.wccwinner) : undefined}
+          {@const mostovertakes = pick
+            ? get_by_value(drivers, "id", pick.mostovertakes)
+            : undefined}
+          {@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined}
+          {@const drivers_startedactive = drivers
+            .filter((driver: Driver) => driver.started_active)
+            .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
+            .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))}
+
+          <div class="ml-1 w-full min-w-36">
+            <!-- Hottake -->
+            <div
+              class="mt-1 h-32 w-full overflow-y-scroll border bg-surface-200 px-1 py-2 leading-3 lg:px-2"
+            >
+              <div class="mx-auto w-fit text-xs font-bold lg:text-sm">
+                {hottake?.hottake ?? "?"}
+              </div>
             </div>
 
-            <!-- Podiums -->
+            {#if seasonpicks.length > 0}
-            <!-- TODO: Replace all style tags throughout the page with custom classes like height here -->
+              <!-- Drivers Champion -->
-            <div
+              <div class="mt-1 h-20 w-full border bg-surface-200 px-1 py-2 leading-3 lg:px-2">
-              class="mt-2 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2"
+                <div class="mx-auto w-fit">
-            >
+                  <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
-              {#if pick && pick.podiums}
+                  <LazyImage
-                <div class="grid grid-cols-2 gap-1">
+                    src={wdcwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                  {#each drivers_sorted as driver}
+                    imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                    {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+                    imgheight={DRIVER_HEADSHOT_WIDTH}
-                    <div class="mx-auto w-fit text-xs lg:text-sm">
+                    containerstyle="height: 62px;"
-                      <div
+                    imgclass="bg-surface-400 rounded-md"
-                        class="flex gap-1"
+                    tooltip={wdcwinner ? `${wdcwinner.firstname} ${wdcwinner.lastname}` : undefined}
-                        style="opacity: {pick.podiums.includes(driver.id) ? 1.0 : 0.1};"
+                  />
-                      >
-                        <span
-                          class="badge h-5 w-5"
-                          style="color: {color}; background-color: {color};"
-                        >
-                        </span>
-                        <span class="w-7 align-middle" style="line-height: 20px;">
-                          {driver?.code}
-                        </span>
-                      </div>
-                    </div>
-                  {/each}
                 </div>
-              {/if}
+              </div>
-            </div>
+
-          {/if}
+              <!-- Constructors Champion -->
-        </div>
+              <div class="mt-1 h-20 w-full border bg-surface-200 p-1 px-1 py-2 leading-3 lg:px-2">
-      {/each}
+                <div class="mx-auto w-fit">
-    {/await}
+                  <LazyImage
+                    src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
+                    imgwidth={TEAM_BANNER_WIDTH}
+                    imgheight={TEAM_BANNER_HEIGHT}
+                    containerstyle="height: 62px;"
+                    imgclass="bg-surface-400 rounded-md"
+                    tooltip={wccwinner?.name}
+                  />
+                </div>
+              </div>
+
+              <!-- Most Overtakes -->
+              <div class="mt-1 h-20 w-full border bg-surface-200 px-1 py-2 leading-3 lg:px-2">
+                <div class="mx-auto w-fit">
+                  <LazyImage
+                    src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                    imgheight={DRIVER_HEADSHOT_WIDTH}
+                    containerstyle="height: 62px;"
+                    imgclass="bg-surface-400 rounded-md"
+                    tooltip={mostovertakes
+                      ? `${mostovertakes.firstname} ${mostovertakes.lastname}`
+                      : undefined}
+                  />
+                </div>
+              </div>
+
+              <!-- Most DNFs -->
+              <div class="mt-1 h-20 w-full border bg-surface-200 px-1 py-2 leading-3 lg:px-2">
+                <div class="mx-auto w-fit">
+                  <LazyImage
+                    src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                    imgheight={DRIVER_HEADSHOT_WIDTH}
+                    containerstyle="height: 62px;"
+                    imgclass="bg-surface-400 rounded-md"
+                    tooltip={mostdnfs ? `${mostdnfs.firstname} ${mostdnfs.lastname}` : undefined}
+                  />
+                </div>
+              </div>
+
+              <!-- Doohan Starts -->
+              <div class="mt-1 h-20 w-full border bg-surface-200 p-1 px-1 py-2 leading-3 lg:px-2">
+                <div class="mx-auto w-fit text-xs lg:text-sm">
+                  Jack Doohan startet <span class="font-bold">{pick?.doohanstarts ?? "?"}</span> mal.
+                </div>
+              </div>
+
+              <!-- Teamwinners -->
+              <div
+                class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-200 p-1 px-1 py-2 leading-3 lg:px-2"
+              >
+                {#if pick && pick.teamwinners}
+                  <div class="grid grid-cols-2 gap-1">
+                    {#each drivers_startedactive as driver}
+                      {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+                      <div class="mx-auto w-fit text-xs lg:text-sm">
+                        <div
+                          class="flex gap-1"
+                          style="opacity: {pick.teamwinners.includes(driver.id) ? 1.0 : 0.1};"
+                        >
+                          <span
+                            class="badge h-5 w-5"
+                            style="color: {color}; background-color: {color};"
+                          >
+                          </span>
+                          <span class="w-7 align-middle" style="line-height: 20px;">
+                            {driver?.code}
+                          </span>
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+
+              <!-- Podiums -->
+              <!-- TODO: Replace all style tags throughout the page with custom classes like height here -->
+              <div
+                class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-200 p-1 px-1 py-2 leading-3 shadow lg:px-2"
+              >
+                {#if pick && pick.podiums}
+                  <div class="grid grid-cols-2 gap-1">
+                    {#each drivers_startedactive as driver}
+                      {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+                      <div class="mx-auto w-fit text-xs lg:text-sm">
+                        <div
+                          class="flex gap-1"
+                          style="opacity: {pick.podiums.includes(driver.id) ? 1.0 : 0.1};"
+                        >
+                          <span
+                            class="badge h-5 w-5"
+                            style="color: {color}; background-color: {color};"
+                          >
+                          </span>
+                          <span class="w-7 align-middle" style="line-height: 20px;">
+                            {driver?.code}
+                          </span>
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/each}
+      {/await}
+    </div>
   </div>
 </div>
 
+<!-- Season pick lock countdown -->
 {#await Promise.all([data.seasonpicks, data.currentrace]) then [seasonpicks, currentrace]}
   {#if seasonpicks.length <= 0 && currentrace}
     <div class="card mx-auto w-fit p-2 shadow">

src/routes/seasonpicks/+page.ts

@@ -10,7 +10,7 @@ import {
 import type { PageLoad } from "../$types";
 
 export const load: PageLoad = async ({ fetch, depends }) => {
-  depends("data:teams", "data:drivers", "data:seasonpicks", "data:user");
+  depends("data:teams", "data:drivers", "data:seasonpicks", "data:user", "data:users");
 
   return {
     teams: fetch_teams(fetch),

src/routes/statistics/+page.svelte

@@ -1,3 +1,113 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import type { Driver, ScrapedRaceResultAcc } from "$lib/schema";
+  import {
+    LineChart,
+    ScaleTypes,
+    type ChartTabularData,
+    type LineChartOptions,
+  } from "@carbon/charts-svelte";
+  import "@carbon/charts-svelte/styles.css";
+  import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
+  import { make_chart_options } from "$lib/chart";
+
+  let { data }: { data: PageData } = $props();
+
+  // Await promises
+  let drivers: Driver[] | undefined = $state(undefined);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  let scraped_raceresultsacc: ScrapedRaceResultAcc[] | undefined = $state(undefined);
+  data.scraped_raceresultsacc.then((s: ScrapedRaceResultAcc[]) => (scraped_raceresultsacc = s));
+
+  const drivers_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "position",
+      label: "Position",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "driver_code",
+      label: "Driver",
+    },
+    {
+      data_value_name: "points",
+      label: "Points",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+  ]);
+
+  const teams_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "position",
+      label: "Position",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "team_fullname",
+      label: "team",
+    },
+    {
+      data_value_name: "points",
+      label: "Points",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+  ]);
+
+  const drivers_chart_data: ChartTabularData = $derived.by(() => {
+    if (!drivers || !scraped_raceresultsacc) return [];
+
+    const active_drivers: Driver[] = drivers.filter((driver: Driver) => driver.active);
+    const active_results: ScrapedRaceResultAcc[] = scraped_raceresultsacc.filter(
+      (result: ScrapedRaceResultAcc) =>
+        get_by_value(drivers ?? [], "code", result.driver_code)?.active,
+    );
+
+    return active_drivers
+      .map((driver: Driver) => {
+        return {
+          group: driver.code,
+          step: "0",
+          points: 0,
+        };
+      })
+      .concat(
+        active_results.map((result: ScrapedRaceResultAcc) => {
+          return {
+            group: result.driver_code,
+            step: result.race_step.toString(),
+            points: result.acc_points,
+          };
+        }),
+      );
+  });
+
+  const drivers_chart_options: LineChartOptions = make_chart_options("Drivers", "step", "points");
+</script>
+
 <svelte:head>
   <title>Formula 11 - Statistics</title>
 </svelte:head>
+
+<div class="card w-full bg-surface-100 p-2 shadow">
+  <LineChart data={drivers_chart_data} options={drivers_chart_options} />
+</div>
+
+<div class="mt-2 grid w-full grid-cols-1 gap-2 lg:grid-cols-2">
+  <div class="w-full">
+    {#await data.scraped_driverstandings then driverstandings}
+      <Table data={driverstandings} columns={drivers_columns} />
+    {/await}
+  </div>
+
+  <div class="w-full">
+    {#await data.scraped_teamstandings then teamstandings}
+      <Table data={teamstandings} columns={teams_columns} />
+    {/await}
+  </div>
+</div>

src/routes/statistics/+page.ts

@@ -0,0 +1,23 @@
+import {
+  fetch_drivers,
+  fetch_scraped_driverstandings,
+  fetch_scraped_raceresults,
+  fetch_scraped_raceresultsacc,
+  fetch_scraped_startinggrids,
+  fetch_scraped_teamstandings,
+} from "$lib/fetch";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:drivers", "data:official");
+
+  return {
+    drivers: fetch_drivers(fetch),
+
+    scraped_driverstandings: fetch_scraped_driverstandings(fetch),
+    scraped_teamstandings: fetch_scraped_teamstandings(fetch),
+    scraped_startinggrids: fetch_scraped_startinggrids(fetch),
+    scraped_raceresults: fetch_scraped_raceresults(fetch),
+    scraped_raceresultsacc: fetch_scraped_raceresultsacc(fetch),
+  };
+};

vite.config.ts

@@ -3,6 +3,9 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [sveltekit()],
+  ssr: {
+    noExternal: process.env.NODE_ENV === "production" ? ["@carbon/charts"] : [],
+  },
   build: {
     rollupOptions: {
       external: ["sharp"],