feat: money

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 Money from './money';
 import Stamina from './stamina';
 import styles from './index.module.scss';
 
@@ -52,6 +53,7 @@ const PlayUi = () => {
       {selfEntity && (
         <>
           <Health selfEntity={selfEntity} />
+          <Money selfEntity={selfEntity} />
           <Stamina selfEntity={selfEntity} />
           <Hotbar selfEntity={selfEntity} />
         </>

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

@@ -0,0 +1,28 @@
+import {usePropertyChange} from '@avocado/react';
+import {PropTypes, React} from '@flecks/react';
+
+import styles from './index.module.scss';
+
+function Money({selfEntity}) {
+  const money = usePropertyChange(selfEntity, 'money');
+  const formatted = new Intl.NumberFormat().format(money);
+  return (
+    <div className={styles.money}>
+      <p>
+        <span className={styles.sign}><span className={styles.signText}>$</span></span>
+        {' '}
+        <span className={styles.number}>{formatted}</span>
+      </p>
+    </div>
+  );
+}
+
+Money.defaultProps = {};
+
+Money.displayName = 'Money';
+
+Money.propTypes = {
+  selfEntity: PropTypes.shape({}).isRequired,
+};
+
+export default Money;

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

@@ -0,0 +1,53 @@
+.money {
+  color: black;
+  font-size: 32px;
+  opacity: 0.7;
+  position: absolute;
+  right: 1278px;
+  top: 20px;
+}
+
+.number {
+  background-color: #ffffff;
+  background-image: linear-gradient(to bottom, #ffffff 0%, #eee 20%, #eee 80%, #777 100%);
+  border: 3px solid black;
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px black;
+  display: inline-block;
+  font-family: monospace;
+  font-weight: bold;
+  padding: 10px 15px 10px 20px;
+  position: relative;
+  left: -25px;
+  text-align: right;
+  top: -15px;
+  width: 160px;
+}
+
+.sign {
+  background-color: #fff;
+  border: 3px solid black;
+  border-radius: 40px;
+  box-shadow: inset 0 0 3px black;
+  color: gold;
+  display: inline-block;
+  font-family: joystix;
+  font-weight: normal;
+  font-size: 64px;
+  padding: 7px 12px;
+  position: relative;
+  --inner-shadow: rgb(0, 64, 0);
+  text-shadow:
+    -2.5px -2.5px 0 var(--inner-shadow),
+    -2.5px 2.5px 0 var(--inner-shadow),
+    2.5px -2.5px 0 var(--inner-shadow),
+    2.5px 2.5px 0 var(--inner-shadow),
+  ;
+  z-index: 10;
+}
+
+.signText {
+  left: 0px;
+  position: relative;
+  top: -2.5px;
+}

packages/core/src/traits/wealthy.js

@@ -0,0 +1,18 @@
+import {StateProperty, Trait} from '@avocado/traits';
+import {compose} from '@flecks/core';
+
+const decorate = compose(
+  StateProperty('money', {
+    track: true,
+  }),
+);
+
+export default () => class Wealthy extends decorate(Trait) {
+
+  static defaultState() {
+    return {
+      money: 0,
+    };
+  }
+
+};