From 050ae3b58673dfa1ed41bf78d935fe95ec9e74c5 Mon Sep 17 00:00:00 2001 From: Benjamin Auder 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") @@ -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 {