CI/CD test

frontend/app/components/viewer/widgets/RollWidget.vue

@@ -0,0 +1,59 @@
+<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 rollDice = () => {
+    console.log(props.content);
+    const result = parse(props.content);
+    console.log(result);
+    resultText.value = result.total;
+};
+
+onMounted(() => {
+    AddSound(container.value);
+});
+</script>
+
+<template>
+    <div class="roll-widget" ref="container">
+        <div class="roll-widget-body">
+            <button class="btn-primary btn-inline sound-click" @click="rollDice">
+                <span class="dice-content">
+                    <!-- Dice icon (SVG) -->
+                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">
+
+                    <!-- Result text -->
+                    <span class="result-text">
+                        {{ resultText || props.content }}
+                    </span>
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.roll-widget {
+    display: inline-flex; /* or inline-block */
+    vertical-align: middle; /* keeps it aligned nicely with text */
+}
+
+.btn-inline {
+    padding: 2px 6px;
+}
+
+.dice-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.result-text {
+    font-weight: 500;
+}
+</style>