layout builder (almost) done. just need to add in dice callback

Author: valentine195

src/data/constants.ts

@@ -33,11 +33,8 @@ interface CommonProps {
     fallback?: string;
     hasRule?: boolean;
     dice?: {
-        default?: keyof Monster;
-        text?: keyof Monster;
-        conditioned?: boolean;
+        property?: keyof Monster;
         parse?: boolean;
-        regex?: RegExp;
     };
 }
 
@@ -154,10 +151,8 @@ export const Statblock5e: StatblockItem[] = [
                 properties: ["hp"],
                 display: "Hit Points",
                 dice: {
-                    default: "hp",
-                    text: "hit_dice",
-                    conditioned: true,
-                    parse: false
+                    property: "hit_dice",
+                    parse: true
                 },
                 conditioned: true
             },
@@ -270,25 +265,24 @@ export const Statblock5e: StatblockItem[] = [
                         id: nanoid(),
                         display: "Challenge",
                         properties: ["cr"],
-                        callback: `
-                        if ("cr" in monster && monster.cr in plugin.CR) {
-                                return \`\${monster.cr} (\${plugin.CR[
-                                    monster.cr
-                                ].xp.toLocaleString()} XP)\`;
-                            }
-                            return "";`
+                        callback: `if ("cr" in monster && monster.cr in plugin.CR) {
+    return \`\${monster.cr} (\${plugin.CR[
+        monster.cr
+    ].xp.toLocaleString()} XP)\`;
+}
+return "";`
                     },
                     {
                         type: "property",
                         id: nanoid(),
                         display: "Proficiency Bonus",
                         properties: ["cr"],
                         callback: `if ("cr" in monster) {
-                                return \`+\${Math.floor(
-                                    2 + (plugin.CR[monster.cr].value - 1) / 4
-                                )}\`;
-                            }
-                            return "";`
+    return \`+\${Math.floor(
+        2 + (plugin.CR[monster.cr].value - 1) / 4
+    )}\`;
+}
+return "";`
                     }
                 ]
             }

src/settings/StatblockCreator.svelte

@@ -7,8 +7,8 @@
 
     import type { Layout, StatblockItem } from "src/data/constants";
     import type StatBlockPlugin from "src/main";
-    import { createEventDispatcher, setContext } from "svelte";
-    import { writable } from "svelte/store";
+    import { createEventDispatcher } from "svelte";
+
     import { generate } from "./add";
     import AddButton from "./ui/AddButton.svelte";
     import Creator from "./ui/Creator.svelte";
@@ -111,11 +111,6 @@
 </div>
 
 <style>
-    :global(body:not(.is-mobile)) .creator-container {
-        max-width: 75vw;
-        max-height: 65vh;
-        overflow: auto;
-    }
     .top {
         display: flex;
         align-items: center;

src/settings/settings.css

@@ -16,3 +16,13 @@
 .statblock-edit-block .statblock-additional-container > :not(.additional) {
     padding-bottom: 0;
 }
+
+.statblock-edit-block .setting-item {
+    border: 0;
+}
+
+.statblock-edit-block textarea {
+    width: 100%;
+    resize: vertical;
+    overflow: hidden;
+}

src/settings/ui/Block.svelte

@@ -1,31 +1,24 @@
 <script lang="ts">
     import type { StatblockItem } from "src/data/constants";
 
-    import Group from "./Blocks/GroupBlock.svelte";
     import PropertyBlock from "./Blocks/PropertyBlock.svelte";
     import type StatBlockPlugin from "src/main";
-    import { ExtraButtonComponent, Menu } from "obsidian";
+    import { ExtraButtonComponent } from "obsidian";
     import { createEventDispatcher } from "svelte";
-    import { generate } from "../add";
     import { BlockModal } from "./block";
     import Rule from "src/view/ui/Rule.svelte";
-    import copy from "fast-copy";
 
     export let block: StatblockItem;
     export let plugin: StatBlockPlugin;
 
     const dispatch = createEventDispatcher();
 
-    const group = block.type == "group";
-    const inline = block.type == "inline";
-
     const editBlock = () => {
         const modal = new BlockModal(plugin, block);
 
         modal.onClose = () => {
             if (!modal.saved) return;
             dispatch("edited", modal.block);
-            /* block = copy(modal.block); */
         };
         modal.open();
     };
@@ -45,85 +38,31 @@
             .setTooltip("Delete Block")
             .onClick(() => dispatch("trash", block));
     };
-
-    const dropdown = (node: HTMLDivElement) => {
-        new ExtraButtonComponent(node).setIcon("vertical-three-dots");
-        node.onclick = (evt) => {
-            new Menu(plugin.app)
-                .addItem((item) => {
-                    item.setTitle("Add")
-                        .setIcon("plus-with-circle")
-                        .onClick(async () => {
-                            if (
-                                block.type == "group" ||
-                                block.type == "inline"
-                            ) {
-                                const gen = await generate(plugin, evt);
-                                if (gen) {
-                                    block.nested = [...block.nested, gen];
-                                    block = block;
-                                }
-                                dispatch("added");
-                            }
-                        });
-                })
-                .addItem((item) =>
-                    item
-                        .setTitle("Edit")
-                        .setIcon("pencil")
-                        .onClick(() => {
-                            editBlock();
-                        })
-                )
-                .addItem((item) =>
-                    item
-                        .setTitle("Delete")
-                        .setIcon("trash")
-                        .onClick(() => dispatch("trash", block))
-                )
-                .showAtMouseEvent(evt);
-        };
-    };
 </script>
 
-<div class="statblock-creator-container" class:group class:inline>
+<div class="statblock-creator-container">
     {#key block}
         <div class="statblock-creator-block">
-            {#if block.type == "group" || block.type == "inline"}
-                <Group inline={block.type == "inline"} {block} {plugin} />
-            {:else}
-                <PropertyBlock {block} />
-            {/if}
+            <PropertyBlock {block} />
         </div>
     {/key}
-    {#if group || inline}
-        <div class="icons" use:dropdown />
-    {:else}
-        <div class="icons">
-            <div class="icon" use:edit />
-            <div class="icon" use:trash />
-        </div>
-    {/if}
-</div>
-{#if block.hasRule}
-    <div aria-label="Block Has Rule">
-        <Rule />
+    <div class="icons">
+        <div class="icon" use:edit />
+        <div class="icon" use:trash />
     </div>
-{/if}
+</div>
 
 <style>
     .statblock-creator-container {
         display: flex;
         justify-content: space-between;
         /* align-items: center; */
-        padding: 2px;
-        margin: 2px;
         width: 100%;
         height: 100%;
     }
 
     :global(body:not(.is-mobile))
-        .statblock-creator-container:not(:hover):not(.group):not(.inline)
+        .statblock-creator-container:not(:hover)
         > .icons {
         visibility: hidden;
     }
@@ -134,7 +73,7 @@
         display: flex;
         justify-content: flex-end;
     }
-    .statblock-creator-container:not(.group):not(.inline) .icons {
+    .statblock-creator-container .icons {
         align-items: center;
     }
     .icon:not(:first-child) :global(.clickable-icon) {