forked from noxious/client
There is no god
This commit is contained in:
parent
c56974a79f
commit
dedae28456
@ -4,7 +4,7 @@
|
||||
<span>{{ chip }}</span>
|
||||
<i class="delete-icon" @click="deleteChip(i)">X</i>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -62,13 +62,5 @@ const backspaceDelete = (event) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="container gm-panel">
|
||||
<div class="container gm-panel h-full margin-0">
|
||||
<AssetManager v-if="toggle == 'asset-manager'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,35 +1,39 @@
|
||||
<template>
|
||||
<div class="assets-container">
|
||||
<div class="asset-categories">
|
||||
<div class="flex h-full w-full relative">
|
||||
<div class="w-[15%] flex flex-col relative">
|
||||
<!-- 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>
|
||||
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
|
||||
</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>
|
||||
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
|
||||
</a>
|
||||
<a class="category">
|
||||
<a class="category relative p-2.5 hover:cursor-pointer">
|
||||
<span class="category-name">Loot</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
|
||||
</a>
|
||||
<a class="category">
|
||||
<a class="category relative p-2.5 hover:cursor-pointer">
|
||||
<span class="category-name">NPC's</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="divider categories"></div>
|
||||
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
|
||||
|
||||
<!-- 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'" />
|
||||
<ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
|
||||
</div>
|
||||
|
||||
<button class="back-to-top" v-show="hasScrolled" @click="toTop">
|
||||
<img src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<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 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>
|
||||
<div class="divider assets-list"></div>
|
||||
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
|
||||
|
||||
<!-- 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" />
|
||||
<ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
|
||||
</div>
|
||||
@ -72,144 +76,23 @@ function toTop() {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/main';
|
||||
|
||||
.container {
|
||||
&.gm-panel {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
button.back-to-top {
|
||||
// @TODO: find Tailwind alternative as calc() doesnt work
|
||||
left: calc(50% - 60px);
|
||||
}
|
||||
.modal-form {
|
||||
&.asset-manager {
|
||||
// @TODO: find Tailwind alternative as calc() doesnt work
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
position: absolute;
|
||||
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 {
|
||||
&.asset-manager {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
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,
|
||||
.asset,
|
||||
.image-container {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $dark-cyan;
|
||||
}
|
||||
&.selected {
|
||||
background-color: rgba($cyan, 0.8);
|
||||
}
|
||||
}
|
||||
.category,
|
||||
.asset,
|
||||
.image-container {
|
||||
&.selected {
|
||||
@apply bg-cyan bg-opacity-80;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -3,6 +3,10 @@ export default {
|
||||
content: [],
|
||||
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
'titles': ['Poppins', 'serif'],
|
||||
'default': ['Inter', 'serif']
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
red: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user