feat: stamina bar

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

@@ -14,6 +14,7 @@ import {
 } from '../../../../hooks';
 import Health from './health';
 import Hotbar from './hotbar';
+import Stamina from './stamina';
 import styles from './index.module.scss';
 
 const PlayUi = () => {
@@ -51,6 +52,7 @@ const PlayUi = () => {
       {selfEntity && (
         <>
           <Health selfEntity={selfEntity} />
+          <Stamina selfEntity={selfEntity} />
           <Hotbar selfEntity={selfEntity} />
         </>
       )}

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

@@ -0,0 +1,34 @@
+import {usePropertyChange} from '@avocado/react';
+import {PropTypes, React} from '@flecks/react';
+
+import styles from './index.module.scss';
+
+function Stamina({selfEntity}) {
+  const stamina = usePropertyChange(selfEntity, 'stamina') || 75;
+  const maxStamina = usePropertyChange(selfEntity, 'maxStamina') || 100;
+  const filled = stamina / maxStamina;
+  return (
+    <div
+      className={styles.stamina}
+      style={{
+        '--filled': filled,
+      }}
+    >
+      <div className={styles.meterWrapper}>
+        <div className={styles.meter}>
+          <div className={styles.fill} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Stamina.defaultProps = {};
+
+Stamina.displayName = 'Stamina';
+
+Stamina.propTypes = {
+  selfEntity: PropTypes.shape({}).isRequired,
+};
+
+export default Stamina;

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

@@ -0,0 +1,46 @@
+@import '../../../../../scss/graphics.scss';
+
+.stamina {
+  --border-width: 3px;
+  --height: 300px;
+  --width: 30px;
+
+  align-items: center;
+  display: flex;
+  font-family: joystix;
+  flex-direction: column;
+  opacity: 0.8;
+  // padding: 20px;
+  position: absolute;
+  left: 100px;
+  top: 70px;
+}
+
+.meterWrapper {
+  border-radius: 20px;
+  border: var(--border-width) solid black;
+  height: var(--height);
+  overflow: hidden;
+  position: relative;
+  width: var(--width);
+}
+
+.meter {
+  bottom: 0;
+  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);
+  height: calc(var(--height) - (2 * var(--border-width)));
+  position: relative;
+  top: calc(-1 * var(--height) * (1 - var(--filled)));
+}
+
+.text {
+  margin-bottom: 10px;
+}