refactor: handle damage translation in app

client/app.js

@@ -369,6 +369,37 @@ export class App extends decorate(class {}) {
   }
 
   renderIntoDom(node) {
+    // Maintain damage element.
+    const promise = this.stage.findUiElement('.damage');
+    promise.then((inner) => {
+      const innerStyles = () => {
+        const {realOffset} = this.stage.camera;
+        return {
+          transform: `translate(-${realOffset[0]}px, -${realOffset[1]}px)`,
+        };
+      }
+      const onRealOffsetChanged = () => {
+        const styles = innerStyles();
+        for (const key in styles) {
+          const style = styles[key];
+          inner.style[key] = style;
+        }
+      }
+      const listenForCameraChanges = () => {
+        if (this.stage.camera) {
+          this.stage.camera.on('realOffsetChanged', onRealOffsetChanged);
+        }
+      };
+      listenForCameraChanges();
+      this.stage.on('cameraChanged', (oldCamera, newCamera) => {
+        if (oldCamera) {
+          oldCamera.off('realOffsetChanged', onRealOffsetChanged);
+        }
+        if (newCamera) {
+          listenForCameraChanges();
+        }
+      })
+    });
     // Add graphics stage.
     this.stage.addToDom(node);
     // UI.

client/ui/damage.js

@@ -3,8 +3,6 @@ import React from 'react';
 // 2nd party.
 import {compose} from '@avocado/core';
 import contempo from 'contempo';
-// 1st party.
-import {usePropertyChange} from './hooks/use-property-change';
 
 const decorate = compose(
   contempo(`
@@ -12,7 +10,6 @@ const decorate = compose(
   position: absolute;
   top: 0;
   left: 0;
-  overflow: hidden;
 }
 .particle .text {
   display: inline-block;
@@ -43,17 +40,7 @@ const decorate = compose(
 );
 
 const DamageComponent = ({app}) => {
-  const camera = usePropertyChange(app.stage, 'camera');
-  const areaSize = usePropertyChange(camera, 'areaSize', [0, 0]);
-  const realOffset = usePropertyChange(camera, 'realOffset', [0, 0]);
-  return <div
-    className="damage unselectable"
-    style={{
-      transform: `translate(-${realOffset[0]}px, -${realOffset[1]}px)`,
-      width: `${areaSize[0]}px`,
-      height: `${areaSize[1]}px`,
-    }}
-  ></div>;
+  return <div className="damage"></div>;
 }
 
 export default decorate(DamageComponent);