Now you can create custom windows and buttons, better api, needs documentation

build.sh

@@ -1,9 +1,3 @@
 #!/bin/bash
-# Gen docs
-npx vuepress-jsdoc --exclude="*"
-
-# Copy media to all versions of documentation (if there is more than one)
-# for d in docs/dragonroll/*/; do cp -r media "$d/media"; done
-
 # Prebuild files for execution
 node prebuild.js

client/src/services/Api.js

@@ -52,6 +52,25 @@ class ClientApi {
         _Modules.CreateModule(module);
     }
 
+        /**
+     * Registers a new window for the given view
+     * @param {string} name 
+     * @param {ClientView} view 
+     */
+    registerWindow(name, view){
+        _Windows.InjectWindow(`${this.#_plugin.package}/${name}`, this.#_plugin.package, view.path)
+        return `${this.#_plugin.package}/${name}`;
+    }
+
+    createWindow(type, data){
+        _Windows.CreateWindow(type, data);
+    }
+
+    clearWindow(id){
+        console.log(id)
+        _Windows.ClearWindow(id);
+    }
+
     /**
      * Returns the client router
      * @type {ClientRouter}
@@ -80,14 +99,7 @@ class ClientWindows {
         this.#_plugin = plugin;
     }
 
-    /**
+
-     * Registers a new window for the given view
-     * @param {string} name 
-     * @param {ClientView} view 
-     */
-    registerWindow(name, view){
-        _Windows.InjectWindow(`${this.#_plugin}/${name}`, this.#_plugin, view.path)
-    }
 
     get _plugin(){
         return this.#_plugin;
@@ -130,6 +142,7 @@ class ClientModule {
     #_version;
     #_color;
     #_icon;
+    #_buttons;
 
     #_character_sheet;
     #_item_sheet;
@@ -194,6 +207,10 @@ class ClientModule {
         this.#_item_prompt = window;
     }
 
+    setButtons(buttons){
+        this.#_buttons = buttons;
+    }
+
     /**
      * Gets the module info in a json format
      * @returns {Object}
@@ -210,7 +227,8 @@ class ClientModule {
                 character_sheet: this.#_character_sheet,
                 item_sheet: this.#_item_sheet,
                 create_item_prompt: this.#_item_prompt,
-            }
+            },
+            buttons: this.#_buttons
         }
     }
 

client/src/services/Campaign.js

@@ -8,6 +8,7 @@ import { ClearAll, CreateWindow } from './Windows';
 
 import Server from '@/services/Server';
 import { GetCampaign } from './Dragonroll';
+import { GetModule } from './Modules';
 
 let _currentCampaign = null;
 let _currentPlayer = null;
@@ -64,6 +65,10 @@ function GetCampaignModuleName(){
     return GetCampaign().system;
 }
 
+function GetCampaignModule(){
+    return GetModule(GetCampaign().system);
+};
+
 export {
     _currentCampaign,
     _currentPlayer,
@@ -73,5 +78,6 @@ export {
     DisplayCampaign,
     UpdateCampaignData,
     GetCampaignModuleName,
+    GetCampaignModule,
     Disconnect
 }

client/src/services/Modules.js

@@ -6,27 +6,15 @@ function CreateModule(module){
     let moduleInfo = module.info;
     let plugin = module._plugin.package;
 
+    /*
     InjectWindow(`${plugin}/character_sheet`, plugin, moduleInfo.windows.character_sheet.path)
     InjectWindow(`${plugin}/item_sheet`, plugin, moduleInfo.windows.item_sheet.path)
     InjectWindow(`${plugin}/create_item_prompt`, plugin, moduleInfo.windows.create_item_prompt.path)
+    */
 
     modules[moduleInfo.id] = moduleInfo;
 }
 
-/*
-async function GetJson(url){
-    let obj = await (await fetch(url)).json();
-    return obj;
-}
-*/
-
-/*
-async function ImportModule(moduleFolder) {
-    let moduleInfo = await GetJson('/modules/' + moduleFolder + '/module.json');
-    modules.push(moduleInfo);
-}
-*/
-
 let GetModules = () => modules;
 // let GetModulesToLoad = () => modulesToLoad;
 

client/src/views/managers/GameManager.vue

@@ -6,11 +6,14 @@ import { AddSound } from '../../services/Sound';
 import TileMap from './TileMap.vue';
 import { GetCampaign, GetClient } from '../../services/Dragonroll';
 import { ClearAll, ClearWindow, CreateWindow } from '../../services/Windows';
+import { GetCampaignModule, GetCampaignModuleName } from '../../services/Campaign';
 
 const game = ref(null);
 const in_game = InGameRef();
 const is_dm = ref(false);
 
+const rightModuleButtons = ref([]);
+
 function OpenCampaignPreview(){
     CreateWindow('campaign_preview', {
         campaign: GetCampaign(),
@@ -61,6 +64,9 @@ watch(in_game, () => {
     if(in_game.value){
         // Check if we are dm
         is_dm.value = GetClient().is_dm;
+
+        console.log("Can we get the module here?");
+        rightModuleButtons.value = GetCampaignModule().buttons.right;
     }
 });
 
@@ -86,9 +92,12 @@ watch(in_game, () => {
         </div>
 
         <div class="horizontal-button">
-            <IconButton icon="/icons/iconoir/regular/group.svg" :action="OpenCharactersWindow"></IconButton>
+            <IconButton v-for="button in rightModuleButtons" :action="button.action" :icon="button.icon" :key="button.id"></IconButton>
-            <IconButton icon="/icons/iconoir/regular/bookmark-book.svg" :action="OpenDatabaseWindow"></IconButton>
             <IconButton icon="/icons/iconoir/regular/chat-bubble.svg" :action="OpenChat"></IconButton>
+            <!--
+                <IconButton icon="/icons/iconoir/regular/group.svg" :action="OpenCharactersWindow"></IconButton>
+                <IconButton icon="/icons/iconoir/regular/bookmark-book.svg" :action="OpenDatabaseWindow"></IconButton>
+            -->
         </div>
 
         <!-- Tilemap -->

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

@@ -18,8 +18,6 @@ let id = data.id;
 const elements = shallowRef([]);
 
 // SHOULD MOVE!!!
-
-
 onMounted(() => {
     SetupHandle(id, handle);
     SetSize(id, {width: 700, height: 800});
@@ -37,7 +35,6 @@ 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,

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

@@ -11,9 +11,43 @@ function Main(Api){
     dndModule.color = "#e92026";
     dndModule.icon = "icon.png";
 
+    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'));
+    */
+
+    dndModule.setButtons({
+        right: [
+            {
+                id: 'database-button',
+                icon: '/icons/iconoir/regular/bookmark-book.svg',
+                action: () => {
+                    Api.createWindow(databaseWindow, {
+                        title: "Database",
+                        id: databaseWindow,
+                        close: () => Api.clearWindow(databaseWindow)
+                    });
+                }
+            }, {
+                id: 'group-button',
+                icon: '/icons/iconoir/regular/group.svg',
+                action: () => {
+                    Api.createWindow(actorsWindow, {
+                        title: "Actors",
+                        id: actorsWindow,
+                        close: () => Api.clearWindow(actorsWindow)
+                    });
+                }
+            }]
+    });
     
     // Api.windows.registerWindow('character_sheet', Api.createView('CharacterSheet'));
     // Api.windows.registerWindow('item_sheet', Api.createView('ItemSheet'));

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

@@ -0,0 +1,72 @@
+<script setup>
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+import GameEntry from '@/views/partials/GameEntry.vue';
+import { CreateWindow, SetMinSize, SetMaxSize, SetResizable, ClearWindow } from '@/services/Windows';
+import { GetCampaignModuleName } from '@/services/Campaign';
+const props = defineProps(['data']);
+const data = props.data;
+
+const handle = ref(null);
+
+let id = data.id;
+
+onMounted(() => {
+    SetupHandle(id, handle);
+
+    SetSize(id, {width: 300, height: 540});
+    SetResizable(id, true);
+    SetMinSize(id, {height: 300});
+    SetMaxSize(id, {height: 700});
+    ResetPosition(id, {x: window.innerWidth - 420, y: 60});
+});
+
+// temp
+function openCharacterSheet(){
+    CreateWindow(`${GetCampaignModuleName()}/character_sheet`, {
+        id: 'character_sheet',
+        title: 'Character Sheet',
+        close: () => ClearWindow(`character_sheet`)
+    });
+}
+
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+        
+        <div class="map-list-container">
+            <GameEntry :data='{
+                height: "10px",
+                icon: "img/game/weaponIcons32x32_png_Transparent/icon_axe1.png",
+                name: "Axe",
+                click: openCharacterSheet,
+                }'></GameEntry>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+
+    user-select: none;
+}
+
+.map-list-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+
+    overflow-y: auto;
+}
+
+</style>

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

@@ -0,0 +1,3 @@
+<template>
+    
+</template>