Dice rollers!

frontend/app/services/Marker.js

@@ -1,20 +1,26 @@
 import { Marked } from "marked";
 const widget_map = {
-    test: () => import("~/components/viewer/widgets/TestWidget.vue"),
-    table: () => import("~/components/viewer/widgets/TableWidget.vue"),
-    roll: () => import("~/components/viewer/widgets/RollWidget.vue"),
+  inline: {
+    roll: () => import("~/components/viewer/widgets/inline/RollWidgetInline.vue"),
+  },
+  display: {
+    roll: () => import("~/components/viewer/widgets/display/RollWidgetDisplay.vue"),
+  } 
 };
 
-const componentCache = {}
+const componentCache = {
+  inline: {},
+  display: {}
+}
 
-const GetWidget = (type) => {
-  if (!componentCache[type]) {
-    componentCache[type] = defineAsyncComponent(
-      widget_map[type]
+const GetWidget = (type, name) => {
+  if (!componentCache[type][name]) {
+    componentCache[type][name] = defineAsyncComponent(
+      widget_map[type][name]
     )
   }
 
-  return componentCache[type]
+  return componentCache[type][name]
 }
 
 
@@ -39,7 +45,7 @@ const extension = {
   },
 
   renderer(token) {
-    return `<div class="vue-component" data-component="${token.name}" data-content="${token.text}"></div>`;
+    return `<div class="vue-component-display" data-component="${token.name}" data-content="${token.text}"></div>`;
   },
 };
 
@@ -64,7 +70,7 @@ const inlineExtension = {
   },
 
   renderer(token) {
-    return `<span class="vue-component" data-component="${token.name}" data-content="${token.text}"></span>`;
+    return `<span class="vue-component-inline" data-component="${token.name}" data-content="${token.text}"></span>`;
   },
 };