gameState、通信状態によってcontrollerがアクティブか変わるように実装

comozilla · Jul 2, 2016 · 6eb3b1c · 6eb3b1c
1 parent bdcf1f8
commit 6eb3b1c
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 23 deletions.
diff --git a/css/style.css b/css/style.css
@@ -80,3 +80,28 @@ body {
   background-color: yellow;
 }
 
+#inactive-screen {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.screen-game-active {
+  display: none;
+}
+
+#inactive-inner {
+  width: 100%;
+  text-align: center;
+  background-color: black;
+  color: white;
+  position: absolute;
+  top: 50%;
+  padding: 20px 0;
+  transform: translateY(-50%);
+}
+
diff --git a/index.html b/index.html
@@ -7,6 +7,10 @@
   <script type="text/javascript" src="js/build/bundle.js"></script>
 </head>
 <body>
+  <div id="inactive-screen">
+    <div id="inactive-inner">
+    </div>
+  </div>
   <div id="boxes">
     <div id="hp-box">
       HP:100

diff --git a/js/inactive-status.js b/js/inactive-status.js
@@ -0,0 +1,42 @@
+import eventPublisher from "./publisher";
+
+function InactiveStatus() {
+  this.inactiveScreen = document.getElementById("inactive-screen");
+  this.inactiveInner = document.getElementById("inactive-inner");
+  eventPublisher.subscribe("gameState", (gameState) => {
+    this.changeStatus(gameState);
+  });
+  eventPublisher.subscribe("ws-connected", () => {
+    this.changeStatus("connected");
+  });
+  eventPublisher.subscribe("ws-error", () => {
+    this.changeStatus("error");
+  });
+  eventPublisher.subscribe("ws-not-found", () => {
+    this.changeStatus("not-found");
+  });
+}
+
+InactiveStatus.prototype.changeStatus = function(screenState) {
+  switch (screenState) {
+    case "disconnected":
+      this.inactiveInner.textContent = "サーバーに接続されていません";
+      break;
+    case "not-found":
+      this.inactiveInner.textContent = "サーバーが見つかりませんでした";
+      break;
+    case "error":
+      this.inactiveInner.textContent = "通信でエラーが発生しました";
+      break;
+    case "connected":
+      this.inactiveInner.textContent = "サーバーに接続されました。ゲームの状態の受信を待機しています...";
+      break;
+    case "inactive":
+      this.inactiveInner.textContent = "ゲームは開始されていません";
+      break;
+  }
+  if (screenState === "active") this.inactiveScreen.classList.add("screen-game-active");
+  else this.inactiveScreen.classList.remove("screen-game-active");
+};
+
+export default InactiveStatus;
diff --git a/js/main.js b/js/main.js
@@ -1,6 +1,7 @@
 import Joystick from "./joystick";
 import CalibrationButton from "./calibration-button";
 import HPBoard from "./hp-board";
+import InactiveStatus from "./inactive-status";
 import SpheroStates from "./sphero-states";
 import SpheroClient from "./sphero-client";
 
@@ -12,8 +13,10 @@ var spheroClient;
 var joystick;
 var calibrationButton;
 var hpBoard;
+var inactiveStatus;
 
 document.addEventListener("DOMContentLoaded",　function() {
+  inactiveStatus = new InactiveStatus();
   spheroStates = new SpheroStates();
   spheroClient = new SpheroClient("ws://localhost:8080");
   joystick = new Joystick();

diff --git a/js/sphero-client.js b/js/sphero-client.js
@@ -13,32 +13,43 @@ function SpheroClient(wsHost) {
   this._beforeSpeed = 0;
   this.speed = 0;
 
-  this.orb = new sphero();
-  this.orb.connect(this.wsHost, () => {
-    this.orb.color("red");
-    eventPublisher.subscribe("rollingDegree", (degree) => {
-      this._beforeDegree = this.degree;
-      this.degree = degree;
-      this._roll();
+  if (typeof sphero === "undefined") {
+    eventPublisher.publish("ws-not-found");
+  } else {
+    this.orb = new sphero();
+    this.orb.connect(this.wsHost, () => {
+      eventPublisher.publish("ws-connected");
+      this.orb.color("red");
+      eventPublisher.subscribe("rollingDegree", (degree) => {
+        this._beforeDegree = this.degree;
+        this.degree = degree;
+        this._roll();
+      });
+      eventPublisher.subscribe("rollingSpeed", (speed) => {
+        this._beforeSpeed = this.speed;
+        this.speed = speed;
+        this._roll();
+      });
+
+      eventPublisher.subscribe("spheroState", (spheroState) => {
+        if (spheroState === "idling") {
+          this.orb.finishCalibration();
+        } else {
+          this.orb.startCalibration();
+        }
+      });
+    }, () => {
+      eventPublisher.publish("ws-error");
     });
-    eventPublisher.subscribe("rollingSpeed", (speed) => {
-      this._beforeSpeed = this.speed;
-      this.speed = speed;
-      this._roll();
+    this.orb.listenCustomMessage("hp", (data) => {
+      console.log(data);
+      eventPublisher.publish("hp", data.hp);
     });
-
-    eventPublisher.subscribe("spheroState", (spheroState) => {
-      if (spheroState === "idling") {
-        this.orb.finishCalibration();
-      } else {
-        this.orb.startCalibration();
-      }
+    this.orb.listenCustomMessage("gameState", (data) => {
+      console.log(data);
+      eventPublisher.publish("gameState", data.gameState);
     });
-  });
-  this.orb.listenCustomMessage("hp", (data) => {
-    console.log(data);
-    eventPublisher.publish("hp", data.hp);
-  });
+  }
 }
 
 SpheroClient.prototype._roll = function() {