Api api api api api api socket

client/src/services/Windows.js

@@ -25,7 +25,6 @@ import WelcomeWindow from '@/views/windows/WelcomeWindow.vue'
 import CompendiumWindow from '@/views/windows/CompendiumWindow.vue'
 import BookAnvilWindow from '@/views/windows/BookAnvilWindow.vue'
 import IconSelectorWindow from '@/views/windows/selectors/IconSelectorWindow.vue'
-import DatabaseWindow from '@/views/windows/game/DatabaseWindow.vue'
 import AccountManagementWindow from '@/views/windows/settings/AccountManagementWindow.vue'
 import PluginManagementWindow from '@/views/windows/settings/PluginManagementWindow.vue'
 import PluginWindow from '../views/windows/settings/PluginWindow.vue';
@@ -61,7 +60,6 @@ let windowMap = {
     compendium_window: CompendiumWindow,
     book_anvil_window: BookAnvilWindow,
     icon_selector: IconSelectorWindow,
-    database: DatabaseWindow,
     plugin_management: PluginManagementWindow,
     account_management: AccountManagementWindow,
     plugin_window: PluginWindow
@@ -197,11 +195,6 @@ const defValues = {
     'icon_selector': {
         id: 'icon-selector',
         title: "Select an Icon",
-    },
-    'database': {
-        id: 'database',
-        title: "database.title",
-        close: () => ClearWindow('database')
     }
 }
 

client/src/views/windows/game/DatabaseWindow.vue

@@ -1,114 +0,0 @@
-<script setup>
-import WindowHandle from '@/views/partials/WindowHandle.vue';
-
-import { onMounted, ref, shallowRef, watch } from 'vue';
-import { ClearWindow, CreateWindow, ResetPosition, SetMinSize, SetResizable, SetSize, SetupHandle } from '@/services/Windows';
-import ConceptList from '@/views/partials/ConceptList.vue';
-import { FetchConcepts, GetConcepts } from '@/services/Data';
-import Tabs from '@/views/partials/Tabs.vue';
-import { GetCampaignModuleName } from '@/services/Campaign';
-import FixedBottomButtons from '@/views/partials/FixedBottomButtons.vue';
-
-const handle = ref(null);
-
-const props = defineProps(['data']);
-const data = props.data;
-
-let id = data.id;
-const elements = shallowRef([]);
-
-// SHOULD MOVE!!!
-onMounted(() => {
-    SetupHandle(id, handle);
-    SetSize(id, {width: 700, height: 800});
-    ResetPosition(id, "center");
-    SetResizable(id, true);
-    SetMinSize(id, {width: 350, height: 300});
-
-    watch(GetConcepts, () => {
-        elements.value = GetConcepts();
-    });
-    
-    FetchConcepts();
-});
-function OpenCreateItemPrompt(){
-    CreateWindow(`${GetCampaignModuleName()}/create_item_prompt`, {id: 'create_item_prompt', title: 'Create Item', close: () => ClearWindow('create_item_prompt')})
-}
-
-function OpenConcept(element){
-    CreateWindow(`${GetCampaignModuleName()}/item_sheet`, {
-        id: 'item_sheet_' + element._id,
-        title: 'Edit Item',
-        item_id: element._id,
-        close: () => ClearWindow('item_sheet_' + element._id)
-    });
-}
-
-function ElementContext(element){
-    return [
-        {name: "Open"},
-        {name: "Delete"}
-    ];
-}
-
-function ElementTooltip(element){
-    return `<div class='document item'>
-        <h2>${element.name}</h2>
-        <img src='${element.info.icon}'></img>
-        <div class='document'>${element.info.description ?? ''}</div>
-    </div>`;
-}
-
-function ElementIcon(element){
-    return element.info ? element.info.icon : 'icons/game-icons/ffffff/lorc/crossed-swords.svg'
-}
-</script>
-
-
-<template>
-    <div class="window-wrapper" :id="'window-wrapper-' + id">
-        <WindowHandle :window="id" ref="handle"></WindowHandle>
-
-        <div class="main-container">
-            <Tabs :rows="[
-                    {id: 'items', value: 'database.tabs.items'}, 
-                    {id: 'spells', value: 'database.tabs.spells'},
-                    {id: 'features', value: 'database.tabs.features'}
-                ]">
-                <template #items>
-                    <ConceptList 
-                        :elements="elements"
-                        :open="OpenConcept"
-                        :context="ElementContext"
-                        :tooltip="ElementTooltip"
-                        :icon="ElementIcon"
-                    ></ConceptList>
-                </template>
-            </Tabs>
-        </div>
-
-        <FixedBottomButtons :plus="OpenCreateItemPrompt"></FixedBottomButtons>
-    </div>
-</template>
-
-
-<style scoped>
-.main-container {
-    height: calc(100% - 24px);
-}
-
-.fixed-bottom-buttons {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    z-index: 2;
-    display: flex;
-}
-
-.window-wrapper {
-    display: flex;
-    align-items: center;
-
-    user-select: none;
-}
-</style>

plugins/dnd-5e/client/data.js

@@ -0,0 +1,42 @@
+import Server from '@/services/Server'
+import { reactive } from 'vue';
+
+import { GetCampaign } from "./Dragonroll";
+import { socket } from './Socket';
+
+let data = reactive({});
+
+function InitData(){
+    data.value = {
+        concepts: [],
+    };
+}
+
+function FetchConcepts(){
+    Server().get('/concept/list?campaign=' + GetCampaign()._id).then(response => {
+        data.value.concepts = response.data.data;
+    }).catch((err) => console.log(err));
+}
+
+function FetchData(){
+    FetchConcepts();
+}
+
+
+socket.on('update-concepts', () => {
+    FetchConcepts();
+});
+
+let GetConcepts = () => data.value.concepts;
+let GetConcept = (id) => Server().get('/concept/get?campaign=' + GetCampaign()._id + "&id=" + id)
+
+
+export {
+    InitData,
+    FetchData,
+
+    FetchConcepts,
+
+    GetConcepts,
+    GetConcept,
+}

plugins/dnd-5e/client/main.js

@@ -14,11 +14,11 @@ function Main(Api){
     let databaseWindow = Api.registerWindow('database', Api.createView('Database'));
     let actorsWindow = Api.registerWindow('actors', Api.createView('Actors'));
 
-    /*
     let characterSheetWindow = Api.registerWindow('character_sheet', Api.createView('CharacterSheet'));
     let itemSheetWindow = Api.registerWindow('item_sheet', Api.createView('ItemSheet'));
     let createItemPromptWindow = Api.registerWindow('create_item_prompt', Api.createView('CreateItemPrompt'));
     
+    /*
     dndModule.setCharacterSheet(Api.createView('CharacterSheet'));
     dndModule.setItemSheet(Api.createView('ItemSheet'));
     dndModule.setItemPrompt(Api.createView('CreateItemPrompt'));

plugins/dnd-5e/client/views/Database.vue

@@ -1,3 +1,115 @@
-<template>
+<script setup>
+import WindowHandle from '@/views/partials/WindowHandle.vue';
 
+import { onMounted, ref, shallowRef, watch } from 'vue';
+import { ClearWindow, CreateWindow, ResetPosition, SetMinSize, SetResizable, SetSize, SetupHandle } from '@/services/Windows';
+import ConceptList from '@/views/partials/ConceptList.vue';
+import { FetchConcepts, GetConcepts } from '@/services/Data';
+import Tabs from '@/views/partials/Tabs.vue';
+import { GetCampaignModuleName } from '@/services/Campaign';
+import FixedBottomButtons from '@/views/partials/FixedBottomButtons.vue';
+
+import './../main.js'
+
+const handle = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+const elements = shallowRef([]);
+
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {width: 700, height: 800});
+    ResetPosition(id, "center");
+    SetResizable(id, true);
+    SetMinSize(id, {width: 350, height: 300});
+
+    watch(GetConcepts, () => {
+        elements.value = GetConcepts();
+    });
+    
+    FetchConcepts();
+});
+function OpenCreateItemPrompt(){
+    CreateWindow(`${GetCampaignModuleName()}/create_item_prompt`, {id: 'create_item_prompt', title: 'Create Item', close: () => ClearWindow('create_item_prompt')})
+}
+
+function OpenConcept(element){
+    CreateWindow(`${GetCampaignModuleName()}/item_sheet`, {
+        id: 'item_sheet_' + element._id,
+        title: 'Edit Item',
+        item_id: element._id,
+        close: () => ClearWindow('item_sheet_' + element._id)
+    });
+}
+
+function ElementContext(element){
+    return [
+        {name: "Open"},
+        {name: "Delete"}
+    ];
+}
+
+function ElementTooltip(element){
+    return `<div class='document item'>
+        <h2>${element.name}</h2>
+        <img src='${element.info.icon}'></img>
+        <div class='document'>${element.info.description ?? ''}</div>
+    </div>`;
+}
+
+function ElementIcon(element){
+    return element.info ? element.info.icon : 'icons/game-icons/ffffff/lorc/crossed-swords.svg'
+}
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <div class="main-container">
+            <Tabs :rows="[
+                    {id: 'items', value: 'database.tabs.items'}, 
+                    {id: 'spells', value: 'database.tabs.spells'},
+                    {id: 'features', value: 'database.tabs.features'}
+                ]">
+                <template #items>
+                    <ConceptList 
+                        :elements="elements"
+                        :open="OpenConcept"
+                        :context="ElementContext"
+                        :tooltip="ElementTooltip"
+                        :icon="ElementIcon"
+                    ></ConceptList>
                 </template>
+            </Tabs>
+        </div>
+
+        <FixedBottomButtons :plus="OpenCreateItemPrompt"></FixedBottomButtons>
+    </div>
+</template>
+
+
+<style scoped>
+.main-container {
+    height: calc(100% - 24px);
+}
+
+.fixed-bottom-buttons {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    z-index: 2;
+    display: flex;
+}
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+
+    user-select: none;
+}
+</style>