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

Worked on zone manager

Browse Source
This commit is contained in:
Dennis Postma
2024-06-11 01:10:22 +02:00
parent 399e994bbe
commit 8e174a063a
29 changed files with 658 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/game/Chat.vue
View File

@ -1,39 +0,0 @@
<template>
<div class="chat-wrapper">
<input placeholder="Type something..." />
<img draggable="false" src="/assets/icons/submit-icon.svg" />
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.chat-wrapper {
width: 100%;
height: 100px;
display: flex;
justify-content: flex-start;
align-items: center;
input {
width: 500px;
height: 48px;
border-radius: 48px;
opacity: 0.8;
font-size: 1.2rem;
padding: 0 24px;
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: black;
}
img {
position: absolute;
left: 500px;
width: 30px;
height: 30px;
}
}
</style>

133
src/components/game/Hud.vue
View File

@ -1,133 +0,0 @@
<template>
<div class="hud-wrapper">
<div class="profile">
<img draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud">
<div class="stats">
<div class="player-details">
<span class="player-name">{{ socket.getCharacter.name }}</span>
<span class="player-lvl">lvl. {{ socket.getCharacter.level }}</span>
</div>
<div class="bar">
<label for="hp">HP</label>
<progress id="hp" :value="socket.getCharacter.hitpoints" max="100">{{ socket.getCharacter.hitpoints }}%</progress>
</div>
<div class="bar">
<label for="mp">MP</label>
<progress id="mp" :value="socket.getCharacter.mana" max="100">{{ socket.getCharacter.mana }}%</progress>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
const socket = useSocketStore();
</script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.hud-wrapper {
position: relative;
left: -32px;
.hud, &::before {
position: absolute;
top: 32px;
left: 32px;
width: 245px;
height: 75px;
border-radius: 16px;
z-index: 1;
}
.profile {
position: absolute;
width: 64px;
height: 64px;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 3px solid $white;
top: 0;
left: 0;
z-index: 2; // Ensure profile is above hud and before
img {
width: 32px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.hud {
background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
.stats {
height: 100%;
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
padding: 0 20px 0 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;
max-width: 140px;
&#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/clouds.png') center/cover no-repeat;
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
mask-mode: luminance;
}
}
</style>

107
src/components/game/Menu.vue
View File

@ -1,107 +0,0 @@
<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>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 20px;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 50px;
width: 64px;
text-align: center;
background-color: #b1b2b5;
border: 2px solid $white;
border-radius: 24px;
height: 24px;
font-size: 0.875rem;
line-height: 24px;
left: 50%;
transform: translateX(-50%);
display: none;
&::after {
content: '';
position: absolute;
top: 100%;
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(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 50%;
display: block;
width: 30px;
height: 30px;
img {
width: inherit;
height: inherit;
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
filter: drop-shadow(0px 3px 6px $black);
}
}
}
}
}
}
</style>