From 448f293d9e7a4652ec1b56faa4fc6daeba803fb4 Mon Sep 17 00:00:00 2001
From: nakamurataichi <ringo.m3@icloud.com>
Date: Sun, 15 Jan 2017 23:15:32 +0900
Subject: [PATCH 1/9] =?UTF-8?q?=E7=B4=B0=E3=81=8B=E3=81=84=E3=83=90?=
 =?UTF-8?q?=E3=82=B0=E3=81=A8=E5=A4=89=E6=95=B0=E5=90=8D=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 virtual/js/main.js           |  1 -
 virtual/js/virtual-sphero.js | 27 ++++++++++-----------------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/virtual/js/main.js b/virtual/js/main.js
index 084d512..8129ce8 100644
--- a/virtual/js/main.js
+++ b/virtual/js/main.js
@@ -7,6 +7,5 @@ document.addEventListener("DOMContentLoaded", function() {
   window.addEventListener("resize", function() {
     sphero.resizeCanvas();
     sphero.clearCanvas();
-    sphero.fixSpherosPosition();
   });
 });
diff --git a/virtual/js/virtual-sphero.js b/virtual/js/virtual-sphero.js
index 563e83d..29bc56c 100755
--- a/virtual/js/virtual-sphero.js
+++ b/virtual/js/virtual-sphero.js
@@ -9,15 +9,11 @@ export default class VirtualSphero {
     this.ex = 0;
     this.ey = 0;
     this.radius = 25;
-    this.direction = 0;
+    this.degree = 0;
 
     this.body = Bodies.circle(1, 1, this.radius, {
       friction: 0.1
     });
-    this.body.restitution = 0;
-
-    this.width = this.canvas.width;
-    this.height = this.canvas.height;
 
     this.ctx = this.canvas.getContext("2d");
     this.fillColor = "white";
@@ -30,15 +26,15 @@ export default class VirtualSphero {
     };
   }
 
-  roll(far, degree) {
+  roll(speed, degree) {
     this.rotate(degree);
-    const direction = (degree + 270) % 360;
-    this.ex = Math.cos(direction * Math.PI / 180) * far * 0.1;
-    this.ey = Math.sin(direction * Math.PI / 180) * far * 0.1;
+    const rollDegree = (this.degree + 270) % 360;
+    this.ex = Math.cos(rollDegree * Math.PI / 180) * speed * 0.1;
+    this.ey = Math.sin(rollDegree * Math.PI / 180) * speed * 0.1;
   }
 
   rotate(degree) {
-    this.direction = degree;
+    this.degree = degree;
   }
 
   color(color) {
@@ -50,10 +46,7 @@ export default class VirtualSphero {
   }
 
   move() {
-    Body.setPosition(this.body, {
-      x: this.body.position.x + this.ex,
-      y: this.body.position.y + this.ey
-    });
+    this.setPosition(this.body.position.x + this.ex, this.body.position.y + this.ey);
     this.fixPosition();
   }
 
@@ -68,7 +61,7 @@ export default class VirtualSphero {
     this.ctx.fill();
     this.ctx.stroke();
 
-    const rad = this.direction * Math.PI / 180;
+    const rad = this.degree * 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);
@@ -77,8 +70,8 @@ export default class VirtualSphero {
   }
 
   fixPosition() {
-    this.setPosition(this.getValueInRange(this.width - this.radius, this.radius, this.body.position.x),
-      this.getValueInRange(this.height - this.radius, this.radius, this.body.position.y));
+    this.setPosition(this.getValueInRange(this.canvas.width - this.radius, this.radius, this.body.position.x),
+      this.getValueInRange(this.canvas.height - this.radius, this.radius, this.body.position.y));
   }
 
   setPosition(x, y) {

From cde6c25bb4f58d84b4c897d7d9904b503a989043 Mon Sep 17 00:00:00 2001
From: nakamurataichi <ringo.m3@icloud.com>
Date: Sun, 15 Jan 2017 23:19:53 +0900
Subject: [PATCH 2/9] =?UTF-8?q?speed-controller=E3=82=92=E5=89=8A=E9=99=A4?=
 =?UTF-8?q?(=E9=80=94=E4=B8=AD)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js                                 |  9 +++++++++
 test.js                                 | 15 +++++++++------
 virtual/index.html                      |  6 +-----
 virtual/js/speed-controller.js          | 12 ------------
 virtual/js/virtual-sphero-controller.js |  4 +---
 virtual/js/virtual-sphero.js            |  3 +--
 6 files changed, 21 insertions(+), 28 deletions(-)
 delete mode 100755 virtual/js/speed-controller.js

diff --git a/main.js b/main.js
index 25d922e..b732b12 100644
--- a/main.js
+++ b/main.js
@@ -11,6 +11,7 @@ export default class VirtualPlugin {
   constructor(wsPort, allowedOrigin) {
     this.sockets = {};
     this.virtualSpheroNames = [];
+    this.VirtualSpheroSpeed = 100;
 
     this.app = express();
     this.server = http.Server(this.app);
@@ -64,7 +65,15 @@ export default class VirtualPlugin {
     this.virtualSpheroNames.splice(this.virtualSpheroNames.indexOf(spheroName), 1);
   }
 
+  setSpeed(speed) {
+    this.VirtualSpheroSpeed += speed;
+  }
+
   getNames() {
     return this.virtualSpheroNames;
   }
+
+  getSpeed() {
+    return this.VirtualSpheroSpeed;
+  }
 }
diff --git a/test.js b/test.js
index 4aaec74..1af2001 100644
--- a/test.js
+++ b/test.js
@@ -5,10 +5,10 @@ const virtualSphero = new VirtualSphero(8081, "*");
 
 // キーにテストする内容を割り当てる
 const testKeys = {
-  up: ["roll", 100, 0],
-  right: ["roll", 100, 90],
-  down: ["roll", 100, 180],
-  left: ["roll", 100, 270],
+  up: ["roll", virtualSphero.getSpeed(), 0],
+  right: ["roll", virtualSphero.getSpeed(), 90],
+  down: ["roll", virtualSphero.getSpeed(), 180],
+  left: ["roll", virtualSphero.getSpeed(), 270],
   space: ["roll", 0, 0],
   r: ["randomColor", null],
   a: function() {
@@ -18,7 +18,7 @@ const testKeys = {
   },
   b: function() {
     console.log("add sphero");
-    virtualSphero.addSphero(`Sphero${new Date().getTime()}`);
+    virtualSphero.addSphero(`Sphero${+new Date() + Math.floor(Math.random() * 1000)}`);
   },
   d: function() {
     console.log("remove sphero");
@@ -38,7 +38,10 @@ keypress(process.stdin);
 
 process.stdin.on("keypress", function(ch, key) {
   if (key && typeof testKeys[key.name] !== "undefined") {
-    if (Array.isArray(testKeys[key.name])) {
+    if (key && key.shift && key.name === "up" || key && key.shift && key.name === "down") {
+      virtualSphero.setSpeed(key.name === "up" ? 1 : -1);
+      console.log(`set speed: ${virtualSphero.getSpeed()}`);
+    } else if (Array.isArray(testKeys[key.name])) {
       const args = testKeys[key.name];
       console.log(`orb.${args[0]}(${args.slice(1).map(arg => "\"" + arg + "\"").join(", ")});`);
       commandAll(args[0], args.slice(1));
diff --git a/virtual/index.html b/virtual/index.html
index 8bb9545..d4d6f7f 100644
--- a/virtual/index.html
+++ b/virtual/index.html
@@ -8,10 +8,6 @@
 </head>
 <body>
   <h1>Virtual Sphero</h1>
-  <canvas id="canvas" width="800" height="600">
-  </canvas>
-  <div id="sphero-controller" style="display: none">
-    speed = speed * <input type="number" id="speed" step="0.01" />
-  </div>
+  <canvas id="canvas" width="800" height="600"></canvas>
 </body>
 </html>
diff --git a/virtual/js/speed-controller.js b/virtual/js/speed-controller.js
deleted file mode 100755
index f0ccb63..0000000
--- a/virtual/js/speed-controller.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default class SpeedController {
-  constructor() {
-    this._element = document.getElementById("speed");
-    this.speed = 0.2;
-    this._element.value = this.speed;
-    this._element.addEventListener("change", () => {
-      if (this._element.value !== "" && !isNaN(this._element.value)) {
-        this.speed = parseFloat(this._element.value);
-      }
-    });
-  }
-}
diff --git a/virtual/js/virtual-sphero-controller.js b/virtual/js/virtual-sphero-controller.js
index 8b48e30..ed33016 100755
--- a/virtual/js/virtual-sphero-controller.js
+++ b/virtual/js/virtual-sphero-controller.js
@@ -30,8 +30,6 @@ export default class VirtualSpheroController {
       }
     });
 
-    this.speedController = new SpeedController();
-
     this.engine = Engine.create();
     this.engine.world.gravity.y = 0;
     Engine.run(this.engine);
@@ -63,7 +61,7 @@ export default class VirtualSpheroController {
   }
 
   addVirtualSphero(spheroName) {
-    this.virtualSpheros[spheroName] = new VirtualSphero(this.canvas, this.speedController, spheroName);
+    this.virtualSpheros[spheroName] = new VirtualSphero(this.canvas, spheroName);
     World.add(this.engine.world, this.virtualSpheros[spheroName].body);
   }
 
diff --git a/virtual/js/virtual-sphero.js b/virtual/js/virtual-sphero.js
index 29bc56c..b439c37 100755
--- a/virtual/js/virtual-sphero.js
+++ b/virtual/js/virtual-sphero.js
@@ -1,8 +1,7 @@
 import { Body, Bodies } from "matter-js";
 
 export default class VirtualSphero {
-  constructor(canvas, speedController, spheroName) {
-    this.speedController = speedController;
+  constructor(canvas, spheroName) {
     this.canvas = canvas;
     this.spheroName = spheroName;
 

From 70a07475afea4b7ac154fda0e1aee141084efe3e Mon Sep 17 00:00:00 2001
From: nakamurataichi <ringo.m3@icloud.com>
Date: Mon, 16 Jan 2017 00:05:05 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=E5=A4=89=E6=95=B0=E5=90=8D=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E3=81=97=E3=80=81import=E6=96=87=E3=82=82?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js                                 | 6 +++---
 virtual/js/virtual-sphero-controller.js | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/main.js b/main.js
index b732b12..bd03039 100644
--- a/main.js
+++ b/main.js
@@ -11,7 +11,7 @@ export default class VirtualPlugin {
   constructor(wsPort, allowedOrigin) {
     this.sockets = {};
     this.virtualSpheroNames = [];
-    this.VirtualSpheroSpeed = 100;
+    this.virtualSpheroSpeed = 100;
 
     this.app = express();
     this.server = http.Server(this.app);
@@ -66,7 +66,7 @@ export default class VirtualPlugin {
   }
 
   setSpeed(speed) {
-    this.VirtualSpheroSpeed += speed;
+    this.virtualSpheroSpeed += speed;
   }
 
   getNames() {
@@ -74,6 +74,6 @@ export default class VirtualPlugin {
   }
 
   getSpeed() {
-    return this.VirtualSpheroSpeed;
+    return this.virtualSpheroSpeed;
   }
 }
diff --git a/virtual/js/virtual-sphero-controller.js b/virtual/js/virtual-sphero-controller.js
index ed33016..319be84 100755
--- a/virtual/js/virtual-sphero-controller.js
+++ b/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 {

From 1dc2dc84c79fb2ee5efe7a535783fc95f58b357e Mon Sep 17 00:00:00 2001
From: nakamurataichi <ringo.m3@icloud.com>
Date: Mon, 16 Jan 2017 00:23:36 +0900
Subject: [PATCH 4/9] =?UTF-8?q?npm-debug.log=E3=82=92=E5=90=8C=E6=9C=9F?=
 =?UTF-8?q?=E3=81=95=E3=81=9B=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1fe7a25..ae67e4d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
-node_modules/
-virtual/js/build/
+node_modules/
+virtual/js/build/
+npm-debug.log

From 409b38fd9d49176128024ca4a9a834efeb3c0bb7 Mon Sep 17 00:00:00 2001
From: nakamurataichi <ringo.m3@icloud.com>
Date: Wed, 18 Jan 2017 22:29:05 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=E9=80=9F=E5=BA=A6=E5=A4=89=E6=95=B0?=
 =?UTF-8?q?=E3=82=92=20test.js=20=E3=81=AB=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js |  9 ---------
 test.js | 28 ++++++++++++++++++++--------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/main.js b/main.js
index bd03039..25d922e 100644
--- a/main.js
+++ b/main.js
@@ -11,7 +11,6 @@ export default class VirtualPlugin {
   constructor(wsPort, allowedOrigin) {
     this.sockets = {};
     this.virtualSpheroNames = [];
-    this.virtualSpheroSpeed = 100;
 
     this.app = express();
     this.server = http.Server(this.app);
@@ -65,15 +64,7 @@ export default class VirtualPlugin {
     this.virtualSpheroNames.splice(this.virtualSpheroNames.indexOf(spheroName), 1);
   }
 
-  setSpeed(speed) {
-    this.virtualSpheroSpeed += speed;
-  }
-
   getNames() {
     return this.virtualSpheroNames;
   }
-
-  getSpeed() {
-    return this.virtualSpheroSpeed;
-  }
 }
diff --git a/test.js b/test.js
index 1af2001..b7bedb5 100644
--- a/test.js
+++ b/test.js
@@ -2,13 +2,14 @@ import keypress from "keypress";
 import VirtualSphero from "./main";
 
 const virtualSphero = new VirtualSphero(8081, "*");
+let virtualSpheroSpeed = 100;
 
 // キーにテストする内容を割り当てる
 const testKeys = {
-  up: ["roll", virtualSphero.getSpeed(), 0],
-  right: ["roll", virtualSphero.getSpeed(), 90],
-  down: ["roll", virtualSphero.getSpeed(), 180],
-  left: ["roll", virtualSphero.getSpeed(), 270],
+  up: ["roll", 100, 0],
+  right: ["roll", 100, 90],
+  down: ["roll", 100, 180],
+  left: ["roll", 100, 270],
   space: ["roll", 0, 0],
   r: ["randomColor", null],
   a: function() {
@@ -38,11 +39,11 @@ keypress(process.stdin);
 
 process.stdin.on("keypress", function(ch, key) {
   if (key && typeof testKeys[key.name] !== "undefined") {
-    if (key && key.shift && key.name === "up" || key && key.shift && key.name === "down") {
-      virtualSphero.setSpeed(key.name === "up" ? 1 : -1);
-      console.log(`set speed: ${virtualSphero.getSpeed()}`);
+    if (key && key.shift && (key.name === "up" || key.name === "down")) {
+      addSpeed(key.name === "up" ? 1 : -1);
+      console.log(`${key.name} speed: ${virtualSpheroSpeed}`);
     } else if (Array.isArray(testKeys[key.name])) {
-      const args = testKeys[key.name];
+      const args = getArgs(testKeys[key.name], key.name);
       console.log(`orb.${args[0]}(${args.slice(1).map(arg => "\"" + arg + "\"").join(", ")});`);
       commandAll(args[0], args.slice(1));
     } else if (typeof testKeys[key.name] === "function") {
@@ -62,5 +63,16 @@ function commandAll(commandName, args) {
   });
 }
 
+function addSpeed(speed) {
+  virtualSpheroSpeed = Math.max(0, Math.min(255, virtualSpheroSpeed + speed));
+}
+
+function getArgs(array, keyName) {
+  if (keyName !== "space") {
+    array.splice(1, 1, virtualSpheroSpeed);
+  }
+  return array;
+}
+
 process.stdin.setRawMode(true);
 process.stdin.resume();

From 95e0b6201ef9708cf5534a4e45e3f34fcf7a35e8 Mon Sep 17 00:00:00 2001
From: nakamurataichi <ringo.m3@icloud.com>
Date: Thu, 19 Jan 2017 04:52:12 +0900
Subject: [PATCH 6/9] =?UTF-8?q?VirtualSpheroController=E3=82=92=E5=88=86?=
 =?UTF-8?q?=E8=A7=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 virtual/index.html                            |  3 +-
 virtual/js/canvasManeger.js                   | 17 ++++++
 virtual/js/main.js                            |  7 ++-
 virtual/js/publisher.js                       | 44 +++++++++++++++
 virtual/js/socketManeger.js                   | 41 ++++++++++++++
 ...ontroller.js => virtual-sphero-maneger.js} | 54 ++++++++-----------
 virtual/js/virtual-sphero.js                  |  2 +-
 7 files changed, 128 insertions(+), 40 deletions(-)
 create mode 100644 virtual/js/canvasManeger.js
 create mode 100644 virtual/js/publisher.js
 create mode 100644 virtual/js/socketManeger.js
 rename virtual/js/{virtual-sphero-controller.js => virtual-sphero-maneger.js} (71%)
 mode change 100755 => 100644

diff --git a/virtual/index.html b/virtual/index.html
index d4d6f7f..bf005dd 100644
--- a/virtual/index.html
+++ b/virtual/index.html
@@ -2,12 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title></title>
+  <title>Virtual Sphero</title>
   <script type="text/javascript" src="/socket.io/socket.io.js"></script>
   <script type="text/javascript" src="js/build/bundle.min.js"></script>
 </head>
 <body>
-  <h1>Virtual Sphero</h1>
   <canvas id="canvas" width="800" height="600"></canvas>
 </body>
 </html>
diff --git a/virtual/js/canvasManeger.js b/virtual/js/canvasManeger.js
new file mode 100644
index 0000000..8521956
--- /dev/null
+++ b/virtual/js/canvasManeger.js
@@ -0,0 +1,17 @@
+export default class canvasManeger {
+  constractor(canvas) {
+    this.canvas = canvas;
+    this.ctx = this.canvas.getContext("2d");
+    this.canvas.width = window.innerWidth;
+    this.canvas.height = window.innerHeight;
+  }
+
+  resizeCanvas() {
+    this.canvas.width = window.innerWidth;
+    this.canvas.height = window.innerHeight;
+  }
+
+  clearCanvas() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+}
diff --git a/virtual/js/main.js b/virtual/js/main.js
index 8129ce8..3251256 100644
--- a/virtual/js/main.js
+++ b/virtual/js/main.js
@@ -1,11 +1,10 @@
-import VirtualSpheroController from "./virtual-sphero-controller";
+import virtualSpheroManeger from "./virtual-sphero-maneger";
 import "../css/style.css";
 
 document.addEventListener("DOMContentLoaded", function() {
-  const sphero = new VirtualSpheroController();
+  const sphero = new virtualSpheroManeger();
 
   window.addEventListener("resize", function() {
-    sphero.resizeCanvas();
-    sphero.clearCanvas();
+    sphero.resizeWindow();
   });
 });
diff --git a/virtual/js/publisher.js b/virtual/js/publisher.js
new file mode 100644
index 0000000..615c08f
--- /dev/null
+++ b/virtual/js/publisher.js
@@ -0,0 +1,44 @@
+// Publisherは、データを保存せず、外部へ変更を知らせる機能に絞る。
+
+class Publisher {
+  constructor() {
+    this.modelObservers = {};
+    this.observers = {};
+  }
+  subscribe(type, observer) {
+    if (typeof this.observers[type] === "undefined") {
+      this.observers[type] = [];
+    }
+    this.observers[type].push(observer);
+  }
+  subscribeModel(type, observer) {
+    if (typeof this.modelObservers[type] === "undefined") {
+      this.modelObservers[type] = [];
+    }
+    this.modelObservers[type].push(observer);
+  }
+  publish(type, ...nextDatas) {
+    if (type.indexOf(":") !== -1) {
+      throw new Error("publishのtypeに「:」を含むことはできません。");
+    }
+    if (typeof this.observers[type] === "undefined") {
+      this.observers[type] = [];
+    }
+    if (typeof this.modelObservers[type] === "undefined") {
+      this.modelObservers[type] = [];
+    }
+    this.modelObservers[type].forEach(observer => {
+      observer.apply(null, nextDatas);
+    });
+    this.observers[type].forEach(observer => {
+      observer.apply(null, nextDatas);
+    });
+    if (typeof this.observers[type + ":after"] !== "undefined") {
+      this.observers[type + ":after"].forEach(observer => {
+        observer.apply(null, nextDatas);
+      });
+    }
+  }
+}
+
+export default new Publisher();
diff --git a/virtual/js/socketManeger.js b/virtual/js/socketManeger.js
new file mode 100644
index 0000000..aec79a5
--- /dev/null
+++ b/virtual/js/socketManeger.js
@@ -0,0 +1,41 @@
+import eventPublisher from "./publisher";
+
+export default class SocketManeger {
+  constractor() {
+    this.socket = io();
+
+    this.socket.on("connect", () => {
+      eventPublisher.publish("isNeedShowSpheros", true);
+    });
+
+    this.socket.on("addVirtualSphero", spheroName => {
+      this.addVirtualSphero(spheroName);
+    });
+
+    this.socket.on("removeVirtualSphero", spheroName => {
+      this.removeVirtualSphero(spheroName);
+    });
+
+    this.socket.on("command", (spheroName, commandName, args) => {
+      const virtualSphero = this.virtualSpheros[spheroName];
+      if (typeof virtualSphero !== "undefined" &&
+          typeof virtualSphero[commandName] !== "undefined") {
+        virtualSphero[commandName].apply(virtualSphero, args);
+      }
+    });
+
+    eventPublisher.subscribe("sendShowSpheros", showSpheros => {
+      this.socket.emit("request", {
+        showSpheros: showSpheros
+      });
+    });
+  }
+
+  addVirtualSphero(spheroName) {
+    eventPublisher.publish("addVirtualSphero", spheroName);
+  }
+
+  removeVirtualSphero(spheroName) {
+    eventPublisher.publish("removeVirtualSphero", spheroName);
+  }
+}
diff --git a/virtual/js/virtual-sphero-controller.js b/virtual/js/virtual-sphero-maneger.js
old mode 100755
new mode 100644
similarity index 71%
rename from virtual/js/virtual-sphero-controller.js
rename to virtual/js/virtual-sphero-maneger.js
index 319be84..a34a3ca
--- a/virtual/js/virtual-sphero-controller.js
+++ b/virtual/js/virtual-sphero-maneger.js
@@ -1,45 +1,39 @@
-import VirtualSphero from "./virtual-sphero";
+import virtualSphero from "./virtual-sphero";
+import canvasManeger from "./canvasManeger";
+import socketManeger from "./socketManeger";
+import eventPublisher from "./publisher";
 import { Engine, Render, World, Body, Bodies } from "matter-js";
 
-export default class VirtualSpheroController {
+export default class virtualSpheroManeger {
   constructor() {
     const showParam = getParams().show;
     this.showSpheros = typeof showParam === "undefined" ? null : showParam.split(",");
-    this.socket = io();
 
-    this.socket.on("connect", () => {
-      this.socket.emit("request", {
-        showSpheros: this.showSpheros
-      });
+    eventPublisher.subscribe("isNeedShowSpheros", isNeed => {
+      if (isNeed) {
+        eventPublisher.publish("sendShowSpheros", showSpheros);
+      }
     });
 
-    this.socket.on("addVirtualSphero", spheroName => {
+    eventPublisher.subscribe("addVirtualSphero", spheroName => {
       this.addVirtualSphero(spheroName);
     });
 
-    this.socket.on("removeVirtualSphero", spheroName => {
+    eventPublisher.subscribe("removeVirtualSphero", spheroName => {
       this.removeVirtualSphero(spheroName);
     });
 
-    this.socket.on("command", (spheroName, commandName, args) => {
-      const virtualSphero = this.virtualSpheros[spheroName];
-      if (typeof virtualSphero !== "undefined" &&
-          typeof virtualSphero[commandName] !== "undefined") {
-        virtualSphero[commandName].apply(virtualSphero, args);
-      }
-    });
-
     this.engine = Engine.create();
     this.engine.world.gravity.y = 0;
     Engine.run(this.engine);
 
+    this.socketManeger = new socketManeger();
+
     this.canvas = document.getElementById("canvas");
-    this.ctx = this.canvas.getContext("2d");
-    this.canvas.width = window.innerWidth;
-    this.canvas.height = window.innerHeight;
+    this.canvasManeger = new canvasManeger(this.canvas);
 
     const tick = () => {
-      this.clearCanvas();
+      this.canvasManeger.clearCanvas();
       Object.keys(this.virtualSpheros).forEach(spheroName => {
         this.virtualSpheros[spheroName].move();
         this.virtualSpheros[spheroName].draw();
@@ -50,17 +44,8 @@ export default class VirtualSpheroController {
     this.virtualSpheros = {};
   }
 
-  resizeCanvas() {
-    this.canvas.width = window.innerWidth;
-    this.canvas.height = window.innerHeight;
-  }
-
-  clearCanvas() {
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-  }
-
   addVirtualSphero(spheroName) {
-    this.virtualSpheros[spheroName] = new VirtualSphero(this.canvas, spheroName);
+    this.virtualSpheros[spheroName] = new virtualSphero(this.canvas, spheroName);
     World.add(this.engine.world, this.virtualSpheros[spheroName].body);
   }
 
@@ -68,10 +53,14 @@ export default class VirtualSpheroController {
     World.remove(this.engine.world, this.virtualSpheros[spheroName].body);
     delete this.virtualSpheros[spheroName];
   }
+
+  resizeWindow() {
+    this.canvasManeger.resizeCanvas();
+    this.canvasManeger.clearCanvas();
+  }
 }
 
 const commands = [
-
   /* sphero.js */
   "setHeading",
   "setStabilization",
@@ -130,7 +119,6 @@ const commands = [
   "answerInput",
   "commitToFlash",
   "commitToFlashAlias",
-
   /* custom.js */
   "streamData",
   "color",
diff --git a/virtual/js/virtual-sphero.js b/virtual/js/virtual-sphero.js
index b439c37..99473fa 100755
--- a/virtual/js/virtual-sphero.js
+++ b/virtual/js/virtual-sphero.js
@@ -1,6 +1,6 @@
 import { Body, Bodies } from "matter-js";
 
-export default class VirtualSphero {
+export default class virtualSphero {
   constructor(canvas, spheroName) {
     this.canvas = canvas;
     this.spheroName = spheroName;

From 3126490d4128bc281bcca9785b67403541d1f7ed Mon Sep 17 00:00:00 2001
From: shundroid <shundroidk@gmail.com>
Date: Thu, 19 Jan 2017 17:51:56 +0900
Subject: [PATCH 7/9] fixed spell

---
 .../js/{canvasManeger.js => canvasManager.js}    |  2 +-
 virtual/js/main.js                               |  4 ++--
 .../js/{socketManeger.js => socketManager.js}    |  2 +-
 ...hero-maneger.js => virtual-sphero-manager.js} | 16 ++++++++--------
 4 files changed, 12 insertions(+), 12 deletions(-)
 rename virtual/js/{canvasManeger.js => canvasManager.js} (91%)
 rename virtual/js/{socketManeger.js => socketManager.js} (96%)
 rename virtual/js/{virtual-sphero-maneger.js => virtual-sphero-manager.js} (90%)

diff --git a/virtual/js/canvasManeger.js b/virtual/js/canvasManager.js
similarity index 91%
rename from virtual/js/canvasManeger.js
rename to virtual/js/canvasManager.js
index 8521956..97b4984 100644
--- a/virtual/js/canvasManeger.js
+++ b/virtual/js/canvasManager.js
@@ -1,4 +1,4 @@
-export default class canvasManeger {
+export default class canvasManager {
   constractor(canvas) {
     this.canvas = canvas;
     this.ctx = this.canvas.getContext("2d");
diff --git a/virtual/js/main.js b/virtual/js/main.js
index 3251256..1c11823 100644
--- a/virtual/js/main.js
+++ b/virtual/js/main.js
@@ -1,8 +1,8 @@
-import virtualSpheroManeger from "./virtual-sphero-maneger";
+import virtualSpheroManager from "./virtual-sphero-manager";
 import "../css/style.css";
 
 document.addEventListener("DOMContentLoaded", function() {
-  const sphero = new virtualSpheroManeger();
+  const sphero = new virtualSpheroManager();
 
   window.addEventListener("resize", function() {
     sphero.resizeWindow();
diff --git a/virtual/js/socketManeger.js b/virtual/js/socketManager.js
similarity index 96%
rename from virtual/js/socketManeger.js
rename to virtual/js/socketManager.js
index aec79a5..242a665 100644
--- a/virtual/js/socketManeger.js
+++ b/virtual/js/socketManager.js
@@ -1,6 +1,6 @@
 import eventPublisher from "./publisher";
 
-export default class SocketManeger {
+export default class SocketManager {
   constractor() {
     this.socket = io();
 
diff --git a/virtual/js/virtual-sphero-maneger.js b/virtual/js/virtual-sphero-manager.js
similarity index 90%
rename from virtual/js/virtual-sphero-maneger.js
rename to virtual/js/virtual-sphero-manager.js
index a34a3ca..b8e5dac 100644
--- a/virtual/js/virtual-sphero-maneger.js
+++ b/virtual/js/virtual-sphero-manager.js
@@ -1,10 +1,10 @@
 import virtualSphero from "./virtual-sphero";
-import canvasManeger from "./canvasManeger";
-import socketManeger from "./socketManeger";
+import canvasManager from "./canvasManager";
+import socketManager from "./socketManager";
 import eventPublisher from "./publisher";
 import { Engine, Render, World, Body, Bodies } from "matter-js";
 
-export default class virtualSpheroManeger {
+export default class virtualSpheroManager {
   constructor() {
     const showParam = getParams().show;
     this.showSpheros = typeof showParam === "undefined" ? null : showParam.split(",");
@@ -27,13 +27,13 @@ export default class virtualSpheroManeger {
     this.engine.world.gravity.y = 0;
     Engine.run(this.engine);
 
-    this.socketManeger = new socketManeger();
+    this.socketManager = new socketManager();
 
     this.canvas = document.getElementById("canvas");
-    this.canvasManeger = new canvasManeger(this.canvas);
+    this.canvasManager = new canvasManager(this.canvas);
 
     const tick = () => {
-      this.canvasManeger.clearCanvas();
+      this.canvasManager.clearCanvas();
       Object.keys(this.virtualSpheros).forEach(spheroName => {
         this.virtualSpheros[spheroName].move();
         this.virtualSpheros[spheroName].draw();
@@ -55,8 +55,8 @@ export default class virtualSpheroManeger {
   }
 
   resizeWindow() {
-    this.canvasManeger.resizeCanvas();
-    this.canvasManeger.clearCanvas();
+    this.canvasManager.resizeCanvas();
+    this.canvasManager.clearCanvas();
   }
 }
 

From 8aaa86a91d8095e21faa3bcd14d38e2d148c88b3 Mon Sep 17 00:00:00 2001
From: shundroid <shundroidk@gmail.com>
Date: Thu, 19 Jan 2017 18:02:08 +0900
Subject: [PATCH 8/9] fixed bugs

---
 package.json                         |  1 +
 virtual/js/canvasManager.js          |  4 ++--
 virtual/js/main.js                   |  4 ++--
 virtual/js/publisher.js              |  6 ------
 virtual/js/socketManager.js          | 20 ++++----------------
 virtual/js/virtual-sphero-manager.js | 20 ++++++++++++++------
 6 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index d2238b9..99b4a1b 100755
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --progress --colors --optimize-minimize",
+    "build:watch": "webpack --progress --colors --optimize-minimize --watch",
     "start": "babel-node test",
     "lint": "eslint --fix --ignore-path ./.eslintignore js/ test/ gulpfile.js webpack.config.js"
   },
diff --git a/virtual/js/canvasManager.js b/virtual/js/canvasManager.js
index 97b4984..a311ccd 100644
--- a/virtual/js/canvasManager.js
+++ b/virtual/js/canvasManager.js
@@ -1,5 +1,5 @@
-export default class canvasManager {
-  constractor(canvas) {
+export default class CanvasManager {
+  constructor(canvas) {
     this.canvas = canvas;
     this.ctx = this.canvas.getContext("2d");
     this.canvas.width = window.innerWidth;
diff --git a/virtual/js/main.js b/virtual/js/main.js
index 1c11823..143a030 100644
--- a/virtual/js/main.js
+++ b/virtual/js/main.js
@@ -1,8 +1,8 @@
-import virtualSpheroManager from "./virtual-sphero-manager";
+import VirtualSpheroManager from "./virtual-sphero-manager";
 import "../css/style.css";
 
 document.addEventListener("DOMContentLoaded", function() {
-  const sphero = new virtualSpheroManager();
+  const sphero = new VirtualSpheroManager();
 
   window.addEventListener("resize", function() {
     sphero.resizeWindow();
diff --git a/virtual/js/publisher.js b/virtual/js/publisher.js
index 615c08f..44d884d 100644
--- a/virtual/js/publisher.js
+++ b/virtual/js/publisher.js
@@ -11,12 +11,6 @@ class Publisher {
     }
     this.observers[type].push(observer);
   }
-  subscribeModel(type, observer) {
-    if (typeof this.modelObservers[type] === "undefined") {
-      this.modelObservers[type] = [];
-    }
-    this.modelObservers[type].push(observer);
-  }
   publish(type, ...nextDatas) {
     if (type.indexOf(":") !== -1) {
       throw new Error("publishのtypeに「:」を含むことはできません。");
diff --git a/virtual/js/socketManager.js b/virtual/js/socketManager.js
index 242a665..f40f088 100644
--- a/virtual/js/socketManager.js
+++ b/virtual/js/socketManager.js
@@ -1,7 +1,7 @@
 import eventPublisher from "./publisher";
 
 export default class SocketManager {
-  constractor() {
+  constructor() {
     this.socket = io();
 
     this.socket.on("connect", () => {
@@ -9,19 +9,15 @@ export default class SocketManager {
     });
 
     this.socket.on("addVirtualSphero", spheroName => {
-      this.addVirtualSphero(spheroName);
+      eventPublisher.publish("addVirtualSphero", spheroName);
     });
 
     this.socket.on("removeVirtualSphero", spheroName => {
-      this.removeVirtualSphero(spheroName);
+      eventPublisher.publish("removeVirtualSphero", spheroName);
     });
 
     this.socket.on("command", (spheroName, commandName, args) => {
-      const virtualSphero = this.virtualSpheros[spheroName];
-      if (typeof virtualSphero !== "undefined" &&
-          typeof virtualSphero[commandName] !== "undefined") {
-        virtualSphero[commandName].apply(virtualSphero, args);
-      }
+      eventPublisher.publish("command", spheroName, commandName, args);
     });
 
     eventPublisher.subscribe("sendShowSpheros", showSpheros => {
@@ -30,12 +26,4 @@ export default class SocketManager {
       });
     });
   }
-
-  addVirtualSphero(spheroName) {
-    eventPublisher.publish("addVirtualSphero", spheroName);
-  }
-
-  removeVirtualSphero(spheroName) {
-    eventPublisher.publish("removeVirtualSphero", spheroName);
-  }
 }
diff --git a/virtual/js/virtual-sphero-manager.js b/virtual/js/virtual-sphero-manager.js
index b8e5dac..d00960a 100644
--- a/virtual/js/virtual-sphero-manager.js
+++ b/virtual/js/virtual-sphero-manager.js
@@ -1,17 +1,17 @@
 import virtualSphero from "./virtual-sphero";
-import canvasManager from "./canvasManager";
-import socketManager from "./socketManager";
+import CanvasManager from "./canvasManager";
+import SocketManager from "./socketManager";
 import eventPublisher from "./publisher";
 import { Engine, Render, World, Body, Bodies } from "matter-js";
 
-export default class virtualSpheroManager {
+export default class VirtualSpheroManager {
   constructor() {
     const showParam = getParams().show;
     this.showSpheros = typeof showParam === "undefined" ? null : showParam.split(",");
 
     eventPublisher.subscribe("isNeedShowSpheros", isNeed => {
       if (isNeed) {
-        eventPublisher.publish("sendShowSpheros", showSpheros);
+        eventPublisher.publish("sendShowSpheros", this.showSpheros);
       }
     });
 
@@ -23,14 +23,22 @@ export default class virtualSpheroManager {
       this.removeVirtualSphero(spheroName);
     });
 
+    eventPublisher.subscribe("command", (spheroName, commandName, args) => {
+      const virtualSphero = this.virtualSpheros[spheroName];
+      if (typeof virtualSphero !== "undefined" &&
+          typeof virtualSphero[commandName] !== "undefined") {
+        virtualSphero[commandName].apply(virtualSphero, args);
+      }
+    });
+
     this.engine = Engine.create();
     this.engine.world.gravity.y = 0;
     Engine.run(this.engine);
 
-    this.socketManager = new socketManager();
+    this.socketManager = new SocketManager();
 
     this.canvas = document.getElementById("canvas");
-    this.canvasManager = new canvasManager(this.canvas);
+    this.canvasManager = new CanvasManager(this.canvas);
 
     const tick = () => {
       this.canvasManager.clearCanvas();

From dd108bb63d2d014beb0c73740edc0be03fe89d62 Mon Sep 17 00:00:00 2001
From: nakamurataichi <ringo.m3@icloud.com>
Date: Thu, 19 Jan 2017 19:29:58 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=82=B9=E3=81=AE=E5=A0=B4=E6=89=80=E3=82=92=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 virtual/js/canvasManager.js          | 10 ++++++++--
 virtual/js/main.js                   |  7 ++++++-
 virtual/js/socketManager.js          |  2 +-
 virtual/js/virtual-sphero-manager.js | 18 +++---------------
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/virtual/js/canvasManager.js b/virtual/js/canvasManager.js
index a311ccd..03f74d6 100644
--- a/virtual/js/canvasManager.js
+++ b/virtual/js/canvasManager.js
@@ -1,9 +1,15 @@
+import eventPublisher from "./publisher";
+
 export default class CanvasManager {
-  constructor(canvas) {
-    this.canvas = canvas;
+  constructor() {
+    this.canvas = document.getElementById("canvas");
     this.ctx = this.canvas.getContext("2d");
     this.canvas.width = window.innerWidth;
     this.canvas.height = window.innerHeight;
+
+    eventPublisher.subscribe("clearCanvas", () => {
+      this.clearCanvas();
+    });
   }
 
   resizeCanvas() {
diff --git a/virtual/js/main.js b/virtual/js/main.js
index 143a030..83adf03 100644
--- a/virtual/js/main.js
+++ b/virtual/js/main.js
@@ -1,10 +1,15 @@
 import VirtualSpheroManager from "./virtual-sphero-manager";
+import CanvasManager from "./canvasManager";
+import SocketManager from "./socketManager";
 import "../css/style.css";
 
 document.addEventListener("DOMContentLoaded", function() {
   const sphero = new VirtualSpheroManager();
+  const socket = new SocketManager();
+  const canvas = new CanvasManager();
 
   window.addEventListener("resize", function() {
-    sphero.resizeWindow();
+    canvas.resizeCanvas();
+    canvas.clearCanvas();
   });
 });
diff --git a/virtual/js/socketManager.js b/virtual/js/socketManager.js
index f40f088..5b836ae 100644
--- a/virtual/js/socketManager.js
+++ b/virtual/js/socketManager.js
@@ -5,7 +5,7 @@ export default class SocketManager {
     this.socket = io();
 
     this.socket.on("connect", () => {
-      eventPublisher.publish("isNeedShowSpheros", true);
+      eventPublisher.publish("needShowSpheros");
     });
 
     this.socket.on("addVirtualSphero", spheroName => {
diff --git a/virtual/js/virtual-sphero-manager.js b/virtual/js/virtual-sphero-manager.js
index d00960a..3b7e777 100644
--- a/virtual/js/virtual-sphero-manager.js
+++ b/virtual/js/virtual-sphero-manager.js
@@ -1,6 +1,4 @@
 import virtualSphero from "./virtual-sphero";
-import CanvasManager from "./canvasManager";
-import SocketManager from "./socketManager";
 import eventPublisher from "./publisher";
 import { Engine, Render, World, Body, Bodies } from "matter-js";
 
@@ -9,10 +7,8 @@ export default class VirtualSpheroManager {
     const showParam = getParams().show;
     this.showSpheros = typeof showParam === "undefined" ? null : showParam.split(",");
 
-    eventPublisher.subscribe("isNeedShowSpheros", isNeed => {
-      if (isNeed) {
-        eventPublisher.publish("sendShowSpheros", this.showSpheros);
-      }
+    eventPublisher.subscribe("needShowSpheros", () => {
+      eventPublisher.publish("sendShowSpheros", this.showSpheros);
     });
 
     eventPublisher.subscribe("addVirtualSphero", spheroName => {
@@ -35,13 +31,10 @@ export default class VirtualSpheroManager {
     this.engine.world.gravity.y = 0;
     Engine.run(this.engine);
 
-    this.socketManager = new SocketManager();
-
     this.canvas = document.getElementById("canvas");
-    this.canvasManager = new CanvasManager(this.canvas);
 
     const tick = () => {
-      this.canvasManager.clearCanvas();
+      eventPublisher.publish("clearCanvas");
       Object.keys(this.virtualSpheros).forEach(spheroName => {
         this.virtualSpheros[spheroName].move();
         this.virtualSpheros[spheroName].draw();
@@ -61,11 +54,6 @@ export default class VirtualSpheroManager {
     World.remove(this.engine.world, this.virtualSpheros[spheroName].body);
     delete this.virtualSpheros[spheroName];
   }
-
-  resizeWindow() {
-    this.canvasManager.resizeCanvas();
-    this.canvasManager.clearCanvas();
-  }
 }
 
 const commands = [