Worked on game master tools

public/assets/icons/modalFullscreen.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33 6H42V15" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42 33V42H33" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 42H6V33" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 15V6H15" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Game.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="game-container">
-    <Modal :isModalOpen="true">
-      <template #modal-header>
-        <h3 class="modal-title">Tile editor</h3>
-      </template>
-      <template #modal-body>
-        <ZoneEditor />
-      </template>
-    </Modal>
-
+    <GmUtilityWindow />
     <div class="top-ui"><Hud /></div>
 
     <Game :config="gameConfig" class="game" @create="createGame">
@@ -36,6 +28,7 @@ import Menubar from '@/components/game/Menu.vue'
 import { onUnmounted } from 'vue'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
 import Modal from '@/components/utilities/Modal.vue'
+import GmUtilityWindow from '@/components/utilities/gmTools/GmUtilityWindow.vue'
 
 const socket = useSocketStore()
 

src/components/World.vue

@@ -1,7 +1,7 @@
 <template>
   <TilemapLayerC v-if="zoneStore.isLoaded" :tilemap="tileMap" :tileset="zoneStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="layer" />
-  <Container v-if="zoneStore.isLoaded">
+  <Container v-if="zoneStore.isLoaded && !zoneEditorStore.isLoaded">
     <Character :layer="layer" v-for="character in zoneStore.getCharacters" :key="character.id" :character="character" />
   </Container>
 </template>
@@ -17,6 +17,7 @@ import { onBeforeMount, ref, type Ref, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
 import { useZoneStore } from '@/stores/zone'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 
 // Phavuer logic
 let scene = useScene()
@@ -40,6 +41,7 @@ scene.cameras.main.centerOn(centerX, centerY)
 
 // Multiplayer / server logics
 const zoneStore = useZoneStore()
+const zoneEditorStore = useZoneEditorStore()
 const socket = useSocketStore()
 
 // Watch for changes in the zoneStore and update the layer

src/components/utilities/Modal.vue

@@ -3,7 +3,10 @@
     <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
       <div class="modal-header" @mousedown="startDrag">
         <slot name="modalHeader" />
-        <button @click="close" v-if="closable"><img draggable="false" src="/assets/icons/close-button-white.svg" /></button>
+        <div class="buttons">
+          <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>
+          <button @click="close" v-if="closable"><img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" /></button>
+        </div>
       </div>
       <div class="modal-body">
         <slot name="modalBody" />
@@ -125,21 +128,26 @@ onUnmounted(() => {
       font-weight: 400;
     }
 
-    button {
-      width: 20px;
-      height: 20px;
-      margin: 0;
-      padding: 0;
-      position: relative;
+    .buttons {
+      display: flex;
+      gap: 10px;
 
-      img {
-        width: 100%;
-        height: 100%;
-      }
+      button {
+        width: 20px;
+        height: 20px;
+        margin: 0;
+        padding: 0;
+        position: relative;
 
-      &:hover {
-        transform: rotate(180deg);
-        transition: ease-in-out transform 0.3s;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        &:hover {
+          transform: rotate(180deg);
+          transition: ease-in-out transform 0.3s;
+        }
       }
     }
   }

src/components/utilities/gmTools/GmUtilityWindow.vue

@@ -0,0 +1,14 @@
+<template>
+  <Modal :isModalOpen="true">
+    <template #modalHeader>
+      <h3 class="modal-title">GM tools</h3>
+    </template>
+    <template #modalBody>
+      <p></p>
+    </template>
+  </Modal>
+</template>
+<script setup lang="ts">
+import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
+import Modal from '@/components/utilities/Modal.vue'
+</script>

src/stores/zoneEditor.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+
+export const useZoneEditorStore = defineStore('zoneEditor', {
+  state: () => ({
+    loaded: false,
+    tiles: undefined,
+  }),
+  getters: {
+    isLoaded: (state) => state.loaded,
+    getTiles: (state) => state.tiles,
+  },
+  actions: {
+    loadTiles(tiles: any) {
+      this.tiles = tiles
+      this.loaded = true
+    },
+  }
+})