cha0s/humus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ui++

Browse Source
This commit is contained in:
cha0s 2022-05-03 11:58:05 -05:00
parent def9064fe0
commit b46e2ff837
4 changed files with 72 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/components/app/play/ui/health/index.jsx
View File

@ -32,15 +32,19 @@ function Health({selfEntity}) {
>
{life}
</span>
{' '}
<div>
&mdash;
</div>
<div className={styles.maxLife}>
{maxLife}
</div>
</p>
<div className={styles.meterWrapper}>
<div className={styles.meter}>
<div className={styles.fill} />
</div>
</div>
<p className={styles.text}>
<span className={styles.maxLife}>{maxLife}</span>
</p>
</div>
);
}

45
packages/app/src/components/app/play/ui/health/index.module.scss
View File

@ -2,25 +2,20 @@
.health {
--border-width: 3px;
--height: 300px;
--height: 250px;
--width: 30px;
align-items: center;
align-items: flex-start;
display: flex;
font-family: joystix;
flex-direction: column;
opacity: 0.8;
padding: 20px;
position: absolute;
left: 0;
right: 0;
text-align: right;
top: 0;
}
.health span {
display: block;
text-align: center;
}
.life {
animation: lifeFlicker infinite;
animation-duration: 500ms;
@ -30,6 +25,7 @@
.maxLife {
@include shadow-text(1px, black, 0px);
margin-left: auto;
}
@keyframes lifeFlicker {
@ -54,15 +50,29 @@
}
.meterWrapper {
background-color: rgba(255, 255, 255, 0.075);
border-radius: 20px;
border: var(--border-width) solid black;
border: var(--border-width) solid white;
height: var(--height);
overflow: hidden;
position: relative;
width: var(--width);
}
.meterWrapper::after {
border: var(--border-width) solid black;
border-radius: 20px;
content: '';
height: calc(100% - calc(2 * var(--border-width)));
left: 0;
position: absolute;
top: 0;
width: calc(100% - calc(2 * var(--border-width)));
}
.meter {
box-sizing: content-box;
border: var(--border-width) solid white;
bottom: 0;
height: calc(var(--height) * var(--filled) - (2 * var(--border-width)));
overflow: hidden;
@ -70,14 +80,25 @@
width: 100%;
}
.meter::after {
border: var(--border-width) solid black;
left: calc(-1 * var(--border-width));
top: 0;
content: '';
height: calc(var(--height) * var(--filled) - (2 * var(--border-width)));
overflow: hidden;
position: absolute;
width: 100%;
}
.fill {
background-image: linear-gradient(to top, red 0%, yellow 50%, green 100%);
box-shadow: inset 0 0 calc(0.66 * var(--width)) rgba(0, 0, 0, 0.8);
box-shadow: inset 0 0 calc(0.3 * var(--width)) rgba(0, 0, 0, 0.8);
height: calc(var(--height) - (2 * var(--border-width)));
position: relative;
top: calc(-1 * var(--height) * (1 - var(--filled)));
}
.text {
margin-bottom: 10px;
margin: 10px;
}

2
packages/app/src/components/app/play/ui/stamina/index.jsx
View File

@ -4,7 +4,7 @@ import {PropTypes, React} from '@flecks/react';
import styles from './index.module.scss';
function Stamina({selfEntity}) {
const stamina = usePropertyChange(selfEntity, 'stamina') || 75;
const stamina = usePropertyChange(selfEntity, 'stamina') || 85;
const maxStamina = usePropertyChange(selfEntity, 'maxStamina') || 100;
const filled = stamina / maxStamina;
return (

37
packages/app/src/components/app/play/ui/stamina/index.module.scss
View File

@ -2,7 +2,7 @@
.stamina {
--border-width: 3px;
--height: 300px;
--height: 200px;
--width: 30px;
align-items: center;
@ -10,22 +10,36 @@
font-family: joystix;
flex-direction: column;
opacity: 0.8;
// padding: 20px;
position: absolute;
left: 100px;
top: 70px;
left: 20px;
top: 20px;
}
.meterWrapper {
background-color: rgba(255, 255, 255, 0.075);
border-radius: 20px;
border: var(--border-width) solid black;
border: var(--border-width) solid white;
height: var(--height);
overflow: hidden;
position: relative;
width: var(--width);
}
.meterWrapper::after {
--border-width: 4px;
border: var(--border-width) solid black;
border-radius: 20px;
content: '';
height: calc(100% - calc(2 * var(--border-width)));
left: 0;
position: absolute;
top: 0;
width: calc(100% - calc(2 * var(--border-width)));
}
.meter {
box-sizing: content-box;
border: 4px solid #fff;
bottom: 0;
height: calc(var(--height) * var(--filled) - (2 * var(--border-width)));
overflow: hidden;
@ -33,9 +47,20 @@
width: 100%;
}
.meter::after {
border: 4px solid black;
left: -4px;
top: 0;
content: '';
height: calc(var(--height) * var(--filled) - (2 * var(--border-width)));
overflow: hidden;
position: absolute;
width: 100%;
}
.fill {
background-image: linear-gradient(to top, orange 0%, rgb(0, 110, 255) 100%);
box-shadow: inset 0 0 calc(0.66 * var(--width)) rgba(0, 0, 0, 0.8);
box-shadow: inset 0 0 calc(0.3 * var(--width)) rgba(0, 0, 0, 0.8);
height: calc(var(--height) - (2 * var(--border-width)));
position: relative;
top: calc(-1 * var(--height) * (1 - var(--filled)));