flow: stage, filters

client/index.js

@@ -1,27 +1,34 @@
 import {create as createClient} from '@avocado/client';
 import {EntityList} from '@avocado/entity';
 import {ActionRegistry} from '@avocado/input';
-import {Container, Renderer} from '@avocado/graphics';
+import {Stage} 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();
+// DOM.
+const appNode = document.querySelector('.app');
+// Graphics stage.
+const stage = new Stage([640, 360]);
 stage.scale = [2, 2];
-
+stage.addToDom(appNode);
+stage.element.addEventListener('blur', () => {
+  stage.sepia();
+});
+stage.element.addEventListener('focus', () => {
+  stage.removeAllFilters();
+});
+// Create room.
 const room = new Room();
 room.world = new World();
-const roomView = new RoomView(room, renderer);
+const roomView = new RoomView(room, stage.renderer);
 stage.addChild(roomView);
-
+// Synchronize state.
 const stateSynchronizer = new StateSynchronizer({
   room,
 });
-
+// Handle "own" entity.
 let selfEntity;
 function hasSelfEntity() {
   return selfEntity && 'string' !== typeof selfEntity;
@@ -37,11 +44,6 @@ room.on('entityAdded', (entity) => {
     }
   }
 });
-// Create the graphics canvas.
-const appNode = document.querySelector('.app');
-renderer.element.tabIndex = 0;
-appNode.appendChild(renderer.element);
-renderer.element.focus();
 // Accept input.
 const canvasNode = document.querySelector('.app canvas');
 const actionRegistry = new ActionRegistry();
@@ -52,48 +54,33 @@ actionRegistry.mapKeysToActions({
   'd': 'MoveRight',
 });
 actionRegistry.listen(canvasNode);
+// Mouse/touch movement.
 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;
+  if (!selfEntity) {
+    return;
   }
+  const entityPosition = selfEntity.position;
+  const magnitude = Vector.magnitude(position, entityPosition);
+  if (magnitude < 8) {
+    return;
+  }
+  const diff = Vector.sub(position, entityPosition);
+  return Vector.normalize(diff);
 }
 let pointingAt = [-1, -1];
 function isPointingAtAnything() {
   return -1 !== pointingAt[0] && -1 !== pointingAt[1];
 }
-function pointingAtFromEvent(event) {
-  const rect = event.target.getBoundingClientRect();
-  pointingAt = Vector.scale(
-    [
-      event.clientX - rect.x,
-      event.clientY - rect.y,
-    ],
-    canvasRatio,
-  );
-}
-canvasNode.addEventListener('pointerdown', (event) => {
-  pointingAtFromEvent(event);
+stage.on('pointerDown', (event) => {
+  pointingAt = event.position;
 });
-canvasNode.addEventListener('pointermove', (event) => {
+stage.on('pointerMove', (event) => {
   if (!isPointingAtAnything()) {
     return;
   }
-  pointingAtFromEvent(event);
+  pointingAt = event.position;
 });
-canvasNode.addEventListener('pointerup', (event) => {
+stage.on('pointerUp', (event) => {
   pointingAt = [-1, -1];
 });
 let actionState = actionRegistry.state;
@@ -152,7 +139,7 @@ function render() {
   if (!dirty) {
     return;
   }
-  renderer.render(stage);
+  stage.render();
   dirty = false;
 }
 const renderHandle = setAnimation(render);
@@ -164,22 +151,6 @@ if (module.hot) {
   module.hot.dispose(() => {
     clearAnimation(renderHandle);
     room.destroy();
-    appNode.removeChild(renderer.element);
     stage.destroy();
-    renderer.destroy();
   });
 }
-// Make sure dis boi always correct ratio and always maximally visible.
-function onResize() {
-  const ratio = window.innerWidth / window.innerHeight;
-  const axe = ratio > (16 / 9) ? 'height' : 'width';
-  const nodes = window.document.querySelectorAll('.app canvas');
-  nodes.forEach((node) => {
-    for (const key of ['height', 'width']) {
-      node.style[key] = key === axe ? '100%' : 'auto';
-    }
-    canvasRatio = 640 / node.clientWidth;
-  });
-}
-window.addEventListener('resize', onResize);
-onResize();