Pocketbase: Update workflow to v0.33.0

This data was fetched before it was available, so the user object was
undefined

.dockerignore

@@ -0,0 +1,20 @@
+.direnv
+.git
+.gitea
+.idea
+.svelte-kit
+build
+node_modules
+pb_data
+pb_migrations
+
+.dockerignore
+.envrc
+.gitignore
+
+README.md
+flake.lock
+flake.nix
+formula11.dockerfile
+pocketbase.dockerfile
+prettier.config.js

.envrc

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

.gitea/workflows/formula11-docker.yaml

@@ -0,0 +1,25 @@
+name: Build Formula11 Docker Image
+
+on:
+  push:
+    branches: [master]
+    # paths:
+    #   - ".gitea/workflows/pocketbase-docker.yaml"
+    #   - "pocketbase.dockerfile"
+
+jobs:
+  pocketbase-docker:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Login to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.vps.chriphost.de
+          username: ${{ secrets.CONTAINER_REGISTRY_USER }}
+          password: ${{ secrets.CONTAINER_REGISTRY_TOKEN }}
+      - name: Build Formula11 Docker Image
+        run: docker build --file formula11.dockerfile --tag gitea.vps.chriphost.de/christoph/formula11:latest .
+      - name: Push Formula11 Docker Image
+        run: docker push gitea.vps.chriphost.de/christoph/formula11:latest

.gitea/workflows/pocketbase-docker.yaml

@@ -0,0 +1,25 @@
+name: Build Pocketbase Docker Image
+
+on:
+  push:
+    branches: [master]
+    paths:
+      - ".gitea/workflows/pocketbase-docker.yaml"
+      - "pocketbase.dockerfile"
+
+jobs:
+  pocketbase-docker:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Login to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.vps.chriphost.de
+          username: ${{ secrets.CONTAINER_REGISTRY_USER }}
+          password: ${{ secrets.CONTAINER_REGISTRY_TOKEN }}
+      - name: Build Pocketbase Docker Image
+        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.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,149 +1,328 @@
-{
+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;
+      # };
 
-      f1python = pkgs.python312.withPackages (p:
+      # Multilib C/C++ compilers that don't collide (use the same libc)
-        with p; [
+      # bintools_multilib = pkgs.wrapBintoolsWith {
-          # Basic
+      #   bintools = pkgs.bintools.bintools; # Unwrapped bintools
-          rich
+      #   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;
+      # };
 
-          # Web
+      # ===========================================================================================
-          flask
+      # Specify dependencies
-          flask-sqlalchemy
+      # https://nixos.org/manual/nixpkgs/stable/#ssec-stdenv-dependencies-overview
-          flask-caching
+      # Just for a "nix develop" shell, buildInputs can be used for everything.
-          sqlalchemy
+      # ===========================================================================================
 
-          # Test
+      # Add dependencies to nativeBuildInputs if they are executed during the build:
-          pytest
+      # - Those which are needed on $PATH during the build, for example cmake and pkg-config
-
+      # - Setup hooks, for example makeWrapper
-          # TODO: For some reason, listing those under fastf1.dependencies doesn't work???
+      # - Interpreters needed by patchShebangs for build scripts (with the --build flag), which can be the case for e.g. perl
-          matplotlib
+      nativeBuildInputs = with pkgs; [
-          numpy
+        nodejs_24
-          pandas
-          python-dateutil
-          requests
-          requests-cache
-          scipy
-          rapidfuzz
-          websockets
-          timple
-
-          fastf1
-        ]);
-    in {
-      devShell = pkgs.devshell.mkShell {
-        name = "Formula11";
-
-        packages = with pkgs; [
-          nodejs_23
         pocketbase
 
-          # nodePackages.autoprefixer
+        sqlite # For sqlite console
-          # nodePackages.postcss
+        sqlitebrowser # To check low-level pocketbase data
-          # nodePackages.postcss-cli
-          # nodePackages.sass
-          # nodePackages.svelte-check
-          # nodePackages.tailwindcss
 
-          # f1python
+        # Languages:
-          # sqlitebrowser
+        # python
+        # rust
+        # 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
       ];
 
-        # Use $1 for positional args
+      # Add dependencies to buildInputs if they will end up copied or linked into the final output or otherwise used at runtime:
-        commands = [
+      # - 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
-            name = "pb";
+      buildInputs = with pkgs; [
-            help = "Serve PocketBase";
+        # C/C++:
-            command = "pocketbase serve --http 192.168.86.50:8090";
+        # boost
-          }
+        # sfml
-          {
+
-            name = "dev";
+        # Qt:
-            help = "Serve Formula 11 (Dev)";
+        # qt6.qtbase
-            command = "npm run dev -- --host --port 5173";
+        # qt6.full
-          }
+      ];
-          {
+      # ===========================================================================================
-            name = "prod";
+      # Define buildable + installable packages
-            help = "Serve Formula 11 (Prod)";
+      # ===========================================================================================
-            command = "npm run build && npm run preview -- --host --port 5173";
+      # package = stdenv.mkDerivation {
-          }
+      #   inherit nativeBuildInputs buildInputs;
-          {
+      #   pname = "";
-            name = "check";
+      #   version = "1.0.0";
-            help = "Continuously monitor for SvelteKit issues";
+      #   src = ./.;
-            command = "svelte-check --watch";
+      #
-          }
+      #   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}"'"
+            # ''
           ];
       };
     });

formula11.dockerfile

@@ -0,0 +1,26 @@
+# Build the node application
+FROM node:23-alpine AS builder
+
+WORKDIR /app
+COPY package*.json ./
+
+RUN npm ci
+
+COPY . .
+
+RUN npm run build
+RUN npm prune --production
+
+# Copy the built application to a minimal image
+FROM node:23-alpine
+
+WORKDIR /app
+COPY --from=builder /app/build build/
+COPY --from=builder /app/node_modules node_modules/
+COPY package.json .
+
+EXPOSE 5173
+
+ENV NODE_ENV=production
+
+CMD [ "node", "build" ]

package.json

@@ -10,32 +10,33 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@fsouza/prettierd": "^0.25.4",
+		"@carbon/charts-svelte": "^1.22.18",
+		"@floating-ui/dom": "^1.6.13",
+		"@fsouza/prettierd": "^0.26.1",
 		"@skeletonlabs/skeleton": "^2.10.4",
 		"@skeletonlabs/tw-plugin": "^0.4.0",
-		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.16.1",
+		"@sveltejs/kit": "^2.19.1",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/forms": "^0.5.10",
-		"@types/node": "^22.10.10",
+		"@types/node": "^22.13.10",
-		"@types/uuid": "^10.0.0",
+		"autoprefixer": "^10.4.21",
-		"autoprefixer": "^10.4.20",
+		"cheerio": "^1.0.0",
-		"postcss": "^8.5.1",
+		"date-fns": "^4.1.0",
-		"prettier": "^3.4.2",
+		"pocketbase": "^0.25.2",
+		"postcss": "^8.5.3",
+		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.19.3",
+		"runes2": "^1.1.4",
-		"svelte-check": "^4.1.4",
+		"svelte": "^5.23.0",
+		"svelte-check": "^4.1.5",
 		"tailwindcss": "^3.4.17",
-		"typescript": "^5.7.3",
+		"typescript": "^5.8.2",
-		"vite": "^6.0.11"
+		"uuid": "^11.1.0",
+		"vite": "^6.2.2"
 	},
 	"dependencies": {
-		"@floating-ui/dom": "^1.6.13",
+		"sharp": "^0.33.5"
-		"date-fns": "^4.1.0",
-		"pocketbase": "^0.25.1",
-		"sharp": "^0.33.5",
-		"uuid": "^11.0.5"
 	}
 }

pocketbase.dockerfile

@@ -0,0 +1,24 @@
+# Lock the version because I had to pull the image manually,
+# because fucking Docker thinks "toomanyrequests". Fuckers
+FROM docker.io/library/alpine:3.21.2
+
+ARG PB_VERSION=0.33.0
+
+RUN apk add --no-cache \
+    unzip \
+    ca-certificates
+
+# Download and unzip PocketBase
+ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
+RUN unzip /tmp/pb.zip -d /pb/
+
+# uncomment to copy the local pb_migrations dir into the image
+# COPY ./pb_migrations /pb/pb_migrations
+
+# uncomment to copy the local pb_hooks dir into the image
+# COPY ./pb_hooks /pb/pb_hooks
+
+EXPOSE 8080
+
+# start PocketBase
+CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8080"]

src/app.d.ts

@@ -5,12 +5,7 @@ import type { PocketBase, RecordModel } from "pocketbase";
 // for information about these interfaces
 declare global {
   namespace App {
-    interface Locals {
+    // interface Locals {}
-      pb: PocketBase;
-      user: User | undefined;
-      admin: boolean;
-    }
-
     // interface Error {}
     // interface PageData {}
     // interface PageState {}

src/app.html

@@ -18,6 +18,9 @@
   <!-- Prefetch data specified in "load" functions on link hover -->
   <body data-theme="formula11Theme" data-sveltekit-preload-data="hover">
     <!-- SvelteKit inserts the body contents here -->
-    <div style="display: contents">%sveltekit.body%</div>
+    <!-- TODO: The fucking user-select: none doesn't work in firefox -->
+    <div style="display: contents; user-select: none; -moz-user-select: -moz-none">
+      %sveltekit.body%
+    </div>
   </body>
 </html>

src/hooks.client.ts

@@ -0,0 +1,13 @@
+import { refresh_auth } from "$lib/pocketbase";
+import type { ClientInit } from "@sveltejs/kit";
+
+export const init: ClientInit = async () => {
+  // Try to refresh the authStore. This is required when e.g.
+  // changing e-mail address. The new e-mail will show up after
+  // being verified, so the authStore has to be reloaded.
+  try {
+    await refresh_auth();
+  } catch (error) {
+    console.log("hooks.client.ts:", error);
+  }
+};

src/hooks.server.ts

@@ -1,63 +0,0 @@
-import type { Graphic, User } from "$lib/schema";
-import type { Handle } from "@sveltejs/kit";
-import PocketBase from "pocketbase";
-
-// This function will run serverside on each request.
-// The event.locals will be passed onto serverside load functions and handlers.
-// We create a new PocketBase client for each request, so it always carries the
-// most recent authentication data.
-// The authenticated PocketBase client will be available in all *.server.ts files.
-export const handle: Handle = async ({ event, resolve }) => {
-  const requestStartTime: number = Date.now();
-
-  event.locals.pb = new PocketBase("http://192.168.86.50:8090");
-
-  // Load the most recent authentication data from a cookie (is updated below)
-  event.locals.pb.authStore.loadFromCookie(event.request.headers.get("cookie") || "");
-
-  if (event.locals.pb.authStore.isValid) {
-    // If the authentication data is valid, we make a "user" object easily available.
-    event.locals.user = structuredClone(event.locals.pb.authStore.model) as User;
-
-    if (event.locals.user) {
-      if (event.locals.pb.authStore.model.avatar) {
-        // Fill in the avatar URL
-        event.locals.user.avatar_url = event.locals.pb.files.getURL(
-          event.locals.pb.authStore.model,
-          event.locals.pb.authStore.model.avatar,
-        );
-      } else {
-        // Fill in the driver_headshot_template URL if no avatar chosen
-        const driver_headshot_template: Graphic = await event.locals.pb
-          .collection("graphics")
-          .getFirstListItem('name="driver_headshot_template"');
-        event.locals.user.avatar_url = event.locals.pb.files.getURL(
-          driver_headshot_template,
-          driver_headshot_template.file,
-        );
-      }
-
-      // Set admin status for easier access
-      event.locals.admin = event.locals.user.admin;
-    }
-  } else {
-    event.locals.user = undefined;
-  }
-
-  // Resolve the request. This is what happens by default.
-  const response = await resolve(event);
-
-  console.log(
-    "=====\n",
-    `Request Date: ${new Date(requestStartTime).toISOString()}\n`,
-    `Method: ${event.request.method}\n`,
-    `Path: ${event.url.pathname}\n`,
-    `Duration: ${Date.now() - requestStartTime}ms\n`,
-    `Status: ${response.status}`,
-  );
-
-  // Store the current authentication data to a cookie, so it can be loaded above.
-  response.headers.set("set-cookie", event.locals.pb.authStore.exportToCookie({ secure: false }));
-
-  return response;
-};

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/Countdown.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  interface CountdownProps {
+    date: string;
+    gotext?: string;
+    extraclass?: string;
+  }
+
+  let { date, gotext = "Go Go Go", extraclass = "" }: CountdownProps = $props();
+
+  // Set the date we're counting down to
+  const countDownDate = new Date(date).getTime();
+
+  let distance: number = $state(0);
+  let days: number = $state(0);
+  let hours: number = $state(0);
+  let minutes: number = $state(0);
+  let seconds: number = $state(0);
+
+  // Update the countdown every 1 second
+  setInterval(function () {
+    // Get today's date and time
+    const now = new Date().getTime();
+
+    // Find the distance between now and the countdown date
+    distance = countDownDate - now;
+
+    // Time calculations for days, hours, minutes and seconds
+    days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    seconds = Math.floor((distance % (1000 * 60)) / 1000);
+  }, 1000);
+</script>
+
+<span class={extraclass}>
+  {#if distance > 0}
+    {days + "d " + hours + "h " + minutes + "m "}
+  {:else}
+    {gotext}
+  {/if}
+</span>

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 */
@@ -18,6 +20,15 @@
 
     /** Optional extra style for the lazy <div> container */
     containerstyle?: string;
+
+    /** Additional classes to insert for container + image */
+    imgclass?: string;
+
+    /** Slightly zoom the image on mouse-hover */
+    hoverzoom?: boolean;
+
+    /** Optional tooltip text */
+    tooltip?: string;
   }
 
   let {
@@ -26,6 +37,9 @@
     imgheight,
     imgstyle = undefined,
     containerstyle = undefined,
+    imgclass = "",
+    hoverzoom = false,
+    tooltip = undefined,
     ...restProps
   }: LazyImageProps = $props();
 
@@ -41,24 +55,42 @@
   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. -->
 <div
   use:lazyload
   onLazyVisible={lazy_visible_handler}
-  style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ??
+  class="overflow-hidden {imgclass}"
-    ''}; max-width: {imgwidth}px; max-height: {imgheight}px"
+  style="aspect-ratio: {imgwidth} / {imgheight}; max-width: {imgwidth}px; max-height: {imgheight}px; {containerstyle ??
+    ''}"
 >
   {#if load}
     {#await fetch_image_base64(src) then data}
       <img
         src={data}
         use:img_opacity_handler
-        class="bg-surface-100 transition-opacity"
+        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,16 +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>
 
-<div class="table-container bg-white shadow">
+{#if data.length > 0}
-  <table class="table table-compact bg-white">
+  <div class="table-container bg-white shadow {height}">
-    <thead>
+    <table class="table table-compact !overflow-scroll bg-white">
+      <thead class="sticky top-0">
         <tr class="bg-surface-500">
           {#each columns as col}
             <th class="!px-3">{col.label}</th>
@@ -47,3 +51,4 @@
       </tbody>
     </table>
   </div>
+{/if}

src/lib/components/cards/DriverCard.svelte

@@ -3,136 +3,210 @@
   import {
     FileDropzone,
     getModalStore,
+    getToastStore,
     SlideToggle,
     type ModalStore,
+    type ToastStore,
   } from "@skeletonlabs/skeleton";
-  import { Button, Input, Card, Dropdown, type DropdownOption } from "$lib/components";
+  import { Button, Input, Card, Dropdown } from "$lib/components";
   import type { Driver } from "$lib/schema";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+  import { team_dropdown_options } from "$lib/dropdown";
+  import { get_driver_headshot_template } from "$lib/database";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import { error } from "@sveltejs/kit";
+  import type { PageData } from "../../../routes/data/season/drivers/$types";
 
   interface DriverCardProps {
+    /** Data passed from the page context */
+    data: PageData;
+
     /** The [Driver] object used to prefill values. */
-    driver?: Driver | undefined;
+    driver?: Driver;
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the driver headshot template preview */
-    headshot_template?: string;
-
-    /** The value this component's team select dropdown will bind to */
-    team_select_value: string;
-
-    /** The options this component's team select dropdown will display */
-    team_select_options: DropdownOption[];
-
-    /** The value this component's active switch will bind to */
-    active_value: boolean;
   }
 
-  let {
+  let { data, driver = undefined }: DriverCardProps = $props();
-    driver = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    headshot_template = undefined,
-    team_select_value,
-    team_select_options,
-    active_value,
-  }: DriverCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     driver = meta.driver;
-    team_select_value = meta.team_select_value;
-    team_select_options = meta.team_select_options;
-    active_value = meta.active_value;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    headshot_template = meta.headshot_template;
   }
+
+  const toastStore: ToastStore = getToastStore();
+
+  // Constants
+  const labelwidth: string = "120px";
+
+  // Reactive state
+  let required: boolean = $derived(!driver);
+  let disabled: boolean = $derived(!$pbUser?.admin);
+  let firstname_input_value: string = $state(driver?.firstname ?? "");
+  let lastname_input_value: string = $state(driver?.lastname ?? "");
+  let code_input_value: string = $state(driver?.code ?? "");
+  let team_select_value: string = $state(driver?.team ?? "");
+  let headshot_file_value: FileList | undefined = $state();
+  let active_value: boolean = $state(driver?.active ?? true);
+
+  // Database actions
+  const update_driver = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!firstname_input_value || firstname_input_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a first name!"));
+        return;
+      }
+      if (!lastname_input_value || lastname_input_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a last name!"));
+        return;
+      }
+      if (!code_input_value || code_input_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a driver code!"));
+        return;
+      }
+      if (!team_select_value || team_select_value === "") {
+        toastStore.trigger(get_error_toast("Please select a team!"));
+        return;
+      }
+
+      // Headshot handling
+      let headshot_avif: Blob | undefined = undefined;
+      const headshot_file: File | undefined =
+        headshot_file_value && headshot_file_value.length === 1
+          ? headshot_file_value[0]
+          : undefined;
+
+      if (headshot_file) {
+        const headshot_formdata: FormData = new FormData();
+        headshot_formdata.append("image", headshot_file);
+        headshot_formdata.append("width", DRIVER_HEADSHOT_WIDTH.toString());
+        headshot_formdata.append("height", DRIVER_HEADSHOT_HEIGHT.toString());
+
+        try {
+          const response = await fetch("/api/compress", {
+            method: "POST",
+            body: headshot_formdata,
+          });
+
+          if (!response.ok) {
+            error(500, "Compression failed.");
+          }
+
+          headshot_avif = await response.blob();
+        } catch (error) {
+          toastStore.trigger(get_error_toast("" + error));
+        }
+      }
+
+      const driver_data = {
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+        code: code_input_value,
+        team: team_select_value,
+        active: active_value,
+        headshot: headshot_avif,
+      };
+
+      try {
+        if (create) {
+          if (!headshot_avif) {
+            toastStore.trigger(get_error_toast("Please upload a single driver headshot!"));
+            return;
+          }
+          await pb.collection("drivers").create(driver_data);
+        } else {
+          if (!driver?.id) {
+            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();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+
+  const delete_driver = async (): Promise<void> => {
+    if (!driver?.id) {
+      toastStore.trigger(get_error_toast("Invalid driver id!"));
+      return;
+    }
+
+    try {
+      await pb.collection("drivers").delete(driver.id);
+      modalStore.close();
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+  };
 </script>
 
 <Card
-  imgsrc={driver?.headshot_url ?? headshot_template}
+  imgsrc={driver?.headshot_url ?? get_driver_headshot_template(data.graphics)}
-  imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
+  imgid="headshot_preview"
   width="w-full sm:w-auto"
   imgwidth={DRIVER_HEADSHOT_WIDTH}
   imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
-    <!-- This is also disabled, because the ID should only be -->
-    <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if driver && !disable_inputs}
-      <input name="id" type="hidden" value={driver.id} />
-    {/if}
-
   <div class="flex flex-col gap-2">
     <!-- Driver name input -->
-      <Input
+    <Input bind:value={firstname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
-        id="driver_first_name_{driver?.id ?? 'create'}"
+      First Name
-        name="firstname"
+    </Input>
-        value={driver?.firstname ?? ""}
+    <Input bind:value={lastname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
-        autocomplete="off"
+      Last Name
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-        >First Name
     </Input>
     <Input
-        id="driver_last_name_{driver?.id ?? 'create'}"
+      bind:value={code_input_value}
-        name="lastname"
-        value={driver?.lastname ?? ""}
-        autocomplete="off"
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-        >Last Name
-      </Input>
-      <Input
-        id="driver_code_{driver?.id ?? 'create'}"
-        name="code"
-        value={driver?.code ?? ""}
       autocomplete="off"
       minlength={3}
       maxlength={3}
-        labelwidth="120px"
+      {labelwidth}
-        disabled={disable_inputs}
+      {disabled}
-        required={require_inputs}
+      {required}
-        >Driver Code
+    >
+      Driver Code
     </Input>
 
     <!-- Driver team input -->
+    {#await data.teams then teams}
       <Dropdown
-        name="team"
+        bind:value={team_select_value}
-        input_variable={team_select_value}
+        options={team_dropdown_options(teams)}
-        options={team_select_options}
+        {labelwidth}
-        labelwidth="120px"
+        {disabled}
-        disabled={disable_inputs}
+        {required}
-        required={require_inputs}
       >
         Team
       </Dropdown>
+    {/await}
 
     <!-- Headshot upload -->
     <FileDropzone
       name="headshot"
-        id="driver_headshot_{driver?.id ?? 'create'}"
+      bind:files={headshot_file_value}
-        onchange={get_image_preview_event_handler(
+      onchange={get_image_preview_event_handler("headshot_preview")}
-          `update_driver_headshot_preview_${driver?.id ?? "create"}`,
+      {disabled}
-        )}
+      {required}
-        disabled={disable_inputs}
-        required={require_inputs}
     >
-        <svelte:fragment slot="message"><span class="font-bold">Upload Headshot</span></svelte:fragment>
+      <svelte:fragment slot="message">
+        <span class="font-bold">Upload Headshot</span>
+      </svelte:fragment>
     </FileDropzone>
 
     <!-- Save/Delete buttons -->
@@ -143,34 +217,17 @@
           background="bg-primary-500"
           active="bg-tertiary-500"
           bind:checked={active_value}
-            disabled={disable_inputs}
+          {disabled}
         />
       </div>
       {#if driver}
-          <Button
+        <Button onclick={update_driver()} color="secondary" {disabled} width="w-1/2">Save</Button>
-            formaction="?/update_driver"
+        <Button onclick={delete_driver} color="primary" {disabled} width="w-1/2">Delete</Button>
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-          >
-            Save
-          </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_driver"
-            width="w-1/2"
-          >
-            Delete
-          </Button>
       {:else}
-          <Button formaction="?/create_driver" color="tertiary" submit width="w-full">
+        <Button onclick={update_driver(true)} color="tertiary" {disabled} width="w-full">
           Create Driver
         </Button>
       {/if}
     </div>
   </div>
-  </form>
 </Card>

src/lib/components/cards/RaceCard.svelte

@@ -1,207 +1,300 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
-  import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+  import {
+    FileDropzone,
+    getModalStore,
+    getToastStore,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
   import { Button, Card, Input } from "$lib/components";
   import type { Race } from "$lib/schema";
-  import { format } from "date-fns";
   import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
+  import { get_race_pictogram_template } from "$lib/database";
+  import { format_date, isodatetimeformat } from "$lib/date";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import { error } from "@sveltejs/kit";
+  import type { PageData } from "../../../routes/data/season/races/$types";
 
   interface RaceCardProps {
+    /** Data passed from the page context */
+    data: PageData;
+
     /** The [Race] object used to prefill values. */
-    race?: Race | undefined;
+    race?: Race;
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the race pictogram template preview */
-    pictogram_template?: string;
   }
 
-  let {
+  let { data, race = undefined }: RaceCardProps = $props();
-    race = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    pictogram_template = "",
-  }: RaceCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     race = meta.race;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    pictogram_template = meta.pictogram_template;
   }
 
-  // Dates have to be formatted to datetime-local format
+  const toastStore: ToastStore = getToastStore();
-  const dateformat: string = "yyyy-MM-dd'T'HH:mm";
+
-  const sprintqualidate: string | undefined =
+  // Constants
-    race && race.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined;
+  const labelwidth = "85px";
-  const sprintdate: string | undefined =
-    race && race.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined;
-  const qualidate: string | undefined = race
-    ? format(new Date(race.qualidate), dateformat)
-    : undefined;
-  const racedate: string | undefined = race
-    ? format(new Date(race.racedate), dateformat)
-    : undefined;
 
   const clear_sprint = () => {
-    const sprintquali: HTMLInputElement = document.getElementById(
+    (document.getElementById("sqdate") as HTMLInputElement).value = "";
-      `race_sprintqualidate_${race?.id ?? "create"}`,
+    (document.getElementById("sdate") as HTMLInputElement).value = "";
-    ) as HTMLInputElement;
-    const sprint: HTMLInputElement = document.getElementById(
-      `race_sprintdate_${race?.id ?? "create"}`,
-    ) as HTMLInputElement;
 
-    sprintquali.value = "";
+    sprintqualidate_value = "";
-    sprint.value = "";
+    sprintdate_value = "";
   };
 
-  const labelwidth = "80px";
+  // Reactive state
+  let required: boolean = $derived(!race);
+  let disabled: boolean = $derived(!$pbUser?.admin);
+  let name_value: string = $state(race?.name ?? "");
+  let step_value: string = $state(race?.step.toString() ?? "");
+  let pxx_value: string = $state(race?.pxx.toString() ?? "");
+  let sprintqualidate_value: string = $state("");
+  let sprintdate_value: string = $state("");
+  let qualidate_value: string = $state("");
+  let racedate_value: string = $state("");
+  let pictogram_value: FileList | undefined = $state();
+
+  // Set the initial values if we've clicked on an existing race
+  // PocketBase stores in UTC, so resulting values will be offset by 1h here
+  if (race) {
+    if (race.sprintqualidate && race.sprintdate) {
+      sprintqualidate_value = format_date(race.sprintqualidate, isodatetimeformat);
+      sprintdate_value = format_date(race.sprintdate, isodatetimeformat);
+    }
+
+    qualidate_value = format_date(race.qualidate, isodatetimeformat);
+    racedate_value = format_date(race.racedate, isodatetimeformat);
+  }
+
+  // Database actions
+  const update_race = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!name_value || name_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a name!"));
+        return;
+      }
+      if (!step_value || step_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a step!"));
+        return;
+      }
+      if (!pxx_value || pxx_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a place to guess (PXX)!"));
+        return;
+      }
+      if (!qualidate_value || qualidate_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a qualifying date!"));
+        return;
+      }
+      if (!racedate_value || racedate_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a race date!"));
+        return;
+      }
+
+      // Pictogram handling
+      let pictogram_avif: Blob | undefined = undefined;
+      const pictogram_file: File | undefined =
+        pictogram_value && pictogram_value.length === 1 ? pictogram_value[0] : undefined;
+
+      if (pictogram_file) {
+        const pictogram_formdata: FormData = new FormData();
+        pictogram_formdata.append("image", pictogram_file);
+        pictogram_formdata.append("width", RACE_PICTOGRAM_WIDTH.toString());
+        pictogram_formdata.append("height", RACE_PICTOGRAM_HEIGHT.toString());
+
+        try {
+          const response = await fetch("/api/compress", {
+            method: "POST",
+            body: pictogram_formdata,
+          });
+
+          if (!response.ok) {
+            error(500, "Compression failed.");
+          }
+
+          pictogram_avif = await response.blob();
+        } catch (error) {
+          toastStore.trigger(get_error_toast("" + error));
+        }
+      }
+
+      // Use toISOString here, as we want to convert from localtime to UTC, which PocketBase uses
+      const race_data = {
+        name: name_value,
+        step: step_value,
+        pxx: pxx_value,
+        sprintqualidate:
+          sprintqualidate_value && sprintqualidate_value !== ""
+            ? new Date(sprintqualidate_value).toISOString()
+            : null,
+        sprintdate:
+          sprintdate_value && sprintdate_value != ""
+            ? new Date(sprintdate_value).toISOString()
+            : null,
+        qualidate: new Date(qualidate_value).toISOString(),
+        racedate: new Date(racedate_value).toISOString(),
+        pictogram: pictogram_avif,
+      };
+
+      try {
+        if (create) {
+          if (!pictogram_avif) {
+            toastStore.trigger(get_error_toast("Please upload a single pictogram!"));
+            return;
+          }
+          await pb.collection("races").create(race_data);
+        } else {
+          if (!race?.id) {
+            toastStore.trigger(get_error_toast("Invalid race id!"));
+            return;
+          }
+          await pb.collection("races").update(race.id, race_data);
+        }
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+    return handler;
+  };
+
+  const delete_race = async (): Promise<void> => {
+    if (!race?.id) {
+      toastStore.trigger(get_error_toast("Invalid race id!"));
+      return;
+    }
+
+    try {
+      await pb.collection("races").delete(race.id);
+      modalStore.close();
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+  };
 </script>
 
 <Card
-  imgsrc={race?.pictogram_url ?? pictogram_template}
+  imgsrc={race?.pictogram_url ?? get_race_pictogram_template(data.graphics)}
-  imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
+  imgid="pictogram_preview"
   width="w-full sm:w-auto"
   imgwidth={RACE_PICTOGRAM_WIDTH}
   imgheight={RACE_PICTOGRAM_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
-    <!-- This is also disabled, because the ID should only be -->
-    <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if race && !disable_inputs}
-      <input name="id" type="hidden" value={race.id} />
-    {/if}
-
   <div class="flex flex-col gap-2">
-      <!-- Driver name input -->
+    <!-- Race name input -->
     <Input
-        id="race_name_{race?.id ?? 'create'}"
+      bind:value={name_value}
-        name="name"
-        value={race?.name ?? ""}
       autocomplete="off"
+      placeholder="Has to end with an emoji"
       {labelwidth}
-        disabled={disable_inputs}
+      {disabled}
-        required={require_inputs}>Name</Input
+      {required}
     >
+      Name
+    </Input>
     <Input
-        id="race_step_{race?.id ?? 'create'}"
+      bind:value={step_value}
-        name="step"
-        value={race?.step ?? ""}
       autocomplete="off"
-        {labelwidth}
+      placeholder="The step in the race calendar"
       type="number"
       min={1}
       max={24}
-        disabled={disable_inputs}
-        required={require_inputs}>Step</Input
-      >
-      <Input
-        id="race_pxx_{race?.id ?? 'create'}"
-        name="pxx"
-        value={race?.pxx ?? ""}
-        autocomplete="off"
       {labelwidth}
+      {disabled}
+      {required}
+    >
+      Step
+    </Input>
+    <Input
+      bind:value={pxx_value}
+      autocomplete="off"
+      placeholder="The place to guess"
       type="number"
       min={1}
       max={20}
-        disabled={disable_inputs}
+      {labelwidth}
-        required={require_inputs}>PXX</Input
+      {disabled}
+      {required}
     >
+      PXX
+    </Input>
 
     <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
     <Input
-        id="race_sprintqualidate_{race?.id ?? 'create'}"
+      id="sqdate"
-        name="sprintqualidate"
+      type="datetime-local"
-        value={sprintqualidate ?? ""}
+      bind:value={sprintqualidate_value}
       autocomplete="off"
       {labelwidth}
-        type="datetime-local"
+      {disabled}
-        disabled={disable_inputs}>SQuali</Input
     >
+      SQuali
+    </Input>
     <Input
-        id="race_sprintdate_{race?.id ?? 'create'}"
+      id="sdate"
-        name="sprintdate"
+      type="datetime-local"
-        value={sprintdate ?? ""}
+      bind:value={sprintdate_value}
       autocomplete="off"
       {labelwidth}
-        type="datetime-local"
+      {disabled}
-        disabled={disable_inputs}>SRace</Input
     >
+      SRace
+    </Input>
     <Input
-        id="race_qualidate_{race?.id ?? 'create'}"
+      type="datetime-local"
-        name="qualidate"
+      bind:value={qualidate_value}
-        value={qualidate ?? ""}
       autocomplete="off"
       {labelwidth}
-        type="datetime-local"
+      {disabled}
-        disabled={disable_inputs}
+      {required}
-        required={require_inputs}>Quali</Input
     >
+      Quali
+    </Input>
     <Input
-        id="race_racedate_{race?.id ?? 'create'}"
+      type="datetime-local"
-        name="racedate"
+      bind:value={racedate_value}
-        value={racedate ?? ""}
       autocomplete="off"
       {labelwidth}
-        type="datetime-local"
+      {disabled}
-        disabled={disable_inputs}
+      {required}
-        required={require_inputs}>Race</Input
     >
+      Race
+    </Input>
 
     <!-- Headshot upload -->
     <FileDropzone
       name="pictogram"
-        id="race_pictogram_{race?.id ?? 'create'}"
+      onchange={get_image_preview_event_handler("pictogram_preview")}
-        onchange={get_image_preview_event_handler(
+      bind:files={pictogram_value}
-          `update_race_pictogram_preview_${race?.id ?? "create"}`,
+      {disabled}
-        )}
+      {required}
-        disabled={disable_inputs}
-        required={require_inputs}
     >
-        <svelte:fragment slot="message"><span class="font-bold">Upload Pictogram</span></svelte:fragment>
+      <svelte:fragment slot="message">
+        <span class="font-bold">Upload Pictogram</span>
+      </svelte:fragment>
     </FileDropzone>
 
     <!-- Save/Delete buttons -->
     <div class="flex justify-end gap-2">
-        <Button onclick={clear_sprint} color="secondary" disabled={disable_inputs} width="w-1/3">
+      <Button onclick={clear_sprint} color="secondary" {disabled} width={race ? "w-1/3" : "w-1/2"}>
         Remove Sprint
       </Button>
       {#if race}
-          <Button
+        <Button onclick={update_race()} color="secondary" {disabled} width="w-1/3">
-            formaction="?/update_race"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/3"
-          >
           Save Changes
         </Button>
-          <Button
+        <Button onclick={delete_race} color="primary" {disabled} width="w-1/3">Delete</Button>
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_race"
-            width="w-1/3"
-          >
-            Delete
-          </Button>
       {:else}
-          <Button formaction="?/create_race" color="tertiary" submit width="w-1/2"
+        <Button onclick={update_race(true)} color="tertiary" {disabled} width="w-1/2">
-            >Create Race</Button
+          Create Race
-          >
+        </Button>
       {/if}
     </div>
   </div>
-  </form>
 </Card>

src/lib/components/cards/RacePickCard.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  import { Card, Button, Dropdown } from "$lib/components";
+  import type { Driver, RacePick, Substitution } from "$lib/schema";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import {
+    getModalStore,
+    getToastStore,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+  import { driver_dropdown_options } from "$lib/dropdown";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import type { PageData } from "../../../routes/racepicks/$types";
+
+  interface RacePickCardProps {
+    /** Data passed from the page context */
+    data: PageData;
+
+    /** The [RacePick] object used to prefill values. */
+    racepick?: RacePick;
+  }
+
+  let { data, racepick = undefined }: RacePickCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    data = meta.data;
+    racepick = meta.racepick;
+  }
+
+  const toastStore: ToastStore = getToastStore();
+
+  // Await promises
+  let drivers: Driver[] | undefined = $state(undefined);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  let substitutions: Substitution[] | undefined = $state(undefined);
+  data.substitutions.then((s: Substitution[]) => (substitutions = s));
+
+  // Constants
+  const labelwidth: string = "70px";
+
+  // Reactive state
+  let required: boolean = $derived(!racepick);
+  let disabled: boolean = false; // TODO: Datelock
+  let pxx_select_value: string = $state(racepick?.pxx ?? "");
+  let dnf_select_value: string = $state(racepick?.dnf ?? "");
+
+  let active_drivers_and_substitutes: Driver[] = $derived.by(() => {
+    if (!data.currentrace) return [];
+
+    let active_and_substitutes: Driver[] = (drivers ?? []).filter(
+      (driver: Driver) => driver.active,
+    );
+
+    (substitutions ?? [])
+      .filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
+      .forEach((substitution: Substitution) => {
+        const for_index = active_and_substitutes.findIndex(
+          (driver: Driver) => driver.id === substitution.for,
+        );
+        const sub_index = (drivers ?? []).findIndex(
+          (driver: Driver) => driver.id === substitution.substitute,
+        );
+
+        active_and_substitutes[for_index] = (drivers ?? [])[sub_index];
+      });
+
+    return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
+  });
+
+  // Update preview
+  $effect(() => {
+    if (!drivers) return;
+    const src: string = get_by_value(drivers, "id", pxx_select_value)?.headshot_url ?? "";
+    const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
+    if (img) img.src = src;
+  });
+
+  const random_select_handler = (event: Event): void => {
+    pxx_select_value =
+      active_drivers_and_substitutes[
+        Math.floor(Math.random() * active_drivers_and_substitutes.length)
+      ].id;
+
+    dnf_select_value =
+      active_drivers_and_substitutes[
+        Math.floor(Math.random() * active_drivers_and_substitutes.length)
+      ].id;
+  };
+
+  // Database actions
+  const update_racepick = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!$pbUser?.id || $pbUser.id === "") {
+        toastStore.trigger(get_error_toast("Invalid user id!"));
+        return;
+      }
+      if (!data.currentrace?.id || data.currentrace.id === "") {
+        toastStore.trigger(get_error_toast("Invalid race id!"));
+        return;
+      }
+      if (!pxx_select_value || pxx_select_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a PXX guess!"));
+        return;
+      }
+      if (!dnf_select_value || dnf_select_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a DNF guess!"));
+        return;
+      }
+
+      const racepick_data = {
+        user: $pbUser.id,
+        race: data.currentrace.id,
+        pxx: pxx_select_value,
+        dnf: dnf_select_value,
+      };
+
+      try {
+        if (create) {
+          await pb.collection("racepicks").create(racepick_data);
+        } else {
+          if (!racepick?.id) {
+            toastStore.trigger(get_error_toast("Invalid racepick id!"));
+            return;
+          }
+          await pb.collection("racepicks").update(racepick.id, racepick_data);
+        }
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+
+  const delete_racepick = async (): Promise<void> => {
+    if (!racepick?.id) {
+      toastStore.trigger(get_error_toast("Invalid racepick id!"));
+      return;
+    }
+
+    try {
+      await pb.collection("racepicks").delete(racepick.id);
+      modalStore.close();
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+  };
+</script>
+
+{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
+  <Card
+    imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
+      get_driver_headshot_template(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">
+      <!-- PXX select -->
+      <Dropdown
+        bind:value={pxx_select_value}
+        options={driver_dropdown_options(active_drivers_and_substitutes)}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        P{data.currentrace?.pxx ?? "XX"}
+      </Dropdown>
+
+      <!-- DNF select -->
+      <Dropdown
+        bind:value={dnf_select_value}
+        options={driver_dropdown_options(active_drivers_and_substitutes)}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        DNF
+      </Dropdown>
+
+      <Button color="tertiary" {disabled} width="w-full" onclick={random_select_handler}>
+        Select Random
+      </Button>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if racepick}
+          <Button onclick={update_racepick()} color="secondary" {disabled} width="w-1/2">
+            Save Changes
+          </Button>
+          <Button onclick={delete_racepick} color="primary" {disabled} width="w-1/2">Delete</Button>
+        {:else}
+          <Button onclick={update_racepick(true)} color="tertiary" {disabled} width="w-full">
+            Make Pick
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </Card>
+{/await}

src/lib/components/cards/RaceResultCard.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+  import {
+    Autocomplete,
+    getModalStore,
+    getToastStore,
+    InputChip,
+    type AutocompleteOption,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
+  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";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import { get_error_toast } from "$lib/toast";
+  import type { PageData } from "../../../routes/data/raceresults/$types";
+
+  interface RaceResultCardProps {
+    /** Data passed from the page context */
+    data: PageData;
+
+    /** The [RaceResult] object used to prefill values. */
+    result?: RaceResult;
+  }
+
+  let { data, result = undefined }: RaceResultCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    data = meta.data;
+    result = meta.result;
+  }
+
+  const toastStore: ToastStore = getToastStore();
+
+  // Await promises
+  let races: Race[] | undefined = $state(undefined);
+  data.races.then((r: Race[]) => (races = r));
+
+  let drivers: Driver[] | undefined = $state(undefined);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  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";
+
+  // Reactive state
+  let required: boolean = $derived(!result);
+  let disabled: boolean = $derived(!$pbUser?.admin); // TODO: Datelock (prevent entering future result)
+  let race_select_value: string = $state(result?.race ?? "");
+
+  let currentrace: Race | undefined = $derived(
+    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}...`
+      : `Select race first...`,
+  );
+
+  let pxxs_input: string = $state("");
+  let pxxs_chips: string[] = $state([]);
+
+  let dnfs_input: string = $state("");
+  let dnfs_chips: string[] = $state([]);
+
+  // Set the pxxs/dnfs states once the drivers are loaded
+  data.drivers.then(async (drivers: Driver[]) => {
+    pxxs_chips =
+      result?.pxxs.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ?? [];
+
+    dnfs_chips =
+      result?.dnfs.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ?? [];
+  });
+
+  // This is the actual data that gets sent through the form
+  let pxxs_ids: string[] = $state(result?.pxxs ?? []);
+  let dnfs_ids: string[] = $state(result?.dnfs ?? []);
+
+  let pxxs_options: AutocompleteOption<string>[] = $derived.by(() => {
+    if (!race_select_value) return [];
+
+    let active_and_substitutes: Driver[] = (drivers ?? []).filter(
+      (driver: Driver) => driver.active,
+    );
+
+    (substitutions ?? [])
+      .filter((substitution: Substitution) => substitution.race === race_select_value)
+      .forEach((substitution: Substitution) => {
+        const for_index = active_and_substitutes.findIndex(
+          (driver: Driver) => driver.id === substitution.for,
+        );
+        const sub_index = (drivers ?? []).findIndex(
+          (driver: Driver) => driver.id === substitution.substitute,
+        );
+
+        active_and_substitutes[for_index] = (drivers ?? [])[sub_index];
+      });
+
+    return active_and_substitutes
+      .sort((a: Driver, b: Driver) => a.firstname.localeCompare(b.firstname))
+      .map((driver: Driver) => {
+        return {
+          // NOTE: Because Skeleton displays the values inside the autocomplete input,
+          //       we have to supply the driver code twice and manage a list of ids manually (ugh)
+          label: `${driver.firstname} ${driver.lastname}`,
+          value: driver.code,
+        };
+      });
+  });
+
+  let pxxs_whitelist: string[] = $derived.by(() =>
+    (drivers ?? []).map((driver: Driver) => {
+      return driver.code;
+    }),
+  );
+
+  // Event handlers
+  const on_pxxs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
+    if (disabled || !drivers) return;
+
+    // Can only select 7 drivers
+    if (pxxs_chips.length >= 7) return;
+
+    // Can only select a driver once
+    if (pxxs_chips.includes(event.detail.value)) return;
+
+    // Manage labels that are displayed
+    pxxs_chips.push(event.detail.value);
+    pxxs_input = "";
+
+    // Manage ids that are submitted via form
+    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);
+    }
+  };
+
+  const on_pxxs_chip_remove = (event: CustomEvent): void => {
+    pxxs_ids.splice(event.detail.chipIndex, 1);
+  };
+
+  const on_dnfs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
+    if (disabled || !drivers) return;
+
+    // Can only select a driver once
+    if (dnfs_chips.includes(event.detail.value)) return;
+
+    // Manage labels that are displayed
+    dnfs_chips.push(event.detail.value);
+    dnfs_input = "";
+
+    // Manage ids that are submitted via form
+    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);
+    }
+  };
+
+  const on_dnfs_chip_remove = (event: CustomEvent): void => {
+    dnfs_ids.splice(event.detail.chipIndex, 1);
+  };
+
+  // Database actions
+  const update_raceresult = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!race_select_value || race_select_value === "") {
+        toastStore.trigger(get_error_toast("Please select a race!"));
+        return;
+      }
+      // If enough drivers DNF/DSQ, theoretically pxxs_ids could be empty
+      // if (!pxxs_ids || pxxs_ids.length !== 7) {
+      //   toastStore.trigger(get_error_toast("Please select all 7 driver placements!"));
+      //   return;
+      // }
+
+      const raceresult_data = {
+        race: race_select_value,
+        pxxs: pxxs_ids,
+        dnfs: dnfs_ids,
+      };
+
+      try {
+        if (create) {
+          await pb.collection("raceresults").create(raceresult_data);
+        } else {
+          if (!result?.id) {
+            toastStore.trigger(get_error_toast("Invalid result id!"));
+            return;
+          }
+
+          await pb.collection("raceresults").update(result.id, raceresult_data);
+        }
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+
+  const delete_raceresult = async (): Promise<void> => {
+    if (!result?.id) {
+      toastStore.trigger(get_error_toast("Invalid result id!"));
+      return;
+    }
+
+    try {
+      await pb.collection("raceresults").delete(result.id);
+      modalStore.close();
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+  };
+</script>
+
+<Card width="w-full sm:w-[512px]">
+  <div class="flex flex-col gap-2">
+    <!-- Race select input -->
+    {#await data.races then races}
+      <Dropdown
+        name="race"
+        bind:value={race_select_value}
+        options={race_dropdown_options(races).filter(
+          (option: DropdownOption) => result || !present_results.includes(option.value),
+        )}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Race
+      </Dropdown>
+    {/await}
+
+    {#if race_select_value}
+      <!-- PXXs autocomplete chips -->
+      <InputChip
+        bind:input={pxxs_input}
+        bind:value={pxxs_chips}
+        whitelist={pxxs_whitelist}
+        allowUpperCase
+        placeholder={pxxs_placeholder}
+        name="pxxs_codes"
+        {disabled}
+        {required}
+        on:remove={on_pxxs_chip_remove}
+      />
+      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
+        <Autocomplete
+          bind:input={pxxs_input}
+          options={pxxs_options}
+          denylist={pxxs_chips}
+          on:selection={on_pxxs_chip_select}
+        />
+      </div>
+
+      <!-- DNFs autocomplete chips -->
+      <InputChip
+        bind:input={dnfs_input}
+        bind:value={dnfs_chips}
+        whitelist={pxxs_whitelist}
+        allowUpperCase
+        placeholder="Select DNFs..."
+        name="dnfs_codes"
+        {disabled}
+        on:remove={on_dnfs_chip_remove}
+      />
+      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
+        <Autocomplete
+          bind:input={dnfs_input}
+          options={pxxs_options}
+          denylist={dnfs_chips}
+          on:selection={on_dnfs_chip_select}
+        />
+      </div>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex items-center justify-end gap-2">
+        {#if result}
+          <Button onclick={update_raceresult()} color="secondary" {disabled} width="w-1/2"
+            >Save</Button
+          >
+          <Button onclick={delete_raceresult} color="primary" {disabled} width="w-1/2"
+            >Delete</Button
+          >
+        {:else}
+          <Button onclick={update_raceresult(true)} color="tertiary" {disabled} width="w-full">
+            Create Result
+          </Button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</Card>

src/lib/components/cards/SeasonPickCard.svelte

@@ -0,0 +1,399 @@
+<script lang="ts">
+  import { Card, Button, Dropdown, Input } from "$lib/components";
+  import type { Driver, SeasonPick, Team } from "$lib/schema";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import {
+    Autocomplete,
+    getModalStore,
+    getToastStore,
+    InputChip,
+    type AutocompleteOption,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+  import { driver_dropdown_options, team_dropdown_options } from "$lib/dropdown";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import type { PageData } from "../../../routes/seasonpicks/$types";
+
+  interface SeasonPickCardProps {
+    /** Data passed from the page context */
+    data: PageData;
+
+    /** The [SeasonPick] object used to prefill values. */
+    seasonpick?: SeasonPick;
+  }
+
+  let { data, seasonpick = undefined }: SeasonPickCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    data = meta.data;
+    seasonpick = meta.seasonpick;
+  }
+
+  const toastStore: ToastStore = getToastStore();
+
+  // Await promises
+  let drivers: Driver[] | undefined = $state(undefined);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  let teams: Team[] | undefined = $state(undefined);
+  data.teams.then((t: Team[]) => (teams = t));
+
+  // Constants
+  const labelwidth: string = "150px";
+
+  // Reactive state
+  let required: boolean = $derived(!seasonpick);
+  let disabled: boolean = false; // TODO: Datelock
+  let hottake_value: string = $state(seasonpick?.hottake ?? "");
+  let wdc_value: string = $state(seasonpick?.wdcwinner ?? "");
+  let wcc_value: string = $state(seasonpick?.wccwinner ?? "");
+  let overtakes_value: string = $state(seasonpick?.mostovertakes ?? "");
+  let dnfs_value: string = $state(seasonpick?.mostdnfs ?? "");
+  let doohan_value: string = $state(seasonpick?.doohanstarts.toString() ?? "");
+
+  let teamwinners_input: string = $state("");
+  let teamwinners_chips: string[] = $state([]);
+
+  let podiums_input: string = $state("");
+  let podiums_chips: string[] = $state([]);
+
+  // Set the teamwinners/podiums states once the drivers are loaded
+  data.drivers.then(async (drivers: Driver[]) => {
+    teamwinners_chips =
+      seasonpick?.teamwinners.map(
+        (id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid",
+      ) ?? [];
+
+    podiums_chips =
+      seasonpick?.podiums.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ??
+      [];
+  });
+
+  // This is the actual data that gets sent through the form
+  let teamwinners_ids: string[] = $state(seasonpick?.teamwinners ?? []);
+  let podiums_ids: string[] = $state(seasonpick?.podiums ?? []);
+
+  let teamwinners_options: AutocompleteOption<string>[] = $derived.by(() =>
+    (drivers ?? [])
+      .filter((driver: Driver) => driver.active)
+      .map((driver: Driver) => {
+        const teamname: string = get_by_value(teams ?? [], "id", driver.team)?.name ?? "Invalid";
+
+        return {
+          firstname: driver.firstname,
+          lastname: driver.lastname,
+          code: driver.code,
+          teamname: teamname,
+        };
+      })
+      .sort((a, b) => a.teamname.localeCompare(b.teamname))
+      .map((driver) => {
+        return {
+          label: `${driver.teamname}: ${driver.firstname} ${driver.lastname}`,
+          value: driver.code,
+        };
+      }),
+  );
+
+  let teamwinners_whitelist: string[] = $derived.by(() =>
+    (drivers ?? []).map((driver: Driver) => driver.code),
+  );
+
+  let teamwinners_denylist: string[] = $derived.by(() => {
+    let denylist: string[] = [];
+
+    teamwinners_chips
+      .map((driver: string) => get_by_value(drivers ?? [], "code", driver))
+      .forEach((driver: Driver | undefined) => {
+        if (driver) {
+          (drivers ?? [])
+            .filter((d: Driver) => d.team === driver.team)
+            .forEach((d: Driver) => {
+              denylist.push(d.code);
+            });
+        }
+      });
+
+    return denylist;
+  });
+
+  let podiums_options: AutocompleteOption<string>[] = $derived.by(() =>
+    (drivers ?? [])
+      .filter((driver: Driver) => driver.active)
+      .sort((a: Driver, b: Driver) => a.firstname.localeCompare(b.firstname))
+      .map((driver: Driver) => {
+        return {
+          label: `${driver.firstname} ${driver.lastname}`,
+          value: driver.code,
+        };
+      }),
+  );
+
+  // Event handlers
+  const on_teamwinners_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
+    if (disabled || !drivers) return;
+
+    // Can only select 10 drivers
+    if (teamwinners_chips.length >= 10) return;
+
+    // Can only select a driver once
+    if (teamwinners_chips.includes(event.detail.value)) return;
+
+    // Manage labels that are displayed
+    teamwinners_chips.push(event.detail.value);
+    teamwinners_input = "";
+
+    // Manage ids that are submitted via form
+    const id: string = get_by_value(drivers, "code", event.detail.value)?.id ?? "Invalid";
+    if (!teamwinners_ids.includes(id)) {
+      teamwinners_ids.push(id);
+    }
+  };
+
+  const on_teamwinners_chip_remove = (event: CustomEvent): void => {
+    teamwinners_ids.splice(event.detail.chipIndex, 1);
+  };
+
+  const on_podiums_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
+    if (disabled || !drivers) return;
+
+    // Can only select a driver once
+    if (podiums_chips.includes(event.detail.value)) return;
+
+    // Manage labels that are displayed
+    podiums_chips.push(event.detail.value);
+    podiums_input = "";
+
+    // Manage ids that are submitted via form
+    const id: string = get_by_value(drivers, "code", event.detail.value)?.id ?? "Invalid";
+    if (!podiums_ids.includes(id)) {
+      podiums_ids.push(id);
+    }
+  };
+
+  const on_podiums_chip_remove = (event: CustomEvent): void => {
+    podiums_ids.splice(event.detail.chipIndex, 1);
+  };
+
+  // Database actions
+  const update_seasonpick = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!$pbUser?.id || $pbUser.id === "") {
+        toastStore.trigger(get_error_toast("Invalid user id!"));
+        return;
+      }
+      if (!hottake_value || hottake_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a hottake!"));
+        return;
+      }
+      if (!wdc_value || wdc_value === "") {
+        toastStore.trigger(get_error_toast("Please select a driver for WDC!"));
+        return;
+      }
+      if (!wcc_value || wcc_value === "") {
+        toastStore.trigger(get_error_toast("Please select a team for WCC!"));
+        return;
+      }
+      if (!overtakes_value || overtakes_value === "") {
+        toastStore.trigger(get_error_toast("Please select a driver for most overtakes!"));
+        return;
+      }
+      if (!dnfs_value || dnfs_value === "") {
+        toastStore.trigger(get_error_toast("Please select a driver for most DNFs!"));
+        return;
+      }
+      if (
+        !doohan_value ||
+        doohan_value === "" ||
+        parseInt(doohan_value) <= 0 ||
+        parseInt(doohan_value) > 24
+      ) {
+        toastStore.trigger(
+          get_error_toast("Please enter between 0 and 24 starts for Jack Doohan!"),
+        );
+        return;
+      }
+      if (!teamwinners_ids || teamwinners_ids.length !== 10) {
+        toastStore.trigger(get_error_toast("Please select a winner for each team!"));
+        return;
+      }
+      if (!podiums_ids || podiums_ids.length < 3) {
+        toastStore.trigger(get_error_toast("Please select at least 3 drivers with podiums!"));
+        return;
+      }
+
+      const seasonpick_data = {
+        user: $pbUser.id,
+        hottake: hottake_value,
+        wdcwinner: wdc_value,
+        wccwinner: wcc_value,
+        mostovertakes: overtakes_value,
+        mostdnfs: dnfs_value,
+        doohanstarts: doohan_value,
+        teamwinners: teamwinners_ids,
+        podiums: podiums_ids,
+      };
+
+      try {
+        if (create) {
+          await pb.collection("seasonpicks").create(seasonpick_data);
+        } else {
+          if (!seasonpick?.id) {
+            toastStore.trigger(get_error_toast("Invalid seasonpick id!"));
+            return;
+          }
+          await pb.collection("seasonpicks").update(seasonpick.id, seasonpick_data);
+        }
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+
+  const delete_seasonpick = async (): Promise<void> => {
+    if (!seasonpick?.id) {
+      toastStore.trigger(get_error_toast("Invalid seasonpick id!"));
+      return;
+    }
+
+    try {
+      await pb.collection("seasonpicks").delete(seasonpick.id);
+      modalStore.close();
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+  };
+</script>
+
+{#await Promise.all([data.graphics, data.drivers, data.teams]) then [graphics, drivers, teams]}
+  <Card width="w-full sm:w-[512px]">
+    <div class="flex flex-col gap-2">
+      <!-- Hottake -->
+      <Input bind:value={hottake_value} {labelwidth} {disabled} {required}>Hottake</Input>
+
+      <!-- WDC select -->
+      <Dropdown
+        bind:value={wdc_value}
+        options={driver_dropdown_options(drivers.filter((driver: Driver) => driver.active))}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        WDC
+      </Dropdown>
+
+      <!-- WCC select -->
+      <Dropdown
+        bind:value={wcc_value}
+        options={team_dropdown_options(teams)}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        WCC
+      </Dropdown>
+
+      <!-- Overtakes select -->
+      <Dropdown
+        bind:value={overtakes_value}
+        options={driver_dropdown_options(drivers.filter((driver: Driver) => driver.active))}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Most Overtakes
+      </Dropdown>
+
+      <!-- DNFs select -->
+      <Dropdown
+        bind:value={dnfs_value}
+        options={driver_dropdown_options(drivers.filter((driver: Driver) => driver.active))}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Most DNFs
+      </Dropdown>
+
+      <!-- Doohan Starts -->
+      <Input
+        type="number"
+        min={0}
+        max={24}
+        bind:value={doohan_value}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Doohan Starts
+      </Input>
+
+      <!-- Teamwinners autocomplete chips -->
+      <InputChip
+        bind:input={teamwinners_input}
+        bind:value={teamwinners_chips}
+        whitelist={teamwinners_whitelist}
+        allowUpperCase
+        placeholder="Select Teamwinners..."
+        name="teamwinners_codes"
+        {disabled}
+        {required}
+        on:remove={on_teamwinners_chip_remove}
+      />
+      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
+        <Autocomplete
+          bind:input={teamwinners_input}
+          options={teamwinners_options}
+          denylist={teamwinners_denylist}
+          on:selection={on_teamwinners_chip_select}
+        />
+      </div>
+
+      <!-- Podiums autocomplete chips -->
+      <InputChip
+        bind:input={podiums_input}
+        bind:value={podiums_chips}
+        whitelist={teamwinners_whitelist}
+        allowUpperCase
+        placeholder="Select Drivers with Podiums..."
+        name="podiums_codes"
+        {disabled}
+        {required}
+        on:remove={on_podiums_chip_remove}
+      />
+      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
+        <Autocomplete
+          bind:input={podiums_input}
+          options={podiums_options}
+          denylist={podiums_chips}
+          on:selection={on_podiums_chip_select}
+        />
+      </div>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if seasonpick}
+          <Button onclick={update_seasonpick()} color="secondary" {disabled} width="w-1/2">
+            Save Changes
+          </Button>
+          <Button onclick={delete_seasonpick} color="primary" {disabled} width="w-1/2">
+            Delete
+          </Button>
+        {:else}
+          <Button onclick={update_seasonpick(true)} color="tertiary" {disabled} width="w-full">
+            Make Pick
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </Card>
+{/await}

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,180 +1,179 @@
 <script lang="ts">
-  import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
+  import { Card, Button, Dropdown } from "$lib/components";
   import type { Driver, Substitution } from "$lib/schema";
-  import { get_by_value } from "$lib/database";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
-  import type { Action } from "svelte/action";
+  import {
-  import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+    getModalStore,
+    getToastStore,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+  import { driver_dropdown_options, race_dropdown_options } from "$lib/dropdown";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import type { PageData } from "../../../routes/data/season/substitutions/$types";
 
   interface SubstitutionCardProps {
+    /** Data passed from the page context */
+    data: PageData;
+
     /** The [Substitution] object used to prefill values. */
-    substitution?: Substitution | undefined;
+    substitution?: Substitution;
-
-    /** The drivers (to display the headshot) */
-    drivers: Driver[];
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the driver headshot template preview */
-    headshot_template?: string;
-
-    /** The value this component's substitute select dropdown will bind to */
-    substitute_select_value: string;
-
-    /** The value this component's driver select dropdown will bind to */
-    driver_select_value: string;
-
-    /** The value this component's race select dropdown will bind to */
-    race_select_value: string;
-
-    /** The options this component's substitute/driver select dropdowns will display */
-    driver_select_options: DropdownOption[];
-
-    /** The options this component's race select dropdown will display */
-    race_select_options: DropdownOption[];
   }
 
-  let {
+  let { data, substitution = undefined }: SubstitutionCardProps = $props();
-    substitution = undefined,
-    drivers,
-    disable_inputs = false,
-    require_inputs = false,
-    headshot_template = "",
-    substitute_select_value,
-    driver_select_value,
-    race_select_value,
-    driver_select_options,
-    race_select_options,
-  }: SubstitutionCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     substitution = meta.substitution;
-    drivers = meta.drivers;
-    disable_inputs = meta.disable_inputs;
-    substitute_select_value = meta.substitute_select_value;
-    driver_select_value = meta.driver_select_value;
-    race_select_value = meta.race_select_value;
-    driver_select_options = meta.driver_select_options;
-    race_select_options = meta.race_select_options;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    headshot_template = meta.headshot_template;
   }
 
-  // This action is used on the <Dropdown> element.
+  const toastStore: ToastStore = getToastStore();
-  // It will trigger once the Dropdown's <input> elements is mounted.
+
-  // This way we'll receive a reference to the object so we can register our event handler.
+  // Await promises
-  const register_substitute_preview_handler: Action = (node: HTMLElement) => {
+  let drivers: Driver[] | undefined = $state(undefined);
-    node.addEventListener("DropdownChange", update_substitute_preview);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  // Constants
+  const labelwidth: string = "120px";
+
+  // Reactive state
+  let required: boolean = $derived(!substitution);
+  let disabled: boolean = $derived(!$pbUser?.admin);
+  let active_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => d.active));
+  let inactive_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => !d.active));
+  let substitute_value: string = $state(substitution?.substitute ?? "");
+  let driver_value: string = $state(substitution?.for ?? "");
+  let race_value: string = $state(substitution?.race ?? "");
+
+  // Update preview
+  $effect(() => {
+    if (!drivers) return;
+    const src: string = get_by_value(drivers, "id", substitute_value)?.headshot_url ?? "";
+    const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
+    if (img) img.src = src;
+  });
+
+  // Database actions
+  const update_substitution = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!substitute_value || substitute_value === "") {
+        toastStore.trigger(get_error_toast("Please select a substitute driver!"));
+        return;
+      }
+      if (!driver_value || driver_value === "") {
+        toastStore.trigger(get_error_toast("Please select a replaced driver!"));
+        return;
+      }
+      if (!race_value || race_value === "") {
+        toastStore.trigger(get_error_toast("Please select a race!"));
+        return;
+      }
+
+      const substitution_data = {
+        substitute: substitute_value,
+        for: driver_value,
+        race: race_value,
       };
 
-  // This event handler is registered to the Dropdown's <input> element through the action above.
+      try {
-  const update_substitute_preview = (event: Event) => {
+        if (create) {
-    const target: HTMLInputElement = event.target as HTMLInputElement;
+          await pb.collection("substitutions").create(substitution_data);
+        } else {
+          if (!substitution?.id) {
+            toastStore.trigger(get_error_toast("Invalid substitution id!"));
+            return;
+          }
+          await pb.collection("substitutions").update(substitution.id, substitution_data);
+        }
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+    return handler;
+  };
 
-    // The option "label" gets put into the Dropdown's input value,
+  const delete_substitution = async (): Promise<void> => {
-    // so we need to lookup the driver by "code".
+    if (!substitution?.id) {
-    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
+      toastStore.trigger(get_error_toast("Invalid substitution id!"));
-    if (src) {
+      return;
-      const preview: HTMLImageElement = document.getElementById(
+    }
-        `update_substitution_headshot_preview_${substitution?.id ?? "create"}`,
-      ) as HTMLImageElement;
 
-      if (preview) preview.src = src;
+    try {
+      await pb.collection("substitutions").delete(substitution.id);
+      modalStore.close();
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
     }
   };
 </script>
 
+{#await data.drivers then drivers}
   <Card
     imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
-    headshot_template}
+      get_driver_headshot_template(data.graphics)}
-  imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
+    imgid="headshot_preview"
     width="w-full sm:w-auto"
     imgwidth={DRIVER_HEADSHOT_WIDTH}
     imgheight={DRIVER_HEADSHOT_HEIGHT}
     imgonclick={(event: Event) => modalStore.close()}
   >
-  <form method="POST" enctype="multipart/form-data">
-    <!-- This is also disabled, because the ID should only be -->
-    <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if substitution && !disable_inputs}
-      <input name="id" type="hidden" value={substitution.id} />
-    {/if}
-
     <div class="flex flex-col gap-2">
       <!-- Substitute select -->
       <Dropdown
-        name="substitute"
+        bind:value={substitute_value}
-        input_variable={substitute_select_value}
+        options={driver_dropdown_options(inactive_drivers)}
-        action={register_substitute_preview_handler}
+        {labelwidth}
-        options={driver_select_options}
+        {disabled}
-        labelwidth="120px"
+        {required}
-        disabled={disable_inputs}
-        required={require_inputs}
       >
         Substitute
       </Dropdown>
 
       <!-- Driver select -->
       <Dropdown
-        name="for"
+        bind:value={driver_value}
-        input_variable={driver_select_value}
+        options={driver_dropdown_options(active_drivers)}
-        options={driver_select_options}
+        {labelwidth}
-        labelwidth="120px"
+        {disabled}
-        disabled={disable_inputs}
+        {required}
-        required={require_inputs}
       >
         For
       </Dropdown>
 
       <!-- Race select -->
+      {#await data.races then races}
         <Dropdown
-        name="race"
+          bind:value={race_value}
-        input_variable={race_select_value}
+          options={race_dropdown_options(races)}
-        options={race_select_options}
+          {labelwidth}
-        labelwidth="120px"
+          {disabled}
-        disabled={disable_inputs}
+          {required}
-        required={require_inputs}
         >
           Race
         </Dropdown>
+      {/await}
 
       <!-- Save/Delete buttons -->
       <div class="flex justify-end gap-2">
         {#if substitution}
-          <Button
+          <Button onclick={update_substitution()} color="secondary" {disabled} width="w-1/2">
-            formaction="?/update_substitution"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-          >
             Save Changes
           </Button>
-          <Button
+          <Button onclick={delete_substitution} color="primary" {disabled} width="w-1/2">
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_substitution"
-            width="w-1/2"
-          >
             Delete
           </Button>
         {:else}
-          <Button formaction="?/create_substitution" color="tertiary" submit width="w-full">
+          <Button onclick={update_substitution(true)} color="tertiary" {disabled} width="w-full">
             Create Substitution
           </Button>
         {/if}
       </div>
     </div>
-  </form>
   </Card>
+{/await}

src/lib/components/cards/TeamCard.svelte

@@ -1,132 +1,239 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
-  import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+  import {
+    FileDropzone,
+    getModalStore,
+    getToastStore,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
   import { Card, Button, Input, LazyImage } from "$lib/components";
   import type { Team } from "$lib/schema";
-  import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config";
+  import {
+    TEAM_BANNER_HEIGHT,
+    TEAM_BANNER_WIDTH,
+    TEAM_LOGO_HEIGHT,
+    TEAM_LOGO_WIDTH,
+  } from "$lib/config";
+  import { get_team_banner_template, get_team_logo_template } from "$lib/database";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import { error } from "@sveltejs/kit";
+  import type { PageData } from "../../../routes/data/season/teams/$types";
 
   interface TeamCardProps {
+    /** Data from the page context */
+    data: PageData;
+
     /** The [Team] object used to prefill values. */
-    team?: Team | undefined;
+    team?: Team;
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the team banner template preview */
-    banner_template?: string;
-
-    /** The [src] of the team logo template preview */
-    logo_template?: string;
   }
 
-  let {
+  let { data, team = undefined }: TeamCardProps = $props();
-    team = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    banner_template = "",
-    logo_template = "",
-  }: TeamCardProps = $props();
-
-  const labelwidth: string = "110px";
-
-  let colorpreview: string = $state(team?.color ?? "white");
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     team = meta.team;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    banner_template = meta.banner_template;
-    logo_template = meta.logo_template;
   }
+
+  const toastStore: ToastStore = getToastStore();
+
+  // Constants
+  const labelwidth: string = "110px";
+
+  // Reactive state
+  let required: boolean = $derived(!team);
+  let disabled: boolean = $derived(!$pbUser?.admin);
+  let name_value: string = $state(team?.name ?? "");
+  let color_value: string = $state(team?.color ?? "");
+  let banner_value: FileList | undefined = $state();
+  let logo_value: FileList | undefined = $state();
+
+  // Database actions
+  const update_team = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!name_value || name_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a name!"));
+        return;
+      }
+      if (!color_value || color_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a color!"));
+        return;
+      }
+
+      // Banner handling
+      let banner_avif: Blob | undefined = undefined;
+      const banner_file: File | undefined =
+        banner_value && banner_value.length === 1 ? banner_value[0] : undefined;
+
+      if (banner_file) {
+        const banner_formdata: FormData = new FormData();
+        banner_formdata.append("image", banner_file);
+        banner_formdata.append("width", TEAM_BANNER_WIDTH.toString());
+        banner_formdata.append("height", TEAM_BANNER_HEIGHT.toString());
+
+        try {
+          const response = await fetch("/api/compress", {
+            method: "POST",
+            body: banner_formdata,
+          });
+
+          if (!response.ok) {
+            error(500, "Compression failed.");
+          }
+
+          banner_avif = await response.blob();
+        } catch (error) {
+          toastStore.trigger(get_error_toast("" + error));
+        }
+      }
+
+      // Logo handling
+      let logo_avif: Blob | undefined = undefined;
+      const logo_file: File | undefined =
+        logo_value && logo_value.length === 1 ? logo_value[0] : undefined;
+
+      if (logo_file) {
+        const logo_formdata: FormData = new FormData();
+        logo_formdata.append("image", logo_file);
+        logo_formdata.append("width", TEAM_LOGO_WIDTH.toString());
+        logo_formdata.append("height", TEAM_LOGO_HEIGHT.toString());
+
+        try {
+          const response = await fetch("/api/compress", {
+            method: "POST",
+            body: logo_formdata,
+          });
+
+          if (!response.ok) {
+            error(500, "Compression failed.");
+          }
+
+          logo_avif = await response.blob();
+        } catch (error) {
+          toastStore.trigger(get_error_toast("" + error));
+        }
+      }
+
+      let team_data = {
+        name: name_value,
+        color: color_value,
+        banner: banner_avif,
+        logo: logo_avif,
+      };
+
+      // HACK: Having only a single file for the update request
+      //       doesn't work with pocketbase for some reason
+      if (team_data.banner === undefined) {
+        delete team_data.banner;
+      }
+      if (team_data.logo === undefined) {
+        delete team_data.logo;
+      }
+
+      try {
+        if (create) {
+          if (!banner_avif) {
+            toastStore.trigger(get_error_toast("Please upload a single team banner!"));
+            return;
+          }
+          if (!logo_avif) {
+            toastStore.trigger(get_error_toast("Please upload a single team logo!"));
+            return;
+          }
+          await pb.collection("teams").create(team_data);
+        } else {
+          if (!team?.id) {
+            toastStore.trigger(get_error_toast("Invalid team id!"));
+            return;
+          }
+          await pb.collection("teams").update(team.id, team_data);
+        }
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+
+  const delete_team = async (): Promise<void> => {
+    if (!team?.id) {
+      toastStore.trigger(get_error_toast("Invalid team id!"));
+      return;
+    }
+
+    try {
+      await pb.collection("teams").delete(team.id);
+      modalStore.close();
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+  };
 </script>
 
 <Card
-  imgsrc={team?.banner_url ?? banner_template}
+  imgsrc={team?.banner_url ?? get_team_banner_template(data.graphics)}
-  imgid="update_team_banner_preview_{team?.id ?? 'create'}"
+  imgid="banner_preview"
   width="w-full sm:w-auto"
   imgwidth={TEAM_BANNER_WIDTH}
   imgheight={TEAM_BANNER_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
-    <!-- This is also disabled, because the ID should only be -->
-    <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if team && !disable_inputs}
-      <input name="id" type="hidden" value={team.id} />
-    {/if}
-
   <div class="flex flex-col gap-2">
     <!-- Team name input -->
-      <Input
+    <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
-        id="team_name_{team?.id ?? 'create'}"
-        name="name"
-        value={team?.name ?? ""}
-        {labelwidth}
-        autocomplete="off"
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
       Name
     </Input>
 
     <!-- Team color input -->
     <Input
-        id="team_color_{team?.id ?? 'create'}"
+      bind:value={color_value}
-        name="color"
-        value={team?.color ?? ""}
-        {labelwidth}
       autocomplete="off"
       placeholder="Enter as '#XXXXXX'"
-        disabled={disable_inputs}
+      minlength={7}
-        required={require_inputs}
+      maxlength={7}
-        onchange={(event: Event) => {
+      {labelwidth}
-          colorpreview = (event.target as HTMLInputElement).value;
+      {disabled}
-        }}
+      {required}
     >
       Color
-        <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}"
+      <span class="badge ml-2 border" style="color: {color_value}; background: {color_value}">
-          >C</span
+        C
-        >
+      </span>
     </Input>
 
     <!-- Banner upload -->
     <FileDropzone
       name="banner"
-        id="team_banner_{team?.id ?? 'create'}"
+      bind:files={banner_value}
-        onchange={get_image_preview_event_handler(
+      onchange={get_image_preview_event_handler("banner_preview")}
-          `update_team_banner_preview_${team?.id ?? "create"}`,
+      {disabled}
-        )}
+      {required}
-        disabled={disable_inputs}
-        required={require_inputs}
     >
-        <svelte:fragment slot="message"><span class="font-bold">Upload Banner</span></svelte:fragment>
+      <svelte:fragment slot="message">
+        <span class="font-bold">Upload Banner</span>
+      </svelte:fragment>
     </FileDropzone>
 
     <!-- Logo upload -->
     <FileDropzone
       name="logo"
-        id="team_logo_{team?.id ?? 'create'}"
+      bind:files={logo_value}
-        onchange={get_image_preview_event_handler(
+      onchange={get_image_preview_event_handler("logo_preview")}
-          `update_team_logo_preview_${team?.id ?? "create"}`,
+      {disabled}
-        )}
+      {required}
-        disabled={disable_inputs}
-        required={require_inputs}
     >
       <svelte:fragment slot="message">
         <div class="inline-flex flex-nowrap items-center gap-2">
           <span class="font-bold">Upload Logo</span>
           <LazyImage
-              src={team?.logo_url ?? logo_template}
+            src={team?.logo_url ?? get_team_logo_template(data.graphics)}
-              id="update_team_logo_preview_{team?.id ?? 'create'}"
+            id="logo_preview"
             imgwidth={32}
             imgheight={32}
           />
@@ -137,30 +244,13 @@
     <!-- Save/Delete buttons -->
     <div class="flex justify-end gap-2">
       {#if team}
-          <Button
+        <Button onclick={update_team()} color="secondary" {disabled} width="w-1/2">Save</Button>
-            formaction="?/update_team"
+        <Button onclick={delete_team} color="primary" {disabled} width="w-1/2">Delete</Button>
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-          >
-            Save
-          </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_team"
-            width="w-1/2"
-          >
-            Delete
-          </Button>
       {:else}
-          <Button formaction="?/create_team" color="tertiary" submit width="w-full"
+        <Button onclick={update_team(true)} color="tertiary" {disabled} width="w-full">
-            >Create Team</Button
+          Create Team
-          >
+        </Button>
       {/if}
     </div>
   </div>
-  </form>
 </Card>

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

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
   import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
 
   const is_at_path = (path: string): boolean => {
-    const pathname: string = $page.url.pathname;
+    const pathname: string = page.url.pathname;
     // return pathname === path;
     return pathname.endsWith(path);
   };
 
-  interface ButtonProps extends HTMLButtonAttributes {
+  interface ButtonProps {
     children: Snippet;
 
     /** The main color variant, e.g. "primary" or "secondary". */
@@ -22,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;
 
@@ -39,6 +41,15 @@
 
     /** Additional classes to insert */
     extraclass?: string;
+
+    /** An optional onclick event for the button */
+    onclick?: (event: Event) => void;
+
+    /** An optional formaction for the button */
+    formaction?: string;
+
+    /** Optionally disable the button */
+    disabled?: boolean;
   }
 
   let {
@@ -46,30 +57,36 @@
     color = undefined,
     submit = false,
     href = undefined,
+    newtab = false,
     width = "w-auto",
     activate = false,
     activate_href = false,
     trigger_popup = { event: "click", target: "invalid" },
     shadow = false,
     extraclass = "",
+    onclick = () => {},
+    formaction = undefined,
+    disabled = false,
     ...restProps
   }: ButtonProps = $props();
 </script>
 
 {#if href}
-  <!-- HACK: Make the button act as a link using a form -->
+  <a
-  <form action={href} class="contents">
+    {href}
-    <button
+    target={newtab ? "_blank" : undefined}
-      type="submit"
+    rel={newtab ? "noopener noreferrer" : undefined}
-      class="btn m-0 select-none px-2 py-2 {color
+    class="btn m-0 select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {width} {activate
-        ? `variant-filled-${color}`
-        : ''} {width} {activate ? 'btn-hover' : ''} {activate_href && is_at_path(href)
       ? 'btn-hover'
-        : ''} {shadow ? 'shadow' : ''} {extraclass}"
+      : ''} {activate_href && is_at_path(href) ? 'btn-hover' : ''} {shadow
+      ? 'shadow'
+      : ''} {extraclass}"
+    {onclick}
+    {...restProps}
     draggable="false"
-      {...restProps}>{@render children()}</button
   >
-  </form>
+    {@render children()}
+  </a>
 {:else}
   <button
     type={submit ? "submit" : "button"}
@@ -78,6 +95,11 @@
       : ''} {shadow ? 'shadow' : ''} {extraclass}"
     draggable="false"
     use:popup={trigger_popup}
-    {...restProps}>{@render children()}</button
+    {onclick}
+    {formaction}
+    {disabled}
+    {...restProps}
   >
+    {@render children()}
+  </button>
 {/if}

src/lib/components/form/Dropdown.svelte

@@ -1,34 +1,16 @@
 <script lang="ts">
-  import { ListBox, ListBoxItem, popup, type PopupSettings } from "@skeletonlabs/skeleton";
   import type { Snippet } from "svelte";
-  import type { Action } from "svelte/action";
+  import type { HTMLSelectAttributes } from "svelte/elements";
-  import type { HTMLInputAttributes } from "svelte/elements";
+  import { type DropdownOption } from "$lib/components";
-  import { v4 as uuid } from "uuid";
-  import { type DropdownOption, LazyImage } from "$lib/components";
 
-  interface DropdownProps extends HTMLInputAttributes {
+  interface DropdownProps extends HTMLSelectAttributes {
     children: Snippet;
 
-    /** Placeholder for the empty input element */
-    placeholder?: string;
-
-    /** Form name of the input element, to reference input data after form submission */
-    name?: string;
-
     /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
     labelwidth?: string;
 
     /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
-    input_variable: string;
+    value?: string;
-
-    /** Any action to bind to the input element */
-    action?: Action;
-
-    /** The ID of the popup to trigger. UUID by default. */
-    popup_id?: string;
-
-    /** The [PopupSettings] object for the popup to trigger. */
-    popup_settings?: PopupSettings;
 
     /** The options this autocomplete component allows to choose from.
      * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
@@ -38,42 +20,11 @@
 
   let {
     children,
-    placeholder = "",
-    name = "",
     labelwidth = "auto",
-    input_variable,
+    value = $bindable(),
-    action = undefined,
-    popup_id = uuid(),
-    popup_settings = {
-      event: "click",
-      target: popup_id,
-      placement: "bottom",
-      closeQuery: ".listbox-item",
-    },
     options,
     ...restProps
   }: DropdownProps = $props();
-
-  /** Find the "label" of an option by its "value" */
-  const get_label = (value: string): string | undefined => {
-    return options.find((o) => o.value === value)?.label;
-  };
-
-  // Use an action to fill the "input" variable
-  // required to dispatch the custom event using $effect
-  let input: HTMLInputElement | undefined = undefined;
-  const obtain_input: Action = (node: HTMLElement) => {
-    input = node as HTMLInputElement;
-  };
-
-  // This will run everyting "input_variable" changes.
-  // The event is fired when the input's value is updated via JavaScript.
-  $effect(() => {
-    // Just list this so SvelteKit picks it up as dependency
-    input_variable;
-
-    if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
-  });
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@@ -83,55 +34,11 @@
   >
     {@render children()}
   </div>
-  <!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
+  <select bind:value class="!outline-none" {...restProps}>
-  {#if action}
-    <input
-      use:popup={popup_settings}
-      type="button"
-      autocomplete="off"
-      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
-      use:obtain_input
-      use:action
-      onkeypress={(event: Event) => event.preventDefault()}
-      value={get_label(input_variable) ?? placeholder}
-      {...restProps}
-    />
-  {:else}
-    <input
-      use:popup={popup_settings}
-      type="button"
-      autocomplete="off"
-      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
-      use:obtain_input
-      onkeypress={(event: Event) => event.preventDefault()}
-      value={get_label(input_variable) ?? placeholder}
-      {...restProps}
-    />
-  {/if}
-</div>
-
-<div
-  data-popup={popup_id}
-  class="card z-10 w-auto overflow-y-scroll p-2 shadow"
-  style="max-height: 350px;"
->
-  <ListBox>
     {#each options as option}
-      <ListBoxItem bind:group={input_variable} {name} value={option.value}>
+      <option value={option.value} selected={value === option.value}>
-        <div class="flex flex-nowrap">
+        {option.label}
-          {#if option.icon_url}
+      </option>
-            <LazyImage
-              src={option.icon_url}
-              alt=""
-              class="rounded"
-              style="height: 24px;"
-              imgwidth={option.icon_width ?? 0}
-              imgheight={option.icon_height ?? 0}
-            />
-          {/if}
-          <span class="ml-2">{option.label}</span>
-        </div>
-      </ListBoxItem>
     {/each}
-  </ListBox>
+  </select>
 </div>

src/lib/components/form/Input.svelte

@@ -8,11 +8,24 @@
     /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
     labelwidth?: string;
 
+    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
+    value?: string;
+
     /** The type of the input element, e.g. "text". */
     type?: string;
+
+    /** An optional element at the end of the input group */
+    tail?: Snippet;
   }
 
-  let { children, labelwidth = "auto", type = "text", ...restProps }: InputProps = $props();
+  let {
+    children,
+    labelwidth = "auto",
+    value = $bindable(),
+    type = "text",
+    tail = undefined,
+    ...restProps
+  }: InputProps = $props();
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@@ -22,5 +35,8 @@
   >
     {@render children()}
   </div>
-  <input {type} {...restProps} />
+  <input bind:value class="{tail ? '!border-r' : ''} !border-l" {type} {...restProps} />
+  {#if tail}
+    {@render tail()}
+  {/if}
 </div>

src/lib/components/form/Search.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-  import {
-    Autocomplete,
-    popup,
-    type AutocompleteOption,
-    type PopupSettings,
-  } from "@skeletonlabs/skeleton";
-  import type { Snippet } from "svelte";
-  import { v4 as uuid } from "uuid";
-
-  interface SearchProps {
-    children: Snippet;
-
-    /** Placeholder for the empty input element */
-    placeholder?: string;
-
-    /** Form name of the input element, to reference input data after form submission */
-    name?: string;
-
-    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
-    labelwidth?: string;
-
-    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
-    input_variable: string;
-
-    /** The ID of the input element. UUID by default. */
-    input_id?: string;
-
-    /** The ID of the popup to trigger. UUID by default. */
-    popup_id?: string;
-
-    /** The [PopupSettings] object for the popup to trigger. */
-    popup_settings?: PopupSettings;
-
-    /** The event handler updating the [input_variable] after selection. */
-    selection_handler?: (event: CustomEvent<AutocompleteOption<string>>) => void;
-
-    /** The options this autocomplete component allows to choose from.
-     * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
-     */
-    options: AutocompleteOption<string, unknown>[];
-  }
-
-  let {
-    children,
-    placeholder = "",
-    name = "",
-    labelwidth = "auto",
-    input_variable,
-    input_id = uuid(),
-    popup_id = uuid(),
-    popup_settings = {
-      event: "focus-click",
-      target: popup_id,
-      placement: "bottom",
-    },
-    selection_handler = (event: CustomEvent<AutocompleteOption<string>>): void => {
-      input_variable = event.detail.label;
-    },
-    options,
-  }: SearchProps = $props();
-</script>
-
-<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
-  <div
-    class="input-group-shim select-none text-nowrap text-neutral-900"
-    style="width: {labelwidth};"
-  >
-    {@render children()}
-  </div>
-  <input
-    id={input_id}
-    type="search"
-    {placeholder}
-    {name}
-    bind:value={input_variable}
-    use:popup={popup_settings}
-  />
-</div>
-
-<div data-popup={popup_id} class="card z-10 w-auto p-2 shadow" tabindex="-1">
-  <Autocomplete bind:input={input_variable} {options} on:selection={selection_handler} />
-</div>

src/lib/components/index.ts

@@ -1,3 +1,4 @@
+import Countdown from "./Countdown.svelte";
 import LazyImage from "./LazyImage.svelte";
 import LoadingIndicator from "./LoadingIndicator.svelte";
 import Table from "./Table.svelte";
@@ -5,24 +6,31 @@ import Table from "./Table.svelte";
 import Button from "./form/Button.svelte";
 import Dropdown from "./form/Dropdown.svelte";
 import Input from "./form/Input.svelte";
-import Search from "./form/Search.svelte";
 
 import Card from "./cards/Card.svelte";
 import DriverCard from "./cards/DriverCard.svelte";
 import RaceCard from "./cards/RaceCard.svelte";
+import RacePickCard from "./cards/RacePickCard.svelte";
+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";
 
+import ChequeredFlagIcon from "./svg/ChequeredFlagIcon.svelte";
+import EMailIcon from "./svg/EMailIcon.svelte";
 import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
 import NameIcon from "./svg/NameIcon.svelte";
 import PasswordIcon from "./svg/PasswordIcon.svelte";
+import StopwatchIcon from "./svg/StopwatchIcon.svelte";
 import UserIcon from "./svg/UserIcon.svelte";
 
 export {
   // Components
+  Countdown,
   LazyImage,
   LoadingIndicator,
   Table,
@@ -31,22 +39,28 @@ export {
   Button,
   Dropdown,
   Input,
-  Search,
 
   // Cards
   Card,
   DriverCard,
   RaceCard,
+  RacePickCard,
+  RaceResultCard,
+  SeasonPickCard,
   SubstitutionCard,
   TeamCard,
+  TeamSwitchCard,
 
   // Types
   type DropdownOption,
   type TableColumn,
 
   // SVG
+  ChequeredFlagIcon,
+  EMailIcon,
   NameIcon,
   MenuDrawerIcon,
   PasswordIcon,
+  StopwatchIcon,
   UserIcon,
 };

src/lib/components/svg/ChequeredFlagIcon.svelte

@@ -0,0 +1,24 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="h-6 w-6"
+  viewBox="0 0 2400 2304"
+  stroke="currentColor"
+  fill="currentColor"
+>
+  <g id="g4197">
+    <path
+      id="path4145"
+      d="m335.75 1345.9c-184.43-526.94-335.52-959.07-335.75-960.29-0.38434-2.01 102.58-49.62 107.32-49.61 0.96168 0.001 743.15 1889.5 744.16 1894.5 0.3655 1.8202-174.51 73.476-179.32 73.476-0.59033 0-151.97-431.14-336.4-958.09z"
+    />
+    <path
+      id="path4141"
+      fill="#f2f2f2"
+      d="m479.24 1092.4c-221.54-563.11-287.61-732.01-286.84-733.27 7.92-12.81 103.37-85.21 156.29-118.55 226.19-142.47 522.47-212.74 817.01-193.76l10.476 0.67518 237.44 534.25c130.59 293.84 237.59 534.1 237.77 533.92 0.1795-0.1795-52.581-196.04-117.25-435.25-64.665-239.21-117.8-436.29-118.09-437.96l-0.516-3.0317 17.345-3.7869c222.72-48.624 369.79-113.98 489.63-217.57 7.5438-6.5212 15.038-13.257 16.653-14.968 1.7-1.7002 3.5-3.1 4.2-3.1 1.0301 0 455.19 1145.4 456.25 1150.7 0.7419 3.6924-13.803 26.955-29.267 46.807-137.48 176.49-482.03 362.83-734.1 397-156.36 21.198-262.46-15.13-311.29-106.58-6.8919-12.907-7.3571-11.514 9.2052-27.574 83.584-81.054 212.39-148.52 266.24-139.44 49.089 8.2692 39.627 66.512-28.664 176.44l-6.9354 11.164 5.7665-6.1213c212.42-225.49 188.76-339.31-50.521-242.99-248.98 100.22-584.66 349.95-741.13 551.36-5.6613 7.2875-10.616 13.25-11.01 13.25-0.39424 0-130.25-329.23-288.57-731.62z"
+    />
+    <path
+      id="path4"
+      d="m668.98 99.711c-185.2 52.799-345.52 142.32-477.02 260.67l179.35 455.84 60.609-47.91-0.004-0.0117c119.97-95.98 239.95-167.97 407.92-239.95l-120.96-302.41-0.47656-0.0273-21.637-55.258-0.89258-2.2305 0.0176-0.006zm170.86 428.64 191.96 443.91c112.73-48.314 271.77-103.22 403.12-122.47l0.7969-0.7793 91.461-9.9082-181.5-408.37-73.953 1.5723 0.024 0.0527c-155.9 12.01-311.89 48.01-431.86 96zm191.96 443.91c-140.47 70.235-280.93 149.62-410.26 255.96-22.925 18.287-46.909 36.51-67.477 52.494l213.79 543.38c106.09-141.46 281.67-288.69 452.78-401.9l-40.387-94.037 0.457-0.3204zm533.38-769.13c-48.416 14.131-98.297 26.178-149.45 37.271l122.38 453.51c62.388-11.998 112.78-26.395 187.16-55.189l-76.094-207.9-0.3125 0.23242zm160.09 435.59 146.37 405.52c142.16-65.251 229.99-125.98 316.27-208.56l-0.023-0.36719 61.557-62.297-141.23-356.8-71.734 55.709-0.8008-0.19922c-109.06 84.355-199.77 130.11-310.4 166.99zm146.37 405.52c-55.189 28.794-146.37 64.788-215.96 83.984l-0.1152-0.2597-5.2402 1.5449 41.934 101.34c64.01 29.859-6.8158 155.86-132.56 283.7 215.96-326.34-119.98-170.37-239.95-38.392 89.139 200.56 426.63 129.77 704.94-15.887l-25.26-66.021c-0.2045 0.1064-0.4109 0.2179-0.6153 0.3242l-13.688-37.705-3.164-8.2695 0.1035-0.1582z"
+      fill="#343434"
+    />
+  </g>
+</svg>

src/lib/components/svg/EMailIcon.svelte

@@ -0,0 +1,42 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 256 256"
+  fill="currentColor"
+  class="h-4 w-4 opacity-70"
+>
+  <g
+    style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
+    transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
+  >
+    <path
+      d="M 75.546 78.738 H 14.455 C 6.484 78.738 0 72.254 0 64.283 V 25.716 c 0 -7.97 6.485 -14.455 14.455 -14.455 h 61.091 c 7.97 0 14.454 6.485 14.454 14.455 v 38.567 C 90 72.254 83.516 78.738 75.546 78.738 z M 14.455 15.488 c -5.64 0 -10.228 4.588 -10.228 10.228 v 38.567 c 0 5.64 4.588 10.229 10.228 10.229 h 61.091 c 5.64 0 10.228 -4.589 10.228 -10.229 V 25.716 c 0 -5.64 -4.588 -10.228 -10.228 -10.228 H 14.455 z"
+      style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;"
+      transform=" matrix(1 0 0 1 0 0) "
+      stroke-linecap="round"
+    />
+    <path
+      d="M 11.044 25.917 C 21.848 36.445 32.652 46.972 43.456 57.5 c 2.014 1.962 5.105 -1.122 3.088 -3.088 C 35.74 43.885 24.936 33.357 14.132 22.83 C 12.118 20.867 9.027 23.952 11.044 25.917 L 11.044 25.917 z"
+      style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;"
+      transform=" matrix(1 0 0 1 0 0) "
+      stroke-linecap="round"
+    />
+    <path
+      d="M 46.544 57.5 c 10.804 -10.527 21.608 -21.055 32.412 -31.582 c 2.016 -1.965 -1.073 -5.051 -3.088 -3.088 C 65.064 33.357 54.26 43.885 43.456 54.412 C 41.44 56.377 44.529 59.463 46.544 57.5 L 46.544 57.5 z"
+      style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;"
+      transform=" matrix(1 0 0 1 0 0) "
+      stroke-linecap="round"
+    />
+    <path
+      d="M 78.837 64.952 c -7.189 -6.818 -14.379 -13.635 -21.568 -20.453 c -2.039 -1.933 -5.132 1.149 -3.088 3.088 c 7.189 6.818 14.379 13.635 21.568 20.453 C 77.788 69.973 80.881 66.89 78.837 64.952 L 78.837 64.952 z"
+      style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;"
+      transform=" matrix(1 0 0 1 0 0) "
+      stroke-linecap="round"
+    />
+    <path
+      d="M 14.446 68.039 c 7.189 -6.818 14.379 -13.635 21.568 -20.453 c 2.043 -1.938 -1.048 -5.022 -3.088 -3.088 c -7.189 6.818 -14.379 13.635 -21.568 20.453 C 9.315 66.889 12.406 69.974 14.446 68.039 L 14.446 68.039 z"
+      style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(29,29,27); fill-rule: nonzero; opacity: 1;"
+      transform=" matrix(1 0 0 1 0 0) "
+      stroke-linecap="round"
+    />
+  </g>
+</svg>

src/lib/components/svg/StopwatchIcon.svelte

@@ -0,0 +1,27 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 488.7 488.7"
+  fill="currentColor"
+  class="h-4 w-4 opacity-70"
+>
+  <path
+    d="M145.512,284.7c0,7-5.6,12.8-12.7,12.8c-3.5,0-6.7-1.4-9-3.7c-2.3-2.3-3.7-5.5-3.7-9c0-7,5.6-12.8,12.7-12.8
+			C139.712,272,145.512,277.7,145.512,284.7z M154.012,348.2c-5,5-4.9,13,0,18l0,0c5,4.9,13.1,4.9,18-0.1c5-5,4.9-13.1-0.1-18
+			C167.012,343.2,158.913,343.2,154.012,348.2z M235.313,194.5c7,0,12.8-5.7,12.8-12.8s-5.7-12.8-12.8-12.8s-12.8,5.7-12.8,12.8
+			c0,3.5,1.4,6.7,3.7,9C228.613,193.1,231.813,194.5,235.313,194.5z M153.512,221.2c5,4.9,13.1,4.9,18-0.1l0.1-0.1
+			c0.1-0.1,0.1-0.1,0.2-0.2c5-5,5-13,0-18s-13.1-5-18,0c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.1-0.2,0.2
+			C148.512,208.1,148.512,216.2,153.512,221.2L153.512,221.2z M235.613,374.3c-7.1,0-12.7,5.7-12.7,12.8c0,3.5,1.4,6.7,3.7,9
+			s5.5,3.7,9.1,3.7c7,0,12.7-5.7,12.7-12.8C248.413,380,242.712,374.3,235.613,374.3z M299.112,347.8c-5,5-5,13.1,0,18
+			c5,5,13.1,5,18,0c5-5,4.9-13.1,0-18.1C312.112,342.8,304.013,342.8,299.112,347.8z M338.013,271.5c-7.1,0-12.8,5.7-12.8,12.8
+			c0,3.5,1.4,6.7,3.7,9c2.3,2.3,5.5,3.8,9,3.7c7.1,0,12.7-5.7,12.8-12.8C350.813,277.2,345.112,271.5,338.013,271.5z M235.913,488.7
+			c-112.5,0-204.1-91.6-204.1-204.1c0-104.4,78.9-190.7,180.2-202.6V51.1h-12.7c-6.4,0-11.5-5.2-11.5-11.5V11.5
+			c0-6.4,5.2-11.5,11.5-11.5h73.2c6.4,0,11.5,5.2,11.5,11.5v28.1c0,6.4-5.2,11.5-11.5,11.5h-12.7v30.8
+			c38.5,4.5,73.7,19.8,102.6,42.7l16.6-16.6l-1.5-1.5c-4.5-4.5-4.5-11.8,0-16.3l22.8-22.8c4.5-4.5,11.8-4.5,16.3,0l36.9,36.9
+			c4.5,4.5,4.5,11.8,0,16.3l-22.8,22.8c-4.5,4.5-11.8,4.5-16.3,0l-1.5-1.5l-16.6,16.6c27.4,34.7,43.7,78.5,43.7,126
+			C440.013,397.1,348.413,488.7,235.913,488.7z M392.612,284.6c0-86.4-70.3-156.7-156.7-156.7s-156.7,70.3-156.7,156.7
+			s70.2,156.7,156.7,156.7C322.313,441.3,392.612,371,392.612,284.6z M317.913,201.8c4.7,4.7,5,12.3,0.7,17.3l-52,60.9
+			c1.3,9.5-1.6,19.4-8.9,26.7c-12.3,12.3-32.3,12.3-44.7,0c-12.3-12.3-12.3-32.3,0-44.7c7.3-7.3,17.2-10.2,26.7-8.9l60.9-52
+			C305.712,196.8,313.212,197.1,317.913,201.8L317.913,201.8z M244.413,275.4c-5-5-13.1-5-18,0c-5,5-5,13.1,0,18c5,5,13.1,5,18,0
+			C249.413,288.4,249.413,280.4,244.413,275.4z"
+  />
+</svg>

src/lib/config.ts

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

src/lib/database.ts

@@ -1,3 +1,5 @@
+import type { Graphic } from "$lib/schema";
+
 /**
  * Select an element from an [objects] array where [key] matches [value].
  * Supposed to be used on collections returned by the [PocketBase] client.
@@ -9,3 +11,15 @@ export const get_by_value = <T extends object>(
 ): T | undefined => {
   return objects.find((o: T) => (key in o ? o[key] === value : false));
 };
+
+export const get_team_banner_template = (graphics: Graphic[]) =>
+  get_by_value(graphics, "name", "team_banner_template")?.file_url ?? "Invalid";
+
+export const get_team_logo_template = (graphics: Graphic[]) =>
+  get_by_value(graphics, "name", "team_logo_template")?.file_url ?? "Invalid";
+
+export const get_driver_headshot_template = (graphics: Graphic[]) =>
+  get_by_value(graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid";
+
+export const get_race_pictogram_template = (graphics: Graphic[]) =>
+  get_by_value(graphics, "name", "race_pictogram_template")?.file_url ?? "Invalid";

src/lib/date.ts

@@ -0,0 +1,31 @@
+import { format } from "date-fns";
+
+/**
+ * 2025-03-28T17:35
+ */
+export const isodatetimeformat: string = "yyyy-MM-dd'T'HH:mm";
+
+/**
+ * 28.03. 17:35
+ */
+export const shortdatetimeformat: string = "dd.MM.' 'HH:mm";
+
+/**
+ * 2025-03-28
+ */
+export const isodateformat: string = "yyyy-MM-dd";
+
+/**
+ * 17:35
+ */
+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 => {
+  if (!date) return "";
+
+  return format(new Date(date), formatstring);
+};

src/lib/dropdown.ts

@@ -0,0 +1,58 @@
+import type { DropdownOption } from "$lib/components";
+import type { Driver, Race, Team } from "$lib/schema";
+import {
+  DRIVER_HEADSHOT_HEIGHT,
+  DRIVER_HEADSHOT_WIDTH,
+  RACE_PICTOGRAM_HEIGHT,
+  RACE_PICTOGRAM_WIDTH,
+  TEAM_BANNER_HEIGHT,
+  TEAM_BANNER_WIDTH,
+} from "$lib/config";
+
+/**
+ * Generates a list of [DropdownOptions] for a <Dropdown> component.
+ */
+export const team_dropdown_options = (teams: Team[]): DropdownOption[] =>
+  teams
+    .sort((a: Team, b: Team) => a.name.localeCompare(b.name))
+    .map((team: Team) => {
+      return {
+        label: team.name,
+        value: team.id,
+        icon_url: team.banner_url,
+        icon_width: TEAM_BANNER_WIDTH,
+        icon_height: TEAM_BANNER_HEIGHT,
+      };
+    });
+
+/**
+ * Generates a list of [DropdownOptions] for a <Dropdown> component.
+ */
+export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] =>
+  drivers
+    .sort((a: Driver, b: Driver) => a.lastname.localeCompare(b.lastname))
+    .map((driver: Driver) => {
+      return {
+        label: `${driver.firstname} ${driver.lastname}`,
+        value: driver.id,
+        icon_url: driver.headshot_url,
+        icon_width: DRIVER_HEADSHOT_WIDTH,
+        icon_height: DRIVER_HEADSHOT_HEIGHT,
+      };
+    });
+
+/**
+ * Generates a list of [DropdownOptions] for a <Dropdown> component.
+ */
+export const race_dropdown_options = (races: Race[]): DropdownOption[] =>
+  races
+    .sort((a: Race, b: Race) => a.step - b.step)
+    .map((race: Race) => {
+      return {
+        label: race.name,
+        value: race.id,
+        icon_url: race.pictogram_url,
+        icon_width: RACE_PICTOGRAM_WIDTH,
+        icon_height: RACE_PICTOGRAM_HEIGHT,
+      };
+    });

src/lib/fetch.ts

@@ -0,0 +1,375 @@
+import { get } from "svelte/store";
+import { pb, pbUser } from "./pocketbase";
+import type {
+  CurrentPickedUser,
+  Driver,
+  Graphic,
+  Hottake,
+  Race,
+  RacePick,
+  RacePickPoints,
+  RacePickPointsAcc,
+  RacePickPointsTotal,
+  RaceResult,
+  ScrapedDriverStanding,
+  ScrapedRaceResult,
+  ScrapedRaceResultAcc,
+  ScrapedStartingGrid,
+  ScrapedTeamStanding,
+  SeasonPick,
+  SeasonPickedUser,
+  Substitution,
+  Team,
+  User,
+} from "./schema";
+
+/**
+ * Fetch all [Graphics] from the database with file URLs
+ */
+export const fetch_graphics = async (fetch: (_: any) => Promise<Response>): Promise<Graphic[]> => {
+  const graphics: Graphic[] = await pb.collection("graphics").getFullList({ fetch: fetch });
+
+  graphics.map((graphic: Graphic) => {
+    graphic.file_url = pb.files.getURL(graphic, graphic.file);
+  });
+
+  return graphics;
+};
+
+/**
+ * Fetch all [Teams] (sorted ascending by name) from the database with file URLs for banners/logos
+ */
+export const fetch_teams = async (fetch: (_: any) => Promise<Response>): Promise<Team[]> => {
+  const teams: Team[] = await pb.collection("teams").getFullList({
+    sort: "+name",
+    fetch: fetch,
+  });
+
+  teams.map((team: Team) => {
+    team.banner_url = pb.files.getURL(team, team.banner);
+    team.logo_url = pb.files.getURL(team, team.logo);
+  });
+
+  return teams;
+};
+
+/**
+ * Fetch all [Drivers] (sorted ascending by code) from the database with file URLs for headshots
+ */
+export const fetch_drivers = async (fetch: (_: any) => Promise<Response>): Promise<Driver[]> => {
+  const drivers: Driver[] = await pb.collection("drivers").getFullList({
+    sort: "+code",
+    fetch: fetch,
+  });
+
+  drivers.map((driver: Driver) => {
+    driver.headshot_url = pb.files.getURL(driver, driver.headshot);
+  });
+
+  return drivers;
+};
+
+/**
+ * Fetch all [Races] (sorted ascending by step) from the database with file URLs for pictograms
+ */
+export const fetch_races = async (fetch: (_: any) => Promise<Response>): Promise<Race[]> => {
+  const races: Race[] = await pb.collection("races").getFullList({
+    sort: "+step",
+    fetch: fetch,
+  });
+
+  races.map((race: Race) => {
+    race.pictogram_url = pb.files.getURL(race, race.pictogram);
+  });
+
+  return races;
+};
+
+/**
+ * Fetch all [Substitutions] (sorted ascending by race step) from the database
+ */
+export const fetch_substitutions = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<Substitution[]> => {
+  const substitutions: Substitution[] = await pb.collection("substitutions").getFullList({
+    expand: "race",
+    fetch: fetch,
+  });
+
+  // Sort by race step (ascending)
+  substitutions.sort((a: Substitution, b: Substitution) => a.expand.race.step - b.expand.race.step);
+
+  return substitutions;
+};
+
+/**
+ * Fetch all [RaceResults] (sorted descending by race step - newest first) from the database
+ */
+export const fetch_raceresults = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RaceResult[]> => {
+  const raceresults: RaceResult[] = await pb
+    .collection("raceresultsdesc")
+    .getFullList({ fetch: fetch });
+
+  return raceresults;
+};
+
+/**
+ * Fetch all [Users] (sorted ascending by username) with file URLs for avatars
+ */
+export const fetch_users = async (fetch: (_: any) => Promise<Response>): Promise<User[]> => {
+  const users: User[] = await pb
+    .collection("users")
+    .getFullList({ fetch: fetch, sort: "+username" });
+
+  users.map((user: User) => {
+    if (user.avatar) {
+      user.avatar_url = pb.files.getURL(user, user.avatar);
+    }
+  });
+
+  return users;
+};
+
+/**
+ * Fetch the first [Race] without result from the database with file URL for the pictogram
+ */
+export const fetch_currentrace = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<Race | null> => {
+  const currentrace: Race[] = await pb.collection("currentrace").getFullList({ fetch: fetch });
+
+  // The currentrace collection either has a single or no entries
+  if (currentrace.length == 0) return null;
+
+  currentrace[0].pictogram_url = pb.files.getURL(currentrace[0], currentrace[0].pictogram);
+
+  return currentrace[0];
+};
+
+/**
+ * Fetch all visible [RacePicks] from the database
+ */
+export const fetch_visibleracepicks = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePick[]> => {
+  const racepicks: RacePick[] = await pb
+    .collection("visibleracepicks")
+    .getFullList({ fetch: fetch, expand: "user" });
+
+  return racepicks;
+};
+
+/**
+ * Fetch the [RacePick] for the current race by the current user from the database
+ */
+export const fetch_currentracepick = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePick | undefined> => {
+  const user: User | undefined = get(pbUser);
+  if (!user) return undefined;
+
+  const currentpickeduser: CurrentPickedUser = await pb
+    .collection("currentpickedusers")
+    .getOne(user.id, { fetch: fetch });
+
+  if (!currentpickeduser.picked) return undefined;
+
+  const racepick: RacePick = await pb
+    .collection("racepicks")
+    .getOne(currentpickeduser.picked, { fetch: fetch });
+
+  return racepick;
+};
+
+/**
+ * Fetch all visible [SeasonPicks] from the database
+ */
+export const fetch_visibleseasonpicks = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<SeasonPick[]> => {
+  const seasonpicks: SeasonPick[] = await pb
+    .collection("visibleseasonpicks")
+    .getFullList({ fetch: fetch, expand: "user" });
+
+  return seasonpicks;
+};
+
+/**
+ * Fetch all [Hottakes] from the databse
+ */
+export const fetch_hottakes = async (fetch: (_: any) => Promise<Response>): Promise<Hottake[]> => {
+  const hottakes: Hottake[] = await pb
+    .collection("hottakes")
+    .getFullList({ fetch: fetch, expand: "user" });
+
+  return hottakes;
+};
+
+/**
+ * Fetch the [SeasonPick] by the current user from the database
+ */
+export const fetch_currentseasonpick = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<SeasonPick | undefined> => {
+  const user: User | undefined = get(pbUser);
+  if (!user) return undefined;
+
+  const seasonpickeduser: CurrentPickedUser = await pb
+    .collection("seasonpickedusers")
+    .getOne(user.id, { fetch: fetch });
+
+  if (!seasonpickeduser.picked) return undefined;
+
+  const seasonpick: SeasonPick = await pb
+    .collection("seasonpicks")
+    .getOne(seasonpickeduser.picked, { fetch: fetch });
+
+  return seasonpick;
+};
+
+/**
+ * Fetch all [Users] (with the extra field "picked" that is truthy
+ * if the user already picked for the current race)
+ * for the current race with file URLs for the avatars
+ */
+export const fetch_currentpickedusers = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<CurrentPickedUser[]> => {
+  const currentpickedusers: CurrentPickedUser[] = await pb
+    .collection("currentpickedusers")
+    .getFullList({ fetch: fetch });
+
+  currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
+    if (currentpickeduser.avatar) {
+      currentpickeduser.avatar_url = pb.files.getURL(currentpickeduser, currentpickeduser.avatar);
+    }
+  });
+
+  return currentpickedusers;
+};
+
+/**
+ * Fetch all [Users] (with the extra field "picked" that is truthy
+ * if the user already picked for the season) with file URLs for the avatars
+ */
+export const fetch_seasonpickedusers = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<SeasonPickedUser[]> => {
+  const seasonpickedusers: SeasonPickedUser[] = await pb
+    .collection("seasonpickedusers")
+    .getFullList({ fetch: fetch });
+
+  seasonpickedusers.map((seasonpickeduser: SeasonPickedUser) => {
+    if (seasonpickeduser.avatar) {
+      seasonpickeduser.avatar_url = pb.files.getURL(seasonpickeduser, seasonpickeduser.avatar);
+    }
+  });
+
+  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/form.ts

@@ -1,70 +0,0 @@
-import { error } from "@sveltejs/kit";
-
-/**
- * Obtain the value of the key "id" and remove it from the FormData.
- * Throws SvelteKit error(400) if "id" is not found.
- */
-export const form_data_get_and_remove_id = (data: FormData): string => {
-  const id: string | undefined = data.get("id")?.toString();
-  if (!id) error(400, "Missing ID");
-  data.delete("id");
-  return id;
-};
-
-/**
- * Remove empty fields (even whitespace) and empty files from FormData objects.
- * Keys listed in [except] won't be removed although they are empty.
- */
-export const form_data_clean = (data: FormData, except: string[] = []): FormData => {
-  let delete_keys: string[] = [];
-
-  for (const [key, value] of data.entries()) {
-    if (
-      !except.includes(key) &&
-      (value === null ||
-        value === undefined ||
-        (typeof value === "string" && value.trim() === "") ||
-        (typeof value === "object" && "size" in value && value.size === 0))
-    ) {
-      delete_keys.push(key);
-    }
-  }
-
-  delete_keys.forEach((key) => {
-    data.delete(key);
-  });
-
-  return data;
-};
-
-/**
- * Throws SvelteKit error(400) if form_data does not contain key.
- */
-export const form_data_ensure_key = (data: FormData, key: string): void => {
-  if (!data.get(key)) error(400, `Key "${key}" missing from form_data!`);
-};
-
-/**
- * Throws SvelteKit error(400) if form_data does not contain all keys.
- */
-export const form_data_ensure_keys = (data: FormData, keys: string[]): void => {
-  keys.map((key) => form_data_ensure_key(data, key));
-};
-
-/**
- * Modify a single [FormData] element to satisfy PocketBase's date format.
- * Date format: 2024-12-31 12:00:00.000Z
- */
-export const form_data_fix_date = (data: FormData, key: string): boolean => {
-  const value: string | undefined = data.get(key)?.toString();
-  if (!value) return false;
-
-  const date: string = new Date(value).toISOString();
-  data.set(key, date);
-
-  return true;
-};
-
-export const form_data_fix_dates = (data: FormData, keys: string[]): boolean[] => {
-  return keys.map((key) => form_data_fix_date(data, key));
-};

src/lib/pocketbase.ts

@@ -0,0 +1,88 @@
+import Pocketbase, { type RecordModel, type RecordSubscription } from "pocketbase";
+import type { Graphic, User } from "$lib/schema";
+import { env } from "$env/dynamic/public";
+import { invalidate } from "$app/navigation";
+import { get, writable, type Writable } from "svelte/store";
+
+export let pb = new Pocketbase(env.PUBLIC_PBURL || "http://192.168.86.50:8090");
+
+// Keep this in a writable store, because this is basically a $state.
+// We can't use $state in non-component files though.
+export let pbUser: Writable<User | undefined> = writable(undefined);
+
+const update_user = async (record: RecordModel): Promise<void> => {
+  let avatar_url: string;
+  if (record.avatar) {
+    avatar_url = pb.files.getURL(record, record.avatar);
+  } else {
+    const driver_headshot_template: Graphic = await pb
+      .collection("graphics")
+      .getFirstListItem('name="driver_headshot_template"');
+    avatar_url = pb.files.getURL(driver_headshot_template, driver_headshot_template.file);
+  }
+
+  pbUser.set({
+    id: record.id,
+    verified: record.verified,
+    username: record.username,
+    firstname: record.firstname,
+    email: record.email ?? "",
+    avatar: record.avatar,
+    avatar_url: avatar_url,
+    admin: record.admin,
+  } as User);
+};
+
+// Update the pbUser object when authStore changes (e.g. after logging in)
+pb.authStore.onChange(async () => {
+  if (!pb.authStore.isValid) {
+    console.log("pb.authStore is invalid: Setting pbUser to undefined");
+    pbUser.set(undefined);
+    return;
+  }
+  if (!pb.authStore.record) {
+    console.log("pb.authStore.record is null: Setting pbUser to undefined");
+    pbUser.set(undefined);
+    return;
+  }
+
+  await update_user(pb.authStore.record);
+
+  console.log("Updating pbUser...");
+  console.dir(get(pbUser), { depth: null });
+}, true);
+
+export const clear_auth = (): void => {
+  console.log("Cleared pb.authStore");
+  pb.authStore.clear();
+};
+
+export const refresh_auth = async (): Promise<void> => {
+  if (pb.authStore.isValid) {
+    console.log("Refreshed pb.authStore");
+    await pb.collection("users").authRefresh();
+  } else {
+    console.log("pb.autStore is invalid: Did not refresh pb.authStore");
+    pb.authStore.clear();
+  }
+};
+
+/**
+ * Subscribe to PocketBase realtime collections
+ */
+export const subscribe = (collections: string[]) => {
+  collections.forEach((collection: string) => {
+    pb.collection(collection).subscribe("*", (event: RecordSubscription<RecordModel>) => {
+      invalidate(`data:${collection}`);
+    });
+  });
+};
+
+/**
+ * Unsubscribe from PocketBase realtime collections
+ */
+export const unsubscribe = (collections: string[]) => {
+  collections.forEach((collection: string) => {
+    pb.collection(collection).unsubscribe("*");
+  });
+};

src/lib/schema.ts

@@ -11,9 +11,11 @@ export interface Graphic {
 
 export interface User {
   id: string;
+  verified: boolean;
   username: string;
   firstname: string;
-  avatar: string;
+  email?: string;
+  avatar?: string;
   avatar_url?: string;
   admin: boolean;
 }
@@ -39,9 +41,7 @@ export interface Driver {
   headshot_url?: string;
   team: string;
   active: boolean;
-  expand: {
+  started_active: boolean;
-    team: Team;
-  };
 }
 
 export interface Race {
@@ -76,21 +76,123 @@ export interface RacePick {
   pxx?: string;
   dnf?: string;
   expand: {
-    dnf: Driver;
-    pxx: Driver;
-    race: Race;
     user: User;
   };
 }
 
+export interface SeasonPick {
+  id: string;
+  user: string;
+  hottake: string;
+  wdcwinner: string;
+  wccwinner: string;
+  mostovertakes: string;
+  mostdnfs: string;
+  doohanstarts: number;
+  teamwinners: string[];
+  podiums: string[];
+  expand: {
+    user: User;
+  };
+}
+
+export interface Hottake {
+  id: string;
+  user: string;
+  hottake: string;
+}
+
 export interface RaceResult {
   id: string;
   race: string;
   pxxs: string[];
   dnfs: string[];
-  expand: {
+}
-    dnfs: Driver[];
+
-    pxxs: Driver[];
+export interface CurrentPickedUser {
-    race: Race;
+  id: string;
-  };
+  username: string;
+  firstname: string;
+  avatar: string;
+  avatar_url?: string;
+  admin: boolean;
+  picked: string | null;
+}
+
+export interface SeasonPickedUser {
+  id: string;
+  username: string;
+  firstname: string;
+  avatar: string;
+  avatar_url?: string;
+  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/image.ts

@@ -7,17 +7,21 @@ import sharp from "sharp";
  */
 export const image_to_avif = async (
   data: ArrayBuffer,
-  width: number | undefined = undefined,
+  width?: number,
-  height: number | undefined = undefined,
+  height?: number,
   quality: number = 50,
   effort: number = 4,
 ): Promise<Blob> => {
+  console.log(
+    `Compressing ${data.byteLength} Bytes to ${width ?? -1}x${height ?? -1} avif with quality ${quality} and effort ${effort}...`,
+  );
+
   const compressed: Buffer = await sharp(data)
     .resize(width, height)
     .avif({ quality: quality, effort: effort })
     .toBuffer();
 
-  console.log(`image_to_avif: ${data.byteLength} Bytes -> ${compressed.length} Bytes`);
+  console.log(`Compressed ${data.byteLength} Bytes to ${compressed.length} Bytes`);
 
   return new Blob([compressed]);
 };

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

@@ -0,0 +1,63 @@
+import type { ToastSettings } from "@skeletonlabs/skeleton";
+
+export const get_info_toast = (
+  message: string,
+  timeout: number | null = 2000,
+  action_label: string | undefined = undefined,
+  action_response: (() => void) | undefined = undefined,
+): ToastSettings =>
+  get_toast(message, "variant-filled-tertiary", timeout, action_label, action_response);
+
+export const get_warning_toast = (
+  message: string,
+  timeout: number | null = 2000,
+  action_label: string | undefined = undefined,
+  action_response: (() => void) | undefined = undefined,
+): ToastSettings =>
+  get_toast(message, "variant-filled-secondary", timeout, action_label, action_response);
+
+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,
+    background,
+
+    // 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.server.ts

@@ -1,19 +0,0 @@
-import type { LayoutServerLoad } from "./$types";
-
-// On each page load (every route), this function runs serverside.
-// The "locals.user" object is only available on the server,
-// since it's populated inside hooks.server.ts per request.
-// It will populate the "user" attribute of each page's "data" object,
-// so each page has access to the current user (or knows if no one is signed in).
-export const load: LayoutServerLoad = ({ locals }) => {
-  if (locals.user) {
-    return {
-      user: locals.user,
-      admin: locals.user.admin,
-    };
-  }
-
-  return {
-    user: undefined,
-  };
-};

src/routes/+layout.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import "../app.css";
-
+  import { onDestroy, onMount, type Snippet } from "svelte";
-  import type { Snippet } from "svelte";
   import type { LayoutData } from "./$types";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
-
   import {
     Button,
     MenuDrawerIcon,
@@ -17,9 +15,13 @@
     RaceCard,
     SubstitutionCard,
     NameIcon,
+    RacePickCard,
+    RaceResultCard,
+    SeasonPickCard,
+    EMailIcon,
+    TeamSwitchCard,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
-
   import {
     AppBar,
     storePopup,
@@ -27,6 +29,7 @@
     Drawer,
     getDrawerStore,
     Modal,
+    Toast,
     getModalStore,
     type DrawerSettings,
     Avatar,
@@ -34,8 +37,18 @@
     type DrawerStore,
     type ModalStore,
     type ModalComponent,
+    type ToastStore,
+    getToastStore,
+    SlideToggle,
   } from "@skeletonlabs/skeleton";
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
+  import { invalidate } from "$app/navigation";
+  import { get_error_toast, get_info_toast, get_warning_toast } from "$lib/toast";
+  import { clear_auth, pb, pbUser, refresh_auth, subscribe, unsubscribe } from "$lib/pocketbase";
+  import { AVATAR_HEIGHT, AVATAR_WIDTH } from "$lib/config";
+  import { error } from "@sveltejs/kit";
+  import type { User } from "$lib/schema";
+  import type { RecordModel } from "pocketbase";
 
   let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
@@ -46,12 +59,19 @@
   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
+  const toastStore: ToastStore = getToastStore();
+
   // Drawer config
   const drawerStore: DrawerStore = getDrawerStore();
   let drawerOpen: boolean = false;
@@ -81,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,
   };
@@ -120,12 +140,228 @@
 
   // Popups config
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+  // Reactive state
+  let username_value: string = $state($pbUser?.username ?? "");
+  let firstname_value: string = $state($pbUser?.firstname ?? "");
+  let email_value: string = $state($pbUser?.email ?? "");
+  let password_value: string = $state("");
+  let avatar_value: FileList | undefined = $state();
+
+  let registration_mode: boolean = $state(false);
+
+  // Add "Enter" event listeners for login/register text inputs
+  const enter_handler = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      // Cancel the default action, if needed
+      event.preventDefault();
+
+      registration_mode ? update_profile(true) : login();
+    }
+  };
+
+  // Database actions
+  const login = async (): Promise<void> => {
+    if (!username_value || username_value.trim() === "") {
+      toastStore.trigger(get_error_toast("Please enter your username!"));
+      return;
+    }
+    if (!password_value || password_value.trim() === "") {
+      toastStore.trigger(get_error_toast("Please enter your password!"));
+      return;
+    }
+
+    try {
+      await pb.collection("users").authWithPassword(username_value, password_value);
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+
+    await invalidate("data:user");
+    drawerStore.close();
+    username_value = $pbUser?.username ?? "";
+    firstname_value = $pbUser?.firstname ?? "";
+    email_value = $pbUser?.email ?? "";
+    password_value = "";
+  };
+
+  const logout = async (): Promise<void> => {
+    clear_auth();
+
+    await invalidate("data:user");
+    drawerStore.close();
+    username_value = "";
+    firstname_value = "";
+    email_value = "";
+    password_value = "";
+  };
+
+  const forgot_password = async (): Promise<void> => {
+    if (!username_value || username_value.trim() === "") {
+      toastStore.trigger(get_error_toast("Please enter a username!"));
+      return;
+    }
+
+    try {
+      const user: RecordModel = await pb
+        .collection("users")
+        .getFirstListItem(`username="${username_value}"`);
+
+      if (!user.email) {
+        toastStore.trigger(get_error_toast("You did not set a recovery e-mail address!"));
+        return;
+      }
+
+      await pb.collection("users").requestPasswordReset(user.email);
+      toastStore.trigger(get_info_toast("Check your inbox!"));
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+  };
+
+  const update_profile = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      // Avatar handling
+      let avatar_avif: Blob | undefined = undefined;
+      const avatar_file: File | undefined =
+        avatar_value && avatar_value.length === 1 ? avatar_value[0] : undefined;
+
+      if (avatar_file) {
+        const avatar_formdata: FormData = new FormData();
+        avatar_formdata.append("image", avatar_file);
+        avatar_formdata.append("width", AVATAR_WIDTH.toString());
+        avatar_formdata.append("height", AVATAR_HEIGHT.toString());
+
+        try {
+          const response = await fetch("/api/compress", {
+            method: "POST",
+            body: avatar_formdata,
+          });
+
+          if (!response.ok) {
+            error(500, "Compression failed.");
+          }
+
+          avatar_avif = await response.blob();
+        } catch (error) {
+          toastStore.trigger(get_error_toast("" + error));
+        }
+      }
+
+      try {
+        if (create) {
+          if (!username_value || username_value.trim() === "") {
+            toastStore.trigger(get_error_toast("Please enter a username!"));
+            return;
+          }
+          if (!firstname_value || firstname_value.trim() === "") {
+            toastStore.trigger(get_error_toast("Please enter your first name!"));
+            return;
+          }
+          if (!email_value || email_value.trim() === "") {
+            toastStore.trigger(get_error_toast("Please enter your e-mail address!"));
+            return;
+          }
+          if (!password_value || password_value.trim() === "") {
+            toastStore.trigger(get_error_toast("Please enter a password!"));
+            return;
+          }
+
+          await pb.collection("users").create({
+            username: username_value.trim(),
+            firstname: firstname_value.trim(),
+            email: email_value.trim(),
+            emailVisibility: true,
+            password: password_value.trim(),
+            passwordConfirm: password_value.trim(), // lol
+            admin: false,
+          });
+
+          await pb.collection("users").requestVerification(email_value.trim());
+          toastStore.trigger(get_info_toast("Check your inbox!"));
+
+          // Just in case
+          clear_auth();
+
+          await login();
+        } else {
+          if (!$pbUser?.id || $pbUser.id === "") {
+            toastStore.trigger(get_error_toast("Invalid user id!"));
+            return;
+          }
+
+          await pb.collection("users").update($pbUser.id, {
+            username: username_value.trim().length > 0 ? username_value.trim() : $pbUser.username,
+            firstname:
+              firstname_value.trim().length > 0 ? firstname_value.trim() : $pbUser.firstname,
+            avatar: avatar_avif,
+          });
+
+          if (email_value && email_value.trim() !== $pbUser.email) {
+            await pb.collection("users").requestEmailChange(email_value.trim());
+
+            // When changing the email address, the auth token is invalidated
+            await logout();
+            toastStore.trigger(get_info_toast("Check your inbox!"));
+            toastStore.trigger(
+              get_warning_toast("Please login AFTER confirming your e-mail address!", 5000),
+            );
+          }
+
+          drawerStore.close();
+        }
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+
+  // Real-time updates without reloading
+  onMount(() =>
+    subscribe([
+      "users",
+      "drivers",
+      "racepicks",
+      "raceresults",
+      "races",
+      "seasonpicks",
+      "substitutions",
+      "teams",
+      "scraped_startinggrids",
+      "scraped_raceresults",
+      "scraped_driverstandings",
+      "scraped_teamstandings",
+
+      // The view collections do not receive realtime events
+    ]),
+  );
+
+  onDestroy(() =>
+    unsubscribe([
+      "users",
+      "drivers",
+      "racepicks",
+      "raceresults",
+      "races",
+      "seasonpicks",
+      "substitutions",
+      "teams",
+      "scraped_startinggrids",
+      "scraped_raceresults",
+      "scraped_driverstandings",
+      "scraped_teamstandings",
+    ]),
+  );
 </script>
 
 <LoadingIndicator />
 
 <Modal components={modalRegistry} regionBackdrop="!overflow-y-scroll" />
 
+<Toast zIndex="z-[1000]" />
+
 <Drawer zIndex="z-30">
   <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
   {#if $drawerStore.id === "menu_drawer"}
@@ -133,32 +369,59 @@
     <!-- Menu Drawer -->
     <!-- Menu Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <Button href="/racepicks" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/racepicks" onclick={close_drawer} color="surface" width="w-full" shadow>
         Race Picks
       </Button>
-      <Button href="/seasonpicks" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/seasonpicks" onclick={close_drawer} color="surface" width="w-full" shadow>
         Season Picks
       </Button>
-      <Button href="/leaderboard" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/leaderboard" onclick={close_drawer} color="surface" width="w-full" shadow>
         Leaderboard
       </Button>
-      <Button href="/statistics" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/statistics" onclick={close_drawer} color="surface" width="w-full" shadow>
         Statistics
       </Button>
-      <Button href="/rules" onclick={close_drawer} color="surface" width="w-full">Rules</Button>
+      <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 -->
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <Button href="/data/raceresults" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/data/raceresults" onclick={close_drawer} color="surface" width="w-full" shadow>
         Race Results
       </Button>
-      <Button href="/data/season/teams" onclick={close_drawer} color="surface" width="w-full">
+      <Button
+        href="/data/season/teams"
+        onclick={close_drawer}
+        color="surface"
+        width="w-full"
+        shadow
+      >
         Season
       </Button>
-      <Button href="/data/users" onclick={close_drawer} color="surface" width="w-full">
+      <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>
     </div>
@@ -167,80 +430,139 @@
     <!-- Login Drawer -->
     <!-- Login Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <h4 class="h4 select-none">Enter Username and Password</h4>
+      <div class="flex">
-      <form method="POST" class="contents">
+        <h4 class="h4 select-none text-nowrap align-middle font-bold" style="line-height: 32px;">
-        <!-- Supply the pathname so the form can redirect to the current page. -->
+          Login or Register
-        <input type="hidden" name="redirect_url" value={$page.url.pathname} />
+        </h4>
-        <Input name="username" placeholder="Username" autocomplete="username" required>
+        <div class="w-full"></div>
+        <div class="flex gap-2">
+          <span class="align-middle" style="line-height: 32px;">Login</span>
+          <SlideToggle
+            name="registrationmode"
+            background="bg-tertiary-500"
+            active="bg-tertiary-500"
+            bind:checked={registration_mode}
+          />
+          <span class="align-middle" style="line-height: 32px;">Register</span>
+        </div>
+      </div>
+      <Input
+        bind:value={username_value}
+        placeholder="Username"
+        autocomplete="username"
+        minlength={3}
+        maxlength={10}
+        required
+        onkeypress={enter_handler}
+      >
         <UserIcon />
       </Input>
-        <Input name="firstname" placeholder="First Name (leave empty for login)" autocomplete="off">
+      <div
+        class="{registration_mode
+          ? ''
+          : 'mt-[-8px] h-0'} overflow-hidden transition-all duration-150 ease-out"
+      >
+        <Input
+          bind:value={firstname_value}
+          placeholder="First Name"
+          autocomplete="off"
+          tabindex={registration_mode ? 0 : -1}
+          onkeypress={enter_handler}
+        >
           <NameIcon />
         </Input>
-        <Input name="password" type="password" placeholder="Password" autocomplete="off" required>
+      </div>
+      <div
+        class="{registration_mode
+          ? ''
+          : 'mt-[-8px] h-0'} overflow-hidden transition-all duration-150 ease-out"
+      >
+        <Input
+          id="login_email"
+          type="email"
+          bind:value={email_value}
+          placeholder="E-Mail"
+          autocomplete="email"
+          tabindex={registration_mode ? 0 : -1}
+          onkeypress={enter_handler}
+        >
+          <EMailIcon />
+        </Input>
+      </div>
+      <Input
+        id="login_password"
+        bind:value={password_value}
+        type="password"
+        placeholder="Password"
+        autocomplete="off"
+        required
+        onkeypress={enter_handler}
+      >
         <PasswordIcon />
       </Input>
-        <div class="flex justify-end gap-2">
+      <div
-          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit>
+        class="{!registration_mode
-            Login
+          ? ''
-          </Button>
+          : 'mt-[-8px] h-0'} flex w-full gap-2 overflow-hidden transition-all duration-150 ease-out"
-          <Button
-            formaction="/profile?/create_profile"
-            onclick={close_drawer}
-            color="tertiary"
-            submit
       >
+        <Button onclick={forgot_password} color="primary" width="w-full">Forgot Password</Button>
+        <Button onclick={login} color="tertiary" width="w-full" shadow>Login</Button>
+      </div>
+      <div
+        class="{registration_mode
+          ? ''
+          : 'mt-[-8px] h-0'} w-full overflow-hidden transition-all duration-150 ease-out"
+      >
+        <Button onclick={update_profile(true)} color="tertiary" width="w-full" shadow>
           Register
         </Button>
       </div>
-      </form>
     </div>
-  {:else if $drawerStore.id === "profile_drawer" && data.user}
+  {:else if $drawerStore.id === "profile_drawer" && $pbUser}
     <!-- Profile Drawer -->
     <!-- Profile Drawer -->
     <!-- Profile Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <h4 class="h4 select-none">Edit Profile</h4>
+      <h4 class="h4 select-none align-middle font-bold" style="line-height: 32px;">Edit Profile</h4>
-      <form method="POST" enctype="multipart/form-data" class="contents">
-        <!-- Supply the pathname so the form can redirect to the current page. -->
-        <input type="hidden" name="redirect_url" value={$page.url.pathname} />
-        <input type="hidden" name="id" value={data.user.id} />
       <Input
-          name="username"
+        bind:value={username_value}
-          value={data.user.username}
+        maxlength={10}
         placeholder="Username"
         autocomplete="username"
       >
         <UserIcon />
       </Input>
-        <Input
+      <Input bind:value={firstname_value} placeholder="First Name" autocomplete="off">
-          name="firstname"
-          value={data.user.firstname}
-          placeholder="First Name"
-          autocomplete="off"
-        >
         <NameIcon />
       </Input>
+      <Input bind:value={email_value} placeholder="E-Mail" autocomplete="email">
+        <EMailIcon />
+        {#snippet tail()}
+          {#if $pbUser}
+            <div
+              class="input-group-shim select-none text-nowrap text-neutral-900
+              {$pbUser.verified ? 'bg-tertiary-500' : 'bg-primary-500'}"
+            >
+              {$pbUser.verified ? "Verified" : "Not Verified"}
+            </div>
+          {/if}
+        {/snippet}
+      </Input>
       <FileDropzone
         name="avatar"
+        bind:files={avatar_value}
         onchange={get_avatar_preview_event_handler("user_avatar_preview")}
       >
-          <svelte:fragment slot="message"><span class="font-bold">Upload Avatar</span></svelte:fragment>
+        <svelte:fragment slot="message">
+          <span class="font-bold">Upload Avatar</span>
+        </svelte:fragment>
       </FileDropzone>
       <div class="flex justify-end gap-2">
-          <Button
+        <Button onclick={update_profile()} color="secondary" width="w-full" shadow>
-            formaction="/profile?/update_profile"
-            onclick={close_drawer}
-            color="secondary"
-            submit
-          >
           Save Changes
         </Button>
-          <Button formaction="/profile?/logout" onclick={close_drawer} color="primary" submit>
+        <Button onclick={logout} color="primary" width="w-full" shadow>Logout</Button>
-            Logout
-          </Button>
       </div>
-      </form>
     </div>
   {/if}
 </Drawer>
@@ -264,8 +586,9 @@
           </div>
 
           <!-- Site logo -->
-          <Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button
+          <Button href="/racepicks" color="primary">
-          >
+            <span class="text-xl font-bold">Formula 11</span>
+          </Button>
         </div>
       </svelte:fragment>
 
@@ -276,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">
@@ -284,17 +615,17 @@
           <Button
             color="primary"
             onclick={data_drawer}
-            activate={$page.url.pathname.startsWith("/data")}>Data</Button
+            activate={page.url.pathname.startsWith("/data")}>Data</Button
           >
 
-          {#if !data.user}
+          {#if !$pbUser}
             <!-- Login drawer -->
             <Button color="primary" onclick={login_drawer}>Login</Button>
           {:else}
             <!-- Profile drawer -->
             <Avatar
               id="user_avatar_preview"
-              src={data.user.avatar_url}
+              src={$pbUser?.avatar_url}
               rounded="rounded-full"
               width="w-10"
               background="bg-primary-50"

src/routes/+layout.ts

@@ -0,0 +1,28 @@
+import { fetch_graphics } from "$lib/fetch";
+import { pbUser } from "$lib/pocketbase";
+import { get } from "svelte/store";
+import type { LayoutLoad } from "./$types";
+import type { User } from "$lib/schema";
+
+// This makes the page client-side rendered
+export const ssr = false;
+
+// On each page load (every route), this function runs serverside.
+// The "locals.user" object is only available on the server,
+// since it's populated inside hooks.server.ts per request.
+// It will populate the "user" attribute of each page's "data" object,
+// so each page has access to the current user (or knows if no one is signed in).
+export const load: LayoutLoad = async ({ fetch, depends }) => {
+  depends("data:graphics");
+
+  return {
+    // NOTE: Don't do this! The user object will be updated after this, so it will be undefined!
+    //
+    // User information (synchronous)
+    // user: get(pbUser),
+    // admin: get(pbUser)?.admin ?? false,
+
+    // Return static data
+    graphics: await fetch_graphics(fetch),
+  };
+};

src/routes/+page.svelte

@@ -1,5 +0,0 @@
-<svelte:head>
-  <title>F11 - Formula 11</title>
-</svelte:head>
-
-<h1>Formula 11</h1>

src/routes/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export function load() {
+  redirect(302, "/racepicks");
+}

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

@@ -0,0 +1,45 @@
+import { image_to_avif } from "$lib/server/image";
+import { error } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+
+/**
+ * This route is available at /api/compress.
+ * It will return the image as a compressed [avif] [Blob].
+ * We need this because [sharp] is a server-side node library.
+ */
+export const POST: RequestHandler = async ({ request }) => {
+  console.log("Hit /api/compress...");
+  const data: FormData = await request.formData();
+
+  const image: File | undefined = data.has("image") ? (data.get("image") as File) : undefined;
+  const width: number | undefined = data.has("width")
+    ? parseInt(data.get("width")?.toString() ?? "-1")
+    : undefined;
+  const height: number | undefined = data.has("height")
+    ? parseInt(data.get("height")?.toString() ?? "-1")
+    : undefined;
+  const quality: number | undefined = data.has("quality")
+    ? parseInt(data.get("quality")?.toString() ?? "-1")
+    : undefined;
+  const effort: number | undefined = data.has("effort")
+    ? parseInt(data.get("effort")?.toString() ?? "-1")
+    : undefined;
+
+  if (!image) {
+    error(500, "Can't compress image without image data");
+  }
+
+  const compressedImage: Blob = await image_to_avif(
+    await image.arrayBuffer(),
+    width,
+    height,
+    quality,
+    effort,
+  );
+
+  return new Response(compressedImage, {
+    headers: {
+      "Content-Type": "image/avif",
+    },
+  });
+};

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

@@ -1 +1,106 @@
-<h1>Race Results</h1>
+<script lang="ts">
+  import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import { Button, Table, type TableColumn } from "$lib/components";
+  import { get_by_value } from "$lib/database";
+  import { PXX_COLORS } from "$lib/config";
+  import type { RaceResult } from "$lib/schema";
+
+  let { data }: { data: PageData } = $props();
+
+  const modalStore: ModalStore = getModalStore();
+
+  const result_handler = async (event: Event, id?: string) => {
+    const result: RaceResult | undefined = get_by_value(
+      await data.raceresults,
+      "id",
+      id ?? "Invalid",
+    );
+
+    if (id && !result) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceResultCard",
+      meta: {
+        data,
+        result,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const results_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "race",
+      label: "Step",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${get_by_value(await data.races, "id", value)?.step}</span>`,
+    },
+    {
+      data_value_name: "race",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> =>
+        `<span>${get_by_value(await data.races, "id", value)?.name}</span>`,
+    },
+    {
+      data_value_name: "race",
+      label: "Guessed",
+      valuefun: async (value: string): Promise<string> =>
+        `<span>P${get_by_value(await data.races, "id", value)?.pxx}</span>`,
+    },
+    {
+      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(
+            async (id: string, index: number) =>
+              `<span class='w-10 badge mr-2 text-center' style='background: ${PXX_COLORS[index]};'>${get_by_value(await data.drivers, "id", id)?.code ?? "Invalid"}</span>`,
+          ),
+        );
+
+        return pxxs_codes.join("");
+      },
+    },
+    {
+      data_value_name: "dnfs",
+      label: "DNFs",
+      valuefun: async (value: string): Promise<string> => {
+        if (value.length === 0 || value === "") return "";
+
+        const dnfs_array: string[] = value.toString().split(",");
+        const dnfs_codes: string[] = await Promise.all(
+          dnfs_array.map(
+            async (id: string) =>
+              `<span class='w-10 text-center badge mr-2' style='background: ${PXX_COLORS[3]}'>${get_by_value(await data.drivers, "id", id)?.code ?? "Invalid"}</span>`,
+          ),
+        );
+
+        return dnfs_codes.join("");
+      },
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Race Results</title>
+</svelte:head>
+
+<div class="pb-2">
+  <Button width="w-full" color="tertiary" onclick={result_handler} shadow>
+    <span class="font-bold">Create Race Result</span>
+  </Button>
+</div>
+{#await data.raceresults then results}
+  <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

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

src/routes/data/season/+layout.server.ts

@@ -1,82 +0,0 @@
-import type { Team, Driver, Race, Substitution, Graphic } from "$lib/schema";
-import type { LayoutServerLoad } from "./$types";
-
-// This "load" function runs serverside only, as it's located inside +layout.server.ts
-export const load: LayoutServerLoad = async ({ fetch, locals }) => {
-  const fetch_graphics = async (): Promise<Graphic[]> => {
-    const graphics: Graphic[] = await locals.pb
-      .collection("graphics")
-      .getFullList({ fetch: fetch });
-
-    graphics.map((graphic: Graphic) => {
-      graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
-    });
-
-    return graphics;
-  };
-
-  const fetch_teams = async (): Promise<Team[]> => {
-    const teams: Team[] = await locals.pb.collection("teams").getFullList({
-      sort: "+name",
-      fetch: fetch,
-    });
-
-    teams.map((team: Team) => {
-      team.banner_url = locals.pb.files.getURL(team, team.banner);
-      team.logo_url = locals.pb.files.getURL(team, team.logo);
-    });
-
-    return teams;
-  };
-
-  // TODO: Duplicated code from racepicks/+page.server.ts
-  const fetch_drivers = async (): Promise<Driver[]> => {
-    const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
-      sort: "+code",
-      fetch: fetch,
-    });
-
-    drivers.map((driver: Driver) => {
-      driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
-    });
-
-    return drivers;
-  };
-
-  // TODO: Duplicated code from racepicks/+page.server.ts
-  const fetch_races = async (): Promise<Race[]> => {
-    const races: Race[] = await locals.pb.collection("races").getFullList({
-      sort: "+step",
-      fetch: fetch,
-    });
-
-    races.map((race: Race) => {
-      race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
-    });
-
-    return races;
-  };
-
-  const fetch_substitutions = async (): Promise<Substitution[]> => {
-    const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
-      expand: "race",
-      fetch: fetch,
-    });
-
-    // Sort by race step (ascending)
-    substitutions.sort((a, b) => a.expand.race.step - b.expand.race.step);
-
-    return substitutions;
-  };
-
-  return {
-    // Graphics and teams are awaited, since those are visible on page load.
-    graphics: await fetch_graphics(),
-    teams: await fetch_teams(),
-
-    // The rest is streamed gradually, since the user has to switch pages to need them.
-    drivers: fetch_drivers(),
-    races: fetch_races(),
-    substitutions: fetch_substitutions(),
-  };
-};

src/routes/data/season/drivers/+page.server.ts

@@ -1,59 +0,0 @@
-import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import { image_to_avif } from "$lib/server/image";
-import type { Actions } from "@sveltejs/kit";
-
-export const actions = {
-  create_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot"]);
-
-    // The toggle switch will report "on" or nothing
-    data.set("active", data.has("active") ? "true" : "false");
-
-    // Compress headshot
-    const headshot_avif: Blob = await image_to_avif(
-      await (data.get("headshot") as File).arrayBuffer(),
-      DRIVER_HEADSHOT_WIDTH,
-      DRIVER_HEADSHOT_HEIGHT,
-    );
-
-    data.set("headshot", headshot_avif);
-
-    await locals.pb.collection("drivers").create(data);
-  },
-
-  update_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    // The toggle switch will report "on" or nothing
-    data.set("active", data.has("active") ? "true" : "false");
-
-    if (data.has("headshot")) {
-      // Compress headshot
-      const headshot_avif: Blob = await image_to_avif(
-        await (data.get("headshot") as File).arrayBuffer(),
-        DRIVER_HEADSHOT_WIDTH,
-        DRIVER_HEADSHOT_HEIGHT,
-      );
-
-      data.set("headshot", headshot_avif);
-    }
-
-    await locals.pb.collection("drivers").update(id, data);
-  },
-
-  delete_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("drivers").delete(id);
-  },
-} satisfies Actions;

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Button, type DropdownOption, type TableColumn, Table } from "$lib/components";
+  import { Button, type TableColumn, Table } from "$lib/components";
-  import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
   import { get_by_value } from "$lib/database";
   import type { Driver, Team } from "$lib/schema";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
@@ -8,30 +7,36 @@
 
   let { data }: { data: PageData } = $props();
 
-  const update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
+  const modalStore: ModalStore = getModalStore();
-  const update_driver_active_values: { [key: string]: boolean } = $state({});
+  const driver_handler = async (event: Event, id?: string) => {
-  data.drivers.then((drivers: Driver[]) =>
+    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id ?? "Invalid");
-    drivers.forEach((driver: Driver) => {
-      update_driver_team_select_values[driver.id] = driver.team;
-      update_driver_active_values[driver.id] = driver.active;
-    }),
-  );
-  update_driver_team_select_values["create"] = "";
-  update_driver_active_values["create"] = true;
 
-  // All options to create a <Dropdown> component for the teams
+    if (id && !driver) return;
-  const team_dropdown_options: DropdownOption[] = [];
-  data.teams.forEach((team: Team) => {
-    team_dropdown_options.push({
-      label: team.name,
-      value: team.id,
-      icon_url: team.logo_url,
-      icon_width: TEAM_LOGO_WIDTH,
-      icon_height: TEAM_LOGO_HEIGHT,
-    });
-  });
 
-  const drivers_columns: TableColumn[] = [
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "driverCard",
+      meta: {
+        data,
+        driver,
+      },
+    };
+
+    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([
     {
       data_value_name: "code",
       label: "Driver Code",
@@ -44,10 +49,8 @@
       data_value_name: "team",
       label: "Team",
       valuefun: async (value: string): Promise<string> => {
-        const team: Team | undefined = get_by_value(data.teams, "id", value);
+        const team: Team | undefined = get_by_value(await data.teams, "id", value);
-        return team
+        return `<span class='badge mr-2' style='color: ${team?.color ?? "#FFFFFF"}; background: ${team?.color ?? "#FFFFFF"};'>C</span>${team?.name ?? "Invalid"}`;
-          ? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
-          : "<span class='badge variant-filled-primary'>Invalid</span>";
       },
     },
     {
@@ -56,54 +59,32 @@
       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",
-  const modalStore: ModalStore = getModalStore();
+      label: "Started Active",
-
+      valuefun: async (value: boolean): Promise<string> =>
-  /** Shows the DriverCard modal to edit the clicked driver */
+        `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
-  const drivers_handler = async (event: Event, id: string) => {
-    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
-    if (!driver) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        driver: driver,
-        team_select_value: update_driver_team_select_values[driver.id],
-        team_select_options: team_dropdown_options,
-        active_value: update_driver_active_values[driver.id],
-        disable_inputs: !data.admin,
     },
-    };
+  ]);
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_driver_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        team_select_value: update_driver_team_select_values["create"],
-        team_select_options: team_dropdown_options,
-        active_value: update_driver_active_values["create"],
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        headshot_template:
-          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
 </script>
 
-<div class="pb-2">
+<svelte:head>
-  <Button width="w-full" color="tertiary" onclick={create_driver_handler}>
+  <title>Formula 11 - Drivers</title>
+</svelte:head>
+
+<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={drivers_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/drivers/+page.ts

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

src/routes/data/season/races/+page.server.ts

@@ -1,64 +0,0 @@
-import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
-import {
-  form_data_clean,
-  form_data_ensure_keys,
-  form_data_fix_dates,
-  form_data_get_and_remove_id,
-} from "$lib/form";
-import { image_to_avif } from "$lib/server/image";
-import type { Actions } from "@sveltejs/kit";
-
-export const actions = {
-  create_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
-    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
-
-    // Compress pictogram
-    const pictogram_avif: Blob = await image_to_avif(
-      await (data.get("pictogram") as File).arrayBuffer(),
-      RACE_PICTOGRAM_WIDTH,
-      RACE_PICTOGRAM_HEIGHT,
-    );
-
-    data.set("pictogram", pictogram_avif);
-
-    await locals.pb.collection("races").create(data);
-  },
-
-  update_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    // Do not remove empty sprint dates so they can be cleared by updating the record
-    const data: FormData = form_data_clean(await request.formData(), [
-      "sprintqualidate",
-      "sprintdate",
-    ]);
-    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("pictogram")) {
-      // Compress pictogram
-      const pictogram_avif: Blob = await image_to_avif(
-        await (data.get("pictogram") as File).arrayBuffer(),
-        RACE_PICTOGRAM_WIDTH,
-        RACE_PICTOGRAM_HEIGHT,
-      );
-
-      data.set("pictogram", pictogram_avif);
-    }
-
-    await locals.pb.collection("races").update(id, data);
-  },
-
-  delete_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("races").delete(id);
-  },
-} satisfies Actions;

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

@@ -4,10 +4,31 @@
   import type { PageData } from "./$types";
   import { get_by_value } from "$lib/database";
   import type { Race } from "$lib/schema";
+  import { format_date, shortdatetimeformat } from "$lib/date";
 
   let { data }: { data: PageData } = $props();
 
-  const races_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+
+  const race_handler = async (event: Event, id?: string) => {
+    const race: Race | undefined = get_by_value(await data.races, "id", id ?? "Invalid");
+
+    if (id && !race) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceCard",
+      meta: {
+        data,
+        race,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  // The date value functions convert UTC from PocketBase to localtime
+  const races_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",
       label: "Name",
@@ -18,64 +39,40 @@
     {
       data_value_name: "sprintqualidate",
       label: "Sprint Quali",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5), // Cutoff the "Z" from the ISO datetime
+      valuefun: async (value: string): Promise<string> => format_date(value, shortdatetimeformat),
     },
     {
       data_value_name: "sprintdate",
       label: "Sprint Race",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+      valuefun: async (value: string): Promise<string> => format_date(value, shortdatetimeformat),
     },
     {
       data_value_name: "qualidate",
       label: "Quali",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+      valuefun: async (value: string): Promise<string> => format_date(value, shortdatetimeformat),
     },
     {
       data_value_name: "racedate",
       label: "Race",
-      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+      valuefun: async (value: string): Promise<string> => format_date(value, shortdatetimeformat),
     },
-  ];
+  ]);
-
-  const modalStore: ModalStore = getModalStore();
-
-  const races_handler = async (event: Event, id: string) => {
-    const race: Race | undefined = get_by_value(await data.races, "id", id);
-    if (!race) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        race: race,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_race_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        pictogram_template:
-          get_by_value(data.graphics, "name", "race_pictogram_template")?.file_url ?? "Invalid",
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
 </script>
 
+<svelte:head>
+  <title>Formula 11 - Races</title>
+</svelte:head>
+
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_race_handler}>
+  <Button width="w-full" color="tertiary" onclick={race_handler} shadow>
     <span class="font-bold">Create New Race</span>
   </Button>
 </div>
 {#await data.races then races}
-  <Table data={races} columns={races_columns} handler={races_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/races/+page.ts

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

src/routes/data/season/substitutions/+page.server.ts

@@ -1,31 +0,0 @@
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import type { Actions } from "@sveltejs/kit";
-
-export const actions = {
-  create_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["substitute", "for", "race"]);
-
-    await locals.pb.collection("substitutions").create(data);
-  },
-
-  update_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("substitutions").update(id, data);
-  },
-
-  delete_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("substitutions").delete(id);
-  },
-} satisfies Actions;

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

@@ -2,58 +2,34 @@
   import { get_by_value } from "$lib/database";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import type { Driver, Race, Substitution } from "$lib/schema";
+  import type { Race, Substitution } from "$lib/schema";
-  import { Button, Table, type DropdownOption, type TableColumn } from "$lib/components";
+  import { Button, Table, type TableColumn } from "$lib/components";
-  import {
-    DRIVER_HEADSHOT_HEIGHT,
-    DRIVER_HEADSHOT_WIDTH,
-    RACE_PICTOGRAM_HEIGHT,
-    RACE_PICTOGRAM_WIDTH,
-  } from "$lib/config";
 
   let { data }: { data: PageData } = $props();
 
-  const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
+  const modalStore: ModalStore = getModalStore();
-  const update_substitution_for_select_values: { [key: string]: string } = $state({});
+  const substitution_handler = async (event: Event, id?: string) => {
-  const update_substitution_race_select_values: { [key: string]: string } = $state({});
+    const substitution: Substitution | undefined = get_by_value(
-  data.substitutions.then((substitutions: Substitution[]) =>
+      await data.substitutions,
-    substitutions.forEach((substitution: Substitution) => {
+      "id",
-      update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
+      id ?? "Invalid",
-      update_substitution_for_select_values[substitution.id] = substitution.for;
-      update_substitution_race_select_values[substitution.id] = substitution.race;
-    }),
-  );
-  update_substitution_substitute_select_values["create"] = "";
-  update_substitution_for_select_values["create"] = "";
-  update_substitution_race_select_values["create"] = "";
-
-  const driver_dropdown_options: DropdownOption[] = [];
-  data.drivers.then((drivers: Driver[]) =>
-    drivers.forEach((driver: Driver) => {
-      driver_dropdown_options.push({
-        label: driver.code,
-        value: driver.id,
-        icon_url: driver.headshot_url,
-        icon_width: DRIVER_HEADSHOT_WIDTH,
-        icon_height: DRIVER_HEADSHOT_HEIGHT,
-      });
-    }),
     );
 
-  const race_dropdown_options: DropdownOption[] = [];
+    if (id && !substitution) return;
-  data.races.then((races: Race[]) =>
-    races.forEach((race: Race) => {
-      race_dropdown_options.push({
-        label: race.name,
-        value: race.id,
-        icon_url: race.pictogram_url,
-        icon_width: RACE_PICTOGRAM_WIDTH,
-        icon_height: RACE_PICTOGRAM_HEIGHT,
-      });
-    }),
-  );
 
-  const substitutions_columns: TableColumn[] = [
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        data,
+        substitution,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const substitutions_columns: TableColumn[] = $derived([
     {
       data_value_name: "expand",
       label: "Step",
@@ -80,59 +56,23 @@
       valuefun: async (value: string): Promise<string> =>
         get_by_value(await data.races, "id", value)?.name ?? "Invalid",
     },
-  ];
+  ]);
-
-  const modalStore: ModalStore = getModalStore();
-
-  const substitutions_handler = async (event: Event, id: string) => {
-    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
-    if (!substitution) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        substitution: substitution,
-        drivers: await data.drivers,
-        substitute_select_value: update_substitution_substitute_select_values[substitution.id],
-        driver_select_value: update_substitution_for_select_values[substitution.id],
-        race_select_value: update_substitution_race_select_values[substitution.id],
-        driver_select_options: driver_dropdown_options,
-        race_select_options: race_dropdown_options,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_substitution_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        drivers: await data.drivers,
-        substitute_select_value: update_substitution_substitute_select_values["create"],
-        driver_select_value: update_substitution_for_select_values["create"],
-        disable_inputs: !data.admin,
-        race_select_value: update_substitution_race_select_values["create"],
-        driver_select_options: driver_dropdown_options,
-        race_select_options: race_dropdown_options,
-        require_inputs: true,
-        headshot_template:
-          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
 </script>
 
+<svelte:head>
+  <title>Formula 11 - Substitutions</title>
+</svelte:head>
+
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_substitution_handler}>
+  <Button width="w-full" color="tertiary" onclick={substitution_handler} shadow>
     <span class="font-bold">Create New Substitution</span>
   </Button>
 </div>
 {#await data.substitutions then substitutions}
-  <Table data={substitutions} columns={substitutions_columns} handler={substitutions_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/substitutions/+page.ts

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

src/routes/data/season/teams/+page.server.ts

@@ -1,74 +0,0 @@
-import type { Actions } from "./$types";
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import { image_to_avif } from "$lib/server/image";
-import {
-  TEAM_BANNER_HEIGHT,
-  TEAM_BANNER_WIDTH,
-  TEAM_LOGO_HEIGHT,
-  TEAM_LOGO_WIDTH,
-} from "$lib/config";
-
-export const actions = {
-  create_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["name", "banner", "logo", "color"]);
-
-    // Compress banner
-    const banner_avif: Blob = await image_to_avif(
-      await (data.get("banner") as File).arrayBuffer(),
-      TEAM_BANNER_WIDTH,
-      TEAM_BANNER_HEIGHT,
-    );
-    data.set("banner", banner_avif);
-
-    // Compress logo
-    const logo_avif: Blob = await image_to_avif(
-      await (data.get("logo") as File).arrayBuffer(),
-      TEAM_LOGO_WIDTH,
-      TEAM_LOGO_HEIGHT,
-    );
-    data.set("logo", logo_avif);
-
-    await locals.pb.collection("teams").create(data);
-  },
-
-  update_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("banner")) {
-      // Compress banner
-      const banner_avif: Blob = await image_to_avif(
-        await (data.get("banner") as File).arrayBuffer(),
-        TEAM_BANNER_WIDTH,
-        TEAM_BANNER_HEIGHT,
-      );
-      data.set("banner", banner_avif);
-    }
-
-    if (data.has("logo")) {
-      // Compress logo
-      const logo_avif: Blob = await image_to_avif(
-        await (data.get("logo") as File).arrayBuffer(),
-        TEAM_LOGO_WIDTH,
-        TEAM_LOGO_HEIGHT,
-      );
-      data.set("logo", logo_avif);
-    }
-
-    await locals.pb.collection("teams").update(id, data);
-  },
-
-  delete_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("teams").delete(id);
-  },
-} satisfies Actions;

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

@@ -7,7 +7,26 @@
 
   let { data }: { data: PageData } = $props();
 
-  const teams_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+  const team_handler = async (event: Event, id?: string) => {
+    const team: Team | undefined = get_by_value(await data.teams, "id", id ?? "Invalid");
+
+    // If we expect to find a team but don't, abort
+    if (id && !team) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        data,
+        team,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const teams_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",
       label: "Name",
@@ -18,49 +37,25 @@
       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>`,
     },
-  ];
+  ]);
-
-  const modalStore: ModalStore = getModalStore();
-
-  const teams_handler = async (event: Event, id: string) => {
-    const team: Team | undefined = get_by_value(data.teams, "id", id);
-    if (!team) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        team: team,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_team_handler = (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        banner_template:
-          get_by_value(data.graphics, "name", "team_banner_template")?.file_url ?? "Invalid",
-        logo_template:
-          get_by_value(data.graphics, "name", "team_logo_template")?.file_url ?? "Invalid",
-        require_inputs: true,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
 </script>
 
+<svelte:head>
+  <title>Formula 11 - Teams</title>
+</svelte:head>
+
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_team_handler}>
+  <Button width="w-full" color="tertiary" onclick={team_handler} shadow>
     <span class="font-bold">Create New Team</span>
   </Button>
 </div>
-<Table data={data.teams} columns={teams_columns} handler={teams_handler} />
+{#await data.teams then teams}
+  <Table
+    data={teams}
+    columns={teams_columns}
+    handler={team_handler}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
+{/await}

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

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

src/routes/data/users/+page.server.ts

@@ -1,20 +0,0 @@
-import type { User } from "$lib/schema";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async ({ fetch, locals }) => {
-  const fetch_users = async (): Promise<User[]> => {
-    const users: User[] = await locals.pb
-      .collection("users")
-      .getFullList({ fetch: fetch, sort: "+username" });
-
-    users.map((user: User) => {
-      user.avatar_url = locals.pb.files.getURL(user, user.avatar);
-    });
-
-    return users;
-  };
-
-  return {
-    users: await fetch_users(),
-  };
-};

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

@@ -2,16 +2,18 @@
   import { Table, type TableColumn } from "$lib/components";
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
 
   let { data }: { data: PageData } = $props();
 
   const users_columns: TableColumn[] = [
-    {
+    // Don't display the username for login "security" (lol)
-      data_value_name: "username",
+    // {
-      label: "Username",
+    //   data_value_name: "username",
-      valuefun: async (value: string): Promise<string> =>
+    //   label: "Username",
-        `<span class='badge variant-filled-surface'>${value}</span>`,
+    //   valuefun: async (value: string): Promise<string> =>
-    },
+    //     `<span class='badge variant-filled-surface'>${value}</span>`,
+    // },
     {
       data_value_name: "firstname",
       label: "First Name",
@@ -19,14 +21,8 @@
     {
       data_value_name: "avatar_url",
       label: "Avatar",
-      valuefun: async (value: string): Promise<string> => {
+      valuefun: async (value: string): Promise<string> =>
-        if (value) {
+        `<img class='rounded-full w-10 bg-surface-400' src='${value ? value : get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url}'/>`,
-          return `<img class='rounded-full w-10' src='${value}'/>`;
-        }
-
-        // The line height matches h-10 (40px)
-        return `<div class='rounded-full w-10 h-10 bg-surface-500 text-center align-middle' style='line-height: 40px;'>None</div>`;
-      },
     },
     {
       data_value_name: "admin",
@@ -43,4 +39,13 @@
   };
 </script>
 
-<Table data={data.users} columns={users_columns} handler={users_handler} />
+<svelte:head>
+  <title>Formula 11 - Users</title>
+</svelte:head>
+
+<Table
+  data={data.users}
+  columns={users_columns}
+  handler={users_handler}
+  height="h-[calc(100vh-160px)] lg:h-[calc(100vh-76px)]"
+/>

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

@@ -0,0 +1,10 @@
+import { fetch_users } from "$lib/fetch";
+import type { PageLoad } from "../../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:users");
+
+  return {
+    users: await fetch_users(fetch),
+  };
+};

src/routes/leaderboard/+page.svelte

@@ -1 +1,96 @@
-<h1>Leaderboard</h1>
+<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/profile/+page.server.ts

@@ -1,89 +0,0 @@
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import { error, redirect } from "@sveltejs/kit";
-import type { Actions } from "./$types";
-import { image_to_avif } from "$lib/server/image";
-import { AVATAR_HEIGHT, AVATAR_WIDTH } from "$lib/config";
-
-export const actions = {
-  create_profile: async ({ request, locals }): Promise<void> => {
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["username", "firstname", "password", "redirect_url"]);
-
-    // Confirm password lol
-    await locals.pb.collection("users").create({
-      username: data.get("username")?.toString(),
-      firstname: data.get("firstname")?.toString(),
-      password: data.get("password")?.toString(),
-      passwordConfirm: data.get("password")?.toString(),
-      admin: false,
-    });
-
-    // Directly login after registering
-    await locals.pb
-      .collection("users")
-      .authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
-
-    // The current page is sent with the form, redirect to that page
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-
-  // TODO: PocketBase API rule: Only the active user should be able to modify itself
-  update_profile: async ({ request, locals }): Promise<void> => {
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["redirect_url"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("avatar")) {
-      // Compress image
-      const compressed: Blob = await image_to_avif(
-        await (data.get("avatar") as File).arrayBuffer(),
-        AVATAR_WIDTH,
-        AVATAR_HEIGHT,
-      );
-
-      // At most 20kB
-      if (compressed.size > 20000) {
-        error(400, "Avatar too large!");
-      }
-
-      data.set("avatar", compressed);
-    }
-
-    await locals.pb.collection("users").update(id, data);
-
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-
-  login: async ({ request, locals }) => {
-    if (locals.user) {
-      error(400, "Already logged in!");
-    }
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["username", "password", "redirect_url"]);
-
-    try {
-      await locals.pb
-        .collection("users")
-        .authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
-    } catch (err) {
-      error(400, "Failed to login!");
-    }
-
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-
-  logout: async ({ request, locals }) => {
-    if (!locals.user) {
-      error(400, "Not logged in!");
-    }
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["redirect_url"]);
-
-    locals.pb.authStore.clear();
-    locals.user = undefined;
-
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-} satisfies Actions;

src/routes/racepicks/+page.server.ts

@@ -1,72 +0,0 @@
-import type { Driver, Race, RacePick, RaceResult } from "$lib/schema";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async ({ fetch, locals }) => {
-  const fetch_racepicks = async (): Promise<RacePick[]> => {
-    // Don't expand race/pxx/dnf since we already fetched those
-    const racepicks: RacePick[] = await locals.pb
-      .collection("racepicks")
-      .getFullList({ fetch: fetch, expand: "user" });
-
-    // TODO: Fill in the expanded race pictogram_url fields
-
-    return racepicks;
-  };
-
-  const fetch_currentrace = async (): Promise<Race | null> => {
-    const currentrace: Race[] = await locals.pb.collection("currentrace").getFullList();
-
-    // The currentrace collection either has a single or no entries
-    if (currentrace.length == 0) return null;
-
-    currentrace[0].pictogram_url = await locals.pb.files.getURL(
-      currentrace[0],
-      currentrace[0].pictogram,
-    );
-
-    return currentrace[0];
-  };
-
-  const fetch_raceresults = async (): Promise<RaceResult[]> => {
-    // Don't expand races/pxxs/dnfs since we already fetched those
-    const raceresults: RaceResult[] = await locals.pb.collection("raceresults").getFullList();
-
-    return raceresults;
-  };
-
-  // TODO: Duplicated code from data/season/+layout.server.ts
-  const fetch_drivers = async (): Promise<Driver[]> => {
-    const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
-      sort: "+code",
-      fetch: fetch,
-    });
-
-    drivers.map((driver: Driver) => {
-      driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
-    });
-
-    return drivers;
-  };
-
-  // TODO: Duplicated code from data/season/+layout.server.ts
-  const fetch_races = async (): Promise<Race[]> => {
-    const races: Race[] = await locals.pb.collection("races").getFullList({
-      sort: "+step",
-      fetch: fetch,
-    });
-
-    races.map((race: Race) => {
-      race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
-    });
-
-    return races;
-  };
-
-  return {
-    racepicks: await fetch_racepicks(),
-    currentrace: await fetch_currentrace(),
-    raceresults: await fetch_raceresults(),
-    drivers: await fetch_drivers(),
-    races: await fetch_races(),
-  };
-};

src/routes/racepicks/+page.svelte

@@ -1,92 +1,388 @@
 <script lang="ts">
-  import { Button, LazyImage } from "$lib/components";
+  import { ChequeredFlagIcon, Countdown, LazyImage, StopwatchIcon } from "$lib/components";
-  import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+  import {
+    Accordion,
+    AccordionItem,
+    getModalStore,
+    popup,
+    type ModalSettings,
+    type ModalStore,
+    type PopupSettings,
+  } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
+  import {
-  import type { RacePick } from "$lib/schema";
+    AVATAR_HEIGHT,
+    AVATAR_WIDTH,
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    PXX_COLORS,
+    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";
+  import { pbUser } from "$lib/pocketbase";
 
   let { data }: { data: PageData } = $props();
 
   const modalStore: ModalStore = getModalStore();
-  const create_guess_handler = async (event: Event) => {};
+  const racepick_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "racePickCard",
+      meta: {
+        data,
+        racepick: data.racepick,
+      },
+    };
 
-  const currentpick: RacePick | null =
+    modalStore.trigger(modalSettings);
-    data.racepicks.filter(
+  };
-      (racepick: RacePick) =>
+
-        racepick.expand.user.username === data.user?.username &&
+  // Users that have already picked the current race
-        racepick.race === data.currentrace?.id,
+  let pickedusers: Promise<CurrentPickedUser[]> = $derived.by(async () =>
-    )[0] ?? null;
+    (await data.currentpickedusers).filter(
+      (currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
+    ),
+  );
+
+  // Users that didn't already pick the current race
+  let outstandingusers: Promise<CurrentPickedUser[]> = $derived.by(async () =>
+    (await data.currentpickedusers).filter(
+      (currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
+    ),
+  );
+
+  const race_popupsettings = (target: string): PopupSettings => {
+    return {
+      event: "click",
+      target: target,
+      placement: "right-start",
+    };
+  };
 </script>
 
-<!-- TODO: This thing must display the boxes as a column on mobile -->
+<svelte:head>
-{#if data.currentrace}
+  <title>Formula 11 - Race Picks</title>
-  <div class="flex w-full gap-2">
+</svelte:head>
-    <!-- Next Guess Box -->
+
-    <!-- TODO: Countdown -->
+<!-- Only show the userguess if signed in and we have a next race -->
-    <div class="w-full bg-tertiary-500 p-2 shadow rounded-container-token">
+{#if $pbUser && data.currentrace}
-      <h1 class="text-lg font-bold">Next Race</h1>
+  {#await Promise.all( [data.drivers, data.currentpickedusers, pickedusers, outstandingusers], ) then [drivers, currentpicked, picked, outstanding]}
-      <div class="mt-2 flex w-full gap-2">
+    <!-- HACK: relative was required to get the shadow to show up above the upper table occluder? -->
-        <div class="border border-black p-2 rounded-container-token">
+    <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 class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-6">
+            <!-- Show information about the next race -->
+            <div class="card flex w-full min-w-40 flex-col p-2 shadow lg:max-w-40">
+              <span class="font-bold">
+                {data.currentrace.name}
+              </span>
+              {#if data.currentrace.sprintdate}
+                <div class="flex gap-2">
+                  <span class="w-12">SQuali:</span>
+                  <span>{format_date(data.currentrace.sprintqualidate, shortdatetimeformat)}</span>
+                </div>
+                <div class="flex gap-2">
+                  <span class="w-12">SRace:</span>
+                  <span>{format_date(data.currentrace.sprintdate, shortdatetimeformat)}</span>
+                </div>
+              {/if}
+              <div class="flex gap-2">
+                <span class="w-12">Quali:</span>
+                <span>{format_date(data.currentrace.qualidate, shortdatetimeformat)}</span>
+              </div>
+              <div class="flex gap-2">
+                <span class="w-12">Race:</span>
+                <span>{format_date(data.currentrace.racedate, shortdatetimeformat)}</span>
+              </div>
+              <div class="m-auto flex">
+                <div class="mr-1 mt-1">
+                  <StopwatchIcon />
+                </div>
+                <Countdown date={data.currentrace.racedate} extraclass="font-bold" />
+              </div>
+            </div>
+
+            <!-- Show race pictogram -->
+            <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+              <h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
               <LazyImage
                 src={data.currentrace.pictogram_url ?? "Invalid"}
                 imgwidth={RACE_PICTOGRAM_WIDTH}
                 imgheight={RACE_PICTOGRAM_HEIGHT}
-            containerstyle="width: 175px;"
+                containerstyle="height: 105px; margin: auto;"
                 imgstyle="background: transparent;"
               />
             </div>
-        <div class="flex flex-col border border-black p-2 rounded-container-token">
+
-          <!-- TODO: Replace the <b></b> usages with class="font-bold" elsewhere -->
+            <!-- PXX pick -->
-          <span class="font-bold">Step {data.currentrace.step}: {data.currentrace.name}</span>
+            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
-          {#if data.currentrace.sprintqualidate}
+              <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
-            <span>Sprint Quali: {data.currentrace.sprintqualidate}</span>
+              <LazyImage
-            <span>Sprint Race: {data.currentrace.sprintdate}</span>
+                src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
-          {:else}
+                  get_driver_headshot_template(data.graphics)}
-            <span>Sprint: No Sprint :)</span>
+                imgwidth={DRIVER_HEADSHOT_WIDTH}
+                imgheight={DRIVER_HEADSHOT_HEIGHT}
+                containerstyle="height: 115px; margin: auto;"
+                imgclass="bg-transparent cursor-pointer"
+                hoverzoom
+                onclick={racepick_handler}
+              />
+            </div>
+
+            <!-- DNF pick -->
+            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+              <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
+              <LazyImage
+                src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
+                  get_driver_headshot_template(data.graphics)}
+                imgwidth={DRIVER_HEADSHOT_WIDTH}
+                imgheight={DRIVER_HEADSHOT_HEIGHT}
+                containerstyle="height: 115px; margin: auto;"
+                imgclass="bg-transparent cursor-pointer"
+                hoverzoom
+                onclick={racepick_handler}
+              />
+            </div>
+
+            <!-- Show users that have picked -->
+            <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 max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#each picked as user}
+                  <LazyImage
+                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={AVATAR_WIDTH}
+                    imgheight={AVATAR_HEIGHT}
+                    containerstyle="height: 35px; width: 35px;"
+                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
+                  />
+                {/each}
+              </div>
+            </div>
+
+            <!-- Show users that have not picked yet -->
+            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
+              <h1 class="text-nowrap font-bold">
+                Missing ({outstanding.length}/{currentpicked.length}):
+              </h1>
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#each outstanding as user}
+                  <LazyImage
+                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={AVATAR_WIDTH}
+                    imgheight={AVATAR_HEIGHT}
+                    containerstyle="height: 35px; width: 35px;"
+                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
+                  />
+                {/each}
+              </div>
+            </div>
+          </div>
+        </svelte:fragment>
+      </AccordionItem>
+    </Accordion>
+  {/await}
 {/if}
-          <span>Quali: {data.currentrace.qualidate}</span>
-          <span>Race: {data.currentrace.racedate}</span>
-        </div>
-      </div>
-    </div>
 
-    <!-- Your Pick Box -->
+<!-- The fookin table -->
-    {#if currentpick}
+<div
-      <div class="flex flex-col gap-2">
+  class="{!$pbUser
-        <div class="w-full bg-tertiary-500 p-2 shadow rounded-container-token">
+    ? 'mt-[-8px]'
-          <h1 class="text-lg font-bold">Your Pick:</h1>
+    : ''} 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="mt-2 flex flex-col border border-black p-2 rounded-container-token">
-            <span class="text-nowrap">P{data.currentrace.pxx}: {currentpick.pxx}</span>
-            <span class="text-nowrap">DNF: {currentpick.dnf}</span>
-          </div>
-        </div>
-
-        <!-- TODO: Add other button shadows -->
-        <Button
-          width="w-full"
-          color="tertiary"
-          onclick={create_guess_handler}
-          style="height: 100%;"
-          shadow
 >
-          <b>{currentpick ? "Edit Pick" : "Make Pick"}</b>
+  <div class="sticky top-0 z-[15] flex w-full min-w-fit">
-        </Button>
+    <!-- Points color coding legend -->
+    <!-- Use mt-3/mt-4 to account for 2x padding around the avatar. -->
+    <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 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
+          class="hidden h-full w-full text-center align-middle text-sm lg:block"
+          style="background: {PXX_COLORS[3]}; line-height: 20px;"
+        >
+          10
+        </span>
+        <span
+          class="hidden h-full w-full text-center align-middle text-sm lg:block"
+          style="background: {PXX_COLORS[4]}; line-height: 20px;"
+        >
+          6
+        </span>
+        <span
+          class="hidden h-full w-full text-center align-middle text-sm lg:block"
+          style="background: {PXX_COLORS[5]}; line-height: 20px;"
+        >
+          3
+        </span>
+        <span
+          class="hidden h-full w-full text-center align-middle text-sm lg:block"
+          style="background: {PXX_COLORS[6]}; line-height: 20px;"
+        >
+          1
+        </span>
+
+        <!-- Small Screens: -->
+        <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[3]};"></span>
+        <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[4]};"></span>
+        <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[5]};"></span>
+        <span class="block h-full w-full lg:hidden" style="background: {PXX_COLORS[6]};"></span>
       </div>
-    {/if}
     </div>
+
+    <!-- Avatars -->
+    <div class="flex h-16 w-full bg-surface-50">
+      {#await data.currentpickedusers then currentpicked}
+        {#each currentpicked as user}
+          <div
+            class="card ml-1 mt-2 w-full min-w-14 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 hidden text-nowrap text-center align-middle max-2xl:text-sm max-xl:text-xs lg:block"
+              >
+                {user.firstname}
+              </div>
+            </div>
+          </div>
+        {/each}
+      {/await}
+    </div>
+  </div>
+
+  <div class="flex w-full min-w-fit">
+    <!-- Race name display -->
+    <div
+      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"
+    >
+      {#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
+            use:popup={race_popupsettings(race?.id ?? "Invalid")}
+            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"
+          >
+            <!-- For large screens -->
+            <span class="hidden text-sm font-bold lg:block">
+              {race?.step}: {race?.name}
+            </span>
+            <span class="hidden text-sm lg:block">
+              Date: {format_date(race?.racedate ?? "", shortdatetimeformat)}
+            </span>
+            <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
+
+            <!-- For small screens -->
+            <!-- TODO: This requires the race name to end with an emoji, but this is never enforced -->
+            <div class="mx-[2px] my-[18px] block text-lg font-bold lg:hidden">
+              {runes(race?.name ?? "Invalid").at(-1)}
+            </div>
+          </div>
+
+          <!-- The race result popup is triggered on click on the race -->
+          <div data-popup={race?.id ?? "Invalid"} class="card z-50 bg-surface-400 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}
+
+              {#if result.dnfs.length > 0}
+                <hr class="border-black" style="border-style: inset;" />
               {/if}
 
-<!-- "Make Guess"/"Update Guess" button at the top -->
+              {#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}
+      {/await}
+    </div>
 
-<!-- Full-Width box with information about the upcoming race: -->
+    <!-- Picks -->
-<!-- - Name, step, track pictogram, date of (squali), (srace), quali and race -->
+    <div class="flex w-full">
-<!-- - Countdown to next step (either squali, srace, quali or race) -->
+      <!-- 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)}
 
-<!-- "Table" of past guesses (not an actual table this time): -->
+          <div class="ml-1 w-full min-w-14">
-<!-- - Left column (rounded div column with race information: name, step, pxx) -->
+            {#each raceresults as result}
-<!--   - Show full result on-click? -->
+              {@const race = get_by_value(races, "id", result.race)}
-<!-- - Rounded middle block (rest of width) with guesses: -->
+              {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
-<!--   - Just avatar at the top (reduce width) with points below, username on hover? -->
+              {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
-<!--   - Color-coded compact pxx + dnf picks (with podium + skull icons to differentiate?) -->
+              {@const dnfcolor =
+                result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
 
-<!-- Make 2 variations (races as rows and races as columns) + settings toggle? -->
+              {#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

@@ -0,0 +1,35 @@
+import {
+  fetch_currentpickedusers,
+  fetch_currentrace,
+  fetch_drivers,
+  fetch_visibleracepicks,
+  fetch_raceresults,
+  fetch_races,
+  fetch_substitutions,
+  fetch_currentracepick,
+} from "$lib/fetch";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends(
+    "data:user",
+    "data:racepicks",
+    "data:users",
+    "data:raceresults",
+    "data:drivers",
+    "data:races",
+    "data:substitutions",
+  );
+
+  return {
+    racepicks: fetch_visibleracepicks(fetch),
+    currentpickedusers: fetch_currentpickedusers(fetch),
+    raceresults: fetch_raceresults(fetch),
+    drivers: fetch_drivers(fetch),
+    races: fetch_races(fetch),
+    substitutions: fetch_substitutions(fetch),
+
+    currentrace: await fetch_currentrace(fetch),
+    racepick: await fetch_currentracepick(fetch),
+  };
+};

src/routes/rules/+page.svelte

@@ -1 +1,75 @@
-<h1>Rules</h1>
+<script>
+  import { Card } from "$lib/components";
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Rules</title>
+</svelte:head>
+
+<div class="grid grid-cols-1 gap-2 xl:grid-cols-4">
+  <Card>
+    <h1 class="text-lg font-bold">Format</h1>
+
+    <p>
+      Das Tippspiel wird dieses Jahr in zwei Teile aufgespalten: Renntips (für jedes Rennen) und
+      Bonustipps (für die ganze Saison). Renntipps müssen bis Rennstart, Bonustipps bis 1. März
+      abgegeben werden. Tipps können entweder selbst eingetragen werden, oder in die Gruppe
+      geschrieben werden, um gültig zu sein.
+    </p>
+  </Card>
+
+  <Card>
+    <h1 class="text-lg font-bold">Renntipps</h1>
+
+    <p>
+      Jedes Rennen besteht aus zwei Tipps. Einem Platzierungstipp (PX-Tipp) und einem Tipp welcher
+      Fahrer als Erstes das Rennen abbricht (DNF-Tipp). Anders als beim P10-Tipp letztes Jahr wird
+      dieses Mal jedes Rennen eine andere Platzierung getippt. Die zu tippende Platzierung wird auf
+      der Tabellen-Übersichtsseite und im Fahrer-Auswahlmenü angezeigt. DNS/DSQ zählt hierbei nicht
+      als DNF, außerdem besteht die Möglichkeit zu tippen, dass kein Fahrer DNF't oder das Rennen
+      auf PX beendet.
+    </p>
+  </Card>
+
+  <Card>
+    <h1 class="text-lg font-bold">Punkte</h1>
+
+    <p>
+      Für einen korrekten Tipp werden 10 Punkte vergeben. Beim PX-Tipp werden 6 Punkte für einen
+      Platz Abweichung, 3 Punkte für zwei plätze Abweichung und 1 Punkt für 3 Plätze Abweichung
+      vergeben. Beim DNF-Tipp werden keine Abweichungspunkte vergeben, ebensowenig wie bei der
+      Auswahl "Keiner" für den PX-Tipp.
+    </p>
+  </Card>
+
+  <Card>
+    <h1 class="text-lg font-bold">Bonustipps</h1>
+
+    <p>
+      Zusätzlich gibt es dieses Jahr auch Tipps, die sich auf die ganze Saison beziehen und
+      verschieden bepunktet werden.
+    </p>
+    <ul class="ml-6 list-disc">
+      <li>
+        Welches Team wird P2 in der constructors championship? (10 Punkte für die richtige Antwort /
+        0 Punkte für eine falsche Antwort)
+      </li>
+      <li>
+        Welcher Fahrer verbessert am meisten seine Platzierung in der drivers championship im
+        Vergleich zum Vorjahr? (10/0)
+      </li>
+      <li>
+        Welcher Fahrer verschlechtert am meisten seine Platzierung in der drivers championship im
+        Vergleich zum Vorjahr? (10/0)
+      </li>
+      <li>Welcher Fahrer hat die meisten DNFs? (10/0)</li>
+      <li>Welcher Fahrer hat die meisten Überholungen? (10/0)</li>
+      <li>
+        Nenne alle Fahrer, die mindestens einmal auf dem Podium stehen werden. (3/-2, nicht-gegebene
+        Antworten zählen als falsch)
+      </li>
+      <li>Nenne für alle Teams den Sieger des teaminternen Duells. (3/-3)</li>
+      <li>Nenne einen hot-take für die Saison (10/0, "hotness" wird vorher abgesegnet)</li>
+    </ul>
+  </Card>
+</div>

src/routes/seasonpicks/+page.svelte

@@ -1 +1,524 @@
-<h1>Season Picks</h1>
+<script lang="ts">
+  import {
+    Accordion,
+    AccordionItem,
+    getModalStore,
+    type ModalSettings,
+    type ModalStore,
+  } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import type { Driver, Hottake, SeasonPick, SeasonPickedUser, User } from "$lib/schema";
+  import { ChequeredFlagIcon, LazyImage } from "$lib/components";
+  import {
+    get_by_value,
+    get_driver_headshot_template,
+    get_team_banner_template,
+  } from "$lib/database";
+  import {
+    AVATAR_HEIGHT,
+    AVATAR_WIDTH,
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    TEAM_BANNER_HEIGHT,
+    TEAM_BANNER_WIDTH,
+  } from "$lib/config";
+  import Countdown from "$lib/components/Countdown.svelte";
+  import { pbUser } from "$lib/pocketbase";
+
+  let { data }: { data: PageData } = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  const seasonpick_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "seasonPickCard",
+      meta: {
+        data,
+        seasonpick: data.seasonpick,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  // Users that have already picked the season
+  let pickedusers: Promise<SeasonPickedUser[]> = $derived.by(async () =>
+    (await data.seasonpickedusers).filter(
+      (seasonpickeduser: SeasonPickedUser) => seasonpickeduser.picked,
+    ),
+  );
+
+  // Users that didn't already pick the season
+  let outstandingusers: Promise<SeasonPickedUser[]> = $derived.by(async () =>
+    (await data.seasonpickedusers).filter(
+      (seasonpickeduser: SeasonPickedUser) => !seasonpickeduser.picked,
+    ),
+  );
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Season Picks</title>
+</svelte:head>
+
+<!-- Await this here so the accordion doesn't lag when opening -->
+<!-- Only show the stuff if signed in -->
+{#if $pbUser}
+  {#await Promise.all( [data.drivers, data.teams, data.seasonpickedusers, pickedusers, outstandingusers], ) then [drivers, teams, currentpicked, picked, outstanding]}
+    {@const teamwinners = data.seasonpick
+      ? data.seasonpick.teamwinners
+          .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
+      : undefined}
+    {@const podiums = data.seasonpick
+      ? data.seasonpick.podiums
+          .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+          .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
+          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
+      : undefined}
+
+    <!-- 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 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 lg:max-w-40">
+              <h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
+              {#if data.seasonpick}
+                <span class="text-sm">
+                  Jack Doohan startet {data.seasonpick?.doohanstarts} mal.
+                </span>
+              {/if}
+            </div>
+
+            <!-- WDC -->
+            <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 ??
+                  get_driver_headshot_template(data.graphics)}
+                imgwidth={DRIVER_HEADSHOT_WIDTH}
+                imgheight={DRIVER_HEADSHOT_HEIGHT}
+                containerstyle="height: 115px; margin: auto;"
+                imgclass="bg-transparent cursor-pointer"
+                hoverzoom
+                onclick={seasonpick_handler}
+              />
+            </div>
+
+            <!-- WDC -->
+            <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 ??
+                  get_team_banner_template(data.graphics)}
+                imgwidth={TEAM_BANNER_WIDTH}
+                imgheight={TEAM_BANNER_HEIGHT}
+                containerstyle="height: 80px; margin: auto;"
+                imgclass="bg-transparent cursor-pointer rounded-md"
+                hoverzoom
+                onclick={seasonpick_handler}
+              />
+            </div>
+
+            <!-- Overtakes -->
+            <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 ?? "")
+                  ?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                imgwidth={DRIVER_HEADSHOT_WIDTH}
+                imgheight={DRIVER_HEADSHOT_HEIGHT}
+                containerstyle="height: 115px; margin: auto;"
+                imgclass="bg-transparent cursor-pointer"
+                hoverzoom
+                onclick={seasonpick_handler}
+              />
+            </div>
+
+            <!-- DNFs -->
+            <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 ??
+                  get_driver_headshot_template(data.graphics)}
+                imgwidth={DRIVER_HEADSHOT_WIDTH}
+                imgheight={DRIVER_HEADSHOT_HEIGHT}
+                containerstyle="height: 115px; margin: auto;"
+                imgclass="bg-transparent cursor-pointer"
+                hoverzoom
+                onclick={seasonpick_handler}
+              />
+            </div>
+
+            <!-- Teamwinners -->
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
+              <h1 class="text-nowrap font-bold">Teamwinners:</h1>
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#if teamwinners}
+                  {#each teamwinners as winner}
+                    <LazyImage
+                      src={winner.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                      imgwidth={AVATAR_WIDTH}
+                      imgheight={AVATAR_HEIGHT}
+                      containerstyle="height: 35px; width: 35px;"
+                      imgclass="bg-surface-400 rounded-full"
+                      tooltip={winner ? `${winner.firstname} ${winner.lastname}` : undefined}
+                    />
+                  {/each}
+                {/if}
+              </div>
+            </div>
+
+            <!-- Podiums -->
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
+              <h1 class="text-nowrap font-bold">Podiums:</h1>
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#if podiums}
+                  {#each podiums as podium}
+                    <LazyImage
+                      src={podium.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                      imgwidth={AVATAR_WIDTH}
+                      imgheight={AVATAR_HEIGHT}
+                      containerstyle="height: 35px; width: 35px;"
+                      imgclass="bg-surface-400 rounded-full"
+                      tooltip={podium ? `${podium.firstname} ${podium.lastname}` : undefined}
+                    />
+                  {/each}
+                {/if}
+              </div>
+            </div>
+
+            <!-- Show users that have picked -->
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
+              <h1 class="text-nowrap font-bold">
+                Picked ({picked.length}/{currentpicked.length}):
+              </h1>
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#each picked as user}
+                  <LazyImage
+                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={AVATAR_WIDTH}
+                    imgheight={AVATAR_HEIGHT}
+                    containerstyle="height: 35px; width: 35px;"
+                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
+                  />
+                {/each}
+              </div>
+            </div>
+
+            <!-- Show users that have not picked yet -->
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
+              <h1 class="text-nowrap font-bold">
+                Missing ({outstanding.length}/{currentpicked.length}):
+              </h1>
+              <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
+                {#each outstanding as user}
+                  <LazyImage
+                    src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={AVATAR_WIDTH}
+                    imgheight={AVATAR_HEIGHT}
+                    containerstyle="height: 35px; width: 35px;"
+                    imgclass="bg-surface-400 rounded-full"
+                    tooltip={user.firstname}
+                  />
+                {/each}
+              </div>
+            </div>
+          </div>
+        </svelte:fragment>
+      </AccordionItem>
+    </Accordion>
+  {/await}
+{/if}
+
+<!-- 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="{!$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="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>
+
+    <!-- Avatars -->
+    <div class="flex h-16 w-full bg-surface-50">
+      {#await data.seasonpickedusers then seasonpicked}
+        {#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>
+  </div>
+
+  <div class="flex w-full min-w-fit">
+    <!-- Categories -->
+    <div
+      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"
+    >
+      <!-- Hottake -->
+      <div class="card mt-1 flex h-32 w-7 flex-col !rounded-r-none bg-surface-400 p-2 lg:w-36">
+        <span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
+        <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
+      </div>
+
+      {#await data.seasonpicks then seasonpicks}
+        {#if seasonpicks.length > 0}
+          <!-- 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">
+            <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-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 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-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 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-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 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-1 flex h-20 w-7 flex-col !rounded-r-none bg-surface-400 p-2 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-1 flex h-64 w-7 flex-col !rounded-r-none bg-surface-400 p-2 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-1 flex h-64 w-7 flex-col !rounded-r-none bg-surface-400 p-2 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>
+
+    <!-- Picks -->
+    <div class="flex w-full">
+      {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.hottakes, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, hottakes, drivers, teams]}
+        {#each seasonpicked as user}
+          {@const hottake =
+            hottakes.filter((take: Hottake) => take.user === user.id)[0] ?? undefined}
+          {@const pick =
+            seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0] ?? undefined}
+          {@const wdcwinner = pick ? get_by_value(drivers, "id", pick.wdcwinner) : undefined}
+          {@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>
+
+            {#if seasonpicks.length > 0}
+              <!-- Drivers Champion -->
+              <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">
+                  <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
+                  <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"
+                    tooltip={wdcwinner ? `${wdcwinner.firstname} ${wdcwinner.lastname}` : undefined}
+                  />
+                </div>
+              </div>
+
+              <!-- Constructors Champion -->
+              <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">
+                  <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">
+      <span class="mr-2 text-xl font-medium">Season pick modification will be locked in</span>
+      <Countdown date={currentrace.qualidate} gotext="0d 0h 0m" extraclass="font-bold text-xl" />
+      <span class="ml-2 text-xl font-medium">.</span>
+    </div>
+  {/if}
+{/await}

src/routes/seasonpicks/+page.ts

@@ -0,0 +1,25 @@
+import {
+  fetch_currentseasonpick,
+  fetch_drivers,
+  fetch_hottakes,
+  fetch_seasonpickedusers,
+  fetch_visibleseasonpicks,
+  fetch_teams,
+  fetch_currentrace,
+} from "$lib/fetch";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:teams", "data:drivers", "data:seasonpicks", "data:user", "data:users");
+
+  return {
+    teams: fetch_teams(fetch),
+    drivers: fetch_drivers(fetch),
+    seasonpicks: fetch_visibleseasonpicks(fetch),
+    hottakes: fetch_hottakes(fetch),
+    seasonpickedusers: fetch_seasonpickedusers(fetch),
+    currentrace: fetch_currentrace(fetch), // Used for countdown
+
+    seasonpick: await fetch_currentseasonpick(fetch),
+  };
+};

src/routes/statistics/+page.svelte

@@ -1 +1,113 @@
-<h1>Statistics</h1>
+<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"],