imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/forms/ChipsInput.vue
View File

@ -4,7 +4,7 @@
<span>{{ chip }}</span> <span>{{ chip }}</span>
<i class="delete-icon" @click="deleteChip(i)">X</i> <i class="delete-icon" @click="deleteChip(i)">X</i>
</div> </div>
<input v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" /> <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
</div> </div>
</template> </template>
@ -62,13 +62,5 @@ const backspaceDelete = (event) => {
} }
} }
} }
input {
border: none;
outline: none;
padding: 4px;
margin: 4px;
color: white;
}
} }
</style> </style>

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

@ -10,7 +10,7 @@
</div> </div>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="container gm-panel"> <div class="container gm-panel h-full margin-0">
<AssetManager v-if="toggle == 'asset-manager'" /> <AssetManager v-if="toggle == 'asset-manager'" />
</div> </div>
</template> </template>

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

@ -1,35 +1,39 @@
<template> <template>
<div class="assets-container"> <div class="flex h-full w-full relative">
<div class="asset-categories"> <div class="w-[15%] flex flex-col relative">
<!-- Asset Categories --> <!-- Asset Categories -->
<a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')"> <a class="category relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
<span class="category-name">Tiles</span> <span class="category-name">Tiles</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a> </a>
<a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')"> <a class="category relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span class="category-name">Objects</span> <span class="category-name">Objects</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a> </a>
<a class="category"> <a class="category relative p-2.5 hover:cursor-pointer">
<span class="category-name">Loot</span> <span class="category-name">Loot</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a> </a>
<a class="category"> <a class="category relative p-2.5 hover:cursor-pointer">
<span class="category-name">NPC's</span> <span class="category-name">NPC's</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a> </a>
</div> </div>
<div class="divider categories"></div> <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
<!-- Assets list --> <!-- Assets list -->
<div class="assets" ref="elementToScroll" @scroll="onScroll"> <div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
<TileList v-if="selectedCategory === 'tiles'" /> <TileList v-if="selectedCategory === 'tiles'" />
<ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" /> <ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
</div> </div>
<button class="back-to-top" v-show="hasScrolled" @click="toTop"> <button class="back-to-top absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
<img src="/assets/icons/zoneEditor/chevron.svg" alt="" /> <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button> </button>
<div class="divider assets-list"></div> <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
<!-- Asset details --> <!-- Asset details -->
<div class="asset-info"> <div class="flex w-1/2 after:hidden flex-col relative">
<TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" /> <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
<ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" /> <ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
</div> </div>
@ -72,144 +76,23 @@ function toTop() {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/scss/main';
.container {
&.gm-panel {
height: 100%;
margin: 0 !important;
}
}
.assets-container {
display: flex;
height: 100%;
width: 100%;
position: relative;
.divider {
position: absolute;
width: 1px;
background-color: $dark-cyan;
height: 100%;
top: 0;
&.categories {
left: 15%; //width % of .asset-categories
}
&.assets-list {
left: 50%; //width % of .asset-categories + .assets
}
}
button.back-to-top { button.back-to-top {
position: absolute; // @TODO: find Tailwind alternative as calc() doesnt work
left: calc(50% - 60px); left: calc(50% - 60px);
bottom: 10px;
min-width: unset;
width: 50px;
height: 50px;
border-radius: 8px;
background-color: rgba($cyan, 0.5);
padding: 0;
img {
position: absolute;
filter: invert(100%);
width: 30px;
height: 30px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotateX(180deg);
}
&:hover {
background-color: rgba($cyan, 0.8);
}
}
.asset-categories {
width: 15%;
display: flex;
}
.assets {
overflow: auto;
height: 100%;
width: 35%;
display: flex;
}
.asset-info {
display: flex;
width: 50%;
&::after {
display: none;
}
.image-container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
img {
max-height: 280px;
}
} }
.modal-form { .modal-form {
&.asset-manager { &.asset-manager {
margin: 10px; // @TODO: find Tailwind alternative as calc() doesnt work
padding: 10px;
width: calc(100% - 40px); width: calc(100% - 40px);
display: block;
.form-fields {
display: flex;
gap: 10px;
flex-wrap: wrap;
.submit {
width: 100%;
} }
} }
}
}
}
.asset-details {
display: flex;
align-items: center;
gap: 10px;
img {
height: 28px;
}
}
.category {
&:hover {
cursor: pointer;
}
}
.asset-categories,
.assets,
.asset-info {
flex-direction: column;
position: relative;
.category, .category,
.asset, .asset,
.image-container { .image-container {
position: relative;
padding: 10px;
&::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: $dark-cyan;
}
&.selected { &.selected {
background-color: rgba($cyan, 0.8); @apply bg-cyan bg-opacity-80;
}
}
} }
} }
</style> </style>

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

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

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

@ -1,17 +1,19 @@
<template> <template>
<div class="asset add-new"> <div class="asset add-new relative p-2.5">
<label for="upload-asset" class="file-upload"> <label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" /> <input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s) Upload object(s)
</label> </label>
<input class="input-cyan search-field" placeholder="Search..." /> <input class="input-cyan search-field" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</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)"> <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"> <div class="asset-details flex items-center gap-2.5">
<!-- @TODO make all img have same width so text aligns nicely --> <!-- @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> <span class="asset-name">{{ object.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a> </a>
</template> </template>

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

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

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

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

4
tailwind.config.js
View File

@ -3,6 +3,10 @@ export default {
content: [], content: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
fontFamily: {
'titles': ['Poppins', 'serif'],
'default': ['Inter', 'serif']
},
extend: { extend: {
colors: { colors: {
red: { red: {