- graphical dice

- began layout builder functionality
- several bug fixes

@types/index.ts

@@ -1,5 +1,3 @@
-
-
 export type ability =
     | "strength"
     | "dexterity"
@@ -57,6 +55,11 @@ export interface Monster {
     monster?: string;
     creature?: string;
     source?: string;
+
+    export?: boolean;
+    dice?: boolean;
+    render?: boolean;
+    layout?: string;
 }
 
 /* export interface StatblockMonster

src/data/constants.ts

@@ -38,6 +38,7 @@ interface CommonProps {
         text?: keyof Monster;
         conditioned?: boolean;
         parse?: boolean;
+        regex?: RegExp;
     };
 }
 
@@ -73,6 +74,7 @@ type SubHeadingProps = {
 };
 type TableProps = {
     type: "table";
+    dice: boolean;
     headers: string[];
 };
 
@@ -169,7 +171,8 @@ export const Statblock5e: StatblockItem[] = [
         properties: ["stats"],
         headers: ["Str", "Dex", "Con", "Wis", "Int", "Cha"],
         hasRule: true,
-        conditioned: true
+        conditioned: true,
+        dice: true
     },
 
     {

src/main.ts

@@ -26,11 +26,22 @@ import StatblockSettingTab from "./settings/settings";
 
 import "./main.css";
 import { sort } from "fast-sort";
-
+declare module "obsidian" {
+    interface Workspace {
+        on(
+            name: "dice-roller:rendered-result",
+            callback: (result: number) => void
+        ): EventRef;
+        on(name: "dice-roller:unload", callback: () => void): EventRef;
+    }
+}
 export interface StatblockData {
     monsters: Array<[string, Monster]>;
     layouts: Layout[];
     default: string;
+    useDice: boolean;
+    renderDice: boolean;
+    export: boolean;
     version: {
         major: number;
         minor: number;
@@ -42,6 +53,9 @@ const DEFAULT_DATA: StatblockData = {
     monsters: [],
     layouts: [],
     default: Layout5e.name,
+    useDice: true,
+    renderDice: false,
+    export: true,
     version: {
         major: null,
         minor: null,
@@ -103,6 +117,12 @@ export default class StatBlockPlugin extends Plugin {
             "statblock",
             this.postprocessor.bind(this)
         );
+
+        this.registerEvent(
+            this.app.workspace.on("dice-roller:unload", () => {
+                this.settings.useDice = false;
+            })
+        );
     }
     async loadSettings() {
         const settings = await this.loadData();
@@ -333,46 +353,18 @@ export default class StatBlockPlugin extends Plugin {
 
             const toBuild = Object.assign(monster ?? {}, params ?? {});
 
-            let statblock = new StatBlockRenderer(el, toBuild, this, canSave);
+            let layout =
+                this.settings.layouts.find(
+                    (layout) => layout.name == params?.layout
+                ) ?? Layout5e;
 
-            /* statblock.onunload = () => {
-                let newPre = createEl("pre");
-                newPre.createEl("code", {
-                    text: `\`\`\`statblock\n${source}\`\`\``
-                });
-                statblock.statblockEl.replaceWith(newPre);
-            }; */
-
-            const view = this.app.workspace.getActiveViewOfType(MarkdownView);
-
-            /**
-             * setImmediate call to allow statblock to be appended to document.
-             * This allows the plugin to get the height of the statblock for proper initial column rendering.
-             */
-            /* let columns = 0;
-            statblock.onload = async () => {
-                statblock.loaded = true;
-                columns = getColumns(view.contentEl);
-                if (columns >= 1) statblock.setWidth(columns * 400, true);
-                if (columns === 0) statblock.setMaxWidth(400);
-
-                statblock.statblockEl.toggleVisibility(true);
-            }; */
-
-            /**
-             * Initiate view resize handler to update columns.
-             */
-            /*  if (view && view instanceof MarkdownView) {
-                view.onResize = () => {
-                    let c = getColumns(statblock.containerEl.parentElement);
-
-                    if (c == columns) return;
-                    columns = c;
-
-                    if (c >= 1) statblock.setWidth(columns * 400);
-                    if (c === 0) statblock.setMaxWidth(400);
-                };
-            } */
+            let statblock = new StatBlockRenderer(
+                el,
+                toBuild,
+                this,
+                canSave,
+                layout
+            );
 
             ctx.addChild(statblock);
         } catch (e) {

src/settings/StatblockCreator.svelte

@@ -3,12 +3,15 @@
         addIcon,
         ButtonComponent,
         ExtraButtonComponent,
+        Menu,
+        Modal,
         TextComponent
     } from "obsidian";
 
     import type { Layout, StatblockItem } from "src/data/constants";
     import type StatBlockPlugin from "src/main";
     import { createEventDispatcher } from "svelte";
+import AddButton from "./ui/AddButton.svelte";
     import Creator from "./ui/Creator.svelte";
 
     export let layout: Layout;
@@ -61,12 +64,6 @@
         }
     };
 
-    const add = (node: HTMLDivElement) => {
-        new ExtraButtonComponent(node)
-            .setIcon("plus-with-circle")
-            .setTooltip("Add Block")
-            .onClick(() => {});
-    };
     const save = (node: HTMLDivElement) => {
         new ButtonComponent(node)
             .setIcon("checkmark")
@@ -84,24 +81,42 @@
                 dispatch("cancel");
             });
     };
+
+    const edit = (evt: CustomEvent<StatblockItem>) => {
+        console.log("🚀 ~ file: StatblockCreator.svelte ~ line 110 ~ evt", evt);
+        const modal = new BlockModal(plugin, evt.detail);
+        modal.open();
+    };
+
+    class BlockModal extends Modal {
+        constructor(
+            public plugin: StatBlockPlugin,
+            public block?: StatblockItem
+        ) {
+            super(plugin.app);
+        }
+    }
 </script>
 
 <div class="top">
     <div class="name" use:name />
-    <div class="add" use:add />
+    <AddButton {plugin} />
 </div>
 <div class="creator-container">
-    <div class="creator">
-        <Creator blocks={layout.blocks} {plugin} on:sorted={handleSorted} />
-    </div>
+    <Creator
+        blocks={layout.blocks}
+        {plugin}
+        on:sorted={handleSorted}
+        on:edit={edit}
+    />
 </div>
 <div class="bottom">
     <div class="save" use:save />
     <div class="cancel" use:cancel />
 </div>
 
 <style>
-    .creator {
+    :global(body:not(.is-mobile)) .creator-container {
         max-width: 75vw;
         max-height: 75vh;
     }