noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code improvements

Browse Source
This commit is contained in:
Dennis Postma 2024-06-23 01:53:11 +02:00
parent 4372dc5430
commit 9bbaeb856d
2 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/zone/tile_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

46
src/components/utilities/assetManager/AssetManager.vue
View File

@ -19,12 +19,25 @@
<!-- Assets --> <!-- Assets -->
<div class="assets active"> <div class="assets active">
<a class="asset"> <div class="asset">
<!-- @TODO: can this pls be less html, make input 100% and fix the spacing below -->
<div class="modal-form">
<div class="form-fields">
<div class="form-field">
<input class="input-cyan" placeholder="Search..." />
</div>
</div>
</div>
</div>
<div class="asset">
<span class="asset-name">Upload new</span> <span class="asset-name">Upload new</span>
<input ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" /> <input ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
</a> </div>
<a class="asset"> <a class="asset" v-for="(tile, index) in tiles" :key="index">
<span class="asset-name" v-for="(tile, index) in tiles" :key="index">{{ tile }}</span> <div class="asset-details">
<img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
<span class="asset-name">{{ tile }}</span>
</div>
</a> </a>
</div> </div>
<div class="assets"> <div class="assets">
@ -63,6 +76,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import {useSocketStore} from '@/stores/socket' import {useSocketStore} from '@/stores/socket'
import config from '@/config'
const socket = useSocketStore() const socket = useSocketStore()
const tileUploadField = ref(null) const tileUploadField = ref(null)
@ -71,7 +85,15 @@ const tiles = ref()
const handleFileUpload = (e: Event) => { const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files const files = (e.target as HTMLInputElement).files
if (!files) return if (!files) return
socket.connection.emit('gm:tile:upload', files) 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(() => { onMounted(() => {
@ -81,7 +103,7 @@ onMounted(() => {
}) })
</script> </script>
<style lang="scss"> <style lang="scss" scroped>
@import '@/assets/scss/main'; @import '@/assets/scss/main';
.container { .container {
@ -101,6 +123,7 @@ onMounted(() => {
} }
.assets { .assets {
overflow:auto;
width: 35%; width: 35%;
display: none; display: none;
&.active { &.active {
@ -145,6 +168,16 @@ onMounted(() => {
} }
} }
.asset-details {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
img {
height: 28px;
}
}
.asset-categories, .assets, .asset-info { .asset-categories, .assets, .asset-info {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -158,6 +191,7 @@ onMounted(() => {
background-color: $dark-cyan; background-color: $dark-cyan;
} }
.category, .asset, .image-container { .category, .asset, .image-container {
position: relative; position: relative;
padding: 10px; padding: 10px;
&::after { &::after {