From 1412f914d481340cf28d79628fff8db378e841a5 Mon Sep 17 00:00:00 2001
From: shundroid <shundroid@users.noreply.github.com>
Date: Mon, 1 Aug 2016 14:53:56 +0900
Subject: [PATCH 1/5] =?UTF-8?q?scoreboard=E3=81=AB=E8=89=B2=E3=82=82?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scoreboard.js         | 4 ++--
 scoreboard/index.html | 2 ++
 scoreboard/js/main.js | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/scoreboard.js b/scoreboard.js
index 2339499..3ed94c5 100644
--- a/scoreboard.js
+++ b/scoreboard.js
@@ -24,7 +24,7 @@ function Scoreboard(port) {
 
   this.currentRanking = null;
   
-  const rankingMaker = new RankingMaker();
+  this.rankingMaker = new RankingMaker();
 
   this.sockets = [];
   this.io.on("connection", socket => {
@@ -45,7 +45,7 @@ function Scoreboard(port) {
 }
 
 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);
   });
diff --git a/scoreboard/index.html b/scoreboard/index.html
index a37fef1..c6f2544 100644
--- a/scoreboard/index.html
+++ b/scoreboard/index.html
@@ -16,6 +16,7 @@ <h1>Onigo Scoreboard</h1>
         <tr>
           <th>順位</th>
           <th>名前</th>
+          <th>色</th>
           <th>HP</th>
         </tr>
       </thead>
@@ -23,6 +24,7 @@ <h1>Onigo Scoreboard</h1>
         <tr>
           <td data-bind="text: $index() + 1">
           <td data-bind="text: name"></td>
+          <td data-bind="text: color, style: {backgroundColor: color}"></td>
           <td data-bind="text: hp, style: {color: hpColor()}"></td>
         </tr>
       </tbody>
diff --git a/scoreboard/js/main.js b/scoreboard/js/main.js
index 5db7215..962e84c 100644
--- a/scoreboard/js/main.js
+++ b/scoreboard/js/main.js
@@ -18,6 +18,7 @@ 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(() => {

From 1d8c04a3a50a2279cf6b729e0e79feeabdcd7263 Mon Sep 17 00:00:00 2001
From: shundroid <shundroid@users.noreply.github.com>
Date: Mon, 1 Aug 2016 15:08:21 +0900
Subject: [PATCH 2/5] =?UTF-8?q?knockout=E3=82=82import=E6=96=87=E3=81=A7?=
 =?UTF-8?q?=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=82=80=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scoreboard/js/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scoreboard/js/main.js b/scoreboard/js/main.js
index 962e84c..2b8d7ef 100644
--- a/scoreboard/js/main.js
+++ b/scoreboard/js/main.js
@@ -1,5 +1,5 @@
 import "../css/style.css";
-var ko = require("knockout");
+import ko from "knockout";
 
 const interval = 2000;
 

From 55b2dee4275c82edaeda3c5449a58e0bd999e2d6 Mon Sep 17 00:00:00 2001
From: shundroid <shundroid@users.noreply.github.com>
Date: Mon, 1 Aug 2016 15:51:34 +0900
Subject: [PATCH 3/5] =?UTF-8?q?scoreboard=E3=82=92=E3=82=B0=E3=83=A9?=
 =?UTF-8?q?=E3=83=95=E3=81=A7=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js                  |  1 +
 scoreboard.js            |  4 +++-
 scoreboard/css/style.css | 36 ++++++++++++++++++++++++++++++++++++
 scoreboard/index.html    | 28 +++++++++-------------------
 scoreboard/js/main.js    |  3 +++
 5 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/main.js b/main.js
index bba3bfb..31d8ab9 100644
--- a/main.js
+++ b/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);
 });
 
diff --git a/scoreboard.js b/scoreboard.js
index 3ed94c5..1da6113 100644
--- a/scoreboard.js
+++ b/scoreboard.js
@@ -38,10 +38,12 @@ function Scoreboard(port) {
   eventPublisher.on("updatedHp", () => {
     this.updateRanking();
   });
-
   eventPublisher.on("updateLink", () => {
     this.updateRanking();
   });
+  eventPublisher.on("color", () => {
+    this.updateRanking();
+  });
 }
 
 Scoreboard.prototype.updateRanking = function() {
diff --git a/scoreboard/css/style.css b/scoreboard/css/style.css
index 039cf60..8899a36 100644
--- a/scoreboard/css/style.css
+++ b/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,31 @@ 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;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.name-zone {
+  border-top: 1px solid white;
+  padding: 5px 0;
+}
+
diff --git a/scoreboard/index.html b/scoreboard/index.html
index c6f2544..c6d3ace 100644
--- a/scoreboard/index.html
+++ b/scoreboard/index.html
@@ -10,25 +10,15 @@
   <header>
     <h1>Onigo Scoreboard</h1>
   </header>
-  <main role="main">
-    <table id="score-table">
-      <thead>
-        <tr>
-          <th>順位</th>
-          <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: color, style: {backgroundColor: color}"></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>
diff --git a/scoreboard/js/main.js b/scoreboard/js/main.js
index 2b8d7ef..a84e42e 100644
--- a/scoreboard/js/main.js
+++ b/scoreboard/js/main.js
@@ -24,6 +24,9 @@ const Orb = function (obj) {
   this.hpColor = ko.computed(() => {
     return this.hp() < 10 ? 'red' : 'white';
   });
+  this.getHpBarHeight = ko.computed(() => {
+    return this.hp() + "%";
+  });
 }
 
 document.addEventListener("DOMContentLoaded", () => {

From 78c38a6444d03207af0d1a84817a659b1ac9fdf9 Mon Sep 17 00:00:00 2001
From: shundroid <shundroid@users.noreply.github.com>
Date: Mon, 1 Aug 2016 15:56:52 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=E3=81=84=E3=82=89=E3=81=AA=E3=81=84style?=
 =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scoreboard/css/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scoreboard/css/style.css b/scoreboard/css/style.css
index 8899a36..5dfaf3d 100644
--- a/scoreboard/css/style.css
+++ b/scoreboard/css/style.css
@@ -55,7 +55,6 @@ section {
 .hp-zone {
   margin: 0 10px;
   flex: 1;
-  position: relative;
   display: flex;
   justify-content: flex-end;
   flex-direction: column;

From 98ad9211790eca9d616c39ba14e4be8d2136f43e Mon Sep 17 00:00:00 2001
From: shundroid <shundroid@users.noreply.github.com>
Date: Mon, 1 Aug 2016 16:27:23 +0900
Subject: [PATCH 5/5] =?UTF-8?q?scoreboard.js=20space=E3=82=92=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scoreboard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scoreboard.js b/scoreboard.js
index 1da6113..9d690c1 100644
--- a/scoreboard.js
+++ b/scoreboard.js
@@ -23,7 +23,7 @@ function Scoreboard(port) {
   });
 
   this.currentRanking = null;
-  
+
   this.rankingMaker = new RankingMaker();
 
   this.sockets = [];