Mi

client/src/services/Dragonroll.js

@@ -6,6 +6,7 @@ import { backendUrl } from './BackendURL';
 import { GetUser } from './User';
 import { ExitGame } from './Game';
 import { GetModule } from './Modules';
+import { GetMap, LoadMap, UpdateMapList } from './Map';
 
 let emitter;
 
@@ -30,21 +31,16 @@ let GetCampaign = () => { return currentCampaign; };
 let GetClient = () => { return currentPlayer; };
 
 let chatMessageId = 0;
-const chat = ref([
+const chat = ref([]);
-    /* {
-        id: 1,
-        author: "66ae8aea3e78bb669e25010d",
-        chunks: [
-            {
-                id: 1,
-                type: "text",
-                content: "Hola test"
-            }
-        ]
-    } */
-]);
 let GetChatRef = () => chat;
 
+socket.on('change_map', data => {
+    console.log("ChangeMap")
+    UpdateMapList().then(() => {
+        LoadMap(GetMap(data.id));
+    });
+})
+
 socket.on('update-players', data => {
     players.value = [];
     Object.keys(data).forEach((key) => {
@@ -80,6 +76,10 @@ socket.on('message', (data) => {
     });
 });
 
+function _SendMap(id){
+    socket.emit('send_map', {id});
+}
+
 function SendMessage(data){
     socket.emit('message', data);
 }
@@ -131,5 +131,6 @@ export {
     GetSystem,
 
     GetChatRef,
-    SendMessage
+    SendMessage,
+    _SendMap
 };

client/src/services/Map.js

@@ -1,7 +1,7 @@
-import { initCustomFormatter, ref } from 'vue';
+import { initCustomFormatter, ref, toRaw } from 'vue';
 
 import Api from '@/services/Api'
-import { GetCampaign } from './Dragonroll';
+import { _SendMap, GetCampaign } from './Dragonroll';
 import { backendUrl } from './BackendURL';
 
 function dataURLtoFile(dataurl, filename) {
@@ -144,6 +144,9 @@ let imageData = [];
 const currentMapId = ref('');
 let GetMapId = () => currentMapId;
 
+const currentGlobalMapId = ref('');
+let GetGlobalMapId = () => currentGlobalMapId;
+
 let backgroundColor = ref('#0f0f0f');
 
 function Draw(){
@@ -199,11 +202,21 @@ function ImportDD2VTT(data){
 const mapList = ref([]);
 let GetMapList = () => mapList;
 
+function GetMap(id){
+    let map = undefined;
+    mapList.value.forEach((m) => {
+        if(m._id == id) map = m;
+    });
+    return toRaw(map);
+}
+
 function UpdateMapList(){
-    Api().get('/maps/list?campaign=' + GetCampaign()._id).then(response => {
+    return new Promise((resolve, reject) => {
-        mapList.value = response.data.data;
+        Api().get('/maps/list?campaign=' + GetCampaign()._id).then(response => {
-        console.log(mapList.value);
+            mapList.value = response.data.data;
-    }).catch((err) => console.log(err));
+            resolve();
+        }).catch((err) => console.log(err));
+    })
 }
 
 function ReloadImages(){
@@ -267,6 +280,11 @@ function CreateMap(){
     
 }
 
+function SendMap(id){
+    currentGlobalMapId.value = id;
+    _SendMap(id);
+}
+
 let GetBackgroundColor = () => backgroundColor;
 function ChangeBackgroundColor(color){
     backgroundColor.value = color; // XD
@@ -287,9 +305,12 @@ export {
     GetBackgroundColor,
     ChangeBackgroundColor,
     GetMapId,
+    GetGlobalMapId,
 
     UpdateMapList,
     GetMapList,
     LoadMap,
     RenameMap,
+    GetMap,
+    SendMap
 };

client/src/services/Windows.js

@@ -94,6 +94,21 @@ const defValues = {
         id: 'combat_window',
         title: "Combat",
         close: true
+    },
+    'entity_window': {
+        id: 'entity_window',
+        title: "Entities",
+        close: true
+    },
+    'characters_window': {
+        id: 'characters_window',
+        title: "Characters",
+        close: true
+    },
+    'compendium_window': {
+        id: 'compendium_window',
+        title: "Compendium",
+        close: true
     }
 }
 

client/src/views/managers/GameManager.vue

@@ -39,6 +39,18 @@ function ToggleGrid(){
     
 }
 
+function OpenEntityWindow(){
+    CreateWindow('entity_window');
+}
+
+function OpenCharactersWindow(){
+    CreateWindow('characters_window');
+}
+
+function OpenCompendiumWindow(){
+    CreateWindow('compendium_window');
+}
+
 watch(game, () => {
     if(game.value && in_game.value){
         AddSound(game.value);
@@ -63,14 +75,15 @@ watch(game, () => {
             <IconButton icon="icons/game-icons/000000/lorc/crossed-sabres.svg" :action="OpenCombatMenu"></IconButton>
         </div>
         
-        <div class="vertical-button gm" v-if="is_dm">
+        <div class="vertical-button gm" v-show="is_dm">
             <IconButton icon="icons/iconoir/regular/map.svg" :action="OpenMapWindows"></IconButton>
             <IconButton icon="icons/iconoir/regular/hammer.svg" :action="OpenMapButtons"></IconButton>
+            <IconButton icon="icons/iconoir/solid/wolf.svg" :action="OpenEntityWindow"></IconButton>
         </div>
 
         <div class="horizontal-button">
-            <IconButton icon="icons/iconoir/regular/group.svg"></IconButton>
+            <IconButton icon="icons/iconoir/regular/group.svg" :action="OpenCharactersWindow"></IconButton>
-            <IconButton icon="icons/iconoir/regular/bookmark-book.svg"></IconButton>
+            <IconButton icon="icons/iconoir/regular/bookmark-book.svg" :action="OpenCompendiumWindow"></IconButton>
             <IconButton icon="icons/iconoir/regular/chat-bubble.svg" :action="OpenChat"></IconButton>
         </div>
 

client/src/views/managers/WindowManager.vue

@@ -22,6 +22,9 @@ import EnvironmentWindow from '../windows/dm/EnvironmentWindow.vue'
 import SystemSelectorWindow from '../windows/campaigns/SystemSelectorWindow.vue'
 import MapWindow from '../windows/dm/MapWindow.vue'
 import CombatWindow from '../windows/game/CombatWindow.vue'
+import EntityWindow from '../windows/dm/EntityWindow.vue'
+import CharactersWindow from '../windows/game/CharactersWindow.vue'
+import CompendiumWindow from '../windows/game/CompendiumWindow.vue'
 
 // Gestionem ventanas
 const reload = ReloadRef();
@@ -44,7 +47,10 @@ const WindowMap = {
   environment: EnvironmentWindow,
   system_selector: SystemSelectorWindow,
   map_window: MapWindow,
-  combat_window: CombatWindow
+  combat_window: CombatWindow,
+  entity_window: EntityWindow,
+  characters_window: CharactersWindow,
+  compendium_window: CompendiumWindow
 };
 </script>
 

client/src/views/partials/ChatComponent.vue

@@ -58,7 +58,7 @@ watch(chat, () => {
         <textarea ref="textInput" class="chat-input"></textarea>
         <div class="chat-input-actions">
             <div class="chat-input-actions-left">
-
+                <IconButton icon="icons/iconoir/regular/trash.svg"></IconButton>
             </div>
             <div class="chat-input-actions-right">
                 <IconButton icon="icons/iconoir/regular/send.svg"></IconButton>
@@ -126,7 +126,7 @@ watch(chat, () => {
 
 .chat-input-actions {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     margin-bottom: 8px;
     margin-left: 10px;
     margin-right: 10px;

client/src/views/partials/MapEntry.vue

@@ -1,15 +1,23 @@
 <script setup>
 import IconButton from '@/views/partials/game/IconButton.vue';
 import { onMounted, ref, toRaw, watch } from 'vue';
-import { GetMapId, LoadMap, RenameMap } from '../../services/Map';
+import { GetGlobalMapId, GetMapId, LoadMap, RenameMap, SendMap } from '../../services/Map';
 
 const toggled = ref("");
+const toggleGlobal = ref("")
+
 const title = ref(null);
 const mapId = GetMapId();
+const globalMapId = GetGlobalMapId();
 
 const props = defineProps(['data']);
 let data = props.data;
 
+function ShowMap(){
+    console.log("ShowMap")
+    SendMap(data._id);
+}
+
 function ViewMap(){
     LoadMap(toRaw(data))
 }
@@ -32,6 +40,14 @@ onMounted(() => {
             toggled.value = "toggled-no";
         }
     });
+
+    watch(globalMapId, () => {
+        if(globalMapId.value == data._id){
+            toggleGlobal.value = "toggled-yes";
+        } else {
+            toggleGlobal.value = "toggled-no";
+        }
+    })
 })
 </script>
 
@@ -40,6 +56,7 @@ onMounted(() => {
 <div class="map-entry-container">
     <input type="text" ref="title" v-on:change.prevent="Rename">
     <div class="horizontal-button">
+        <div class="toggler" :class="toggleGlobal"><IconButton icon="icons/iconoir/solid/play.svg" :action="ShowMap" size="small"></IconButton></div>
         <div class="toggler" :class="toggled"><IconButton icon="icons/iconoir/regular/eye.svg" :action="ViewMap" size="small"></IconButton></div>
         <IconButton icon="icons/iconoir/regular/trash.svg" :action="DeleteMap" size="small"></IconButton>
     </div>

client/src/views/windows/dm/EntityWindow.vue

@@ -0,0 +1,38 @@
+<script setup>
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+const props = defineProps(['data']);
+const data = props.data;
+
+const handle = ref(null);
+
+let id = data.id;
+
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {x: 400, y: 900});
+    ResetPosition(id, {x: 100, y: 20});
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+        
+        
+    </div>
+</template>
+
+
+<style scoped>
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+
+    user-select: none;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<script setup>
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+const props = defineProps(['data']);
+const data = props.data;
+
+const handle = ref(null);
+
+let id = data.id;
+
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {x: 400, y: 850});
+    ResetPosition(id, {x: window.innerWidth - 420, y: 60});
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+        
+        
+    </div>
+</template>
+
+
+<style scoped>
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+
+    user-select: none;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<script setup>
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+const props = defineProps(['data']);
+const data = props.data;
+
+const handle = ref(null);
+
+let id = data.id;
+
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {x: 600, y: 850});
+    ResetPosition(id, {x: window.innerWidth - 620, y: 60});
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+        
+        
+    </div>
+</template>
+
+
+<style scoped>
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+
+    user-select: none;
+}
+</style>

server/io/campaign.js

@@ -30,12 +30,22 @@ module.exports = io => {
                     CampaignUser.findOne({campaign: campaignId, user}).then(async campaignUser => {
                         if(campaignUser){
                             socket.join(campaignId);
+                            socket.campaignUser = campaignUser;
                             socket.campaign = campaignId;
 
-                            if(!sessions[campaignId]) sessions[campaignId] = {
+                            if(!sessions[campaignId]){ sessions[campaignId] = {
-                                players: await GetOfflinePlayers(campaignId),
+                                    players: await GetOfflinePlayers(campaignId),
-                                chat: []
+                                    chat: []
-                            };
+                                };
+                            } else {
+                                newPlayers = await GetOfflinePlayers(campaignId);
+                                newPlayers.forEach(player => {
+                                    for(let i = 0; i < sessions[campaignId].players.length; i++){
+                                        if(player._id == sessions[campaignId].players[i]._id) return;
+                                    }
+                                    sessions[campaignId].players.push(FilterUser(player));
+                                })
+                            }
                             
                             
                             console.log(socket.user.username + " ha entrado!");
@@ -60,5 +70,14 @@ module.exports = io => {
         socket.on('message', (data) => {
             io.to(socket.campaign).emit('message', data);
         })
+
+        socket.on('send_map', (data) => {
+            console.log("SENDMAP")
+            if(!socket.campaignUser) return;
+            if(socket.campaignUser.is_dm){
+                console.log("Sended!")
+                socket.to(socket.campaign).emit('change_map', data);
+            }
+        })
     });
 }