Refactor and added support for window resizing

client/src/services/Windows.js

@@ -21,7 +21,6 @@ const defValues = {
     'main_menu': {
         id: 'main_menu',
         title: "DragonRoll",
-        resizable: true,
     },
     'edit_profile': {
         id: 'edit_profile',
@@ -136,7 +135,8 @@ function SetupHandle(id, handle){
     let currentWindowHandleId = "window-handle-" + id;
     let currentWindowResizerId = "window-resize-handle-" + id;
     
-    let mouseDown = false;
+    let draggingWindow = false;
+    let resizingWindow = false;
 
     let currentWindow = document.getElementById(currentWindowId);
     let handler = document.getElementById(currentWindowHandleId);
@@ -145,6 +145,9 @@ function SetupHandle(id, handle){
     let offsetX = 0;
     let offsetY = 0;
 
+    let resizeOffsetX = 0;
+    let resizeOffsetY = 0;
+
     // Programar un resizer mitjanament competent
 
     currentWindow.addEventListener("mousedown", (event) => {
@@ -152,15 +155,16 @@ function SetupHandle(id, handle){
     });
 
     handler.addEventListener("mousedown", (event) => {
-        mouseDown = true;
+        draggingWindow = true;
 
         let windowRect = currentWindow.getBoundingClientRect();
         offsetX = windowRect.left - event.clientX;
         offsetY = windowRect.top - event.clientY;
     })
 
+    // Move window listeners
     document.addEventListener("mousemove", (event) => {
-        if(!mouseDown) return;
+        if(!draggingWindow) return;
 
         if(event.clientX + offsetX < -currentWindow.getBoundingClientRect().width + 20) currentWindow.style.left = (-currentWindow.getBoundingClientRect().width + 20) + "px";
         else if(event.clientX + offsetX > window.innerWidth - 20) currentWindow.style.left = (window.innerWidth - 20) + "px";
@@ -172,33 +176,81 @@ function SetupHandle(id, handle){
     })
 
     document.addEventListener("mouseup", (event) => {
-        mouseDown = false;
+        draggingWindow = false;
         // ummm suposo que no pots tancar mentres mous?
         SaveWindowPos({id, x: parseInt(currentWindow.style.left, 10), y: parseInt(currentWindow.style.top, 10)});
     });
 
+    // Resize window listeners
+    resizer.addEventListener("mousedown", (event) => {
+        resizingWindow = true;
+
+        let windowRect = currentWindow.getBoundingClientRect();
+        resizeOffsetX = parseInt(currentWindow.style.width) - event.clientX;
+        resizeOffsetY = parseInt(currentWindow.style.height) - event.clientY;
+    });
+
+    document.addEventListener("mousemove", (event) => {
+        if(!resizingWindow) return;
+
+        let newWidth = event.clientX + resizeOffsetX;
+        let newHeight = event.clientY + resizeOffsetY;
+
+        if(win.minHeight) if(win.minHeight > newHeight) newHeight = win.minHeight;
+        if(win.maxHeight) if(win.maxHeight < newHeight) newHeight = win.maxHeight;
+
+        if(win.minWidth) if(win.minWidth > newWidth) newWidth = win.minWidth;
+        if(win.maxWidth) if(win.maxWidth < newWidth) newWidth = win.maxWidth;
+
+        currentWindow.style.width = newWidth + "px";
+        currentWindow.style.height = newHeight + "px";
+    });
+
+    document.addEventListener("mouseup", (event) => {
+        resizingWindow = false;
+        
+        win.width = parseInt(currentWindow.style.width, 10);
+        win.height = parseInt(currentWindow.style.height, 10);
+    });
+
     handle.value.setupHandle();
 }
 
+function SetResizable(id, resizable){
+    let win = GetWindowWithId(id);
+    console.log(win);
+    win.resizable = resizable;
+}
+
 function SetSize(id, size){
     let currentWindowId = "window-wrapper-" + id;
     let currentWindow = document.getElementById(currentWindowId);
     let win = GetWindowWithId(id);
 
-    currentWindow.style.width = size.x + "px";
+    currentWindow.style.width = size.width + "px";
-    currentWindow.style.height = size.y + "px";
+    currentWindow.style.height = size.height + "px";
 
-    win.size = size;
+    win.width = size.width;
 }
 
 function SetMaxSize(id, maxSize){
     let win = GetWindowWithId(id);
-    win.maxSize = maxSize;
+
+    if(maxSize.width) win.maxWidth = maxSize.width;
+    else win.maxWidth = win.width;
+
+    if(maxSize.height) win.maxHeight = maxSize.height;
+    else win.maxHeight = win.height;
 }
 
 function SetMinSize(id, minSize){
     let win = GetWindowWithId(id);
-    win.minSize = minSize;
+
+    if(minSize.width) win.minWidth = minSize.width;
+    else win.minWidth = win.width;
+
+    if(minSize.height) win.minHeight = minSize.height;
+    else win.minHeight = win.height;
 }
 
 function SetPosition(id, pos){
@@ -239,6 +291,7 @@ function ResetPosition(id, pos){
 
 
 function CreateWindow(type, data = {}){
+
     let finalData = {...{type}, ...defValues[type], ...data}
 
     let contains = false;
@@ -312,6 +365,7 @@ function SetOnTop(id){
 export {
     SetupHandle,
     SetSize,
+    SetResizable,
     SetMaxSize,
     SetMinSize,
     SetPosition,

client/src/views/partials/ChatComponent.vue

@@ -74,7 +74,7 @@ watch(chat, () => {
 
 .chat-container {
     display: flex;
-    height: 720px;
+    height: calc(100% - 24px);
     width: 100%;
     flex-direction: column;
 
@@ -92,7 +92,6 @@ watch(chat, () => {
     flex-direction: column;
     
     overflow-y: auto;
-    max-height: 620px;
 
     margin-bottom: 10px;
 }

client/src/views/partials/WindowHandle.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { GetWindowWithId } from '@/services/Windows';
-import { ClearWindow } from '../../services/Windows';
+import { ClearWindow, Windows } from '../../services/Windows';
 
 import { AddSound } from '../../services/Sound';
 
@@ -15,14 +15,13 @@ const backButton = ref(null);
 const title = ref("");
 const close = ref(false);
 const hasBack = ref(false);
-const resizable = ref(false);
 const def = ref(true);
+const resizable = ref(false);
 
 let backFunction;
 
 function setupHandle() {
     let win = GetWindowWithId(id);
-
     if(win.title) title.value = win.title;
     if(win.close) close.value = true;
     if(win.back) {
@@ -30,10 +29,6 @@ function setupHandle() {
         backFunction = win.back;
     }
 
-    if(win.resizable){
-        resizable.value = true;
-    }
-
     if(handleHeight) {
         let handle = document.getElementById('window-handle-' + id);
         handle.style.height = handleHeight;
@@ -56,6 +51,10 @@ function CloseButton(){
 
 onMounted(() => {
     if(props.custom) def.value = false;
+    let win = GetWindowWithId(id);
+    watch(GetWindowWithId(id), () => {
+        resizable.value = win.resizable;
+    })
 });
 
 defineExpose({
@@ -83,7 +82,7 @@ defineExpose({
 
 
     <div v-show="resizable" class="window-resize-handle" :id="'window-resize-handle-' + id">
-        <img src="icons/ui/resize-handle.svg">
+        <img src="icons/ui/resize-handle.svg" draggable="false">
     </div>
 </template>
 
@@ -102,6 +101,7 @@ defineExpose({
         width: 18px;
         height: 18px;
     }
+    z-index: 100;
 }
 
 .window-handle {

client/src/views/windows/AccountSettingsWindow.vue

@@ -13,7 +13,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 500, y: 380});
+    SetSize(id, {width: 500, height: 380});
     ResetPosition(id, "center");
 });
 </script>

client/src/views/windows/EditProfileWindow.vue

@@ -18,7 +18,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 500, y: 380});
+    SetSize(id, {width: 500, height: 380});
     ResetPosition(id, "center");
 });
 </script>

client/src/views/windows/ExampleWindow.vue

@@ -15,7 +15,7 @@ const test = ref(null)
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 500, y: 380});
+    SetSize(id, {width: 500, height: 380});
     ResetPosition(id, "center");
 });
 </script>

client/src/views/windows/LoginWindow.vue

@@ -33,7 +33,7 @@ onMounted(() => {
   successMessage.value = success;
 
   SetupHandle(id, handle);
-  SetSize(id, {x: 450, y: 500});
+  SetSize(id, {width: 450, height: 500});
   ResetPosition(id, "center");
 });
 

client/src/views/windows/MainMenuWindow.vue

@@ -6,12 +6,12 @@ import WindowHandle from '@/views/partials/WindowHandle.vue';
 import EditUserPartial from '@/views/partials/EditUserPartial.vue'
 
 import { onMounted, onUpdated, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
+import { SetupHandle, SetSize, SetResizable, SetMinSize, SetMaxSize, SetPosition, ResetPosition } from '@/services/Windows';
 
 import Api from '@/services/Api.js'
 
 import useEmitter from '@/services/Emitter';
-import { ClearWindow, CreateWindow } from '../../services/Windows';
+import { ClearWindow, CreateWindow, Windows } from '../../services/Windows';
 const emitter = useEmitter();
 const handle = ref(null);
 
@@ -24,7 +24,10 @@ let title = data.title;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 500, y: 540});
+    SetSize(id, {width: 500, height: 540});
+    SetResizable(id, true);
+    SetMinSize(id, {width: 500, height: 540});
+    SetMaxSize(id, {width: 700, height: 700});
     ResetPosition(id, "center", emitter);
 });
 

client/src/views/windows/RegisterWindow.vue

@@ -30,7 +30,7 @@ let title = data.title;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 450, y: 800});
+    SetSize(id, {width: 450, height: 800});
     ResetPosition(id, "center");
 });
 

client/src/views/windows/campaigns/CampaignListWindow.vue

@@ -20,7 +20,7 @@ const otherCampaigns = ref([]);
 let id = data.id;
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 500, y: 680});
+    SetSize(id, {width: 500, height: 680});
     ResetPosition(id, "center");
 
     RefreshCampaigns();

client/src/views/windows/campaigns/CampaignPreviewWindow.vue

@@ -28,12 +28,8 @@ let id = data.id;
 onMounted(() => {
     SetupHandle(id, handle);
 
-    if(data.style == 'compact') {
+    SetSize(id, {width: 800, height: 750});
-        SetSize(id, {x: 800, y: 750});
     hide_chat.value = true;
-    } else {
-        SetSize(id, {x: 1200, y: 750});
-    }
     
     ResetPosition(id, "center");
 

client/src/views/windows/campaigns/JoinCampaignWindow.vue

@@ -17,7 +17,7 @@ const code = ref("");
 let id = data.id;
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 300, y: 150});
+    SetSize(id, {width: 300, height: 150});
     ResetPosition(id, "center");
 });
 

client/src/views/windows/campaigns/NewCampaignWindow.vue

@@ -24,7 +24,7 @@ let system = "";
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 300, y: 240});
+    SetSize(id, {width: 300, height: 240});
     ResetPosition(id, "center");
     GetEmitter().on('select', (system_id) => Select(system_id))
 

client/src/views/windows/campaigns/SystemSelectorWindow.vue

@@ -28,7 +28,7 @@ provide('clearParent', Clear);
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 300, y: 600});
+    SetSize(id, {width: 300, height: 600});
     ResetPosition(id, "center");
 
     console.log(systems.value)

client/src/views/windows/database/DbWindow.vue

@@ -12,7 +12,7 @@ const data = props.data;
 let id = data.id;
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 500, y: 380});
+    SetSize(id, {width: 500, height: 380});
     ResetPosition(id, "center");
 });
 </script>

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

@@ -12,7 +12,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 400, y: 900});
+    SetSize(id, {width: 400, height: 900});
     ResetPosition(id, {x: 100, y: 20});
 });
 </script>

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

@@ -19,7 +19,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 200, y: 300});
+    SetSize(id, {width: 200, height: 300});
     ResetPosition(id, {x: data.x, y: data.y});
 
     console.log(env_background.value.GetColor());

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

@@ -15,7 +15,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 40, y: 200});
+    SetSize(id, {width: 40, height: 200});
     ResetPosition(id, {x: 10, y: 200});
 });
 

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

@@ -26,7 +26,7 @@ function NewMapButton(){
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 300, y: 600});
+    SetSize(id, {width: 300, height: 600});
     ResetPosition(id, {x: 100, y: 10});
 
     mapUploader.value.addEventListener('change', (event) => {

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

@@ -4,7 +4,7 @@ import WindowHandle from '@/views/partials/WindowHandle.vue';
 import { onMounted, ref } from 'vue';
 import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
 import GameEntry from '../../partials/GameEntry.vue';
-import { CreateWindow } from '../../../services/Windows';
+import { CreateWindow, SetMinSize, SetMaxSize, SetResizable } from '../../../services/Windows';
 const props = defineProps(['data']);
 const data = props.data;
 
@@ -14,7 +14,11 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 400, y: 850});
+
+    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});
 });
 

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

@@ -2,8 +2,9 @@
 import WindowHandle from '@/views/partials/WindowHandle.vue';
 
 import { onMounted, onUpdated, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
+import { SetupHandle, SetSize, SetResizable, SetMinSize, SetPosition, ResetPosition } from '@/services/Windows';
 import ChatComponent from '../../partials/ChatComponent.vue';
+import { SetMaxSize } from '../../../services/Windows';
 
 const props = defineProps(['data']);
 const data = props.data;
@@ -14,7 +15,11 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 400, y: 750});
+    SetSize(id, {width: 400, height: 750});
+    SetResizable(id, true);
+    SetMinSize(id, {height: 300});
+    SetMaxSize(id, {width: 400})
+
     ResetPosition(id, {x: window.innerWidth - 420, y: 80});
 });
 </script>

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

@@ -13,7 +13,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 200, y: 300});
+    SetSize(id, {width: 200, height: 300});
     ResetPosition(id, {x: 30, y: 300});
 });
 </script>

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

@@ -12,7 +12,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 600, y: 850});
+    SetSize(id, {width: 600, height: 850});
     ResetPosition(id, {x: window.innerWidth - 620, y: 60});
 });
 </script>

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

@@ -71,7 +71,7 @@ function ThrowCustomDice(){
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 300, y: 210});
+    SetSize(id, {width: 300, height: 210});
     ResetPosition(id, {x: 100, y: 150});
 });
 </script>

client/src/views/windows/game/dnd-5e/CharacterSheet.vue

@@ -14,7 +14,7 @@ let id = data.id;
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {x: 700, y: 850});
+    SetSize(id, {width: 700, height: 850});
     ResetPosition(id, {x: window.innerWidth - 600, y: 60});
 
     ConfigureBookmarks();
@@ -108,8 +108,8 @@ function ConfigureBookmarks(){
             </div>
             <div class="two-column-layout">
                 <div class="flex-container border">
-                    <!--<img class="player-sheet-splash" src="img/monke.jpg">-->
+                    <img class="player-sheet-splash" src="img/monke.jpg">
-                    <img class="player-sheet-splash" src="img/dracblau.png">
+                    <!--<img class="player-sheet-splash" src="img/dracblau.png">-->
                     <div class="player-info-div">
 
                         <div class="ac-container">