Dice rollers!

frontend/app/assets/css/colors.scss

@@ -31,6 +31,7 @@ $themes: (
 
         red: #e06c75,
         green: #98c379,
+        gray: #cccccc,
 
         icon-invert: 100%
     ),
@@ -63,6 +64,7 @@ $themes: (
 
         red: #e06c75,
         green: #98c379,
+        gray: #cccccc,
 
         icon-invert: 0%
     )

frontend/app/components/viewer/content/Note.vue

@@ -28,11 +28,14 @@ const compiledMarkdown = computed(() => {
 });
 
 function mountComponents() {
-  const nodes = document.querySelectorAll('.vue-component');
-
-  nodes.forEach(el => {
-    const app = createApp(GetWidget(el.dataset.component), { content: el.dataset.content });
-    app.mount(el);
+  // Should no need more
+  const widget_types = ['display', 'inline'];
+  widget_types.forEach((widget_type) => {
+    const nodes = document.querySelectorAll('.vue-component-' + widget_type);
+    nodes.forEach(el => {
+      const app = createApp(GetWidget(widget_type, el.dataset.component), { content: el.dataset.content });
+      app.mount(el);
+    });
   });
 }
 /// 

frontend/app/components/viewer/widgets/display/RollWidgetDisplay.vue

@@ -0,0 +1,177 @@
+<script setup>
+const props = defineProps(['content']);
+
+import { parse } from '~/services/widgets/DiceParser';
+import { AddSound } from '~/services/Sound';
+
+const container = ref(null);
+const resultText = ref("");
+const steps = ref(null);
+const stepsHtml = ref("");
+
+const rollDice = () => {
+    const result = parse(props.content);
+    resultText.value = result.total;
+    stepsHtml.value = result.steps.map(renderStep).join('');
+};
+
+const renderStep = (s) => {
+    if (s.type === 'op') {
+        const label = s.op === '*' ? '×' : s.op === '/' ? '÷' : s.op;
+        return `<span class="step-op">${label}</span>`;
+    }
+
+    if (s.type === 'const') {
+        return `<span class="step-const">${s.value}</span>`;
+    }
+
+    if (s.type === 'dice') {
+        const { entry } = s;
+        const { rawRolls, kept, sides, mod, value } = entry;
+
+        const keptCopy = [...kept];
+        const tagged = rawRolls.map(v => {
+            const i = keptCopy.indexOf(v);
+            if (i !== -1) { keptCopy.splice(i, 1); return { v, kept: true }; }
+            return { v, kept: false };
+        });
+
+        let html = '';
+
+        tagged.forEach(({ v, kept }) => {
+            const isMax = v === sides, isMin = v === 1;
+            const cls = !kept    ? 'roll-val dropped'
+                      : isMax    ? 'roll-val max-val'
+                      : isMin    ? 'roll-val min-val'
+                      :            'roll-val kept';
+            html += `<span class="${cls}">${v}</span>`;
+        });
+
+        if (kept.length < rawRolls.length || kept.length > 1) {
+            html += `<span class="step-sum">=${value}</span>`;
+        }
+
+        return html;
+    }
+
+    return '';
+};
+
+onMounted(() => {
+    AddSound(container.value);
+});
+</script>
+
+<template>
+    <div class="roll-widget" ref="container">
+        <div class="roll-widget-body">
+            <span class="result-text">{{ resultText || '-' }}</span>
+            <button class="btn-primary roll-btn sound-click" @click="rollDice">
+                <span class="dice-content">
+                    <!-- Dice icon (SVG) -->
+                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">
+                </span>
+            </button>
+        </div>
+        <div class="roll-widget-results">
+            <span class="formula">{{ "[" + props.content + "]" }}</span>
+            <div class="steps" v-html="stepsHtml"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.steps {
+    margin-left: 8px;
+    height: 22px;
+    > {
+        font-size: 12px;
+    }
+}
+.steps :deep(.roll-val){
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    padding: 1px 2px;
+    border-radius: 3px;
+    margin: 2px;
+    font-size: 12px;
+    border: 1px solid; 
+}
+.steps :deep(.roll-val.kept){
+    background: rgba(93,184,122,0.12);
+    border-color: #4a8c5c;
+    color: #a8d4b4;
+}
+
+.steps :deep(.roll-val.dropped) {
+    background: transparent;
+    border-color: var(--color-border);
+    color: var(--color-text-tertiary);
+    text-decoration: line-through;
+}
+
+.steps :deep(.roll-val.max-val) {
+    background: rgba(93,184,122,0.2);
+    border-color: #5db87a;
+    color: #5db87a;
+}
+
+.steps :deep(.roll-val.min-val) {
+    background: rgba(201,95,95,0.12);
+    border-color: #c95f5f;
+    color: #c95f5f;
+}
+
+.steps :deep(.step-op)         { color: var(--color-text-secondary); padding: 0 4px; font-size: 13px; }
+.steps :deep(.step-const)      { font-size: 13px; color: var(--color-text-primary); padding: 0 2px; }
+.steps :deep(.step-dice-label) { font-size: 11px; color: var(--color-text-tertiary); margin-right: 2px; }
+.steps :deep(.step-sum)        { font-size: 11px; color: var(--color-text-tertiary); margin-left: 2px; }
+.steps :deep(.dice-mod)        { font-style: normal; margin-left: 2px; }
+
+.result-text {
+    font-size: 24px;
+    vertical-align: center;
+}
+
+.roll-widget-body {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.result-text {
+    margin-left: 12px;
+}
+
+.formula {
+    margin-left: 12px;
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+    color: var(--color-gray);
+}
+
+.roll-widget-results {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+}
+
+.roll-widget {
+    width: 100%;
+    background-color: var(--color-background-light);
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 8px;
+    border-radius: 6px;
+}
+
+.roll-btn {
+    padding: 8px;
+    margin-right: 4px;
+}
+
+</style>

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>`;
   },
 };
 

frontend/app/services/widgets/DiceParser.js

@@ -1,4 +1,4 @@
-// dice-parser.js
+// DiceParser.js
 
 function roll(sides) {
   return Math.floor(Math.random() * sides) + 1;
@@ -27,10 +27,9 @@ export function parse(expr) {
   const tokens = tokenize(expr);
   if (!tokens.length) throw new Error('Empty expression');
   let pos = 0;
-  const rolls = [];
 
-  function peek() { return tokens[pos]; }
-  function consume() { return tokens[pos++]; }
+  const peek = () => tokens[pos];
+  const consume = () => tokens[pos++];
 
   function parseExpr() { return parseAddSub(); }
 
@@ -41,7 +40,7 @@ export function parse(expr) {
       const right = parseMulDiv();
       left = {
         value: op === '+' ? left.value + right.value : left.value - right.value,
-        rolls: [...left.rolls, ...right.rolls],
+        steps: [...left.steps, { type: 'op', op }, ...right.steps],
       };
     }
     return left;
@@ -55,7 +54,7 @@ export function parse(expr) {
       if (op === '/' && right.value === 0) throw new Error('Division by zero');
       left = {
         value: op === '*' ? left.value * right.value : Math.floor(left.value / right.value),
-        rolls: [...left.rolls, ...right.rolls],
+        steps: [...left.steps, { type: 'op', op }, ...right.steps],
       };
     }
     return left;
@@ -65,7 +64,7 @@ export function parse(expr) {
     if (peek() === '-') {
       consume();
       const r = parsePrimary();
-      return { value: -r.value, rolls: r.rolls };
+      return { value: -r.value, steps: [{ type: 'op', op: '-' }, ...r.steps] };
     }
     return parsePrimary();
   }
@@ -79,7 +78,10 @@ export function parse(expr) {
       const inner = parseExpr();
       if (peek() !== ')') throw new Error('Missing closing )');
       consume();
-      return inner;
+      return {
+        value: inner.value,
+        steps: [{ type: 'op', op: '(' }, ...inner.steps, { type: 'op', op: ')' }],
+      };
     }
 
     const diceInfo = parseDiceToken(tok);
@@ -90,7 +92,8 @@ export function parse(expr) {
 
     if (/^\d+$/.test(tok)) {
       consume();
-      return { value: parseInt(tok), rolls: [] };
+      const v = parseInt(tok);
+      return { value: v, steps: [{ type: 'const', value: v }] };
     }
 
     throw new Error(`Unexpected token: ${tok}`);
@@ -119,12 +122,13 @@ export function parse(expr) {
     }
 
     const entry = { sides, rawRolls, kept, mod, value: kept.reduce((a, b) => a + b, 0) };
-    rolls.push(entry);
-    return { value: entry.value, rolls: [entry] };
+    return {
+      value: entry.value,
+      steps: [{ type: 'dice', entry }],
+    };
   }
 
   const result = parseExpr();
   if (pos < tokens.length) throw new Error(`Unexpected token: ${tokens[pos]}`);
-
-  return { total: result.value, rolls: result.rolls };
+  return { total: result.value, steps: result.steps };
 }