From 050ae3b58673dfa1ed41bf78d935fe95ec9e74c5 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sat, 1 Feb 2020 12:11:36 +0100
Subject: [PATCH] Styling

---
 client/src/App.vue                   |  3 +++
 client/src/translations/about/en.pug | 12 ++++-----
 client/src/utils/datetime.js         |  6 ++++-
 client/src/views/Game.vue            | 38 +++++++++++++++++++++++-----
 4 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 4b062a65..27ef66c2 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -161,6 +161,9 @@ footer
   display: inline-flex
   align-items: center
   justify-content: center
+  & > .router-link-exact-active
+    color: #42b983 !important
+    text-decoration: none
   & > .menuitem
     display: inline-block
     margin: 0 10px
diff --git a/client/src/translations/about/en.pug b/client/src/translations/about/en.pug
index 14bbc7eb..0e434213 100644
--- a/client/src/translations/about/en.pug
+++ b/client/src/translations/about/en.pug
@@ -18,12 +18,12 @@ p.
 
 p.
   From the main Hall, you can see and talk to online players,
-    "send and accept challenges (live or correspondance), and also watch current
-    "games. If this is your first contact with chess variants, you probably should
-    "start with the 'Variants' page from the top menu: it explains all the rules
-    "and allows to observe sample games or play against basic bots. Finally,
-    "at any moment in a game you can click on the FEN string at the bottom to
-    "analyze the position. Try not to do that in live games ;)
+  send and accept challenges (live or correspondance), and also watch current
+  games. If this is your first contact with chess variants, you probably should
+  start with the 'Variants' page from the top menu: it explains all the rules
+  and allows to observe sample games or play against basic bots. Finally,
+  at any moment in a game you can click on the 'Analyze' button to analyze
+  the position. Try not to do that in live games, your opponent would know ;)
 
 p
   a(href="https://github.com/yagu0/vchess") The source code 
diff --git a/client/src/utils/datetime.js b/client/src/utils/datetime.js
index 00e8b4b9..49b70caf 100644
--- a/client/src/utils/datetime.js
+++ b/client/src/utils/datetime.js
@@ -33,11 +33,15 @@ export function ppt(t)
   let res = "";
   if (days > 0)
     res += days + "d ";
-  if (days <= 3 && hours > 0) //TODO: 3 is arbitrary
+  if (days <= 3 && hours > 0) //NOTE: 3 is arbitrary
     res += hours + "h ";
   if (days == 0 && minutes > 0)
     res += (hours > 0 ? padDigits(minutes) + "m " : minutes + ":");
   if (days == 0 && hours == 0)
+  {
     res += padDigits(seconds);
+    if (minutes == 0)
+      res += "s"; //seconds indicator, since this is the only number printed
+  }
   return res.trim(); //remove potential last space
 }
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 0c3de58f..e16fa2f8 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -7,14 +7,19 @@ main
       Chat(:players="game.players" :pastChats="game.chats"
         @newchat-sent="finishSendChat" @newchat-received="processChat")
   .row
-    .col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
+    #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
       button#chatBtn(onClick="doClick('modalChat')") Chat
       #actions(v-if="game.mode!='analyze' && game.score=='*'")
         button(@click="offerDraw") Draw
         button(@click="abortGame") Abort
         button(@click="resign") Resign
-      div Names: {{ game.players[0].name }} - {{ game.players[1].name }}
-      div(v-if="game.score=='*'") Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }}
+      #playersInfo
+        p
+          span.name(:class="{connected: isConnected(0)}") {{ game.players[0].name }}
+          span.time(v-if="game.score=='*'") {{ virtualClocks[0] }}
+          span.split-names -
+          span.name(:class="{connected: isConnected(1)}") {{ game.players[1].name }}
+          span.time(v-if="game.score=='*'") {{ virtualClocks[1] }}
   BaseGame(:game="game" :vr="vr" ref="basegame"
     @newmove="processMove" @gameover="gameOver")
 </template>
@@ -126,6 +131,12 @@ export default {
     roomInit: function() {
       this.st.conn.send(JSON.stringify({code:"pollclients"}));
     },
+    isConnected: function(index) {
+      const name = this.game.players[index].name;
+      if (this.st.user.name == name)
+        return true;
+      return this.people.some(p => p.name == name);
+    },
     socketMessageListener: function(msg) {
       const data = JSON.parse(msg.data);
       switch (data.code)
@@ -544,9 +555,7 @@ export default {
 
 <style lang="sass">
 .connected
-  background-color: green
-.disconnected
-  background-color: red
+  background-color: lightgreen
 
 @media screen and (min-width: 768px)
   #actions
@@ -563,6 +572,23 @@ export default {
     width: 33%
     margin: 0
 
+@media screen and (max-width: 767px)
+  #aboveBoard
+    text-align: center
+
+.name
+  font-size: 1.5rem
+  padding: 1px
+
+.time
+  font-size: 2rem
+  display: inline-block
+  margin-left: 10px
+
+.split-names
+  display: inline-block
+  margin: 0 15px
+
 #chat
   padding-top: 20px
   max-width: 600px
-- 
2.44.0