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

Removed unused classnames

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-06 23:11:24 +02:00
parent 27641f2df8
commit 5fad4583ad
14 changed files with 75 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/scss/_variables.scss
View File

@ -1,22 +0,0 @@
// Colors
$white: #fff;
$black: #000;
$light-blue: #00c2ff;
$red: #d50000;
$dark-red: #b30000;
$gray: #7f7f7f;
$gray-2: #696969;
$dark-gray: #313638;
$light-gray: #d3d3d3;
$blue-gray: #778899;
$cyan: #368f8b;
$dark-cyan: #376362;
$light-cyan: #00b3b3;
$bordeaux: #800020;
$dark-bordeaux: #4c0000;
$light-bordeaux: #cc0033;
$green: #09ad19;
// Fonts
$titles: 'Poppins', serif;
$default: 'Inter', serif;

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

@ -2,34 +2,15 @@
@tailwind components;
@tailwind utilities;
@import '@/assets/scss/_variables';
// Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
//Globals
// Column base styles
[class^="col-"] {
position: relative;
width: 100%;
padding: 0 15px;
}
// Generate column classes
@for $i from 1 through 12 {
.col-#{$i} {
$width: percentage(calc($i / 12));
flex: 0 0 calc($width - var(--gap));
max-width: calc($width - var(--gap));
}
}
body {
@apply bg-black m-0 select-none;
-ms-overflow-style: none;
scrollbar-width: none;
background: $black;
margin: 0;
// Disable selection, might wanna comment when debugging
-webkit-user-select: none; /* Safari */
@ -45,30 +26,24 @@ h5,
h6,
button,
a {
font-family: $titles;
color: $white;
font-weight: 500;
margin: 0;
@apply font-titles text-white font-medium m-0;
}
p,
span,
li,
label {
font-family: $default;
color: $white;
@apply font-default text-white;
}
button,
a {
font-weight: 500;
text-shadow: 0 4px 6px rgba($black, 0.25);
@apply font-medium drop-shadow-20;
}
button,
input {
border: none;
background-color: transparent;
@apply border-none bg-transparent;
&[type='number'] {
-webkit-appearance: textfield;
@ -82,53 +57,39 @@ input {
}
.input-cyan {
padding: 8px 10px;
font-family: $titles;
border: 1px solid $cyan;
background-color: rgba($white, 0.8);
border-radius: 5px;
@apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white bg-opacity-80 rounded;
&:focus,
&:focus-visible {
outline: $cyan auto 2px;
@apply outline-2 outline-cyan;
}
}
button {
text-align: center;
&.w-full {
width: 100%;
}
@apply text-center;
&.btn-cyan {
background-color: rgba($cyan, 0.5);
border: 1px solid $white;
border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2);
@apply bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20;
&.active,
&:hover {
background-color: $cyan;
@apply bg-cyan;
}
}
&.btn-bordeaux {
background-color: rgba($bordeaux, 0.5);
border: 1px solid $white;
border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2);
@apply bg-bordeaux bg-opacity-50 border border-solid border-white rounded drop-shadow-20;
&.active,
&:hover {
background-color: $bordeaux;
@apply bg-bordeaux;
}
}
&:hover {
cursor: pointer;
@apply cursor-pointer;
}
}
::-webkit-scrollbar {
display: none;
@apply hidden;
}

6
src/components/forms/ChipsInput.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="chip-container flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
<div v-for="(chip, i) in modelValue" :key="i" class="chip flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
<div class="flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
<div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
<span>{{ chip }}</span>
<i class="delete-icon cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
<i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
</div>
<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>

2
src/components/gui/Hud.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
<div class="profile absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
<div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%]" draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud-bg absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>

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

@ -1,14 +1,12 @@
<template>
<div class="notifications">
<Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
<template #modalHeader v-if="notification.title">
<h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
</template>
<template #modalBody v-if="notification.message">
<p class="modal-notif m-[15px]">{{ notification.message }}</p>
</template>
</Modal>
</div>
<Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
<template #modalHeader v-if="notification.title">
<h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
</template>
<template #modalBody v-if="notification.message">
<p class="m-[15px]">{{ notification.message }}</p>
</template>
</Modal>
</template>
<script setup lang="ts">

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

@ -2,20 +2,20 @@
<div class="flex h-full w-full relative">
<div class="w-[15%] flex flex-col relative">
<!-- Asset Categories -->
<a class="category relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
<span class="category-name">Tiles</span>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: 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="category relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span class="category-name">Objects</span>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span>Objects</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
<a class="category relative p-2.5 hover:cursor-pointer">
<span class="category-name">Loot</span>
<a class="relative p-2.5 hover:cursor-pointer">
<span>Loot</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
<a class="category relative p-2.5 hover:cursor-pointer">
<span class="category-name">NPC's</span>
<a class="relative p-2.5 hover:cursor-pointer">
<span>NPC's</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
</div>
@ -27,7 +27,7 @@
<ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
</div>
<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">
<button class="left-[calc(50%_-_60px)] 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="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
@ -79,18 +79,6 @@ function toTop() {
</script>
<style lang="scss">
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);
}
}
.category,
.asset,
.image-container {

6
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="object-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<div class="h-full overflow-auto">
<div class="relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<div class="modal-form asset-manager 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">
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label>

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

@ -1,18 +1,18 @@
<template>
<div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
<label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
<label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s)
</label>
<input v-model="searchQuery" class="input-cyan search-field 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>
<a class="asset 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)">
<div class="asset-details flex items-center gap-2.5">
<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)">
<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" />
</div>
<span class="asset-name flex-shrink-0">{{ object.name }}</span>
<span class="flex-shrink-0">{{ object.name }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>

6
src/components/utilities/assetManager/partials/TileDetails.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="tile-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<div class="h-full overflow-auto">
<div class="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 m-2.5 p-2.5 block">
<div class="m-2.5 p-2.5 block">
<form class="flex g-2.5 flex-wrap" @submit.prevent>
<div class="flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="tags">Tags</label>

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

@ -1,17 +1,17 @@
<template>
<div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
<label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
<label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload tile(s)
</label>
<input v-model="searchQuery" class="input-cyan search-field 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>
<a class="asset 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)">
<div class="asset-details flex items-center gap-2.5">
<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)">
<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" />
<span class="asset-name flex-shrink-0">{{ tile }}</span>
<span class="flex-shrink-0">{{ tile }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>

2
src/components/utilities/zoneEditor/ZoneSettings.vue
View File

@ -5,7 +5,7 @@
</template>
<template #modalBody>
<div class="settings m-[15px]">
<div class="m-[15px]">
<form method="post" @submit.prevent="" class="inline">
<div class="gap-2.5 flex flex-wrap">
<div class="w-full flex flex-col mb-5">

5
src/screens/Characters.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="character-select-screen bg-gray-300 relative">
<div class="bg-gray-300 relative">
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
<div class="filler"></div>
@ -116,6 +116,8 @@ onBeforeUnmount(() => {
</script>
<style lang="scss">
@import '@/assets/scss/main';
.characters-wrapper {
.character {
&.active {
@ -134,6 +136,7 @@ onBeforeUnmount(() => {
@apply gap-[15px];
}
}
&:hover {
@apply gap-[20px];
}

12
src/screens/Game.vue
View File

@ -1,23 +1,23 @@
<template>
<div class="game-container flex justify-center items-center h-dvh p-[30px] relative">
<div class="flex justify-center items-center h-dvh p-[30px] relative">
<GmTools v-if="isLoaded" />
<GmPanel v-if="isLoaded" />
<Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
<Game :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
<Scene name="main" @preload="preloadScene" @create="createScene">
<div class="top-ui flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0" v-if="isLoaded">
<div class="flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0" v-if="isLoaded">
<Hud />
</div>
<div class="center-ui" v-if="isLoaded">
<div v-if="isLoaded">
<World />
</div>
<div class="bottom-ui flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0" v-if="isLoaded">
<div class="flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0" v-if="isLoaded">
<Chat />
<Menubar />
</div>
</Scene>
</Game>
<Game class="game" :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
<Game :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
<Scene name="main" @preload="preloadScene" @create="createScene">
<ZoneEditor v-if="isLoaded" />
</Scene>

22
src/screens/Login.vue
View File

@ -1,25 +1,25 @@
<template>
<div class="login-screen bg-gray-300">
<div class="bg-gray-300">
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
<div class="content-wrapper z-20 w-full h-dvh flex items-center justify-between flex-col relative">
<div class="z-20 w-full h-dvh flex items-center justify-between flex-col relative">
<div class="filler"></div>
<h1 class="main-title mt-[115px] text-center text-6xl">NEW QUEST</h1>
<h1 class="mt-[115px] text-center text-6xl">NEW QUEST</h1>
<form @submit.prevent="loginFunc">
<div class="content-elements my-[80px] mx-0 w-full flex flex-col gap-[24px]">
<div class="login-form w-full grid gap-[15px]">
<div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
<div class="w-full grid gap-[15px]">
<div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
</div>
<div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
<label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
</div>
</div>
<div class="row-buttons flex justify-center sm:gap-[15px] gap-[8px]">
<button class="button btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
<button class="button btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
<button class="button btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
<div class="flex justify-center sm:gap-[15px] gap-[8px]">
<button class="btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
<button class="btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
<button class="btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
</div>
</div>
</form>