feat: dom text

app/src/react/components/play/index.jsx

@@ -1,20 +1,68 @@
 import './index.scss';
 
 import {InputNormalizer} from '@avocado/input/client';
-import {setSelfEntity, useSelfEntity} from '@humus/core';
+import {Vector} from '@avocado/math';
+import {
+  setSelfEntity,
+  useRoom,
+  useSelfEntity,
+} from '@humus/core';
+import {
+  React,
+  useEffect,
+  useRef,
+} from '@latus/react';
 import {useDispatch} from '@latus/redux';
 import {useSocket} from '@latus/socket';
-import React, {useEffect, useRef} from 'react';
 import {useParams} from 'react-router';
 
 import Hotbar from './hotbar';
 
+const FACTOR = 5;
+
 const Play = () => {
   const dispatch = useDispatch();
   const {uuid} = useParams();
   const ref = useRef();
+  const room = useRoom();
   const selfEntity = useSelfEntity();
   const socket = useSocket();
+  useEffect(() => {
+    if (!ref.current || !room) {
+      return undefined;
+    }
+    const onEntityAdded = async (entity) => {
+      if (entity.is('DomNode')) {
+        // eslint-disable-next-line no-param-reassign
+        entity.parentNode = ref.current.querySelector('.entities');
+      }
+    };
+    room.on('entityAdded', onEntityAdded);
+    return () => {
+      room.off('entityAdded', onEntityAdded);
+    };
+  }, [ref, room]);
+  useEffect(() => {
+    if (!room || !selfEntity) {
+      return undefined;
+    }
+    selfEntity.camera.realPosition = selfEntity.camera.position;
+    const onCameraRealOffsetChanged = () => {
+      const [left, top] = Vector.scale(selfEntity.camera.realOffset, -1);
+      const entities = ref.current.querySelector('.entities');
+      entities.style.left = `${FACTOR * left}px`;
+      entities.style.top = `${FACTOR * top}px`;
+    };
+    onCameraRealOffsetChanged();
+    selfEntity.camera.on('realOffsetChanged', onCameraRealOffsetChanged);
+    return () => {
+      const {camera} = selfEntity || {};
+      if (camera) {
+        camera.off('realOffsetChanged', onCameraRealOffsetChanged);
+      }
+    };
+  }, [room, selfEntity]);
+
   useEffect(() => {
     const join = async () => {
       dispatch(setSelfEntity(await socket.send(['Join', uuid])));
@@ -69,6 +117,7 @@ const Play = () => {
       tabIndex="0"
     >
       {selfEntity && <Hotbar selfEntity={selfEntity} />}
+      <div className="entities" />
     </div>
   );
 };

app/src/react/components/play/index.scss

@@ -0,0 +1,3 @@
+.entities {
+  position: relative;
+}

app/src/react/components/ui.scss

@@ -1,6 +1,7 @@
 .ui {
   display: inline-block;
   left: 50%;
+  overflow: hidden;
   position: absolute;
   --scale: 0;
   top: 50%;

packages/combat/src/traits/vulnerable.js

@@ -90,7 +90,7 @@ export default (latus) => class Vulnerable extends Trait {
   }
 
   static harmTextSize(amount) {
-    const biggest = 16;
+    const biggest = 64;
     const smallest = biggest / 2;
     const step = biggest / 6;
     if (amount > 999) {
@@ -262,16 +262,20 @@ export default (latus) => class Vulnerable extends Trait {
 
       acceptedHarm: (harm) => {
         const {amount, isDamage} = harm;
-        const fill = isDamage ? '#FF0000' : '#00FF77';
         this.entity.emitParticle('harm', {
           traits: {
-            RasterText: {
+            DomText: {
               params: {
                 textStyle: {
-                  fill,
+                  color: isDamage ? '#FF0000' : '#00FF77',
                   fontFamily: 'joystix',
-                  fontSize: this.constructor.harmTextSize(amount),
-                  strokeThickness: 2,
+                  fontSize: `${this.constructor.harmTextSize(amount)}px`,
+                  textShadow: [
+                    '-2px 2px 0 #000',
+                    '2px 2px 0 #000',
+                    '2px -2px 0 #000',
+                    '-2px -2px 0 #000',
+                  ].join(','),
                 },
               },
             },