kjdskjk

.gitea/workflows/deploy.yml

@@ -13,9 +13,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Install SSH client
+      - name: Install dependencies
         run: |
           apt-get update -y && apt-get install -y openssh-client
+          apt-get install -y git
 
       - name: Setup SSH inside container
         run: |
@@ -33,7 +34,11 @@ jobs:
 
       - name: Build frontend
         run: |
-          docker build -t git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest ./frontend
+          docker build -t git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest \
+          --build-arg NUXT_PUBLIC_GIT_COMMIT=$(git rev-parse --short HEAD) \
+          --build-arg NUXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
+          --build-arg NUXT_PUBLIC_GIT_BRANCH=$(git rev-parse --abbrev-ref HEAD) \
+          ./frontend
           docker push git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest
 
       - name: Build backend

frontend/.env.production

@@ -1 +1 @@
-API_BASE_URL=https://dragonroll.aranroig.com/api
+NUXT_PUBLIC_API_BASE_URL=https://dragonroll.aranroig.com/api

frontend/Dockerfile

@@ -1,6 +1,14 @@
 # ---------- Build Stage ----------
 FROM node:20-alpine AS builder
 
+ARG NUXT_PUBLIC_GIT_COMMIT
+ARG NUXT_PUBLIC_GIT_TAG
+ARG NUXT_PUBLIC_GIT_BRANCH
+
+ENV NUXT_PUBLIC_GIT_COMMIT=$NUXT_PUBLIC_GIT_COMMIT
+ENV NUXT_PUBLIC_GIT_TAG=$NUXT_PUBLIC_GIT_TAG
+ENV NUXT_PUBLIC_GIT_BRANCH=$NUXT_PUBLIC_GIT_BRANCH
+
 WORKDIR /app
 
 # Copy package files

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/partials/ContentSidebar.vue

@@ -2,78 +2,57 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useCampaignService } from '~/services/Campaign.js';
+import { FetchCampaignNotes, PushNote, TotalNotes } from '~/services/Content';
 import { emitter } from '~/services/Emitter';
 import Server from '~/services/Server';
-import { CreateWindow } from '~/services/Windows';
 
 const { Campaign } = useCampaignService();
-const notes = ref([]);
 const loadingNotes = ref(false);
 const notesError = ref('');
 const sidebarCollapsed = ref(false);
 
+const selectedTool = ref('');
+
 const campaignId = computed(() => {
     return Campaign.value?._id ?? Campaign.value?.id ?? null;
 });
 
 const notesMeta = computed(() => {
-    const count = notes.value.length;
+    const count = TotalNotes.value.length;
     return `${count} ${count === 1 ? 'note' : 'notes'}`;
 });
 
-async function fetchCampaignNotes() {
-    if (!campaignId.value) {
-        notes.value = [];
-        notesError.value = '';
-        return;
-    }
-
-    loadingNotes.value = true;
-    notesError.value = '';
-
-    try {
-        const response = await Server().get('/note/list', {
-            params: {
-                campaign: campaignId.value
-            }
-        });
-
-        if (response.data.status !== 'ok') {
-            notes.value = [];
-            notesError.value = response.data.msg ?? 'Unable to load notes.';
-            return;
-        }
-
-        notes.value = response.data.notes.map((note) => {
-            return {
-                key: note._id,
-                title: note.title,
-                text: note.content ?? '',
-                date: note.date
-            };
-        });
-    } catch (error) {
-        notes.value = [];
-        notesError.value = 'Unable to load notes.';
-    } finally {
-        loadingNotes.value = false;
-    }
-}
-
 function toggleSidebar() {
     sidebarCollapsed.value = !sidebarCollapsed.value;
 }
 
-function openCreateNoteWindow() {
+async function createNote() {
     if (!Campaign.value) {
         return;
     }
 
-    CreateWindow('create_note');
+    const campaignId = Campaign.value?._id 
+
+    try {
+        const response = await Server().post('/note/create', {
+            title: 'New note',
+            content: "",
+            campaign: campaignId
+        });
+
+        if (response.data.status !== 'ok') {
+            return;
+        }
+
+        emitter.emit('note-created', response.data.note);
+    } catch (err) {
+        console.log(err);
+    }
 }
 
+
 function openNote(note) {
-    emitter.emit('push-note', note);
+    PushNote(note);
 }
 
 function handleNoteCreated(note) {
@@ -93,14 +72,16 @@ function handleNoteCreated(note) {
         date: note.date
     };
 
-    notes.value = notes.value.filter((currentNote) => {
+    TotalNotes.value = TotalNotes.value.filter((currentNote) => {
         return currentNote.key !== createdNote.key;
     });
-    notes.value.unshift(createdNote);
+    TotalNotes.value.unshift(createdNote);
     openNote(createdNote);
 }
 
 onMounted(() => {
+    selectedTool.value = 'notes'; 
+    FetchCampaignNotes();
     emitter.on('note-created', handleNoteCreated);
 });
 
@@ -109,13 +90,13 @@ onUnmounted(() => {
 });
 
 watch(Campaign, () => {
-    fetchCampaignNotes();
+    FetchCampaignNotes();
 }, { immediate: true });
 </script>
 
 <template>
     <div class="sidebar-shell">
-        <nav class="sidebar-actions" aria-label="Campaign tools">
+        <nav class="sidebar-tools" aria-label="Campaign tools">
             <button
                 class="sidebar-action"
                 type="button"
@@ -136,27 +117,43 @@ watch(Campaign, () => {
             <button
                 class="sidebar-action"
                 type="button"
-                @click="openCreateNoteWindow"
-                :disabled="!Campaign"
-                title="New note"
-                aria-label="New note"
+                @click="selectedTool = 'notes'"
+                :class="{ active: selectedTool === 'notes' }"
             >
-                <img class="sidebar-action-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
-            </button>
-
-            <button
-                class="sidebar-action"
-                type="button"
-                @click="fetchCampaignNotes"
-                :disabled="!Campaign || loadingNotes"
-                title="Refresh notes"
-                aria-label="Refresh notes"
-            >
-                <img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
+                <img
+                    class="sidebar-action-icon"
+                    :src="'/icons/iconoir/regular/bookmark-book.svg'"
+                    alt=""
+                    aria-hidden="true"
+                >
             </button>
         </nav>
 
         <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
+            <div class="sidebar-actions">
+                <button
+                    class="sidebar-action"
+                    type="button"
+                    @click="createNote"
+                    :disabled="!Campaign"
+                    title="New note"
+                    aria-label="New note"
+                >
+                    <img class="sidebar-action-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
+                </button>
+
+                <button
+                    class="sidebar-action"
+                    type="button"
+                    @click="fetchCampaignNotes"
+                    :disabled="!Campaign || loadingNotes"
+                    title="Refresh notes"
+                    aria-label="Refresh notes"
+                >
+                    <img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
+                </button>
+            </div>
+
             <div class="sidebar-header">
                 <div class="sidebar-copy">
                     <span class="sidebar-eyebrow">Campaign</span>
@@ -174,13 +171,13 @@ watch(Campaign, () => {
                     {{ notesError }}
                 </div>
 
-                <div v-else-if="notes.length === 0" class="sidebar-state">
+                <div v-else-if="TotalNotes.length === 0" class="sidebar-state">
                     No notes in this campaign yet.
                 </div>
 
                 <template v-else>
                     <button
-                        v-for="note in notes"
+                        v-for="note in TotalNotes"
                         :key="note.key"
                         type="button"
                         class="note-link"
@@ -201,7 +198,7 @@ watch(Campaign, () => {
     display: flex;
 }
 
-.sidebar-actions {
+.sidebar-tools {
     width: 32px;
     min-width: 32px;
     padding: 8px 6px;
@@ -213,6 +210,11 @@ watch(Campaign, () => {
     gap: 4px;
 }
 
+.sidebar-actions {
+    display: flex;
+    justify-content: center;
+}
+
 .sidebar-action {
     width: 34px;
     height: 34px;
@@ -226,10 +228,18 @@ watch(Campaign, () => {
     align-items: center;
     justify-content: center;
     cursor: pointer;
+
+    
+    &.active {
+        background-color: var(--color-selected);
+    }
 }
 
 .sidebar-action:hover {
     background: var(--color-button-hover);
+    &.active {
+        background-color: var(--color-selected);
+    }
 }
 
 .sidebar-action:disabled {

frontend/app/components/partials/EditUserPartial.vue

@@ -2,10 +2,9 @@
 import { onMounted, ref } from 'vue';
 import { GetUser, LogoutUser } from '@/services/User'
 
-import Server from '@/services/Server'
+import Server, { getBaseUrl } from '@/services/Server'
 
 import { CreateWindow, CreateChildWindow, ClearWindow, GetFirstWindowId } from '../../services/Windows';
-import { backendUrl } from '../../services/BackendURL';
 import Spinner from './Spinner.vue';
 const loadedIcon = ref(false);
 
@@ -21,7 +20,7 @@ function retrieveAvatar(){
     Server().get('/user/retrieve-avatar?username=' + GetUser().username)
     .then((response) => {
         if(response.data.image){
-            const imgUrl = backendUrl + "/public/" + response.data.image;
+            const imgUrl = getBaseUrl() + "/public/" + response.data.image;
 
             // Wait for the image to fully load
             const img = new Image();

frontend/app/components/viewer/TopBar.vue

@@ -10,14 +10,6 @@ const campaignName = computed(() => {
     return Campaign.value?.name ?? 'Campaign';
 });
 
-function openCreateNoteWindow() {
-    if (!Campaign.value) {
-        return;
-    }
-
-    CreateWindow('create_note');
-}
-
 function exitToMainMenu() {
     SetCampaign(null);
     SetShowContent(false);
@@ -42,10 +34,6 @@ function exitToMainMenu() {
                 <img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
                 <span>Main Menu</span>
             </button>
-            <button class="note-button sound-click" type="button" @click="openCreateNoteWindow" :disabled="!Campaign">
-                <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
-                <span>New Note</span>
-            </button>
         </div>
     </div>
 </template>

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

@@ -1,11 +1,8 @@
 <script setup>
 import { onMounted, onUnmounted, ref, createApp } from 'vue';
-import ToastManager from '~/components/managers/ToastManager.vue';
-import { emitter } from '~/services/Emitter';
 import { GetWidget, ParseMarkdown } from '~/services/Marker';
 import Server from '~/services/Server';
-import { DisplayToast } from '~/services/Toaster';
-import TestWidget from '../widgets/TestWidget.vue';
+import { DeleteNote, FetchCampaignNotes } from '~/services/Content';
 
 // import { GetNote, GetContent } from '@/services/Content';
 const props = defineProps(['text', 'title', 'noteKey']);
@@ -15,12 +12,11 @@ const sourceText = ref(''); // Original markdown source, used for editing
 const displayText = ref(''); // Compiled HTML from markdown
 
 const editingMode = ref(false);
-const editableTitle = ref(null);
 const title = ref(props.title);
 const displayTitle = ref('');
 
 function closeNote(){
-    emitter.emit('delete-note', props.noteKey);
+  DeleteNote(props.noteKey);
 }
 
 const compiledMarkdown = computed(() => {
@@ -28,11 +24,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', 'link'];
+  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);
+    });
   });
 }
 /// 
@@ -93,6 +92,7 @@ function SaveNote(){
             return;
         }
         // DisplayToast('green', "Note saved successfully.", 500);
+        FetchCampaignNotes();
     }).catch((error) => {
         // Handle error (e.g., show a notification)
     });
@@ -146,6 +146,7 @@ function setupCallout() {
 
 const editTitle = (e) => {
   title.value = e.target.innerText;
+  SaveNote();
 }
 
 </script>

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

@@ -1,19 +1,23 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { ref } from 'vue';
 import Note from './Note.vue';
-import { emitter } from '~/services/Emitter';
-
-let noteData = ref([]);
+import { CurrentNotes, TotalNotes } from '~/services/Content';
 
 const noteContainer = ref(null);
 
+const computedCurrentNotes = computed(() => {
+    return CurrentNotes.value
+    .map(key => TotalNotes.value.find(note => note.key === key))
+    .filter(Boolean);
+})
+
 function calculateContainerWidth(){
     let dom = noteContainer.value;
     if (!dom) {
         return;
     }
 
-    dom.style.width = noteData.value.length * 701 + "px";
+    dom.style.width = CurrentNotes.value.length * 701 + "px";
     
     setTimeout(() => {
         for(let i = 0; i < dom.children.length; i++){
@@ -25,42 +29,14 @@ function calculateContainerWidth(){
     }, 0);
 }
 
-function pushNote(note){
-    noteData.value = noteData.value.filter((currentNote) => {
-        return currentNote.key !== note.key;
-    });
-    noteData.value.push(note);
-    calculateContainerWidth();
-}
-
-function handlePushNote(note) {
-    pushNote(note);
-}
-
-function handleDeleteNote(key) {
-    noteData.value = noteData.value.filter((note) => {
-        return note.key !== key;
-    });
-    calculateContainerWidth();
-}
-
-// Moure aixo
-onMounted(() => {
-    emitter.on("push-note", handlePushNote);
-    emitter.on("delete-note", handleDeleteNote);
-});
-
-onUnmounted(() => {
-    emitter.off("push-note", handlePushNote);
-    emitter.off("delete-note", handleDeleteNote);
-});
+watch(CurrentNotes, calculateContainerWidth);
 
 </script>
 
 <template>
 <div class="note-scrolling-container" id="note-scrolling-container">
     <div class="note-container" ref="noteContainer" >
-        <Note v-for="element in noteData" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
+        <Note v-for="element in computedCurrentNotes" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
     </div>
 </div>
 </template>

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: 8px;
+}
+
+</style>

frontend/app/components/viewer/widgets/link/NoteLink.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import { PushNote, GetNoteByName } from '~/services/Content';
+
+const props = defineProps(['content'])
+
+const parts = computed(() => props.content?.split('|') ?? [])
+
+const href = computed(() => parts.value[0] || '')
+const text = computed(() => parts.value[1] || parts.value[0] || '')
+
+
+function handleClick() {
+  // your custom logic here
+  PushNote(GetNoteByName(href.value));
+}
+
+
+</script>
+
+<template>
+  <a href="#" @click.prevent="handleClick">
+    {{ text }}
+  </a>
+</template>

frontend/app/components/windows/CreateNoteWindow.vue

@@ -1,150 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
-import WindowHandle from './partials/WindowHandle.vue';
-import Server from '~/services/Server';
-import { emitter } from '~/services/Emitter';
-import { useCampaignService } from '~/services/Campaign';
-
-const handle = ref(null);
-const wrapper = ref(null);
-
-const props = defineProps(['data']);
-const data = props.data;
-
-const { Campaign } = useCampaignService();
-
-const id = data.id;
-const title = ref('');
-const content = ref('');
-const isSaving = ref(false);
-const error = ref('');
-
-const campaignId = computed(() => {
-    return Campaign.value?._id ?? Campaign.value?.id ?? null;
-});
-
-onMounted(() => {
-    Top(wrapper);
-    SetupHandle(id, handle);
-    SetSize(id, { width: 640, height: 520 });
-    ResetPosition(id, "center");
-});
-
-async function createNote() {
-    if (!campaignId.value || isSaving.value) {
-        return;
-    }
-
-    isSaving.value = true;
-    error.value = '';
-
-    try {
-        const response = await Server().post('/note/create', {
-            title: title.value.trim() || 'Untitled Note',
-            content: content.value,
-            campaign: campaignId.value
-        });
-
-        if (response.data.status !== 'ok') {
-            error.value = response.data.msg ?? 'Unable to create note.';
-            return;
-        }
-
-        emitter.emit('note-created', response.data.note);
-        ClearWindow({ id });
-    } catch (err) {
-        error.value = 'Unable to create note.';
-    } finally {
-        isSaving.value = false;
-    }
-}
-</script>
-
-<template>
-    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
-        <WindowHandle :window="id" ref="handle"></WindowHandle>
-
-        <div class="body">
-            <form @submit.prevent="createNote">
-                <div class="form-field">
-                    <label>Title</label>
-                    <input v-model="title" type="text" name="noteTitle" placeholder="Enter a note title" autocomplete="off">
-                </div>
-
-                <div class="form-field stacked">
-                    <label>Content</label>
-                    <textarea v-model="content" name="noteContent" placeholder="Write your note here"></textarea>
-                </div>
-
-                <div v-if="error" class="form-error">
-                    {{ error }}
-                </div>
-
-                <div class="form-actions">
-                    <button class="btn-primary sound-click" :disabled="isSaving">
-                        {{ isSaving ? 'Creating...' : 'Create Note' }}
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.window-wrapper {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-}
-
-.body {
-    width: 100%;
-}
-
-form {
-    margin: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.form-field {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.form-field > * {
-    flex: 1;
-}
-
-.stacked {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 6px;
-}
-
-label {
-    text-align: left;
-}
-
-textarea {
-    min-height: 300px;
-    resize: vertical;
-}
-
-.form-error {
-    color: #9e2a2b;
-    font-size: 14px;
-}
-
-.form-actions {
-    display: flex;
-    justify-content: center;
-}
-
-.form-actions button {
-    width: 100%;
-}
-</style>

frontend/app/plugins/api.ts

@@ -0,0 +1,6 @@
+import { initApi } from '../services/Server';
+
+export default defineNuxtPlugin(() => {
+    const config = useRuntimeConfig();
+    initApi(config.public.apiBaseUrl);
+});

frontend/app/plugins/i18n.ts

@@ -5,7 +5,6 @@ function loadLocaleMessages() {
   const messages: Record<string, any> = {}
 
   for (const path in locales) {
-    console.log(path);
     const matched = path.match(/i18n\/locales\/(\w+)\/(.*)\.json$/)
     if (!matched) continue
 
@@ -18,7 +17,6 @@ function loadLocaleMessages() {
     messages[locale][file] = (locales[path] as any).default
   }
 
-  console.log(messages);
   return messages
 }
 

frontend/app/services/BackendURL.js

@@ -1,5 +0,0 @@
-const backendUrl = import.meta.env.API_BASE_URL || 'http://localhost:5000/api'
-
-export {
-    backendUrl
-};

frontend/app/services/Content.js

@@ -1,12 +1,76 @@
 import { ref } from 'vue';
+import { useCampaignService } from '~/services/Campaign.js';
+import Server from './Server';
 
 const ShowContent = ref(false);
 
+const TotalNotes = ref([]); // Full note data
+const CurrentNotes = ref([]); // Current opened note keys
+
 function SetShowContent(value) {
     ShowContent.value = value;
 }
 
+function PushNote(note){
+    CurrentNotes.value = CurrentNotes.value.filter((currentNote) => {
+        return currentNote.key !== note.key;
+    });
+    CurrentNotes.value.push(note.key);
+}
+
+function DeleteNote(key){
+    CurrentNotes.value = CurrentNotes.value.filter((k) => {
+        return k !== key;
+    });
+}
+
+async function FetchCampaignNotes() {
+    // First we get campaign info
+    const { Campaign } = useCampaignService();
+    const campaignId = Campaign.value?._id ?? Campaign.value?.id ?? null;
+
+    if (!campaignId) {
+        TotalNotes.value = [];
+        return;
+    }
+
+    try {
+        const response = await Server().get('/note/list', {
+            params: {
+                campaign: campaignId
+            }
+        });
+        
+        if (response.data.status !== 'ok') {
+            // TODO: ERROR
+            return;
+        }
+        TotalNotes.value = response.data.notes.map((note) => {
+            return {
+                key: note._id,
+                title: note.title,
+                text: note.content ?? '',
+                date: note.date
+            };
+        });
+    } catch (error) {
+        // TODO: ERROR
+        console.error(error);
+        return;
+    }
+}
+
+function GetNoteByName(name){
+    return TotalNotes.value.find(note => note.title == name);
+}
+
 export {
     ShowContent,
-    SetShowContent
+    SetShowContent,
+    CurrentNotes,
+    FetchCampaignNotes,
+    TotalNotes,
+    PushNote,
+    DeleteNote,
+    GetNoteByName
 }

frontend/app/services/Marker.js

@@ -1,27 +1,37 @@
 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"),
+  },
+  link: {
+    link: () => import("~/components/viewer/widgets/link/NoteLink.vue")
+  }
 };
 
-const componentCache = {}
+const componentCache = {
+  inline: {},
+  display: {},
+  link: {}
+}
 
-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]
 }
 
 
 const marker = new Marked();
 
 const extension = {
-  name: "something",
+  name: "widget",
   level: "block",
 
   tokenizer(src) {
@@ -31,7 +41,7 @@ const extension = {
     if (!match) return;
 
     return {
-      type: "something",
+      type: "widget",
       raw: match[0],
       name: match[1],
       text: match[2],
@@ -39,12 +49,12 @@ 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>`;
   },
 };
 
 const inlineExtension = {
-  name: "something_inline",
+  name: "widget_inline",
   level: "inline",
   start(src) {
     return src.indexOf("@");
@@ -56,7 +66,7 @@ const inlineExtension = {
     if (!match) return;
 
     return {
-      type: "something_inline",
+      type: "widget_inline",
       raw: match[0],
       name: match[1],
       text: match[2],
@@ -64,12 +74,36 @@ 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>`;
+  },
+};
+
+const linkExtension = {
+  name: "link_to",
+  level: "inline",
+  start(src) {
+    return src.indexOf("[[");
+  },
+
+  tokenizer(src) {
+    const rule = /^\[\[([^\n]*)\]\]/;
+    const match = rule.exec(src);
+    if (!match) return;
+
+    return {
+      type: "link_to",
+      raw: match[0],
+      link: match[1],
+    };
+  },
+
+  renderer(token) {
+    return `<span class="vue-component-link" data-component="link" data-content="${token.link}"></span>`;
   },
 };
 
 marker.use({
-  extensions: [extension, inlineExtension],
+  extensions: [extension, inlineExtension, linkExtension],
 });
 
 function ParseMarkdown(source) {

frontend/app/services/Server.js

@@ -1,13 +1,16 @@
 import axios from 'axios';
 
 const server = axios.create({
-    baseURL: import.meta.env.API_BASE_URL || 'http://localhost:5000/api',
+    baseURL: 'http://localhost:5000/api', // fallback only
     headers: {
         "Access-Control-Allow-Origin": "*",
     }
 });
 
-// Attach token dynamically on each request via interceptor
+export const initApi = (baseURL) => {
+    server.defaults.baseURL = baseURL;
+};
+
 server.interceptors.request.use((config) => {
     const token = localStorage.getItem('token');
     if (token) {
@@ -16,4 +19,6 @@ server.interceptors.request.use((config) => {
     return config;
 });
 
-export default () => server;
+export default () => server;
+
+export const getBaseUrl = () => server.defaults.baseURL;

frontend/app/services/StatusBar.js

@@ -0,0 +1,3 @@
+import { ref } from 'vue';
+
+const statusMessage = ref("")

frontend/app/services/WindowDefinitions.js

@@ -34,12 +34,6 @@ const defWindows = {
     component: () => import('~/components/windows/CreateCampaignWindow.vue'),
     close: () => ClearWindow({type: 'create_campaign'}),
     movable: true
-  },
-  create_note: {
-    title: "Create note",
-    component: () => import('~/components/windows/CreateNoteWindow.vue'),
-    close: () => ClearWindow({type: 'create_note'}),
-    movable: true
   }
 }
 

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

frontend/nuxt.config.ts

@@ -43,7 +43,7 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:5000/api',
+      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:5000/api',
       gitCommit: git.commit,
       gitTag: git.tag,
       gitBranch: git.branch,

frontend/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt build --dotenv .env.production",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",