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

Converted more Tailwind

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-07 01:12:23 +02:00
parent ffac3bcbfd
commit ff2f890cb6
6 changed files with 34 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/gui/Menu.vue
View File

@ -1,56 +1,40 @@
<template> <template>
<ul class="list-none flex gap-2.5 items-center"> <ul class="list-none flex gap-2.5 items-center">
<li class="menu-item relative"> <li class="menu-item group relative">
<div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden"> <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p> <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>
<div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div> <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div> </div>
<a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]"> <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" /> <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
</a> </a>
</li> </li>
<li class="menu-item relative"> <li class="menu-item group relative">
<div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden"> <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p> <p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p>
<div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div> <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div> </div>
<a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]"> <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" /> <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
</a> </a>
</li> </li>
<li class="menu-item relative"> <li class="menu-item group relative">
<div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden"> <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p> <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p>
<div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div> <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div> </div>
<a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]"> <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" /> <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
</a> </a>
</li> </li>
<li class="menu-item relative"> <li class="menu-item group relative">
<div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden"> <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p> <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p>
<div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div> <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div> </div>
<a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]"> <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" /> <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
</a> </a>
</li> </li>
</ul> </ul>
</template> </template>
<style scoped lang="scss">
.menu-item:hover {
div {
@apply block;
}
a {
@apply bg-gray bg-opacity-70 cursor-pointer;
img {
@apply drop-shadow-default;
}
}
}
</style>

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

@ -2,11 +2,11 @@
<div class="flex h-full w-full relative"> <div class="flex h-full w-full relative">
<div class="w-[15%] flex flex-col relative"> <div class="w-[15%] flex flex-col relative">
<!-- Asset Categories --> <!-- Asset Categories -->
<a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
<span>Tiles</span> <span>Tiles</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span>Objects</span> <span>Objects</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a> </a>
@ -77,13 +77,3 @@ function toTop() {
}) })
} }
</script> </script>
<style lang="scss">
.category,
.asset,
.image-container {
&.selected {
@apply bg-cyan bg-opacity-80;
}
}
</style>

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

@ -7,7 +7,7 @@
<input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" /> <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div> </div>
<a class="relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)"> <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @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-[28px] w-[75px] max-w-[75px] flex justify-center"> <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
<img class="h-[28px]" :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" />

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

@ -7,7 +7,7 @@
<input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" /> <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
<div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
</div> </div>
<a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)"> <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<div class="flex items-center gap-2.5"> <div class="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 class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" /> <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />

10
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -20,7 +20,7 @@
src="/assets/zone/blank_tile.png" src="/assets/zone/blank_tile.png"
alt="Blank tile" alt="Blank tile"
@click="zoneEditorStore.setSelectedTile('blank_tile')" @click="zoneEditorStore.setSelectedTile('blank_tile')"
:class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" :class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
/> />
<img <img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
@ -29,7 +29,7 @@
:src="`${config.server_endpoint}/assets/tiles/${tile}.png`" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`"
alt="Tile" alt="Tile"
@click="zoneEditorStore.setSelectedTile(tile)" @click="zoneEditorStore.setSelectedTile(tile)"
:class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" :class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
/> />
</div> </div>
</div> </div>
@ -56,9 +56,3 @@ onMounted(async () => {
}) })
}) })
</script> </script>
<style lang="scss">
img.selected {
@apply border-2 border-solid border-red;
}
</style>

36
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -2,18 +2,18 @@
<div class="flex justify-center m-2.5"> <div class="flex justify-center m-2.5">
<div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10"> <div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
<div class="tools flex gap-2.5"> <div class="tools flex gap-2.5">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
</button> </button>
<div class="w-[1px] bg-cyan"></div> <div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
<div class="select" v-if="zoneEditorStore.tool === 'pencil'"> <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen"> <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" /> <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div> </div>
<div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'"> <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')"> <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
@ -35,12 +35,12 @@
<div class="w-[1px] bg-cyan"></div> <div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
<div class="select" v-if="zoneEditorStore.tool === 'eraser'"> <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen"> <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" /> <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div> </div>
<div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen"> <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')"> <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
@ -62,7 +62,7 @@
<div class="w-[1px] bg-cyan"></div> <div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
</button> </button>
@ -152,23 +152,3 @@ function clear() {
zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile'))) zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
} }
</script> </script>
<style scoped lang="scss">
.toolbar {
.tools {
.active {
@apply border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5;
.select {
.select-trigger {
&.open {
img {
@apply rotate-180;
}
}
}
}
}
}
}
</style>