Mes coses

client/src/services/Api.js

@@ -32,7 +32,7 @@ class ClientApi {
      * @returns {ClientView} a new ClientView corresponding to the view
      */
     createView(path){
-        return new ClientView(path);
+        return new ClientView(this.#_plugin, path);
     }
 
     /**
@@ -41,7 +41,7 @@ class ClientApi {
      * @returns {ClientModule}
      */
     createModule(id){
-        return new ClientModule(id);
+        return new ClientModule(this.#_plugin, id);
     }
 
     /**
@@ -88,6 +88,10 @@ class ClientWindows {
     registerWindow(name, view){
         _Windows.InjectWindow(`${this.#_plugin}/${name}`, this.#_plugin, view.path)
     }
+
+    get _plugin(){
+        return this.#_plugin;
+    }
 }
 
 /**
@@ -95,10 +99,11 @@ class ClientWindows {
  * @hideconstructor
  */
 class ClientView {
-
+    #_plugin;
     #_path;
 
-    constructor(path){
+    constructor(plugin, path){
+        this.#_plugin = plugin;
         this.#_path = path;
     }
 
@@ -108,12 +113,17 @@ class ClientView {
     get path(){
         return this.#_path;
     }
+
+    get _plugin(){
+        return this.#_plugin;
+    }
 }
 
 /**
  * @hideconstructor
  */
 class ClientModule {
+    #_plugin;
     #_id;
     #_title;
     #_description;
@@ -121,7 +131,14 @@ class ClientModule {
     #_color;
     #_icon;
 
-    constructor(id){ this.#_id = id; }
+    #_character_sheet;
+    #_item_sheet;
+    #_item_prompt;
+
+    constructor(plugin, id){
+        this.#_plugin = plugin;
+        this.#_id = id;
+    }
 
     /**
      * The title of the module
@@ -153,12 +170,52 @@ class ClientModule {
      */
     set icon(icon){ this.#_icon = icon; }
 
+    /**
+     * 
+     * @param {ClientView} window 
+     */
+    setCharacterSheet(window){
+        this.#_character_sheet = window;
+    }
+
+    /**
+     * 
+     * @param {ClientView} window 
+     */
+    setItemSheet(window){
+        this.#_item_sheet = window;
+    }
+
+    /**
+     * 
+     * @param {ClientView} window 
+     */
+    setItemPrompt(window){
+        this.#_item_prompt = window;
+    }
+
     /**
      * Gets the module info in a json format
      * @returns {Object}
      */
     get info(){
-        return {id: this.#_id, title: this.#_title, description: this.#_description, version: this.#_version, color: this.#_color, icon: this.#_icon}
+        return {
+            id: this.#_id,
+            title: this.#_title,
+            description: this.#_description,
+            version: this.#_version,
+            color: this.#_color,
+            icon: this.#_icon,
+            windows: {
+                character_sheet: this.#_character_sheet,
+                item_sheet: this.#_item_sheet,
+                create_item_prompt: this.#_item_prompt,
+            }
+        }
+    }
+
+    get _plugin(){
+        return this.#_plugin;
     }
 }
 

client/src/services/Modules.js

@@ -1,7 +1,15 @@
+import { InjectWindow } from "./Windows";
+
 let modules = {};
 
 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;
 }
 

client/src/views/HomeView.vue

@@ -20,6 +20,7 @@ import TooltipManager from '@/views/managers/TooltipManager.vue';
 import ContextMenuManager from '@/views/managers/ContextMenuManager.vue';
 
 import { useRoute } from 'vue-router'
+import Background from './managers/Background.vue';
 
 LoadUser();
 
@@ -80,6 +81,7 @@ const route = useRoute()
   <TooltipManager></TooltipManager>
   <ContextMenuManager></ContextMenuManager>
   <WindowManager></WindowManager>
+  <Background></Background>
 </template>
 
 

client/src/views/managers/Background.vue

@@ -0,0 +1,15 @@
+<template>
+    <picture>
+        <source class="background" media="(prefers-color-scheme: dark)" srcset="img/background.png">
+        <img class="background" alt="Shows a black logo in light color mode and a white one in dark color mode." src="img/background-light.png">
+    </picture>
+</template>
+
+<style lang="scss" scoped>
+.background {
+    z-index: -1;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+}
+</style>

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

@@ -9,11 +9,15 @@ function Main(Api){
     dndModule.description = "Dungeons & Dragons Fifth edition game system support";
     dndModule.version = "0.1";
     dndModule.color = "#e92026";
-    dndModule.icon = "icon.png"
+    dndModule.icon = "icon.png";
 
-    Api.windows.registerWindow('character_sheet', Api.createView('CharacterSheet'));
-    Api.windows.registerWindow('item_sheet', Api.createView('ItemSheet'));
-    Api.windows.registerWindow('create_item_promptç', Api.createView('CreateItemPrompt'));
+    dndModule.setCharacterSheet(Api.createView('CharacterSheet'));
+    dndModule.setItemSheet(Api.createView('ItemSheet'));
+    dndModule.setItemPrompt(Api.createView('CreateItemPrompt'));
+    
+    // Api.windows.registerWindow('character_sheet', Api.createView('CharacterSheet'));
+    // Api.windows.registerWindow('item_sheet', Api.createView('ItemSheet'));
+    // Api.windows.registerWindow('create_item_prompt', Api.createView('CreateItemPrompt'));
 
     Api.registerModule(dndModule);
 }

tutorials/tutorials.json

@@ -4,5 +4,11 @@
     },
     "howtoread": {
         "title": "How to read this documentation"
+    },
+    "vdragonviews": {
+        "title": "Using Dragonroll views"
+    },
+    "window": {
+        "title": "Creating a window"
     }
 }

tutorials/vdragonviews.md

@@ -0,0 +1,7 @@
+If you want to use some view or partial of the Dragonroll source in your plugin,
+you must do it from the "@" root. "@" represents the root of the `/src` directory of the client of Dragonroll, so for example, if you want to import the Dragonroll markdown
+editor in your own views you should add:
+
+```js
+import MarkdownEditor from '@/views/partials/MarkdownEditor.vue';
+```

tutorials/window.md

@@ -0,0 +1,47 @@
+## Template
+
+This template will help you get started with your first window, it contains the bare
+minimum for creating a Dragonroll window.
+
+```js
+<script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+
+const handle = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+
+const test = ref(null)
+
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {width: 500, height: 380});
+    ResetPosition(id, "center");
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+        <div ref="test"></div>
+
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    display: flex;
+    align-items: center;
+}
+</style>
+```