From 8ff0b8972fb509dee1e68f682919ce2b0ffbd65a Mon Sep 17 00:00:00 2001
From: Christopher Kaster <me@atomicptr.de>
Date: Tue, 10 Dec 2024 23:48:17 +0100
Subject: [PATCH] add ability to hide weapon talents

---
 src/lib/components/TalentList.svelte | 54 ++++++++++++++++------------
 src/lib/state.svelte.ts              |  1 +
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/TalentList.svelte b/src/lib/components/TalentList.svelte
index 145752a..46d4be2 100644
--- a/src/lib/components/TalentList.svelte
+++ b/src/lib/components/TalentList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { page } from "$app/stores";
 import type { BuildWeapon } from "$lib/build/Build";
+import { configViewWeaponTalents } from "$lib/state.svelte";
 import { translatableString } from "$lib/utils/translatable-string";
 import TalentOptionText from "./TalentOptionText.svelte";
 
@@ -11,35 +12,44 @@ interface Props {
 const { selected }: Props = $props();
 const weaponData = $derived(selected.id !== 0 ? $page.data.weapons[selected.id] : null);
 const available = $derived(selected.talents.some((options) => options.some((v) => v)));
+
+const toggleOpen = () => {
+    configViewWeaponTalents.set(!$configViewWeaponTalents);
+};
 </script>
 
 {#if available}
     <div>
-        <div class="text-xl mb-4">
-            Talents
+        <div class="flex flex-row justify-between text-xl mt-4">
+            <div>Talents</div>
+            <button class="btn btn-xs btn-ghost" onclick={toggleOpen}>
+                {#if $configViewWeaponTalents}-{:else}+{/if}
+            </button>
         </div>
-        {#each selected.talents as row, rowIndex}
-            {#if selected.talents[rowIndex].some(v => v)}
-                <ul class="list-disc pl-4">
-                    <li class="font-bold">
-                        {#if weaponData.talents[rowIndex].name}
-                            {translatableString(weaponData.talents[rowIndex].name)}
-                        {:else}
-                            Talent #{rowIndex + 1}
-                        {/if}
-                    </li>
-
+        {#if $configViewWeaponTalents}
+            {#each selected.talents as row, rowIndex}
+                {#if selected.talents[rowIndex].some(v => v)}
                     <ul class="list-disc pl-4">
-                        {#each row as col, colIndex}
-                            {#if col}
-                                <li>
-                                    <TalentOptionText option={weaponData.talents[rowIndex].options[colIndex]} compact />
-                                </li>
+                        <li class="font-bold">
+                            {#if weaponData.talents[rowIndex].name}
+                                {translatableString(weaponData.talents[rowIndex].name)}
+                            {:else}
+                                Talent #{rowIndex + 1}
                             {/if}
-                        {/each}
+                        </li>
+
+                        <ul class="list-disc pl-4">
+                            {#each row as col, colIndex}
+                                {#if col}
+                                    <li>
+                                        <TalentOptionText option={weaponData.talents[rowIndex].options[colIndex]} compact />
+                                    </li>
+                                {/if}
+                            {/each}
+                        </ul>
                     </ul>
-                </ul>
-            {/if}
-        {/each}
+                {/if}
+            {/each}
+        {/if}
     </div>
 {/if}
diff --git a/src/lib/state.svelte.ts b/src/lib/state.svelte.ts
index a3a2460..688ca95 100644
--- a/src/lib/state.svelte.ts
+++ b/src/lib/state.svelte.ts
@@ -41,3 +41,4 @@ const storagable = <T>(key: string, defaultValue: T): Writable<T> => {
 };
 
 export let configViewWeaponAbilities = storagable<boolean>("config.builder.view-weapon-abilities", true);
+export let configViewWeaponTalents = storagable<boolean>("config.builder.view-weapon-talents", true);