Deploy

apps/frontend/components/characters/paperdoll/CharactersPaperdoll.svelte

@@ -12,26 +12,34 @@
 
     let { character }: CharacterProps = $props();
 
-    let selected = $state(character.configuration.backgroundId);
+    let backgroundId = $state(character.configuration.backgroundId);
+    let backgroundBrightness = $state(character.configuration.backgroundBrightness);
+    let backgroundSaturation = $state(character.configuration.backgroundSaturation);
 
     let { backgroundImage, filter } = $derived.by(() => {
         const retBackgroundImage =
             backgroundMap[
-                selected === -1 ? settingsState.value.characters.defaultBackgroundId : selected
+                backgroundId === -1
+                    ? settingsState.value.characters.defaultBackgroundId
+                    : backgroundId
             ];
 
         let retFilter: string = null;
         if (retBackgroundImage) {
             const filterParts: string[] = [];
 
             const brightness =
-                character.configuration.backgroundBrightness !== -1
-                    ? character.configuration.backgroundBrightness
-                    : retBackgroundImage.defaultBrightness;
+                backgroundBrightness !== -1
+                    ? backgroundBrightness
+                    : settingsState.value.characters.defaultBackgroundBrightness !== -1
+                      ? settingsState.value.characters.defaultBackgroundBrightness
+                      : retBackgroundImage.defaultBrightness;
             const saturation =
-                character.configuration.backgroundSaturation !== -1
-                    ? character.configuration.backgroundSaturation
-                    : retBackgroundImage.defaultSaturate;
+                backgroundSaturation !== -1
+                    ? backgroundSaturation
+                    : settingsState.value.characters.defaultBackgroundSaturation !== -1
+                      ? settingsState.value.characters.defaultBackgroundSaturation
+                      : retBackgroundImage.defaultSaturate;
 
             if (brightness != 10) {
                 filterParts.push(`brightness(${brightness / 10})`);
@@ -55,6 +63,13 @@
         return imageUrl ? `${imageUrl}${imagePath}` : imagePath;
     });
 
+    $effect(() => {
+        character.configuration.backgroundBrightness = backgroundBrightness;
+    });
+    $effect(() => {
+        character.configuration.backgroundSaturation = backgroundSaturation;
+    });
+
     const leftSide: InventorySlot[] = [
         InventorySlot.Head,
         InventorySlot.Neck,
@@ -207,13 +222,13 @@
     {/if}
 
     <div class="equipped left">
-        {#each leftSide as inventorySlot}
+        {#each leftSide as inventorySlot (inventorySlot)}
             <Equipped {character} {inventorySlot} />
         {/each}
     </div>
 
     <div class="equipped right">
-        {#each rightSide as inventorySlot}
+        {#each rightSide as inventorySlot (inventorySlot)}
             <Equipped {character} {inventorySlot} leftSide={true} />
         {/each}
     </div>
@@ -237,9 +252,9 @@
 
 {#if !sharedState.public}
     <Configure
-        bind:backgroundBrightness={character.configuration.backgroundBrightness}
-        bind:backgroundSaturation={character.configuration.backgroundSaturation}
-        bind:selected
+        bind:backgroundBrightness
+        bind:backgroundSaturation
+        bind:selected={backgroundId}
         {character}
     />
 {/if}

apps/frontend/components/heirlooms/HeirloomsItem.svelte

@@ -53,7 +53,11 @@
         </WowheadLink>
 
         {#if level !== undefined}
-            <div class="pill {getPercentClass((level / heirloom.upgradeItemIds.length) * 100)}">
+            <div
+                class="pill {getPercentClass(
+                    ((level + (6 - heirloom.upgradeItemIds.length)) / 6) * 100
+                )}"
+            >
                 {level} / {heirloom.upgradeBonusIds.length}
             </div>