Add Grab System (#9)

* Remove unused code

* Adds grab components

* Adds grab nodes

* Add sensors to the physics world

* Add grab systems

* Add new sprites

* Attach grab components

* Add grab system to engine

* Update changelog

2 files changed, 131 insertions, 0 deletions

diff --git a/lib/factories/pixi.js b/lib/factories/pixi.js
index 786639f..f941ffe 100644
--- a/lib/factories/pixi.js
+++ b/lib/factories/pixi.js
@@ -68,6 +68,9 @@ export default {
 
     body.addChild(this.createBlush({ radius }));
 
+    body.addChild(this.createEffortMark({ radius }));
+    body.addChild(this.createShadow({ radius }));
+
     // The group
     body.addChild(smile);
     body.addChild(frown);
@@ -203,5 +206,108 @@ export default {
     blush.addChild(rightBlush);
 
     return blush;
+  },
+
+  /**
+   * Creates an effort mark
+   *
+   * @function createEffortMark
+   * @memberof PixiFactory
+   * @return {external:CreateJs.Container} the created container
+   */
+  createEffortMark(config) {
+
+    const radius = config.radius;
+
+    const effortMark = new Graphics();
+
+    const centerX = -3 * radius / 4;
+    const centerY = -3 * radius / 4;
+
+    effortMark.name = 'effort';
+    effortMark.visible = false;
+
+    const color = 0xff00ff;
+    const lineWidth = 2;
+
+    const topRightArch = new Graphics();
+    topRightArch.lineStyle(lineWidth, color, 1)
+      .arc(
+        centerX + 2 * radius / 7, centerY - 2 * radius / 7,
+        radius / 5,
+        Math.PI / 2,
+        Math.PI
+      );
+
+    const topLeftArch = new Graphics();
+    topLeftArch.lineStyle(lineWidth, color, 1)
+      .arc(
+        centerX - 2 * radius / 7, centerY - radius / 4,
+        radius / 5,
+        0,
+        Math.PI / 2
+      );
+
+    const bottomRightArch = new Graphics();
+    bottomRightArch.lineStyle(lineWidth, color, 1)
+      .arc(
+        centerX + 2 * radius / 7, centerY + radius / 4,
+        radius / 5,
+        Math.PI,
+        3 * Math.PI / 2
+      );
+
+    const bottomLeftArch = new Graphics();
+    bottomLeftArch.lineStyle(lineWidth, color, 1)
+      .arc(
+        centerX - 2 * radius / 7, centerY + 2 * radius / 7,
+        radius / 5,
+        3 * Math.PI / 2,
+        0
+      );
+
+    effortMark.addChild(topRightArch);
+    effortMark.addChild(topLeftArch);
+    effortMark.addChild(bottomRightArch);
+    effortMark.addChild(bottomLeftArch);
+
+    return effortMark;
+  },
+
+  /**
+   * Creates a shadow for the eye
+   *
+   * @function createShadow
+   * @memberof PixiFactory
+   * @return {external:CreateJs.Container} the created container
+   */
+  createShadow(config) {
+
+    const radius = config.radius;
+
+    const shadow = new Graphics();
+
+    const centerX = radius / 2;
+    const centerY = -3 * radius / 4;
+
+    shadow.name = 'shadow';
+    shadow.visible = false;
+
+    const color = 0x9900ff;
+    const lineWidth = 2;
+
+    shadow.lineStyle(lineWidth, color, 1)
+      .moveTo(centerX - radius / 4, centerY - radius / 3)
+      .lineTo(centerX - radius / 4, centerY + radius / 5)
+      .moveTo(centerX - radius / 8, centerY - radius / 4)
+      .lineTo(centerX - radius / 8, centerY + radius / 5)
+      .moveTo(centerX, centerY - radius / 5)
+      .lineTo(centerX, centerY + radius / 5)
+      .moveTo(centerX + radius / 8, centerY - radius / 6)
+      .lineTo(centerX + radius / 8, centerY + radius / 6)
+      .moveTo(centerX + radius / 4, centerY - radius / 5)
+      .lineTo(centerX + radius / 4, centerY + radius / 5);
+
+    return shadow;
   }
 };
diff --git a/lib/factories/sumo.js b/lib/factories/sumo.js
index e8417f9..7b50f8a 100644
--- a/lib/factories/sumo.js
+++ b/lib/factories/sumo.js
@@ -10,6 +10,9 @@ import CoupledEntitiesComponent from '../components/coupled_entities';
 import DashComponent from '../components/dash';
 import ElasticComponent from '../components/elastic';
 import ForceComponent from '../components/force';
+import GrabAreaComponent from '../components/grab_area';
+import GrabbableComponent from '../components/grabbable';
+import GrabComponent from '../components/grab';
 import MaxVelocityComponent from '../components/max_velocity';
 import PositionComponent from '@serpentity/components.position';
 import PixiContainerComponent from '../components/pixi_container';
@@ -96,6 +99,18 @@ export default {
     });
     entity.addComponent(new BodyComponent({ body }));
 
+    // GRAB
+
+    const areaSizeFactor = 2; // Multiplier vs the radius
+    const area = Bodies.circle(position.x / Config.meterSize, position.y / Config.meterSize, (radius * areaSizeFactor) / Config.meterSize, {
+      label: 'Sumo Grab Area',
+      isSensor: true
+    });
+
+    entity.addComponent(new GrabAreaComponent({ area }));
+    entity.addComponent(new GrabComponent({ body }));
+    entity.addComponent(new GrabbableComponent({ body }));
+
     if (engine) {
       engine.addEntity(entity);
     }
@@ -235,6 +250,16 @@ export default {
             component: DashComponent,
             property: 'dashing'
           }
+        },
+        {
+          source: {
+            type: 'keyboard',
+            index: 88 // X
+          },
+          target: {
+            component: GrabComponent,
+            property: 'grabbing'
+          }
         }
       ]
     }));