Scene characters collapsed

megastruktur · Feb 20, 2024 · be8fe72 · be8fe72
1 parent e4bde80
commit be8fe72
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/src/lib/components/characters/CampaignCharactersDrawer.svelte b/src/lib/components/characters/CampaignCharactersDrawer.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
 	import type { CampaignsResponse, CharactersResponse, RpgSystemsResponse } from "$lib/pocketbase-types";
+	import { Accordion, AccordionItem } from "@skeletonlabs/skeleton";
 	import CharacterSheet from "./CharacterSheet.svelte";
 
   export let characters: CharactersResponse[]
   export let rpgSystem: RpgSystemsResponse
   export let campaign: CampaignsResponse
 </script>
 
-<div class="flex flex-col w-96">
-  {#each characters as character(character.id)}
-    <CharacterSheet
-      {character}
-      {rpgSystem}
-      {campaign}
-      compactVersion={true} />
-  {/each}
+<div class="flex flex-col w-96 p-3">
+
+  <Accordion
+      regionControl=""
+    >
+    {#each characters as character(character.id)}
+
+      <AccordionItem open={characters.length === 1}>
+        <svelte:fragment slot="summary">{character.name}</svelte:fragment>
+        <svelte:fragment slot="content">
+          <CharacterSheet
+          {character}
+          {rpgSystem}
+          {campaign}
+          compactVersion={true} />
+        </svelte:fragment>
+      </AccordionItem>
+    {/each}
+  </Accordion>
 </div>