From dedae28456e120ac2bd547438be15a4474d71917 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 4 Jul 2024 21:57:07 +0200
Subject: [PATCH] There is no god
---
src/components/forms/ChipsInput.vue | 10 +-
src/components/utilities/GmPanel.vue | 2 +-
.../utilities/assetManager/AssetManager.vue | 175 +++---------------
.../assetManager/partials/ObjectDetails.vue | 25 +--
.../assetManager/partials/ObjectList.vue | 10 +-
.../assetManager/partials/TileDetails.vue | 17 +-
.../assetManager/partials/TileList.vue | 11 +-
tailwind.config.js | 4 +
8 files changed, 70 insertions(+), 184 deletions(-)
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index cf50419..2ac6b78 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -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>
diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue
index bd1e4fe..841692a 100644
--- a/src/components/utilities/GmPanel.vue
+++ b/src/components/utilities/GmPanel.vue
@@ -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>
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 70a57d8..0748171 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -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>
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 9d00749..770282c 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -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>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index c0594e7..f243a3b 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -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>
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 86e2fe6..9572fe4 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -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>
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 96c927e..5de8548 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -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>
diff --git a/tailwind.config.js b/tailwind.config.js
index e407a67..a756f14 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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: {