Merge pull request #43 from shundroid/final

scoreboardに色も表示＆グラフに

main.js

@@ -285,5 +285,6 @@ dashboard.on("reconnect", name => {
 });
 dashboard.on("color", (name, color) => {
   controllerModel.get(name).setColor(color);
+  eventPublisher.emit("color", name, color);
 });
 

scoreboard.js

@@ -23,8 +23,8 @@ function Scoreboard(port) {
   });
 
   this.currentRanking = null;
-  
-  const rankingMaker = new RankingMaker();
+
+  this.rankingMaker = new RankingMaker();
 
   this.sockets = [];
   this.io.on("connection", socket => {
@@ -38,14 +38,16 @@ function Scoreboard(port) {
   eventPublisher.on("updatedHp", () => {
     this.updateRanking();
   });
-
   eventPublisher.on("updateLink", () => {
     this.updateRanking();
   });
+  eventPublisher.on("color", () => {
+    this.updateRanking();
+  });
 }
 
 Scoreboard.prototype.updateRanking = function() {
-  this.currentRanking = rankingMaker.make(controllerModel.controllers);
+  this.currentRanking = this.rankingMaker.make(controllerModel.controllers);
   this.sockets.forEach(socket => {
     socket.emit("data", this.currentRanking);
   });

scoreboard/css/style.css

@@ -2,8 +2,16 @@
   color: #fff;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   background: #000;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
 }
 
 h1 {
@@ -30,3 +38,30 @@ thead {
 tr {
   border-bottom: solid 1px #999;
 }
+
+main {
+  flex: 1;
+  display: flex;
+}
+
+section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: 25px;
+}
+
+.hp-zone {
+  margin: 0 10px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.name-zone {
+  border-top: 1px solid white;
+  padding: 5px 0;
+}
+

scoreboard/index.html

@@ -10,23 +10,15 @@
   <header>
     <h1>Onigo Scoreboard</h1>
   </header>
-  <main role="main">
-    <table id="score-table">
-      <thead>
-        <tr>
-          <th>順位</th>
-          <th>名前</th>
-          <th>HP</th>
-        </tr>
-      </thead>
-      <tbody data-bind="foreach: orbs">
-        <tr>
-          <td data-bind="text: $index() + 1">
-          <td data-bind="text: name"></td>
-          <td data-bind="text: hp, style: {color: hpColor()}"></td>
-        </tr>
-      </tbody>
-    </table>
+  <main role="main" data-bind="foreach: orbs">
+    <section>
+      <div class="hp-zone">
+        <div class="hp-text" data-bind="text: hp, style: {color: hpColor()}"></div>
+        <div class="hp-bar" data-bind="style: {height: getHpBarHeight(), backgroundColor: color}">
+        </div>
+      </div>
+      <div class="name-zone" data-bind="text: name"></div>
+    </section>
   </main>
 </body>
 </html>

scoreboard/js/main.js

@@ -1,5 +1,5 @@
 import "../css/style.css";
-var ko = require("knockout");
+import ko from "knockout";
 
 const interval = 2000;
 
@@ -18,11 +18,15 @@ const Ranking = function () {
 const Orb = function (obj) {
   this.name = ko.observable(obj.name);
   this.hp = ko.observable(obj.states.hp);
+  this.color = ko.observable(obj.states.color);
   this.isTie = ko.observable(obj.isTie);
 
   this.hpColor = ko.computed(() => {
     return this.hp() < 10 ? 'red' : 'white';
   });
+  this.getHpBarHeight = ko.computed(() => {
+    return this.hp() + "%";
+  });
 }
 
 document.addEventListener("DOMContentLoaded", () => {