imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Convert GUI components to Tailwind (where possible smh)

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-06 17:18:39 +02:00
parent 59f5e5ad52
commit c544e0a12a
3 changed files with 104 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,40 +1,42 @@
<template>
<div class="hud-wrapper">
<div class="profile">
<img draggable="false" src="/assets/avatar/default/head.png" />
<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">
<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">
<div class="stats">
<div class="player-details">
<span class="player-name">{{ socket.character.name }}</span>
<span class="player-lvl">lvl. {{ socket.character.level }}</span>
<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>
<div class="absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
<div class="h-[64px] flex flex-col items-end py-[10px] pl-[50px] pr-[20px]">
<div class="w-full flex items-center justify-between mb-1.5">
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
<span class="text-sm">lvl. {{ socket.character.level }}</span>
</div>
<div class="bar">
<label for="hp">HP</label>
<progress id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="hp">HP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
</div>
<div class="bar">
<label for="mp">MP</label>
<progress id="mp" :value="socket.character.mana" max="100">{{ socket.character.mana }}%</progress>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="mp">MP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="socket.character.mana" max="100">{{ socket.character.mana }}%</progress>
</div>
</div>
</div>
</div>
<!-- TODO: Replace socket.character with other (selected) player's -->
<div class="hud-wrapper other-player">
<div class="profile">
<img draggable="false" src="/assets/avatar/default/head.png" />
<div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
<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%] right-0 z-20">
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]"draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud">
<div class="stats">
<div class="player-details">
<span class="player-name">{{ socket.character.name }}</span>
<span class="player-lvl">lvl. {{ socket.character.level }}</span>
<div class="hud-bg absolute top-0 right-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
<div class="absolute top-0 right-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
<div class="h-[64px] flex flex-col items-end scale-x-[-1] py-[10px] pr-[50px] pl-[20px]">
<div class="w-full flex items-center justify-between mb-1.5">
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
<span class="text-sm">lvl. {{ socket.character.level }}</span>
</div>
<div class="bar">
<label for="hp">HP</label>
<progress id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="hp">HP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
</div>
</div>
</div>
@ -48,161 +50,41 @@ const socket = useSocketStore()
</script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.hud-wrapper {
position: relative;
left: 0;
width: 315px;
height: 84px;
.hud,
&::before {
position: absolute;
top: 0;
left: 30px;
width: 280px;
height: 84px;
z-index: 1;
}
.profile {
position: absolute;
width: 54px;
height: 54px;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 3px solid $white;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 2; // Ensure profile is above hud and before
img {
width: 28px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.hud {
background: url('/assets/shapes/hud-shape-empty.svg') center/cover no-repeat;
.stats {
height: calc(100% - 30px);
display: flex;
flex-direction: column;
align-items: end;
padding: 15px 20px 15px 50px;
.player-details,
.bar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
span,
label {
font-size: 14px;
}
.player-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 125px;
}
}
.player-details {
margin-bottom: 5px;
}
.bar {
progress {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 8px;
width: 100%;
max-width: 175px;
&#hp {
accent-color: $red;
// Chrome, Safari, Edge, Opera
&::-webkit-progress-value {
background: $red;
border-radius: 8px;
}
&::-webkit-progress-bar {
background: $white;
border-radius: 8px;
border: 2px solid $white;
}
// Firefox
&::-moz-progress-bar {
background: $red;
border-radius: 8px;
border: 2px solid $white;
}
}
&#mp {
accent-color: $light-blue;
// Chrome, Safari, Edge, Opera
&::-webkit-progress-value {
background: $light-blue;
border-radius: 8px;
}
&::-webkit-progress-bar {
background: $white;
border-radius: 8px;
border: 2px solid $white;
}
// Firefox
&::-moz-progress-bar {
background: $light-blue;
border-radius: 8px;
border: 2px solid $white;
}
}
}
}
}
}
&::before {
content: '';
background: url('/assets/bg-hud-2.png') top/cover no-repeat;
.hud-bg {
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
}
#hp {
// Chrome, Safari, Edge, Opera
&::-webkit-progress-value {
@apply bg-red rounded-lg;
}
&::-webkit-progress-bar {
@apply bg-white rounded-lg border-2 border-solid border-white;
}
// Firefox
&::-moz-progress-bar {
@apply bg-red rounded-lg border-2 border-solid border-white;
}
}
#mp {
// Chrome, Safari, Edge, Opera
&::-webkit-progress-value {
@apply bg-blue rounded-lg;
}
&::-webkit-progress-bar {
@apply bg-white rounded-lg border-2 border-solid border-white;
}
// Firefox
&::-moz-progress-bar {
@apply bg-blue rounded-lg border-2 border-solid border-white;
}
}
&.other-player {
left: unset;
right: 0;
&::before {
left: unset;
right: 30px;
background: url('/assets/bg-hud-2.png') center/cover no-repeat;
.hud-bg {
mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
}
.profile {
left: unset;
right: 0;
img {
transform: translate(-50%, -50%) scaleX(-1);
}
}
.hud {
left: unset;
right: 30px;
transform: scaleX(-1);
.stats {
transform: scaleX(-1);
padding: 15px 50px 15px 20px;
}
}
}
}
</style>

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

@ -1,106 +1,55 @@
<template>
<div class="menu-wrapper">
<ul class="menu">
<li class="menu-item">
<p>Chat</p>
<a>
<img draggable="false" src="/assets/icons/chat.png" />
</a>
</li>
<li class="menu-item">
<p>World</p>
<a>
<img draggable="false" src="/assets/icons/world.png" />
</a>
</li>
<li class="menu-item">
<p>Users</p>
<a>
<img draggable="false" src="/assets/icons/users.png" />
</a>
</li>
<li class="menu-item">
<p>Inventory</p>
<a>
<img draggable="false" src="/assets/icons/treasure-chest.png" />
</a>
</li>
</ul>
</div>
<ul class="list-none flex gap-2.5">
<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">
<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>
<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>
</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">
<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>
<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>
</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">
<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>
<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>
</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">
<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>
<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>
</li>
</ul>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.menu-item:hover {
div {
@apply block;
}
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 10px;
a {
@apply bg-gray bg-opacity-70 cursor-pointer;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 65px;
width: 85px;
text-align: center;
background-color: $dark-gray;
border: 2px solid $cyan;
border-radius: 24px;
height: 24px;
font-size: 0.875rem;
line-height: 24px;
left: 50%;
transform: translateX(-50%);
display: none;
&::after {
content: '';
position: absolute;
top: calc(100% + 2px);
background-color: $white;
height: 8px;
width: 14px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: 50%;
transform: translateX(-50%);
}
}
a {
padding: 8px;
background-color: rgba($dark-gray, 0.7);
border: 2px solid $cyan;
border-radius: 8px;
display: block;
width: 45px;
height: 35px;
img {
height: inherit;
width: inherit;
object-fit: contain;
}
}
&:hover {
p {
display: block;
}
a {
background-color: rgba($gray, 0.7);
cursor: pointer;
img {
filter: drop-shadow(0px 3px 6px $black);
}
}
}
img {
@apply drop-shadow-default;
}
}
}

3
tailwind.config.js
View File

@ -11,6 +11,9 @@ export default {
'30px': '30px'
},
extend: {
dropShadow: {
'default': '0 3px 6px rgb(0, 0, 0)'
},
colors: {
red: {
DEFAULT: '#d50000',