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>
<ul class="list-none flex gap-2.5 items-center">
<li class="menu-item 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">
<li class="menu-item group relative">
<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>
<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>
<a class="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" />
<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="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
</a>
</li>
<li class="menu-item 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">
<li class="menu-item group relative">
<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>
<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>
<a class="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" />
<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="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
</a>
</li>
<li class="menu-item 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">
<li class="menu-item group relative">
<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>
<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>
<a class="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" />
<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="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
</a>
</li>
<li class="menu-item 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">
<li class="menu-item group relative">
<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>
<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>
<a class="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" />
<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="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
</a>
</li>
</ul>
</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="w-[15%] flex flex-col relative">
<!-- 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>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</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>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
@ -77,13 +77,3 @@ function toTop() {
})
}
</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" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></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="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" />

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" />
<div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></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">
<!-- 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" />

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

@ -20,7 +20,7 @@
src="/assets/zone/blank_tile.png"
alt="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
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`"
alt="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>
@ -56,9 +56,3 @@ onMounted(async () => {
})
})
</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="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">
<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" />
</button>
<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" />
<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 }}
<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 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')">
@ -35,12 +35,12 @@
<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" />
<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 }}
<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 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')">
@ -62,7 +62,7 @@
<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" />
</button>
@ -152,23 +152,3 @@ function clear() {
zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
}
</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>