asset mngr stuff

src/components/utilities/assetManager/partials/ObjectList.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="asset">
+    <input class="input-cyan search-field" placeholder="Search..." />
+  </div>
+
+  <!-- TODO: use the passed :name in props to switch out assets-->
+  <a class="asset" :class="{ active: name === 'tiles' }" v-for="(tile, index) in tiles" :key="index">
+    <div class="asset-details">
+      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
+      <span class="asset-name">{{ tile }}</span>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { useSocketStore } from '@/stores/socket'
+import config from '@/config'
+import { onMounted, ref, defineProps } from 'vue'
+
+const props = defineProps<{ name: string }>()
+
+const socket = useSocketStore()
+const tileUploadField = ref(null)
+const tiles = ref()
+
+const handleFileUpload = (e: Event) => {
+  const files = (e.target as HTMLInputElement).files
+  if (!files) return
+  socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to upload tile')
+      return
+    }
+    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+      tiles.value = response
+    })
+  })
+}
+
+onMounted(() => {
+  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+    tiles.value = response
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/main';
+
+.asset {
+  &.add-new {
+    display: flex;
+    align-items: center;
+    gap: 10px 20px;
+    flex-wrap: wrap;
+    .asset-name {
+      flex-shrink: 0;
+    }
+  }
+  .search-field {
+    width: calc(100% - 20px);
+  }
+  .file-upload {
+    background-color: rgba($cyan, 0.5);
+    border: 1px solid $white;
+    border-radius: 5px;
+    text-shadow: 0 3px 6px rgba($black, 0.2);
+    padding: 6px 15px;
+    display: inline-flex;
+
+    &:hover {
+      background-color: $cyan;
+      cursor: pointer;
+    }
+    input[type='file'] {
+      display: none;
+    }
+  }
+}
+</style>

src/components/utilities/assetManager/partials/TileDetails.vue

@@ -1,28 +1,41 @@
 <template>
   <div class="image-container">
-    <img src="/assets/placeholders/wall-1.png" />
+    <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}`" alt="Tile" />
   </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" />
+        <input class="input-cyan" type="text" name="name" placeholder="E.g. grass" />
       </div>
 
       <div class="submit">
         <button class="btn-cyan" type="submit">Save</button>
-        <button class="btn-bordeaux" type="submit">Remove</button>
+        <button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
       </div>
     </form>
   </div>
 </template>
 
 <script setup lang="ts">
-const properties = defineProps({
-  tile: String
-});
+import config from '@/config'
+import { useAssetManagerStore } from '@/stores/assetManager'
+import { useSocketStore } from '@/stores/socket'
+
+const socket = useSocketStore()
+const assetManagerStore = useAssetManagerStore()
+
+function removeTile() {
+  socket.connection.emit('gm:tile:remove', { tile: assetManagerStore.selectedTile }, (response: boolean) => {
+    if (!response) {
+      return
+    }
+    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+      assetManagerStore.setTileList(response)
+      assetManagerStore.setSelectedTile('')
+    })
+  })
+}
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>

src/components/utilities/assetManager/partials/TileList.vue

@@ -1,34 +1,28 @@
 <template>
-  <div class="asset">
-    <input class="input-cyan search-field" placeholder="Search..." />
-  </div>
   <div class="asset add-new">
-    <span class="asset-name">Upload new</span>
     <label for="upload-asset" class="file-upload">
       <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
-      Choose file
+      Upload tile(s)
     </label>
+    <input class="input-cyan search-field" placeholder="Search..." />
   </div>
-
-  <!-- TODO: use the passed :name in props to switch out assets-->
-  <a class="asset" :class="{ active: name === 'tiles' }" v-for="(tile, index) in tiles" :key="index">
+  <a class="asset" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
     <div class="asset-details">
-      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
+      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" alt="Tile" />
       <span class="asset-name">{{ tile }}</span>
     </div>
   </a>
 </template>
 
 <script setup lang="ts">
-import {useSocketStore} from '@/stores/socket'
 import config from '@/config'
-import { onMounted, ref, defineProps } from 'vue'
-
-const props = defineProps<{ name: string }>()
+import { useSocketStore } from '@/stores/socket'
+import { onMounted, ref } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManager'
 
 const socket = useSocketStore()
 const tileUploadField = ref(null)
-const tiles = ref()
+const assetManagerStore = useAssetManagerStore()
 
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
@@ -39,14 +33,14 @@ const handleFileUpload = (e: Event) => {
       return
     }
     socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-      tiles.value = response
+      assetManagerStore.setTileList(response)
     })
   })
 }
 
 onMounted(() => {
   socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response
+    assetManagerStore.setTileList(response)
   })
 })
 </script>
@@ -55,9 +49,10 @@ onMounted(() => {
 @import '@/assets/scss/main';
 
 .asset {
+  cursor: pointer;
+
   &.add-new {
     display: flex;
-    align-items: center;
     gap: 10px 20px;
     flex-wrap: wrap;
     .asset-name {
@@ -79,9 +74,9 @@ onMounted(() => {
       background-color: $cyan;
       cursor: pointer;
     }
-    input[type="file"] {
+    input[type='file'] {
       display: none;
     }
   }
 }
-</style>
+</style>