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

#259 - Changed bg options for modals, restyled GM Panel

Browse Source
This commit is contained in:
Colin Kallemein 2024-12-15 15:24:10 +01:00
parent d58cfa668d
commit 03313cb092
19 changed files with 103 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/gameMaster/GmPanel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :is-full-screen="true" :disable-bg-texture="true"> <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :is-full-screen="true" :bg-style="'dark'">
<template #modalHeader> <template #modalHeader>
<div class="flex gap-1.5 flex-wrap"> <div class="flex gap-1.5 flex-wrap">
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button> <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>

64
src/components/gameMaster/assetManager/AssetManager.vue
View File

@ -1,53 +1,41 @@
<template> <template>
<div class="flex h-full w-full relative"> <div class="flex gap-4 h-[calc(100%_-_32px)] w-[calc(100%_-_32px)] relative m-4">
<div class="w-2/12 flex flex-col relative overflow-auto"> <div class="w-2/12 flex flex-col relative overflow-auto rounded-md border border-solid border-gray-500 bg-gray-700 p-2.5">
<!-- Asset Categories --> <!-- Asset Categories -->
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
<span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span> <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span> <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
<span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span> <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
<span>Items</span> <span class="group-hover:text-white">Items</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
<span>NPC's</span> <span class="group-hover:text-white">NPC's</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
<span :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span> <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
<span :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span> <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
<span :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span> <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
<span>Mounts</span> <span class="group-hover:text-white">Mounts</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
<span>Pets</span> <span class="group-hover:text-white">Pets</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
<span>Emoticons</span> <span class="group-hover:text-white">Emoticons</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
<!-- Assets list --> <!-- Assets list -->
<div class="overflow-auto h-full w-4/12 flex flex-col relative"> <div class="overflow-auto h-full w-4/12 flex flex-col relative">
@ -58,10 +46,8 @@
<CharacterHairList v-if="selectedCategory === 'characterHair'" /> <CharacterHairList v-if="selectedCategory === 'characterHair'" />
</div> </div>
<div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
<!-- Asset details --> <!-- Asset details -->
<div class="flex w-1/2 after:hidden flex-col relative overflow-auto"> <div class="flex w-4/12 after:hidden flex-col relative overflow-auto">
<TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" /> <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
<ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" /> <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
<SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" /> <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />

2
src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="h-full overflow-auto"> <div class="h-full overflow-auto">
<div class="m-2.5 p-2.5 block"> <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair"> <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair">
<div class="form-field-full"> <div class="form-field-full">
<label for="name">Name</label> <label for="name">Name</label>

20
src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<div class="relative p-2.5 flex items-center gap-x-2.5"> <div class="relative mb-5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" /> <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer"> <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
<button class="p-0 h-5" id="create-character" @click="createNewCharacterHair"> <button class="p-0 h-5" id="create-character" @click="createNewCharacterHair">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</button> </button>
</label> </label>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
<a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)"> <a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<span :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span> <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop"> <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" /> <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
</button> <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
</div>
</div> </div>
</template> </template>

2
src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="h-full overflow-auto"> <div class="h-full overflow-auto">
<div class="m-2.5 p-2.5 block"> <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType"> <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
<div class="form-field-full"> <div class="form-field-full">
<label for="name">Name</label> <label for="name">Name</label>

20
src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<div class="relative p-2.5 flex items-center gap-x-2.5"> <div class="relative mb-5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" /> <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer"> <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
<button class="p-0 h-5" id="create-character" @click="createNewCharacterType"> <button class="p-0 h-5" id="create-character" @click="createNewCharacterType">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</button> </button>
</label> </label>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
<a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)"> <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<span :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span> <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop"> <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" /> <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
</button> <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
</div>
</div> </div>
</template> </template>

12
src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
View File

@ -1,12 +1,9 @@
<template> <template>
<div class="h-full overflow-auto"> <div class="h-full overflow-auto">
<div class="relative p-2.5 flex flex-col items-center justify-between h-72"> <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
<div class="filler"></div>
<img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" /> <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div class="m-2.5 p-2.5 block"> <div class="mt-5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject"> <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
<div class="form-field-full"> <div class="form-field-full">
<label for="name">Name</label> <label for="name">Name</label>
@ -43,7 +40,10 @@
<label for="frame-height">Frame height</label> <label for="frame-height">Frame height</label>
<input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" /> <input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
</div> </div>
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button> <div class="flex gap-4">
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
</div>
</form> </form>
</div> </div>
</div> </div>

18
src/components/gameMaster/assetManager/partials/object/ObjectList.vue
View File

@ -1,29 +1,29 @@
<template> <template>
<div class="relative p-2.5 flex items-center gap-x-2.5"> <div class="relative mb-5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" /> <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer"> <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" /> <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</label> </label>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
<a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)"> <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<div class="h-7 w-16 max-w-16 flex justify-center"> <div class="h-7 w-16 max-w-16 flex justify-center">
<img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" /> <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
</div> </div>
<span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span> <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop"> <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" /> <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
</button> <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
</div>
</div> </div>
</template> </template>

5
src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="h-full overflow-auto"> <div class="h-full overflow-auto">
<div class="relative p-4 flex flex-col"> <div class="relative flex flex-col">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2 p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700">
<div class="w-full flex flex-col"> <div class="w-full flex flex-col">
<label class="mb-1.5 font-titles" for="name">Name</label> <label class="mb-1.5 font-titles" for="name">Name</label>
<input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" /> <input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
@ -10,7 +10,6 @@
<div class="w-full flex gap-2 mt-2 pb-4 relative"> <div class="w-full flex gap-2 mt-2 pb-4 relative">
<button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button> <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
<button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button> <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
<div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
</div> </div>
</div> </div>

18
src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<div class="relative p-2.5 flex items-center gap-x-2.5"> <div class="relative mb-5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" /> <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<button @click.prevent="newButtonClickHandler" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer"> <button @click.prevent="newButtonClickHandler" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</button> </button>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
<a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)"> <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span> <span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop"> <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" /> <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
</button> <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
</div>
</div> </div>
</template> </template>

12
src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
View File

@ -1,12 +1,9 @@
<template> <template>
<div class="h-full overflow-auto"> <div class="h-full overflow-auto">
<div class="relative p-2.5 flex flex-col items-center justify-between h-72"> <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
<div class="filler"></div>
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" /> <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div class="m-2.5 p-2.5 block"> <div class="mt-5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile"> <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
<div class="form-field-full"> <div class="form-field-full">
<label for="name">Name</label> <label for="name">Name</label>
@ -16,7 +13,10 @@
<label for="origin-x">Tags</label> <label for="origin-x">Tags</label>
<ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" /> <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
</div> </div>
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button> <div class="flex gap-4">
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
</div>
</form> </form>
</div> </div>
</div> </div>

20
src/components/gameMaster/assetManager/partials/tile/TileList.vue
View File

@ -1,29 +1,29 @@
<template> <template>
<div class="relative p-2.5 flex items-center gap-x-2.5"> <div class="relative mb-5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" /> <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer"> <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" /> <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</label> </label>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
<a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)"> <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<div class="h-7 w-16 max-w-16 flex justify-center"> <div class="h-7 w-16 max-w-16 flex justify-center">
<img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" /> <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
</div> </div>
<span :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span> <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop"> <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" /> <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
</button> <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
</div>
</div> </div>
</template> </template>

2
src/components/gameMaster/zoneEditor/partials/CreateZone.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :disable-bg-texture="true"> <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3> <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
</template> </template>

2
src/components/gameMaster/zoneEditor/partials/ObjectList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :disable-bg-texture="true"> <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg text-white">Objects</h3> <h3 class="text-lg text-white">Objects</h3>
</template> </template>

2
src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :disable-bg-texture="true"> <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3> <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
</template> </template>

2
src/components/gameMaster/zoneEditor/partials/TileList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :disable-bg-texture="true"> <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :bg-style="'none'">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg text-white">Tiles</h3> <h3 class="text-lg text-white">Tiles</h3>
</template> </template>

2
src/components/gameMaster/zoneEditor/partials/ZoneList.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" /> <CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
<Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :disable-bg-texture="true"> <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg text-white">Zones</h3> <h3 class="text-lg text-white">Zones</h3>
</template> </template>

2
src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350" :disable-bg-texture="true"> <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3> <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
</template> </template>

13
src/components/utilities/Modal.vue
View File

@ -5,8 +5,8 @@
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative"> <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
<div <div
:class="{ :class="{
'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture, 'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
'bg-gray-700': disableBgTexture 'bg-gray-700': bgStyle !== 'textured'
}" }"
class="rounded-t absolute w-full h-full top-0 left-0" class="rounded-t absolute w-full h-full top-0 left-0"
/> />
@ -27,8 +27,9 @@
<div class="overflow-hidden grow relative"> <div class="overflow-hidden grow relative">
<div <div
:class="{ :class="{
'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture, 'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
'bg-gray-700': disableBgTexture 'bg-gray-800': bgStyle === 'dark',
'bg-gray-700': bgStyle === 'none'
}" }"
class="rounded-b absolute w-full h-full top-0 left-0" class="rounded-b absolute w-full h-full top-0 left-0"
/> />
@ -54,7 +55,7 @@ interface ModalProps {
modalPositionY?: number modalPositionY?: number
modalWidth?: number modalWidth?: number
modalHeight?: number modalHeight?: number
disableBgTexture?: boolean bgStyle?: string
} }
interface Position { interface Position {
@ -74,7 +75,7 @@ const props = withDefaults(defineProps<ModalProps>(), {
modalPositionY: 0, modalPositionY: 0,
modalWidth: 500, modalWidth: 500,
modalHeight: 280, modalHeight: 280,
disableBgTexture: false bgStyle: 'textured'
}) })
const emit = defineEmits<{ const emit = defineEmits<{