Convert GUI components to Tailwind (where possible smh)
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user