flow: pointer movement

client/index.js

@@ -2,11 +2,13 @@ import {create as createClient} from '@avocado/client';
 import {EntityList} from '@avocado/entity';
 import {ActionRegistry} from '@avocado/input';
 import {Container, Renderer} from '@avocado/graphics';
+import {Vector} from '@avocado/math';
 import {World} from '@avocado/physics/matter/world';
 import {StateSynchronizer} from '@avocado/state';
 import {Room, RoomView} from '@avocado/topdown';
 import {clearAnimation, setAnimation} from '@avocado/timing';
 
+let canvasRatio = 1;
 const renderer = new Renderer([640, 360]);
 const stage = new Container();
 stage.scale = [2, 2];
@@ -35,8 +37,12 @@ room.on('entityAdded', (entity) => {
     }
   }
 });
+// Create the graphics canvas.
 const appNode = document.querySelector('.app');
+renderer.element.tabIndex = 0;
+appNode.appendChild(renderer.element);
 // Accept input.
+const canvasNode = document.querySelector('.app canvas');
 const actionRegistry = new ActionRegistry();
 actionRegistry.mapKeysToActions({
   'w': 'MoveUp',
@@ -44,16 +50,69 @@ actionRegistry.mapKeysToActions({
   's': 'MoveDown',
   'd': 'MoveRight',
 });
-actionRegistry.listen(appNode);
-let actionState = actionRegistry.state();
+function createMoveToNormal(position) {
+  if (selfEntity) {
+    const scaledEntityPosition = Vector.mul(
+      selfEntity.position,
+      stage.scale,
+    );
+    const diff = Vector.sub(
+      position,
+      scaledEntityPosition,
+    );
+    const magnitude = Vector.magnitude(position, scaledEntityPosition);
+    if (magnitude < 8) {
+      return;
+    }
+    const normal = Vector.normalize(diff);
+    return normal;
+  }
+}
+let pointingAt = [-1, -1];
+function isPointingAtAnything() {
+  return -1 !== pointingAt[0] && -1 !== pointingAt[1];
+}
+function pointingAtFromEvent(event) {
+  const rect = event.target.getBoundingClientRect();
+  return Vector.scale(
+    [
+      event.clientX - rect.x,
+      event.clientY - rect.y,
+    ],
+    canvasRatio,
+  );
+}
+canvasNode.addEventListener('pointerdown', (event) => {
+  pointingAt = pointingAtFromEvent(event);
+});
+canvasNode.addEventListener('pointermove', (event) => {
+  if (!isPointingAtAnything()) {
+    return;
+  }
+  pointingAt = pointingAtFromEvent(event);
+});
+canvasNode.addEventListener('pointerup', (event) => {
+  pointingAt = [-1, -1];
+});
+actionRegistry.listen(canvasNode);
+let actionState = actionRegistry.state;
 // Create the socket connection.
 const socket = createClient(window.location.href);
-// Create the graphics canvas.
-appNode.appendChild(renderer.element);
 // Input messages.
 const messageHandle = setInterval(() => {
-  if (actionState !== actionRegistry.state()) {
-    actionState = actionRegistry.state();
+  // Mouse/touch movement.
+  do {
+    if (isPointingAtAnything()) {
+      const normal = createMoveToNormal(pointingAt);
+      if (normal) {
+        actionRegistry.state = actionRegistry.state.set('MoveTo', normal);
+        break;
+      }
+    }
+    actionRegistry.state = actionRegistry.state.delete('MoveTo');
+  } while (false);
+  if (actionState !== actionRegistry.state) {
+    actionState = actionRegistry.state;
     socket.send({
       type: 'input',
       payload: actionState.toJS()
@@ -118,6 +177,7 @@ function onResize() {
     for (const key of ['height', 'width']) {
       node.style[key] = key === axe ? '100%' : 'auto';
     }
+    canvasRatio = 640 / node.clientWidth;
   });
 }
 window.addEventListener('resize', onResize);

traits/controllable.js

@@ -6,7 +6,7 @@ import {Trait} from '@avocado/entity';
 export class Controllable extends Trait {
 
   initialize() {
-    this._inputState = I.Set();
+    this._inputState = I.Map();
   }
 
   listeners() {
@@ -18,6 +18,11 @@ export class Controllable extends Trait {
           return;
         }
         const movementVector = [0, 0];
+        if (inputState.has('MoveTo')) {
+          const moveTo = inputState.get('MoveTo');
+          movementVector[0] = moveTo[0];
+          movementVector[1] = moveTo[1];
+        }
         if (inputState.has('MoveUp')) {
           movementVector[1] -= 1;
         }
@@ -40,7 +45,7 @@ export class Controllable extends Trait {
   }
 
   set inputState(inputState) {
-    this._inputState = I.Set(inputState);
+    this._inputState = I.Map(inputState);
   }
 
 }