refactor: ui++

packages/app/src/components/app/play/ui/health/index.jsx

@@ -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>
   );
 }

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

@@ -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;
 }

packages/app/src/components/app/play/ui/stamina/index.jsx

@@ -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 (

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

@@ -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;
+  left: 20px;
-  top: 70px;
+  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)));