[WIP] fixed #36

test.js → js/main.js

@@ -1,5 +1,5 @@
 import keypress from "keypress";
-import VirtualSphero from "./main";
+import VirtualSphero from "./virtual-sphero";
 
 const virtualSphero = new VirtualSphero(8081, "*");
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "sphero-ws-virtual-plugin",
   "version": "0.1.3",
-  "main": "main.js",
+  "main": "js/virtual-sphero.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "mocha --compilers js:babel-register",
     "build": "webpack --progress --colors --optimize-minimize",
-    "start": "babel-node test",
+    "start": "babel-node js/main",
     "lint": "eslint --fix --ignore-path ./.eslintignore js/ test/ gulpfile.js webpack.config.js"
   },
   "babel": {
@@ -40,6 +40,8 @@
     "babel-preset-es2015": "^6.13.2",
     "css-loader": "^0.23.1",
     "eslint": "^3.2.2",
+    "karma-mocha": "^1.3.0",
+    "mocha": "^3.2.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1"

test/HelloSpec.js

@@ -0,0 +1,9 @@
+import assert from "assert";
+describe("Array", () => {
+  describe("#indexOf()", () => {
+    it("should return -1 when the value is not present", () => {
+      assert.equal(-1, [1,2,3].indexOf(4));
+    });
+  });
+});
+

virtual/js/virtual-sphero-controller.js

@@ -1,5 +1,4 @@
 import VirtualSphero from "./virtual-sphero";
-import SpeedController from "./speed-controller";
 import { Engine, Render, World, Body, Bodies } from "matter-js";
 
 export default class VirtualSpheroController {
@@ -30,8 +29,6 @@ export default class VirtualSpheroController {
       }
     });
 
-    this.speedController = new SpeedController();
-
     this.engine = Engine.create();
     this.engine.world.gravity.y = 0;
     Engine.run(this.engine);
@@ -44,8 +41,8 @@ export default class VirtualSpheroController {
     const tick = () => {
       this.clearCanvas();
       Object.keys(this.virtualSpheros).forEach(spheroName => {
-        this.virtualSpheros[spheroName].move();
-        this.virtualSpheros[spheroName].draw();
+        this.virtualSpheros[spheroName].tick();
+        this.virtualSpheros[spheroName].draw(this.ctx);
       });
       requestAnimationFrame(tick);
     };
@@ -63,7 +60,7 @@ export default class VirtualSpheroController {
   }
 
   addVirtualSphero(spheroName) {
-    this.virtualSpheros[spheroName] = new VirtualSphero(this.canvas, this.speedController, spheroName);
+    this.virtualSpheros[spheroName] = new VirtualSphero(spheroName, this.canvas.width, this.canvas.height);
     World.add(this.engine.world, this.virtualSpheros[spheroName].body);
   }
 

virtual/js/virtual-sphero.js

@@ -1,9 +1,7 @@
 import { Body, Bodies } from "matter-js";
 
 export default class VirtualSphero {
-  constructor(canvas, speedController, spheroName) {
-    this.speedController = speedController;
-    this.canvas = canvas;
+  constructor(spheroName, width, height) {
     this.spheroName = spheroName;
 
     this.ex = 0;
@@ -16,10 +14,9 @@ export default class VirtualSphero {
     });
     this.body.restitution = 0;
 
-    this.width = this.canvas.width;
-    this.height = this.canvas.height;
+    this.width = width;
+    this.height = height;
 
-    this.ctx = this.canvas.getContext("2d");
     this.fillColor = "white";
 
     this.logo = new Image();
@@ -30,6 +27,7 @@ export default class VirtualSphero {
     };
   }
 
+  // sphero.js methods
   roll(far, degree) {
     this.rotate(degree);
     const direction = (degree + 270) % 360;
@@ -49,31 +47,32 @@ export default class VirtualSphero {
     this.fillColor = "#" + Math.floor(Math.random() * 16777216).toString(16);
   }
 
-  move() {
+  // virtual-sphero methods
+  tick() {
     Body.setPosition(this.body, {
       x: this.body.position.x + this.ex,
       y: this.body.position.y + this.ey
     });
     this.fixPosition();
   }
 
-  draw() {
+  draw(ctx) {
     if (!this.isLoadedLogo) {
       return;
     }
 
-    this.ctx.beginPath();
-    this.ctx.fillStyle = this.fillColor;
-    this.ctx.arc(this.body.position.x, this.body.position.y, this.radius, 0, Math.PI * 2, true);
-    this.ctx.fill();
-    this.ctx.stroke();
+    ctx.beginPath();
+    ctx.fillStyle = this.fillColor;
+    ctx.arc(this.body.position.x, this.body.position.y, this.radius, 0, Math.PI * 2, true);
+    ctx.fill();
+    ctx.stroke();
 
     const rad = this.direction * Math.PI / 180;
-    this.ctx.save();
-    this.ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), this.body.position.x, this.body.position.y);
-    this.ctx.translate(-this.radius + 10, -this.radius + 10);
-    this.ctx.drawImage(this.logo, 0, 0, 30, 30);
-    this.ctx.restore();
+    ctx.save();
+    ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), this.body.position.x, this.body.position.y);
+    ctx.translate(-this.radius + 10, -this.radius + 10);
+    ctx.drawImage(this.logo, 0, 0, 30, 30);
+    ctx.restore();
   }
 
   fixPosition() {