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

Hud cutout styling + changes character select

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-02 18:32:59 +02:00
parent bc7d83345f
commit 579f289995
6 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/shapes/hud-image-shape.svg Normal file
View File

@ -0,0 +1 @@
<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71b166124144" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71b166124144"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71b166124144"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 716 B

1
public/assets/shapes/hud-shape.svg Normal file
View File

@ -0,0 +1 @@
<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71aadb07368f" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71aadb07368f"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71aadb07368f"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(127, 127, 127); fill-opacity: 0.5;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71aadb07368f" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"/></clipPath><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0')"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -5,6 +5,7 @@ $purple: #4741e6;
$lilac: #7b76ff; $lilac: #7b76ff;
$light-blue: #00c2ff; $light-blue: #00c2ff;
$red: #d50000; $red: #d50000;
$dark-red: #b30000;
$gray: #7f7f7f; $gray: #7f7f7f;
$gray-2: #696969; $gray-2: #696969;
$dark-gray: #454545; $dark-gray: #454545;

2
src/components/Game.vue
View File

@ -94,7 +94,7 @@ const bootScene = (scene: Phaser.Scene) => {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 2rem; margin: 0 3rem;
} }
.top-ui { .top-ui {
top: 3rem; top: 3rem;

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

@ -16,6 +16,7 @@
.hud-wrapper { .hud-wrapper {
position: relative; position: relative;
left: -2rem;
.profile { .profile {
position: absolute; position: absolute;
left: 0; left: 0;
@ -24,7 +25,7 @@
height: 4rem; height: 4rem;
background-color: rgba($white, 0.8); background-color: rgba($white, 0.8);
border-radius: 100%; border-radius: 100%;
border: 2px solid $white; border: 3px solid $white;
z-index: 1; z-index: 1;
img { img {
width: 2rem; width: 2rem;
@ -38,15 +39,30 @@
position: absolute; position: absolute;
left: 2rem; left: 2rem;
top: 2rem; top: 2rem;
width: 15rem; width: 245px;
height: 5rem; height: 75px;
background-image: url('/assets/shapes/hud-shape.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 1rem;
z-index: 1;
}
&::before {
content: '';
position: absolute;
left: 2rem;
top: 2rem;
width: 245px;
height: 75px;
background-image: url('/assets/clouds.png'); background-image: url('/assets/clouds.png');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
// background-color: rgba(127, 127, 127, 0.7); background-repeat: no-repeat;
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
border-radius: 1rem; border-radius: 1rem;
border: 2px solid $white; mask-image: url('/assets/shapes/hud-image-shape.svg');
mask-mode: luminance;
} }
} }
</style> </style>

8
src/components/screens/Characters.vue
View File

@ -121,6 +121,7 @@ function create() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: rgba($white, 0.8); background-color: rgba($white, 0.8);
outline: 1px solid $white;
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
@ -206,10 +207,14 @@ function create() {
padding: 5px; padding: 5px;
border-radius: 100%; border-radius: 100%;
z-index: 1; z-index: 1;
right: -5px; right: -10px;
top: 0; top: 0;
transform: translateY(-50%); transform: translateY(-50%);
position: absolute; position: absolute;
&:hover {
background-color: $dark-red;
}
} }
span { span {
@ -244,6 +249,7 @@ function create() {
border: rgba($white, 0.35) 1px solid; border: rgba($white, 0.35) 1px solid;
border-radius: 5px; border-radius: 5px;
color: $white; color: $white;
font-size: 18px;
span { span {
color: $white; color: $white;