set the player id cookie when loading the database and update the background image url logic

src/app/common/database/database.ts

@@ -1,4 +1,5 @@
 import Dexie, { EntityTable } from "dexie";
+import { setPlayerIdCookie } from "../website-utils";
 import Settings from "./types/settings";
 
 const SETTINGS_ID = "SSR"; // DO NOT CHANGE
@@ -19,6 +20,15 @@ export default class Database extends Dexie {
 
     // Populate default settings if the table is empty
     this.on("populate", () => this.populateDefaults());
+
+    this.on("ready", async () => {
+      const settings = await this.getSettings();
+      // If the settings are not found, return
+      if (settings == undefined || settings.playerId == undefined) {
+        return;
+      }
+      setPlayerIdCookie(settings.playerId);
+    });
   }
 
   async populateDefaults() {

src/app/common/image-utils.ts

@@ -7,9 +7,5 @@ import { config } from "../../../config";
  * @returns the new image url
  */
 export function getImageUrl(originalUrl: string) {
-  // Remove the prepending slash
-  if (originalUrl.startsWith("/")) {
-    originalUrl = originalUrl.substring(1);
-  }
   return `${!config.siteUrl.includes("localhost") ? "https://img.fascinated.cc/upload/q_70/" : ""}${originalUrl}`;
 }

src/app/common/website-utils.ts

@@ -0,0 +1,8 @@
+/**
+ * Sets the player id cookie
+ *
+ * @param playerId the player id to set
+ */
+export function setPlayerIdCookie(playerId: string) {
+  document.cookie = `playerId=${playerId}`;
+}

src/app/components/background-image.tsx

@@ -13,10 +13,22 @@ export default function BackgroundImage() {
     return null; // Don't render anything if the background image is not set
   }
 
+  let backgroundImage = settings.backgroundImage;
+  let prependWebsiteUrl = false;
+
+  // Remove the prepending slash
+  if (backgroundImage.startsWith("/")) {
+    prependWebsiteUrl = true;
+    backgroundImage = backgroundImage.substring(1);
+  }
+  if (prependWebsiteUrl) {
+    backgroundImage = config.siteUrl + "/" + backgroundImage;
+  }
+
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
-      src={getImageUrl(config.siteUrl + "/" + settings?.backgroundImage)}
+      src={getImageUrl(backgroundImage)}
       alt="Background image"
       className={`absolute -z-50 object-cover w-screen h-screen blur-sm brightness-[33%] pointer-events-none select-none`}
     />

src/app/components/claim-profile.tsx

@@ -2,6 +2,7 @@
 
 import { CheckIcon } from "@heroicons/react/24/solid";
 import { useLiveQuery } from "dexie-react-hooks";
+import { setPlayerIdCookie } from "../common/website-utils";
 import useDatabase from "../hooks/use-database";
 import { useToast } from "../hooks/use-toast";
 import { Button } from "./ui/button";
@@ -24,10 +25,9 @@ export default function ClaimProfile({ playerId }: Props) {
    */
   async function claimProfile() {
     const settings = await database.getSettings();
-    settings?.setPlayerId(playerId);
 
-    // Set the playerId cookie
+    settings?.setPlayerId(playerId);
-    document.cookie = `playerId=${playerId}`;
+    setPlayerIdCookie(playerId);
     toast({
       title: "Profile Claimed",
       description: "You have claimed this profile.",