feat: adds text block type to layouts (#30)

javalent · Jan 13, 2022 · 137566a · 137566a
1 parent 860aeac
commit 137566a
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 51 deletions.
diff --git a/src/settings/add.ts b/src/settings/add.ts
@@ -88,6 +88,14 @@ function blockGenerator(type: string): StatblockItem {
                 calculate: true
             };
         }
+        case "text": {
+            return {
+                type: "text",
+                id: nanoid(),
+                properties: [],
+                text: null
+            };
+        }
     }
 }
 

diff --git a/src/settings/ui/block.ts b/src/settings/ui/block.ts
@@ -11,7 +11,8 @@ import type {
     StatblockItem,
     PropertyItem,
     TableItem,
-    TraitsItem
+    TraitsItem,
+    TextItem
 } from "src/data/constants";
 import type StatBlockPlugin from "src/main";
 import TableHeaders from "./TableHeaders.svelte";
@@ -96,7 +97,7 @@ export class BlockModal extends Modal {
                         );
                     });
             }
-            if (this.block.type == "traits") {
+            if (this.block.type == "traits" || this.block.type == "text") {
                 new Setting(this.contentEl)
                     .setName("Section Heading")
                     .setDesc(
@@ -161,6 +162,25 @@ export class BlockModal extends Modal {
                 } */
             }
             if (!this.advanced) return;
+            if (this.block.type == "text") {
+                new Setting(el)
+                    .setHeading()
+                    .setName("Text to Show")
+                    .setDesc(
+                        createFragment((e) => {
+                            e.createSpan({ text: "The block will " });
+                            e.createEl("strong", { text: "always" });
+                            e.createSpan({
+                                text: " display the text entered here."
+                            });
+                        })
+                    );
+                new TextAreaComponent(el)
+                    .setValue(this.block.text)
+                    .onChange((v) => {
+                        (this.block as TextItem).text = v;
+                    });
+            }
             if (this.block.type == "property") {
                 new Setting(el)
                     .setHeading()
@@ -294,7 +314,7 @@ export class BlockModal extends Modal {
                     this.display();
                 });
             });
-
+        
         this.buildProperties(this.contentEl.createDiv());
         this.buildConditions(this.contentEl.createDiv());
         this.buildDice(this.contentEl.createDiv());

diff --git a/src/view/ui/Content.svelte b/src/view/ui/Content.svelte
@@ -11,6 +11,7 @@
     import SectionHeading from "./SectionHeading.svelte";
     import Subheading from "./Subheading.svelte";
     import Table from "./Table.svelte";
+    import Text from "./Text.svelte";
     import {
         onMount,
         createEventDispatcher,
@@ -65,6 +66,12 @@
         }
         targets.push(target);
         switch (item.type) {
+            case "group": {
+                for (const nested of item.nested ?? []) {
+                    targets.push(...getElementForStatblockItem(nested, target));
+                }
+                break;
+            }
             case "heading": {
                 const heading = new Heading({
                     target,
@@ -78,6 +85,28 @@
                 heading.$on("export", (e) => dispatch("export", e.detail));
                 break;
             }
+            case "inline": {
+                const inline = createDiv("statblock-item-inline");
+                for (const nested of item.nested ?? []) {
+                    getElementForStatblockItem(
+                        nested,
+                        inline.createDiv("statblock-inline-item")
+                    );
+                }
+                targets.push(inline);
+                break;
+            }
+            case "image": {
+                new Image({
+                    target,
+                    props: {
+                        monster,
+                        item
+                    },
+                    context
+                });
+                break;
+            }
             case "property": {
                 new PropertyLine({
                     target,
@@ -100,37 +129,6 @@
                 });
                 break;
             }
-            case "traits": {
-                const blocks: Trait[] = monster[item.properties[0]] as Trait[];
-                if (!Array.isArray(blocks) || !blocks.length) return [];
-
-                if (item.heading) {
-                    new SectionHeading({
-                        target,
-                        props: {
-                            header: item.heading
-                        },
-                        context
-                    });
-                }
-                try {
-                    for (const block of blocks) {
-                        const prop = createDiv("statblock-item-container");
-                        new PropertyBlock({
-                            target: prop,
-                            props: {
-                                name: block.name,
-                                desc: block.desc
-                            },
-                            context
-                        });
-                        targets.push(prop);
-                    }
-                } catch (e) {
-                    return [];
-                }
-                break;
-            }
             case "spells": {
                 const blocks: Trait[] = monster[item.properties[0]] as Trait[];
                 if (!Array.isArray(blocks) || !blocks.length) return;
@@ -166,31 +164,44 @@
                 });
                 break;
             }
-            case "image": {
-                new Image({
+            case "text": {
+                new Text({
                     target,
                     props: {
                         monster,
                         item
-                    },
-                    context
+                    }
                 });
                 break;
             }
-            case "inline": {
-                const inline = createDiv("statblock-item-inline");
-                for (const nested of item.nested ?? []) {
-                    getElementForStatblockItem(
-                        nested,
-                        inline.createDiv("statblock-inline-item")
-                    );
+            case "traits": {
+                const blocks: Trait[] = monster[item.properties[0]] as Trait[];
+                if (!Array.isArray(blocks) || !blocks.length) return [];
+
+                if (item.heading) {
+                    new SectionHeading({
+                        target,
+                        props: {
+                            header: item.heading
+                        },
+                        context
+                    });
                 }
-                targets.push(inline);
-                break;
-            }
-            case "group": {
-                for (const nested of item.nested ?? []) {
-                    targets.push(...getElementForStatblockItem(nested, target));
+                try {
+                    for (const block of blocks) {
+                        const prop = createDiv("statblock-item-container");
+                        new PropertyBlock({
+                            target: prop,
+                            props: {
+                                name: block.name,
+                                desc: block.desc
+                            },
+                            context
+                        });
+                        targets.push(prop);
+                    }
+                } catch (e) {
+                    return [];
                 }
                 break;
             }

diff --git a/src/view/ui/Text.svelte b/src/view/ui/Text.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+    import type { TextItem } from "src/data/constants";
+    import { stringify } from "../utils";
+    import DiceHolder from "./DiceHolder.svelte";
+    import SectionHeading from "./SectionHeading.svelte";
+
+    export let monster: Monster;
+    export let item: TextItem;
+
+    let property =
+        item.text && item.text.length
+            ? item.text
+            : stringify(monster[item.properties[0]]);
+
+    if (!item.conditioned && !`${property}`.length) {
+        property = item.fallback ?? "-";
+    }
+</script>
+
+{#if !item.conditioned || (item.conditioned && `${property}`.length)}
+    {#if item.heading}
+        <SectionHeading header={item.heading} />
+    {/if}
+    <div class="line">
+        <DiceHolder {property} />
+    </div>
+{/if}
+
+<style></style>