Deploy

apps/frontend/components/home/view-switcher/Delves.svelte

@@ -1,14 +1,27 @@
 <script lang="ts">
-    import { delveMap } from '@/data/delve';
+    import sortBy from 'lodash/sortBy';
+
+    import { delveMap, type Delve } from '@/data/delve';
     import { iconLibrary } from '@/shared/icons';
     import { componentTooltip } from '@/shared/utils/tooltips';
     import { userState } from '@/user-home/state/user';
     import { dynamicDataStore } from '@/user-home/stores/dynamicData';
 
     import DelvesTooltip from './DelvesTooltip.svelte';
     import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
+    import { settingsState } from '@/shared/state/settings.svelte';
 
-    let delves = $derived(dynamicDataStore.getCached(userState.general.allRegions[0]).delves);
+    let delves = $derived.by(() => {
+        const dynamicDelves = dynamicDataStore.getCached(userState.general.allRegions[0]).delves;
+        return sortBy(
+            dynamicDelves.map(({ poiId, story }) => [
+                delveMap[poiId],
+                story,
+                settingsState.value.delveRankings[`${poiId}:${story}`],
+            ]) as [Delve, string, number][],
+            ([delve, , ranking]) => `${9 - ranking}:${delve.shortName}`
+        );
+    });
 </script>
 
 <style lang="scss">
@@ -35,12 +48,9 @@
     }}
 >
     <IconifyWrapper icon={iconLibrary.faDungeon} />
-    {#each delves as { poiId, story } (poiId)}
-        {@const delve = delveMap[poiId]}
-        {#if delve}
-            <div class="delve quality{delve.storyRanks[story] ?? 3}">
-                {delve.shortName}
-            </div>
-        {/if}
+    {#each delves as [delve, , ranking] (delve)}
+        <div class="delve quality{ranking}">
+            {delve.shortName}
+        </div>
     {/each}
 </div>

apps/frontend/components/home/view-switcher/DelvesTooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { delveMap } from '@/data/delve';
+    import type { Delve } from '@/data/delve';
 
-    let { delves }: { delves: { poiId: number; story: string }[] } = $props();
+    let { delves }: { delves: [Delve, string, number][] } = $props();
 </script>
 
 <style lang="scss">
@@ -12,25 +12,22 @@
         text-align: left;
     }
     .name {
-        width: 12rem;
+        width: 11rem;
     }
     .story {
-        width: 12rem;
+        width: 13rem;
     }
 </style>
 
 <div class="wowthing-tooltip">
     <h4>Bountiful Delves</h4>
     <table class="table table-striped">
         <tbody>
-            {#each delves as { poiId, story } (poiId)}
-                {@const delve = delveMap[poiId]}
-                {#if delve}
-                    <tr>
-                        <td class="name text-overflow">{delve.name}</td>
-                        <td class="story quality{delve.storyRanks[story] ?? 3}">{story}</td>
-                    </tr>
-                {/if}
+            {#each delves as [delve, story, ranking] (story)}
+                <tr>
+                    <td class="name text-overflow">{delve.name}</td>
+                    <td class="story text-overflow quality{ranking}">{story}</td>
+                </tr>
             {/each}
         </tbody>
     </table>

apps/frontend/components/items/ItemsItem.svelte

@@ -104,8 +104,11 @@
     };
 
     const statEnchants: Record<number, Icon> = {
+        7975: uiIcons.circleP, // Perception
         7977: uiIcons.circleR, // Resourcefulness
+        8003: uiIcons.circleF, // Finesse
         8005: uiIcons.circleM, // Multicrafting
+        8033: uiIcons.circleD, // Deftness
         8035: uiIcons.circleI, // Ingenuity
     };
 

apps/frontend/data/delve.ts

@@ -4,6 +4,7 @@ export type Delve = {
     storyRanks: Record<string, number>;
 };
 
+// Defaults, only used for initial settings creation
 export const delveMap: Record<number, Delve> = {
     8426: {
         name: 'Collegiate Calamity',

apps/frontend/shared/components/forms/CheckboxInput.svelte

@@ -38,7 +38,7 @@
             {name}
             type="checkbox"
             bind:checked={value}
-            onchange={(event) => onChange((event.target as HTMLInputElement).checked)}
+            onchange={(event) => onChange?.((event.target as HTMLInputElement).checked)}
             {disabled}
         />
         <IconifyWrapper

apps/frontend/shared/state/settings.svelte.ts

@@ -16,6 +16,7 @@ import type { Task } from '@/types/tasks';
 
 import { browserState } from './browser.svelte';
 import type { Settings } from '../stores/settings/types';
+import { delveMap } from '@/data/delve';
 
 const languageToSubdomain: Record<Language, string> = {
     [Language.deDE]: 'de',
@@ -126,6 +127,15 @@ function createSettingsState() {
                 }
             }
 
+            for (const [poiId, delve] of getNumberKeyedEntries(delveMap)) {
+                for (const [story, defaultRanking] of Object.entries(delve.storyRanks)) {
+                    const storyKey = `${poiId}:${story}`;
+                    if (newSettings.delveRankings[storyKey] === undefined) {
+                        newSettings.delveRankings[storyKey] = defaultRanking;
+                    }
+                }
+            }
+
             if (Object.keys(newSettings.professions.collectingCharactersV2 || {}).length === 0) {
                 for (const [professionId, characterId] of getNumberKeyedEntries(
                     newSettings.professions.collectingCharacters || {}

apps/frontend/shared/stores/settings/types/settings.ts

@@ -12,6 +12,7 @@ export interface Settings {
     activeView: string;
     customGroups: SettingsCustomGroup[];
     customTasks: SettingsTask[];
+    delveRankings: Record<string, number>;
     guildNames: Record<number, string>;
     tags: SettingsTag[];
     views: SettingsView[];

apps/frontend/user-home/components/settings/Routes.svelte

@@ -8,6 +8,7 @@
     import AuctionsCustom from './sections/SettingsAuctionsCustom.svelte';
     import Account from './sections/SettingsAccount.svelte';
     import Collections from './sections/SettingsCollections.svelte';
+    import Delves from './sections/SettingsDelves.svelte';
     import History from './sections/SettingsHistory.svelte';
     import HomeTable from '@/components/home/HomeTable.svelte';
     import Layout from './sections/SettingsLayout.svelte';
@@ -33,6 +34,7 @@
         '/auctions/custom': AuctionsCustom,
         '/auctions': Auctions,
         '/collections': Collections,
+        '/delves': Delves,
         '/history': History,
         '/leaderboard': Leaderboard,
         '/privacy': Privacy,

apps/frontend/user-home/components/settings/Sidebar.svelte

@@ -72,6 +72,10 @@
             name: 'Collections',
             slug: 'collections',
         },
+        {
+            name: 'Delves',
+            slug: 'delves',
+        },
         {
             name: 'History',
             slug: 'history',

apps/frontend/user-home/components/settings/sections/SettingsDelves.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import sortBy from 'lodash/sortBy';
+
+    import { settingsState } from '@/shared/state/settings.svelte';
+    import { getNumberKeyedEntries } from '@/utils/get-number-keyed-entries';
+    import { delveMap } from '@/data/delve';
+
+    import NumberInput from '@/shared/components/forms/NumberInput.svelte';
+
+    const delves = sortBy(getNumberKeyedEntries(delveMap), ([, delve]) => delve.shortName);
+</script>
+
+<style lang="scss">
+    .delves {
+        break-inside: avoid;
+        columns: 2;
+        column-gap: 1.5rem;
+    }
+    .delve {
+        display: flex;
+        flex-direction: column;
+        gap: 0.1rem;
+
+        :global(fieldset) {
+            margin: 0;
+        }
+        :global(input) {
+            margin: 0;
+            padding-bottom: 0.1rem;
+            padding-top: 0.1rem;
+        }
+    }
+</style>
+
+<div class="settings-block">
+    <h2>Delves</h2>
+
+    <div class="delves">
+        {#each delves as [poiId, delve] (poiId)}
+            {@const stories = sortBy(Object.keys(delve.storyRanks))}
+            <div class="delve">
+                <h3>{delve.name}</h3>
+                {#each stories as story (story)}
+                    {@const storyKey = `${poiId}:${story}`}
+                    <div class="flex-wrapper">
+                        <div class="name quality{settingsState.value.delveRankings[storyKey]}">
+                            {story}
+                        </div>
+                        <div class="ranking">
+                            <NumberInput
+                                name="minimum_level"
+                                minValue={0}
+                                maxValue={5}
+                                bind:value={settingsState.value.delveRankings[storyKey]}
+                            />
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </div>
+</div>

packages/csharp-lib/Models/ApplicationUserSettings.cs

@@ -27,6 +27,7 @@ public class ApplicationUserSettings
     public Dictionary<int, ApplicationUserSettingsAccount> Accounts { get; set; } = new();
     public List<ApplicationUserSettingsCustomGroup>? CustomGroups { get; set; } = new();
     public List<ApplicationUserSettingsCustomTask>? CustomTasks { get; set; } = new();
+    public Dictionary<string, int> DelveRankings { get; set; } = new();
     public Dictionary<int, string> GuildNames { get; set; } = new();
     public List<ApplicationUserSettingsTag>? Tags { get; set; } = new();
     public List<ApplicationUserSettingsView>? Views { get; set; } = new();
@@ -141,6 +142,7 @@ public void Migrate()
 
         CustomGroups ??= new List<ApplicationUserSettingsCustomGroup>();
         CustomTasks ??= new();
+        DelveRankings ??= new Dictionary<string, int>();
         Views ??= new List<ApplicationUserSettingsView>();
 
         if (Views.Count == 0)