refactor: camera/offsets

app/react/components/dom/damage.jsx

@@ -11,7 +11,6 @@ const damageTypeMap = {
 };
 
 function Damage({
-  camera,
   damage,
   scale,
   zIndex,
@@ -35,8 +34,8 @@ function Damage({
       className={styles.damage}
       style={{
         '--magnitude': Math.max(1, Math.floor(Math.log10(Math.abs(amount)))),
-        '--positionX': `${position.x * scale - camera.x}px`,
-        '--positionY': `${position.y * scale - camera.y}px`,
+        '--positionX': `${position.x * scale}px`,
+        '--positionY': `${position.y * scale}px`,
         '--randomnessX': randomness.x,
         '--randomnessY': randomness.y,
         '--shimmer': damageTypeMap[damage.type],

app/react/components/dom/damages.jsx

@@ -2,12 +2,11 @@ import styles from './damages.module.css';
 
 import Damage from './damage.jsx';
 
-export default function Damages({camera, damages, scale}) {
+export default function Damages({damages, scale}) {
   const elements = [];
   for (const key in damages) {
     elements.push(
       <Damage
-        camera={camera}
         damage={damages[key]}
         key={key}
         scale={scale}

app/react/components/dom/dialogue-caret.jsx

@@ -26,21 +26,21 @@ export default function DialogueCaret({
   };
   const left = Math.max(
     Math.min(
-      position.x * scale - camera.x,
-      RESOLUTION.x - bounds.x * scale - 16,
+      position.x * scale,
+      RESOLUTION.x - bounds.x * scale - 16 + camera.x,
     ),
-    bounds.x * scale + 16,
+    bounds.x * scale + 16 + camera.x,
   );
   const top = Math.max(
     Math.min(
-      position.y * scale - camera.y,
-      RESOLUTION.y - bounds.y * scale - 16,
+      position.y * scale - dimensions.h / 2,
+      RESOLUTION.y - bounds.y * scale - 16 + camera.y,
     ),
-    bounds.y * scale + 88,
+    bounds.y * scale + 16 + camera.y,
   );
   const offsetPosition = {
-    x: ((position.x * scale - camera.x) - left) / scale,
-    y: ((position.y * scale - camera.y) - top) / scale,
+    x: ((position.x * scale) - left) / scale,
+    y: ((position.y * scale) - top) / scale,
   };
   const difference = {
     x: origin.x - position.x + offsetPosition.x,

app/react/components/dom/dialogue.jsx

@@ -87,25 +87,27 @@ export default function Dialogue({
   };
   const left = Math.max(
     Math.min(
-      position.x * scale - camera.x,
-      RESOLUTION.x - bounds.x * scale - 16,
+      position.x * scale,
+      RESOLUTION.x - bounds.x * scale - 16 + camera.x,
     ),
-    bounds.x * scale + 16,
+    bounds.x * scale + 16 + camera.x,
   );
   const top = Math.max(
     Math.min(
-      position.y * scale - camera.y,
-      RESOLUTION.y - bounds.y * scale - 16,
+      position.y * scale - dimensions.h / 2,
+      RESOLUTION.y - bounds.y * scale - 16 + camera.y,
     ),
-    bounds.y * scale + 16,
+    bounds.y * scale + 16 + camera.y,
   );
   return (
     <div
       className={styles.dialogue}
       ref={ref}
       style={{
-        left: `${left}px`,
-        top: `${top}px`,
+        translate: `
+          ${left}px
+          ${top}px
+        `,
       }}
     >
       <DialogueCaret
@@ -113,7 +115,6 @@ export default function Dialogue({
         dialogue={dialogue}
         dimensions={dimensions}
         scale={scale}
-
       />
       <p className={styles.letters}>
         {localRender(caret, radians)}

app/react/components/dom/dialogue.module.css

@@ -3,9 +3,10 @@
   border: solid 3px white;
   border-radius: 8px;
   color: white;
+  left: 0;
   overflow-wrap: break-word;
   padding: 12px;
-  position: fixed;
+  position: absolute;
   margin: 0;
   margin-right: -66%;
   text-shadow:
@@ -14,6 +15,7 @@
     0px 1px 0px black,
     -1px 0px 0px black
   ;
+  top: 0;
   transform: translate(-50%, -50%);
   user-select: none;
   max-width: 66%;

app/react/components/dom/entities.jsx

@@ -129,13 +129,19 @@ export default function Entities({
     );
   }
   return (
-    <>
+    <div
+      style={{
+        translate: `
+          calc(-1px * ${camera.x})
+          calc(-1px * ${camera.y})
+        `,
+      }}
+    >
       {renderables}
       <Damages
-        camera={camera}
         damages={damages}
         scale={scale}
       />
-    </>
+    </div>
   );
 }

app/server/create/homestead.js

@@ -175,7 +175,7 @@ export default async function createHomestead(id) {
         subject.Interlocutor.dialogue({
           body: line,
           linger: 2,
-          offset: {x: 0, y: -32},
+          offset: {x: 0, y: -16},
           origin: 'track',
           position: 'track',
         })

app/server/engine.js

@@ -168,7 +168,7 @@ export default class Engine {
             Interlocutor.dialogue({
               body: payload.value,
               linger: 5,
-              offset: {x: 0, y: -40},
+              offset: {x: 0, y: -24},
               origin: 'track',
               position: 'track',
             });