From 79f804d5f54837986cc9c3c0a8e428f0482b67c0 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 20 Jun 2024 00:02:47 +0200
Subject: [PATCH] Created GM Panel

---
 .../utilities/AssetManager/AssetManager.vue   | 126 ++++++++----------
 src/components/utilities/GmPanel.vue          |  47 +++++++
 .../utilities/zoneEditor/ZoneEditor.vue       |   4 +-
 3 files changed, 108 insertions(+), 69 deletions(-)
 create mode 100644 src/components/utilities/GmPanel.vue

diff --git a/src/components/utilities/AssetManager/AssetManager.vue b/src/components/utilities/AssetManager/AssetManager.vue
index 06a1c0b..80757aa 100644
--- a/src/components/utilities/AssetManager/AssetManager.vue
+++ b/src/components/utilities/AssetManager/AssetManager.vue
@@ -1,78 +1,70 @@
 <template>
-  <Modal :isModalOpen="true" :modal-width="800" :modal-height="630">
-    <template #modalHeader>
-      <h3 class="modal-title">Asset manager</h3>
-    </template>
-    <template #modalBody>
-      <div class="assets-container">
-        <div class="asset-categories">
-          <!-- TODO: Asset categories, replace with loop -->
-          <a class="category">
-            <span class="category-name">Tiles</span>
-          </a>
-          <!-- Example selected category -->
-          <a class="category selected">
-            <span class="category-name">Walls</span>
-          </a>
-          <a class="category">
-            <span class="category-name">Weapons</span>
-          </a>
-          <a class="category">
-            <span class="category-name">NPC's</span>
-          </a>
-        </div>
+  <div class="assets-container">
+    <div class="asset-categories">
+      <!-- TODO: Asset categories, replace with loop -->
+      <a class="category">
+        <span class="category-name">Tiles</span>
+      </a>
+      <!-- Example selected category -->
+      <a class="category selected">
+        <span class="category-name">Walls</span>
+      </a>
+      <a class="category">
+        <span class="category-name">Weapons</span>
+      </a>
+      <a class="category">
+        <span class="category-name">NPC's</span>
+      </a>
+    </div>
 
-        <!-- TODO: Show content based on selected category, replace with loop -->
-        <div class="assets tiles">
-          
-        </div>
-        <!-- Example selected category & asset -->
-        <div class="assets walls active">
-          <a class="asset selected">
-            <span class="asset-name">Wall #1</span>
-          </a>
-        </div>
-        <div class="assets weapons">
-          
-        </div>
-        <div class="assets npcs">
+    <!-- TODO: Show content based on selected category, replace with loop -->
+    <div class="assets tiles">
+      
+    </div>
+    <!-- Example selected category & asset -->
+    <div class="assets walls active">
+      <a class="asset selected">
+        <span class="asset-name">Wall #1</span>
+      </a>
+    </div>
+    <div class="assets weapons">
+      
+    </div>
+    <div class="assets npcs">
 
-        </div>
+    </div>
 
-        <div class="asset-info">
-          <div class="image-container">
-            <img src="/assets/placeholders/wall-1.png"/>
-          </div>
-          <div class="modal-form asset-manager">
-            <form class="form-fields">
-              <div class="form-field name">
-                <label for="name">Name</label>
-                <input class="input-cyan" type="text" name="name" placeholder="Wall #1">
-              </div>
-
-              <div class="form-field">
-                <label for="originX">OriginX</label>
-                <input class="input-cyan" type="number" name="originX" placeholder="0">
-              </div>
-
-              <div class="form-field">
-                <label for="originY">OriginY</label>
-                <input class="input-cyan" type="number" name="originY" placeholder="0">
-              </div>
-
-              <div class="submit">
-                <button class="btn-cyan" type="submit">SAVE</button>
-              </div>
-            </form>
-          </div>
-        </div>
+    <div class="asset-info">
+      <div class="image-container">
+        <img src="/assets/placeholders/wall-1.png"/>
       </div>
-    </template>
-  </Modal>
+      <div class="modal-form asset-manager">
+        <form class="form-fields">
+          <div class="form-field name">
+            <label for="name">Name</label>
+            <input class="input-cyan" type="text" name="name" placeholder="Wall #1">
+          </div>
+
+          <div class="form-field">
+            <label for="originX">OriginX</label>
+            <input class="input-cyan" type="number" name="originX" placeholder="0">
+          </div>
+
+          <div class="form-field">
+            <label for="originY">OriginY</label>
+            <input class="input-cyan" type="number" name="originY" placeholder="0">
+          </div>
+
+          <div class="submit">
+            <button class="btn-cyan" type="submit">SAVE</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import Modal from '@/components/utilities/Modal.vue'
 </script>
 
 <style lang="scss">
diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue
new file mode 100644
index 0000000..a1d266f
--- /dev/null
+++ b/src/components/utilities/GmPanel.vue
@@ -0,0 +1,47 @@
+<template>
+    <Modal :isModalOpen="true" :modal-width="800" :modal-height="650">
+        <template #modalHeader>
+            <h3 class="modal-title">GM Panel</h3>
+            <div class="gm-selector">
+                <button class="btn-cyan" @click="toggle = 'asset-manager'">Asset Manager</button>
+                <button class="btn-cyan" >Button 2</button>
+                <button class="btn-cyan" >Button 3</button>
+            </div>
+        </template>
+        <template #modalBody>
+            
+
+            <div class="panel-body">
+                <AssetManager v-if="toggle == 'asset-manager'" />
+            </div>
+        </template>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
+
+let toggle = ref('asset-manager');
+
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/main';
+
+.gm-selector {
+    display: flex;
+    gap: 5px;
+    align-self: end;
+
+    button {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: none;
+        padding: 6px 15px;
+        min-width: 100px;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index e4b9239..18e7e11 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -13,7 +13,7 @@
   <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
   <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
-  <AssetManager />
+  <GmPanel />
 </template>
 
 <script setup lang="ts">
@@ -31,7 +31,7 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
 import { generateTilemap, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
 import type { Zone } from '@/types'
-import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
+import GmPanel from '@/components/utilities/GmPanel.vue'
 
 // Phavuer logic
 let scene = useScene()