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

npm run format

Browse Source
This commit is contained in:
Dennis Postma
2024-06-02 02:35:42 +02:00
parent 8329afe897
commit 86b80f8244
28 changed files with 572 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,11 @@
<template>
<div class="chat-wrapper">
<input placeholder="Type something..." />
<img src="/assets/icons/submit-icon.svg">
</div>
<div class="chat-wrapper">
<input placeholder="Type something..." />
<img src="/assets/icons/submit-icon.svg" />
</div>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
@ -29,7 +27,6 @@
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: black;
}
img {
@ -39,5 +36,4 @@
height: 1.875rem;
}
}
</style>
</style>

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

@ -1,54 +1,52 @@
<template>
<div class="hud-wrapper">
<div class="profile">
<img src="/assets/avatar/default/head.png">
</div>
<div class="hud">
<div class="stats"></div>
</div>
<div class="hud-wrapper">
<div class="profile">
<img src="/assets/avatar/default/head.png" />
</div>
<div class="hud">
<div class="stats"></div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.hud-wrapper {
position: relative;
.profile {
position: absolute;
left: 0;
top: 0;
width: 4rem;
height: 4rem;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 2px solid $white;
z-index: 1;
img {
width: 2rem;
position: absolute;
left: calc(50% - 1rem);
top: 50%;
transform: translateY(-50%);
}
}
.hud {
position: absolute;
left: 2rem;
top: 2rem;
width: 15rem;
height: 5rem;
background-image: url('/assets/clouds.png');
background-position: center;
background-size: cover;
// background-color: rgba(127, 127, 127, 0.7);
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
border-radius: 1rem;
border: 2px solid $white;
}
.hud-wrapper {
position: relative;
.profile {
position: absolute;
left: 0;
top: 0;
width: 4rem;
height: 4rem;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 2px solid $white;
z-index: 1;
img {
width: 2rem;
position: absolute;
left: calc(50% - 1rem);
top: 50%;
transform: translateY(-50%);
}
</style>
}
.hud {
position: absolute;
left: 2rem;
top: 2rem;
width: 15rem;
height: 5rem;
background-image: url('/assets/clouds.png');
background-position: center;
background-size: cover;
// background-color: rgba(127, 127, 127, 0.7);
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
border-radius: 1rem;
border: 2px solid $white;
}
}
</style>

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

@ -1,106 +1,104 @@
<template>
<div class="menu-wrapper">
<ul class="menu">
<li class="menu-item">
<p>Chat</p>
<a>
<img src="/assets/icons/chat.png">
</a>
</li>
<li class="menu-item">
<p>World</p>
<a>
<img src="/assets/icons/world.png">
</a>
</li>
<li class="menu-item">
<p>Users</p>
<a>
<img src="/assets/icons/users.png">
</a>
</li>
<li class="menu-item">
<p>Inventory</p>
<a>
<img src="/assets/icons/treasure-chest.png">
</a>
</li>
</ul>
</div>
<div class="menu-wrapper">
<ul class="menu">
<li class="menu-item">
<p>Chat</p>
<a>
<img src="/assets/icons/chat.png" />
</a>
</li>
<li class="menu-item">
<p>World</p>
<a>
<img src="/assets/icons/world.png" />
</a>
</li>
<li class="menu-item">
<p>Users</p>
<a>
<img src="/assets/icons/users.png" />
</a>
</li>
<li class="menu-item">
<p>Inventory</p>
<a>
<img src="/assets/icons/treasure-chest.png" />
</a>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
@import '@/assets/scss/main';
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 1.25rem;
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 1.25rem;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
width: 4rem;
text-align: center;
background-color: #B1B2B5;
border: 2px solid $white;
border-radius: 1.5rem;
height: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: none;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
width: 4rem;
text-align: center;
background-color: #b1b2b5;
border: 2px solid $white;
border-radius: 1.5rem;
height: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: none;
&::after {
content: '';
position: absolute;
top: 100%;
background-color: $white;
height: 0.5rem;
width: 0.875rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: calc(50% - 0.4375rem);
}
}
a {
padding: 0.5rem;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 100%;
display: block;
width: 1.875rem;
height: 1.875rem;
img {
width: inherit;
height: inherit;
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
-webkit-filter: drop-shadow(0px 3px 6px $black);
filter: drop-shadow(0px 3px 6px $black);
}
}
}
}
&::after {
content: '';
position: absolute;
top: 100%;
background-color: $white;
height: 0.5rem;
width: 0.875rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: calc(50% - 0.4375rem);
}
}
a {
padding: 0.5rem;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 100%;
display: block;
width: 1.875rem;
height: 1.875rem;
img {
width: inherit;
height: inherit;
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
-webkit-filter: drop-shadow(0px 3px 6px $black);
filter: drop-shadow(0px 3px 6px $black);
}
}
}
}
}
</style>
}
</style>