Add Grab System (#9)

[rbdr/sumo] / lib / sumo.js

diff --git a/lib/sumo.js b/lib/sumo.js
index da72991982c6ea6831699ac23d3eb005c686d8f4..d39c055eaece84e07eed6ee579437ca0375bdcbf 100644 (file)
--- a/lib/sumo.js
+++ b/lib/sumo.js
@@ -1,21 +1,49 @@
+import 'babel-polyfill';
+
+import Config from './config';
+
+// Systems
+
+import ApplyForceSystem from './systems/apply_force';
+import CreateCouplingLineSystem from './systems/create_coupling_line';
+import ControlMapperSystem from './systems/control_mapper';
+import DashSystem from './systems/dash';
+import DrawDashSystem from './systems/draw_dash';
+import DrawGrabSystem from './systems/draw_grab';
+import ElasticSystem from './systems/elastic';
+import GrabSystem from './systems/grab';
+import PhysicsWorldControlSystem from './systems/physics_world_control';
+import PhysicsToAttributesSystem from './systems/physics_to_attributes';
+import RenderSystem from './systems/render';
+import AttributesToRenderableSystem from './systems/attributes_to_renderable';
+
+// Factories
+
+import SumoFactory from './factories/sumo';
+
+// External Dependencies
+
 import Serpentity from '@serpentity/serpentity';
+import { Application } from 'pixi.js';
+import { Engine } from 'matter-js';
 
 /* global window document */
 
 const internals = {
+  kBackgroundColor: 0xd8c590,
   kNoElementError: 'No element found. Cannot render.',
 
   // Handler for the window load event. Initializes and runs the app.
 
   onLoad() {
 
-    const sumo = new internals.Sumo({
+    const sumo = new internals.Sumo(Object.assign({
       element: document.getElementById('sumo-app-entry-point')
-    });
+    }, Config));
 
     sumo.startLoop();
 
-    internals.exports.sumo = sumo;
+    window.sumo = sumo;
   }
 };
 
@@ -39,6 +67,7 @@ internals.Sumo = class Sumo {
 
   constructor(config) {
 
+    // These defaults can get overridden by config
     this.fps = 60;
     this.aspectRatio = [2.76, 1];
     this.verticalResolution = 224;
@@ -56,6 +85,8 @@ internals.Sumo = class Sumo {
 
     // Initialization functions
     this._initializeCanvas();
+    this._initializeMatter();
+    this._initializePixi();
     this._initializeSystems();
     this._initializeEntities();
   }
@@ -104,7 +135,7 @@ internals.Sumo = class Sumo {
 
       // We're sending the currentTime since it gives better results for
       // this type of renderer, though usually we expect the delta
-      this._engine.update(currentTime);
+      this._engine.update(currentFrameDuration);
       this._previousTime = currentTime;
     }
   }
@@ -119,6 +150,27 @@ internals.Sumo = class Sumo {
     window.addEventListener('resize', this._resizeCanvas.bind(this));
   }
 
+  // Initialize MatterJs
+
+  _initializeMatter() {
+
+    this._matterJs = Engine.create();
+
+    this._matterJs.world.gravity.y = 0;
+  }
+
+  // Initialize Pixi
+
+  _initializePixi() {
+
+    this._pixi = new Application({
+      backgroundColor: internals.kBackgroundColor,
+      view: this._canvas,
+      width: this._canvas.width,
+      height: this._canvas.height
+    });
+  }
+
   // Resizes the canvas to a square the size of the smallest magnitude
   // of the window.
 
@@ -143,12 +195,102 @@ internals.Sumo = class Sumo {
 
   _initializeSystems() {
 
+    this._engine.addSystem(new ControlMapperSystem());
+
+    this._engine.addSystem(new DashSystem());
+
+    this._engine.addSystem(new GrabSystem({
+      engine: this._matterJs
+    }));
+
+    this._engine.addSystem(new ApplyForceSystem());
+
+    this._engine.addSystem(new PhysicsWorldControlSystem({
+      engine: this._matterJs
+    }));
+
+    this._engine.addSystem(new ElasticSystem());
+
+    this._engine.addSystem(new PhysicsToAttributesSystem());
+
+    this._engine.addSystem(new AttributesToRenderableSystem());
+
+    this._engine.addSystem(new CreateCouplingLineSystem());
+
+    this._engine.addSystem(new DrawDashSystem());
+
+    this._engine.addSystem(new DrawGrabSystem());
+
+    this._engine.addSystem(new RenderSystem({
+      application: this._pixi
+    }));
   }
 
   // Initializes the serpentity entities
 
   _initializeEntities() {
 
+    SumoFactory.createArena(this._engine, {
+      position: {
+        x: this.horizontalResolution / 2,
+        y: this.verticalResolution / 2
+      }
+    });
+
+    const sumoA = SumoFactory.createSumo(null, {
+      position: {
+        x: this.horizontalResolution / 2 - 100,
+        y: this.verticalResolution / 2
+      }
+    });
+
+    const sumoB = SumoFactory.createControllableSumo(null, {
+      position: {
+        x: this.horizontalResolution / 2 + 100,
+        y: this.verticalResolution / 2
+      }
+    });
+
+    const harness = SumoFactory.createHarness(null, {
+      position: {
+        x: this.horizontalResolution / 2,
+        y: this.verticalResolution / 2
+      }
+    });
+
+    SumoFactory.createRubberBand(this._engine, {
+      entityA: sumoA,
+      entityB: harness
+    });
+
+    SumoFactory.createRubberBand(this._engine, {
+      entityA: sumoB,
+      entityB: harness
+    });
+
+    SumoFactory.createInvisibleBlock(this._engine, {
+      width: this.horizontalResolution * 2,
+      height: this.verticalResolution * 0.1,
+      position: {
+        x: this.horizontalResolution / 2,
+        y: -this.verticalResolution * 0.1
+      }
+    });
+
+    SumoFactory.createInvisibleBlock(this._engine, {
+      width: this.horizontalResolution * 2,
+      height: this.verticalResolution * 0.1,
+      position: {
+        x: this.horizontalResolution / 2,
+        y: this.verticalResolution + this.verticalResolution * 0.1
+      }
+    });
+
+    // To keep the coupling behind, we'll manually add the sumos later
+
+    this._engine.addEntity(sumoA);
+    this._engine.addEntity(sumoB);
+    this._engine.addEntity(harness);
   }
 };