Merges in work on Generic Roll and Prompt Button. Closes #48

Pjb518 · Mar 9, 2023 · 89e20b6 · 89e20b6
2 parents 6da8557 + 9f18bf5
commit 89e20b6
Show file tree

Hide file tree

Showing 4 changed files with 227 additions and 71 deletions.
diff --git a/public/lang/en.json b/public/lang/en.json
@@ -125,9 +125,9 @@
   "A5E.ButtonAdd": "+ Add {type}",
   "A5E.ButtonAddAction": "+ Add Action",
   "A5E.ButtonAddConsumer": "+ Add Consumer",
-  "A5E.ButtonAddPrompt": "+ Add Prompt",
+  "A5E.ButtonAddPrompt": "+ Add {type} Prompt",
   "A5E.ButtonAddRangeIncrement": "+ Add Range Increment",
-  "A5E.ButtonAddRoll": "+ Add Roll",
+  "A5E.ButtonAddRoll": "+ Add {type} Roll",
   "A5E.ButtonToggleAll": "+ Toggle All",
   "A5E.ButtonToolTipBroken": "Toggle Broken (Currently Unbroken)",
   "A5E.ButtonToolTipFixBroken": "Toggle Broken (Currently Broken)",
@@ -565,6 +565,7 @@
   "A5E.RangeUnlimited": "Unlimited",
   "A5E.MusicalInstruments": "Musical Instruments",
   "A5E.Other": "Other",
+  "A5E.OtherPlural": "Others",
   "A5E.ObjectTypePrompt": "Object Type",
   "A5E.ObjectTypeArmor": "Armor",
   "A5E.ObjectTypeArmorPlural": "Armor",
@@ -822,6 +823,7 @@
   "A5E.SkillCheckBonusGlobal": "Global Skill Bonus",
   "A5E.SkillCheckMod": "{skill} Mod",
   "A5E.SkillCheck": "{skill} Check",
+  "A5E.SkillCheckSingular": "Skill Check",
   "A5E.SkillCheckPlural": "Skill Checks",
   "A5E.SkillCheckPrompt": "Roll {skill} Check",
   "A5E.SkillPromptTitle": "{name}: {skill} Check",

diff --git a/src/apps/components/ActionsAddMenu.svelte b/src/apps/components/ActionsAddMenu.svelte
@@ -0,0 +1,33 @@
+<script>
+    import { localize } from "@typhonjs-fvtt/runtime/svelte/helper";
+    import { createEventDispatcher } from "svelte";
+
+    export let menuList;
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<div class="something">
+    {#each menuList as [heading, type]}
+        <button on:click|preventDefault={() => dispatch("press", type)}>
+            {localize(heading)}
+        </button>
+    {/each}
+</div>
+
+<style lang="scss">
+    .something {
+        position: relative;
+        display: grid;
+        min-width: 15rem;
+        grid-template-columns: repeat(3, 5rem);
+        gap: 0.125rem;
+        padding: 0.125rem 0.125rem;
+
+        button {
+            background: transparent;
+            color: white;
+            font-size: 0.694rem;
+        }
+    }
+</style>
diff --git a/src/apps/components/pages/ActionsPromptsTab.svelte b/src/apps/components/pages/ActionsPromptsTab.svelte
@@ -1,8 +1,13 @@
 <script>
     import { getContext } from "svelte";
     import { localize } from "@typhonjs-fvtt/runtime/svelte/helper";
+    import {
+        TJSMenu,
+        TJSToggleIconButton,
+    } from "@typhonjs-fvtt/svelte-standard/component";
 
     import AbilityCheckPromptConfig from "../itemActionsConfig/AbilityCheckPromptConfig.svelte";
+    import ActionsAddMenu from "../ActionsAddMenu.svelte";
     import GenericPromptConfig from "../itemActionsConfig/GenericPromptConfig.svelte";
     import PromptsConfigWrapper from "../itemActionsConfig/PromptsConfigWrapper.svelte";
     import SavePromptConfig from "../itemActionsConfig/SavePromptConfig.svelte";
@@ -41,60 +46,96 @@
 
     const promptTypes = {
         savingThrow: {
-            heading: "A5E.ActionConfigSavingThrowPrompt",
+            heading: "A5E.SavingThrowPlural",
+            singleLabel: "A5E.SavingThrow",
             component: SavePromptConfig,
         },
         abilityCheck: {
-            heading: "A5E.ActionConfigAbilityCheckPrompt",
+            heading: "A5E.AbilityCheckPlural",
+            singleLabel: "A5E.AbilityCheck",
             component: AbilityCheckPromptConfig,
         },
         skillCheck: {
-            heading: "A5E.ActionConfigSkillCheckPrompt",
+            heading: "A5E.SkillCheckPlural",
+            singleLabel: "A5E.SkillCheckSingular",
             component: SkillCheckPromptConfig,
         },
         generic: {
-            heading: "A5E.Other",
+            heading: "A5E.OtherPlural",
+            singleLabel: "A5E.Other",
             component: GenericPromptConfig,
         },
     };
 
     $: action = $item.actions[actionId];
+    $: prompts = action.prompts ?? {};
+
+    $: menuItems = Object.entries(promptTypes).map(
+        ([promptType, { heading }]) => [heading, promptType]
+    );
 </script>
 
-<ul class="prompts-config-list">
-    {#each Object.entries(promptTypes) as [promptType, { heading, component }] (promptType)}
-        <li class="prompts-config-list__item">
-            <header class="action-config__section-header">
-                <h2 class="action-config__section-heading">
-                    {localize(heading)}
-                </h2>
-
-                <button
-                    class="add-button"
-                    on:click={() => addPrompt(promptType)}
-                >
-                    {localize("A5E.ButtonAddPrompt")}
-                </button>
-            </header>
-
-            <ul class="prompts-list">
-                {#each Object.entries(action.prompts ?? {}).filter(([_, prompt]) => prompt.type === promptType) as [promptId, prompt] (promptId)}
-                    <PromptsConfigWrapper {prompt} {promptId}>
-                        <svelte:component
-                            this={component}
-                            {prompt}
-                            {promptId}
-                        />
-                    </PromptsConfigWrapper>
-                {:else}
-                    <li class="action-config__none">{localize("A5E.None")}</li>
-                {/each}
-            </ul>
-        </li>
-    {/each}
-</ul>
+<article>
+    <ul class="prompts-config-list">
+        {#each Object.entries(promptTypes) as [promptType, { heading, singleLabel, component }] (promptType)}
+            {#if Object.values(prompts).filter((prompt) => prompt.type === promptType).length}
+                <li class="prompts-config-list__item">
+                    <header class="action-config__section-header">
+                        <h2 class="action-config__section-heading">
+                            {localize(heading)}
+                        </h2>
+
+                        <button
+                            class="add-button"
+                            on:click={() => addPrompt(promptType)}
+                        >
+                            {localize("A5E.ButtonAddPrompt", {
+                                type: localize(singleLabel),
+                            })}
+                        </button>
+                    </header>
+
+                    <ul class="prompts-list">
+                        {#each Object.entries(prompts).filter(([_, prompt]) => prompt.type === promptType) as [promptId, prompt] (promptId)}
+                            <PromptsConfigWrapper {prompt} {promptId}>
+                                <svelte:component
+                                    this={component}
+                                    {prompt}
+                                    {promptId}
+                                />
+                            </PromptsConfigWrapper>
+                        {:else}
+                            <li class="action-config__none">
+                                {localize("A5E.None")}
+                            </li>
+                        {/each}
+                    </ul>
+                </li>
+            {/if}
+        {/each}
+    </ul>
+
+    <div class="sticky-add-button">
+        <TJSToggleIconButton title="A5E.ButtonAddRoll" icon="fas fa-plus">
+            <TJSMenu offset={{ x: -110, y: -105 }}>
+                <ActionsAddMenu
+                    menuList={menuItems}
+                    on:press={({ detail }) => addPrompt(detail)}
+                />
+            </TJSMenu>
+        </TJSToggleIconButton>
+    </div>
+</article>
 
 <style lang="scss">
+    article {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 0.75rem;
+        overflow: hidden;
+    }
+
     .prompts-list {
         display: flex;
         flex-direction: column;
@@ -108,15 +149,23 @@
     .prompts-config-list {
         display: flex;
         flex-direction: column;
+        flex-grow: 1;
         gap: 0.75rem;
         list-style: none;
         padding: 0;
         margin: 0;
+        overflow-y: auto;
 
         &__item {
             display: flex;
             flex-direction: column;
             gap: 0.5rem;
         }
     }
+
+    .sticky-add-button {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
 </style>