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

Added global empty btn styling, adjusted and WIP modal styling

Browse Source
This commit is contained in:
Colin Kallemein 2024-10-16 20:47:29 +02:00
parent f24a498246
commit be3cbf77bf
26 changed files with 89 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/icons/resize-icon.svg
View File

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15L15 21M21 8L8 21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 15L15 21M21 8L8 21" stroke="#4d4d4d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 346 B

After

Width:  |  Height:  |  Size: 346 B

9
src/assets/scss/main.scss
View File

@ -104,6 +104,15 @@ button {
} }
} }
&.btn-empty {
@apply text-gray-50 border-2 border-solid border-gray-500 text-base rounded py-2.5;
&.active,
&:hover {
@apply bg-gray-700 border-gray-700;
}
}
&:hover { &:hover {
@apply cursor-pointer; @apply cursor-pointer;
} }

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

@ -1,7 +1,7 @@
<template> <template>
<Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true"> <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">GM Panel</h3> <h3 class="m-0 font-medium shrink-0 text-white">GM Panel</h3>
<div class="flex gap-1.5 flex-wrap"> <div class="flex gap-1.5 flex-wrap">
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button> <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button> <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>

2
src/components/gameMaster/GmTools.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y"> <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">GM tools</h3> <h3 class="m-0 font-medium shrink-0 text-white">GM tools</h3>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="content flex flex-col gap-2.5 m-4 h-20"> <div class="content flex flex-col gap-2.5 m-4 h-20">

20
src/components/gameMaster/assetManager/AssetManager.vue
View File

@ -4,38 +4,38 @@
<!-- Asset Categories --> <!-- Asset Categories -->
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
<span>Tiles</span> <span>Tiles</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span>Objects</span> <span>Objects</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
<span>Sprites</span> <span>Sprites</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer">
<span>Items</span> <span>Items</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer">
<span>NPC's</span> <span>NPC's</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer">
<span>Characters</span> <span>Characters</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer">
<span>Mounts</span> <span>Mounts</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer"> <a class="relative p-2.5 hover:cursor-pointer">
<span>Pets</span> <span>Pets</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div> <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
<!-- Assets list --> <!-- Assets list -->
<div class="overflow-auto h-full w-4/12 flex flex-col relative"> <div class="overflow-auto h-full w-4/12 flex flex-col relative">
@ -44,7 +44,7 @@
<SpriteList v-if="selectedCategory === 'sprites'" /> <SpriteList v-if="selectedCategory === 'sprites'" />
</div> </div>
<div class="absolute w-px bg-cyan-200 h-full top-0 left-1/2"></div> <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
<!-- Asset details --> <!-- Asset details -->
<div class="flex w-1/2 after:hidden flex-col relative overflow-auto"> <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">

2
src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
View File

@ -4,7 +4,7 @@
<div class="filler"></div> <div class="filler"></div>
<img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" /> <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button> <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div class="m-2.5 p-2.5 block"> <div class="m-2.5 p-2.5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject"> <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">

4
src/components/gameMaster/assetManager/partials/object/ObjectList.vue
View File

@ -7,7 +7,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</label> </label>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
@ -18,7 +18,7 @@
</div> </div>
<span>{{ object.name }}</span> <span>{{ object.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop"> <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">

2
src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -10,7 +10,7 @@
<div class="w-full flex gap-2 mt-2 pb-4 relative"> <div class="w-full flex gap-2 mt-2 pb-4 relative">
<button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button> <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
<button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button> <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
<div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div> <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
</div> </div>
</div> </div>

4
src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
View File

@ -6,7 +6,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</button> </button>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
@ -14,7 +14,7 @@
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<span>{{ sprite.name }}</span> <span>{{ sprite.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop"> <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">

2
src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
View File

@ -4,7 +4,7 @@
<div class="filler"></div> <div class="filler"></div>
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" /> <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button> <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div class="m-2.5 p-2.5 block"> <div class="m-2.5 p-2.5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile"> <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">

4
src/components/gameMaster/assetManager/partials/tile/TileList.vue
View File

@ -7,7 +7,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg> </svg>
</label> </label>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll"> <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
@ -18,7 +18,7 @@
</div> </div>
<span>{{ tile.name }}</span> <span>{{ tile.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop"> <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">

2
src/components/gameMaster/zoneEditor/partials/CreateZone.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false"> <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">Create new zone</h3> <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
</template> </template>
<template #modalBody> <template #modalBody>

2
src/components/gameMaster/zoneEditor/partials/ObjectList.vue
View File

@ -2,7 +2,7 @@
<Teleport to="body"> <Teleport to="body">
<Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)"> <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg text-gray-300">Objects</h3> <h3 class="text-lg text-white">Objects</h3>
<div class="flex"> <div class="flex">
<div class="w-full flex gap-1.5 flex-row"> <div class="w-full flex gap-1.5 flex-row">
<div> <div>

2
src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false"> <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">Teleport settings</h3> <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
</template> </template>
<template #modalBody> <template #modalBody>

2
src/components/gameMaster/zoneEditor/partials/TileList.vue
View File

@ -2,7 +2,7 @@
<Teleport to="body"> <Teleport to="body">
<Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)"> <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg text-gray-300">Tiles</h3> <h3 class="text-lg text-white">Tiles</h3>
<div class="flex"> <div class="flex">
<div class="w-full flex gap-1.5 flex-row"> <div class="w-full flex gap-1.5 flex-row">
<div> <div>

8
src/components/gameMaster/zoneEditor/partials/ZoneList.vue
View File

@ -4,7 +4,7 @@
<Teleport to="body"> <Teleport to="body">
<Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360"> <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg text-gray-300">Zones</h3> <h3 class="text-lg text-white">Zones</h3>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="my-4 mx-auto"> <div class="my-4 mx-auto">
@ -13,14 +13,14 @@
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button> <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
</div> </div>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id"> <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div> <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
<div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)"> <div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
<span>{{ zone.name }}</span> <span>{{ zone.name }}</span>
<span class="ml-auto gap-1 flex"> <span class="ml-auto gap-1 flex">
<button class="btn-red py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button> <button class="btn-red w-11 h-11 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
</span> </span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
</div> </div>
</template> </template>

2
src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350"> <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">Zone settings</h3> <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
</template> </template>
<template #modalBody> <template #modalBody>

4
src/components/gui/UserPanel.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen"> <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen">
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg"> <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-700 border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
<div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200"> <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
<h3 class="m-0 font-medium shrink-0">Game menu</h3> <h3 class="m-0 font-medium shrink-0">Game menu</h3>
<div class="hidden sm:flex gap-1.5 flex-wrap"> <div class="hidden sm:flex gap-1.5 flex-wrap">
<button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button> <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>

2
src/components/gui/partials/CharacterScreen.vue
View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div> <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
</div> </div>
<div class="m-4"> <div class="m-4">
<h4 class="font-medium text-lg max-w-[375px]">Character stats</h4> <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>

18
src/components/gui/partials/Equipment.vue
View File

@ -13,54 +13,54 @@
<div class="flex flex-col gap-3 mx-5 mt-2"> <div class="flex flex-col gap-3 mx-5 mt-2">
<div class="flex gap-3 justify-center"> <div class="flex gap-3 justify-center">
<!-- Helmet --> <!-- Helmet -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" /> <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div> </div>
<!-- Head charm --> <!-- Head charm -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" /> <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div> </div>
</div> </div>
<div class="flex gap-3 justify-center"> <div class="flex gap-3 justify-center">
<!-- Bracers --> <!-- Bracers -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" /> <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div> </div>
<!-- Chestplate --> <!-- Chestplate -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" /> <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
</div> </div>
<!-- Primary Weapon --> <!-- Primary Weapon -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" /> <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div> </div>
</div> </div>
<div class="flex gap-3 justify-center"> <div class="flex gap-3 justify-center">
<!-- Legs --> <!-- Legs -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" /> <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div> </div>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<!-- Belt/pouch --> <!-- Belt/pouch -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" /> <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div> </div>
<!-- Boots --> <!-- Boots -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200"> <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" /> <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div> <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
</div> </div>
<div class="m-4"> <div class="m-4">
<h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4> <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>

6
src/components/gui/partials/Inventory.vue
View File

@ -3,14 +3,14 @@
<div class="m-4 relative"> <div class="m-4 relative">
<h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4> <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]"> <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
<div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div> <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
</div> </div>
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div> <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
</div> </div>
<div class="m-4"> <div class="m-4">
<h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4> <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]"> <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
<div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div> <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
</div> </div>
</div> </div>
</div> </div>

12
src/components/gui/partials/Settings.vue
View File

@ -4,26 +4,26 @@
<!-- Settings Categories --> <!-- Settings Categories -->
<div class="relative p-2.5"> <div class="relative p-2.5">
<h3>Settings</h3> <h3>Settings</h3>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div> </div>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
<span>Character</span> <span>Character</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
<span>Account</span> <span>Account</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
<span>Audio</span> <span>Audio</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'"> <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
<span>Video</span> <span>Video</span>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>
</div> </div>
<div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div> <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
<!-- Assets list --> <!-- Assets list -->
<div class="overflow-auto h-full w-10/12 flex flex-col relative"> <div class="overflow-auto h-full w-10/12 flex flex-col relative">

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

@ -40,7 +40,7 @@ const modalOpened = ref(props.modalOpened)
<template> <template>
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190"> <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
<template #modalHeader> <template #modalHeader>
<div class="text-gray-300"> <div class="text-white">
<slot name="modalHeader"></slot> <slot name="modalHeader"></slot>
</div> </div>
</template> </template>

23
src/components/utilities/Modal.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div v-if="isModalOpenRef" class="fixed bg-gray border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle"> <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500"> <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
<slot name="modalHeader" /> <div class="rounded-t-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
<div class="relative z-10">
<slot name="modalHeader" />
</div>
<div class="flex gap-2.5"> <div class="flex gap-2.5">
<button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen"> <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" /> <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
@ -12,12 +15,12 @@
</button> </button>
</div> </div>
</div> </div>
<div class="overflow-hidden grow"> <div class="overflow-hidden grow relative">
<slot name="modalBody" /> <div class="rounded-b-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover opacity-90"></div>
<img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" /> <div class="relative z-10 h-full">
</div> <slot name="modalBody" />
<div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-gray-500"> </div>
<slot name="modalFooter" /> <img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute z-10 bottom-0 right-0 w-5 h-5 cursor-nwse-resize" @mousedown="startResize" />
</div> </div>
</div> </div>
</Teleport> </Teleport>
@ -84,7 +87,7 @@ let startHeight = 0
let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 } let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
const modalStyle = computed(() => ({ const modalStyle = computed(() => ({
borderRadius: isFullScreen.value ? '0' : '10px', borderRadius: isFullScreen.value ? '0' : '12px',
top: isFullScreen.value ? '0' : `${y.value}px`, top: isFullScreen.value ? '0' : `${y.value}px`,
left: isFullScreen.value ? '0' : `${x.value}px`, left: isFullScreen.value ? '0' : `${x.value}px`,
width: isFullScreen.value ? '100vw' : `${width.value}px`, width: isFullScreen.value ? '100vw' : `${width.value}px`,

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

@ -1,7 +1,7 @@
<template> <template>
<Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)"> <Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
<template #modalHeader v-if="notification.title"> <template #modalHeader v-if="notification.title">
<h3 class="m-0 font-medium shrink-0 text-gray-300">{{ notification.title }}</h3> <h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
</template> </template>
<template #modalBody v-if="notification.message"> <template #modalBody v-if="notification.message">
<p class="m-4">{{ notification.message }}</p> <p class="m-4">{{ notification.message }}</p>

24
src/screens/Characters.vue
View File

@ -11,8 +11,8 @@
class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
:class="{ active: selected_character == character.id }" :class="{ active: selected_character == character.id }"
> >
<img src="/assets/ui-box-outer.svg" class="absolute w-full h-full max-lg:hidden" /> <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
<img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" /> <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" /> <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label class="font-bold absolute left-1/2 top-4 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label> <label class="font-bold absolute left-1/2 top-4 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
@ -66,21 +66,23 @@
</div> </div>
<!-- CREATE CHARACTER MODAL --> <!-- CREATE CHARACTER MODAL -->
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false"> <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false" :modal-width="430" :modal-height="275">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium text-gray-300">Create your character</h3> <h3 class="m-0 font-medium text-white">Create your character</h3>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="m-4 character-form"> <div class="p-4 h-[calc(100%_-_32px)]">
<form method="post" @submit.prevent="create" class="inline"> <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
<div class="form-field-full"> <div class="form-field-full">
<label for="name">Name</label> <label for="name">Nickname</label>
<input class="input-field max-w-64" v-model="name" name="name" id="name" /> <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
</div>
<div class="grid grid-flow-col justify-stretch gap-4">
<button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">CANCEL</button>
<button class="btn-cyan py-1.5 px-4 inline-block" type="submit">CREATE</button>
</div> </div>
<button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>
</form> </form>
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="isModalOpen = false">CANCEL</button>
</div> </div>
</template> </template>
</Modal> </Modal>
@ -88,7 +90,7 @@
<!-- DELETE CHARACTER MODAL --> <!-- DELETE CHARACTER MODAL -->
<ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete"> <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium text-gray-300">Deleting character</h3> <h3 class="m-0 font-medium text-white">Deleting character</h3>
</template> </template>
<template #modalBody> <template #modalBody>
You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span