Massadsda

client/public/icons/ui/resize-handle.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21 15-6 6m6-13-13 13" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

client/src/services/Windows.js

@@ -3,6 +3,7 @@ import { Disconnect } from './Dragonroll';
 
 const windows = ref([])
 
+// Presets
 const defValues = {
     'test': {
         id: "example",
@@ -19,7 +20,8 @@ const defValues = {
     },
     'main_menu': {
         id: 'main_menu',
-        title: "DragonRoll"
+        title: "DragonRoll",
+        resizable: true,
     },
     'edit_profile': {
         id: 'edit_profile',
@@ -132,15 +134,19 @@ function SetupHandle(id, handle){
 
     let currentWindowId = "window-wrapper-" + id;
     let currentWindowHandleId = "window-handle-" + id;
+    let currentWindowResizerId = "window-resize-handle-" + id;
     
     let mouseDown = false;
 
     let currentWindow = document.getElementById(currentWindowId);
     let handler = document.getElementById(currentWindowHandleId);
+    let resizer = document.getElementById(currentWindowResizerId);
 
     let offsetX = 0;
     let offsetY = 0;
 
+    // Programar un resizer mitjanament competent
+
     currentWindow.addEventListener("mousedown", (event) => {
         SetOnTop(id);
     });
@@ -177,9 +183,22 @@ function SetupHandle(id, handle){
 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.height = size.y + "px";
+
+    win.size = size;
+}
+
+function SetMaxSize(id, maxSize){
+    let win = GetWindowWithId(id);
+    win.maxSize = maxSize;
+}
+
+function SetMinSize(id, minSize){
+    let win = GetWindowWithId(id);
+    win.minSize = minSize;
 }
 
 function SetPosition(id, pos){
@@ -293,6 +312,8 @@ function SetOnTop(id){
 export {
     SetupHandle,
     SetSize,
+    SetMaxSize,
+    SetMinSize,
     SetPosition,
     ResetPosition,
     Windows,

client/src/views/partials/WindowHandle.vue

@@ -15,6 +15,7 @@ const backButton = ref(null);
 const title = ref("");
 const close = ref(false);
 const hasBack = ref(false);
+const resizable = ref(false);
 const def = ref(true);
 
 let backFunction;
@@ -29,6 +30,10 @@ function setupHandle() {
         backFunction = win.back;
     }
 
+    if(win.resizable){
+        resizable.value = true;
+    }
+
     if(handleHeight) {
         let handle = document.getElementById('window-handle-' + id);
         handle.style.height = handleHeight;
@@ -68,20 +73,39 @@ defineExpose({
         <div class="center" v-if="def">
             <span>{{ title }}</span>
         </div>
-        <div class="right" v-if="def">
+        <div class="right">
             <img class="icon" src="icons/iconoir/regular/xmark.svg" draggable="false" ref="closeButton" v-if="close" v-on:click="CloseButton">
         </div>
         <!-- span>{{ title }}</span>
             
         -->
     </div>
+
+
+    <div v-show="resizable" class="window-resize-handle" :id="'window-resize-handle-' + id">
+        <img src="icons/ui/resize-handle.svg">
+    </div>
 </template>
 
 
 <style scoped lang="scss">
+.window-resize-handle {
+    position: absolute;
+    filter: invert(0.8);
+    opacity: 0.6;
+    right: 0px;
+    bottom: 0px;
+    width: 18px;
+    height: 18px;
+
+    img {
+        width: 18px;
+        height: 18px;
+    }
+}
 
 .window-handle {
-    
+
     .left, .right {
         flex: 1;
         display: flex;
@@ -92,6 +116,7 @@ defineExpose({
     }
 
     .right {
+        height: 24px;
         justify-content: right;
     }
 

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

@@ -539,7 +539,7 @@ div.player-info-div {
 .ac-container {
     width: 70px;
     height: 70px;
-    background-image: url('icons/other/noun-shield.svg');
+    background-image: url('icons/ui/noun-shield.svg');
     background-size: cover;
     background-repeat: no-repeat;