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

There is no god

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-04 21:57:07 +02:00
parent c56974a79f
commit dedae28456
8 changed files with 70 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -1,25 +1,26 @@
<template>
<div class="object-manager">
<div class="image-container">
<img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="objectImageUrl" :alt="'Object ' + selectedObject" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<div class="modal-form asset-manager">
<form class="form-fields" @submit.prevent>
<div class="form-field col-12">
<label for="name">Name</label>
<div class="modal-form asset-manager m-2.5 p-2.5 block">
<form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
<div class="form-field w-full flex flex-col mb-[20px]">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="form-field">
<label for="origin-x">Origin X</label>
<div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
<input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
</div>
<div class="form-field">
<label for="origin-y">Origin Y</label>
<div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
</div>
<div class="submit">
<button class="btn-cyan" type="button" @click="removeObject">Save</button>
<button class="btn-bordeaux" type="button" @click="removeObject">Remove</button>
<button class="btn-cyan px-[15px] py-1.5" type="button" @click="removeObject">Save</button>
<button class="btn-bordeaux ml-2.5 px-[15px] py-1.5" type="button" @click="removeObject">Remove</button>
</div>
</form>
</div>

10
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -1,17 +1,19 @@
<template>
<div class="asset add-new">
<div class="asset add-new relative p-2.5">
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s)
</label>
<input class="input-cyan search-field" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<a class="asset" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
<div class="asset-details">
<a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
<div class="asset-details flex items-center gap-2.5">
<!-- @TODO make all img have same width so text aligns nicely -->
<img :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
<span class="asset-name">{{ object.name }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
</template>

17
src/components/utilities/assetManager/partials/TileDetails.vue
View File

@ -1,16 +1,17 @@
<template>
<div class="tile-manager">
<div class="image-container">
<img :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<div class="modal-form asset-manager">
<form class="form-fields" @submit.prevent>
<div class="form-field tags">
<label for="tags">Tags</label>
<div class="modal-form asset-manager m-2.5 p-2.5 block">
<form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
<div class="form-field tags flex flex-col mb-[20px]">
<label class="mb-1.5 font-titles" for="tags">Tags</label>
<ChipsInput v-model="tags" @update:modelValue="handleTagsUpdate" />
</div>
<div class="submit">
<button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
<div class="submit w-full">
<button class="btn-bordeaux px-[15px] py-1.5" type="button" @click="removeTile">Remove</button>
</div>
</form>
</div>

11
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -1,16 +1,19 @@
<template>
<div class="asset add-new">
<div class="asset add-new relative p-2.5">
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload tile(s)
</label>
<input class="input-cyan search-field" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
</div>
<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}.png`" alt="Tile" />
<a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<div class="asset-details flex items-center gap-2.5">
<!-- @TODO make all img have same width so text aligns nicely -->
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
<span class="asset-name">{{ tile }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
</template>