From ed06d9e92387e60fc15d7c9768dd5680605e35d1 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Tue, 4 Feb 2020 09:58:45 +0100 Subject: [PATCH] 'update' --- client/src/components/BaseGame.vue | 5 +- client/src/views/Game.vue | 23 ++++-- client/src/views/Hall.vue | 112 ++++++++++++++--------------- 3 files changed, 78 insertions(+), 62 deletions(-) diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 6faa1b60..d035e009 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -20,7 +20,7 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" button(@click="() => play()") > button(@click="gotoEnd") >> #pgnDiv - div(v-if="game.vname!='Dark' || game.score!='*'") + #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'") a#download(href="#") button(@click="download") {{ st.tr["Download PGN"] }} button(v-if="game.vname!='Dark' && game.mode!='analyze'" @@ -394,6 +394,9 @@ console.log(newMove); margin-left: auto margin-right: auto +#downloadDiv + display: inline-block + #modal-eog+div .card overflow: hidden #controls diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index edaca5c1..e77492f0 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -5,6 +5,12 @@ main aria-labelledby="inputChat") #chat.card label.modal-close(for="modalChat") + #participants + span {{ Object.keys(people).length }} participant(s): + span(v-for="p in Object.values(people)" v-if="!!p.name") + | {{ p.name }} + span.anonymous(v-if="Object.values(people).some(p => !p.name)") + | + @nonymous Chat(:players="game.players" :pastChats="game.chats" @newchat-sent="finishSendChat" @newchat-received="processChat") .row @@ -159,8 +165,6 @@ export default { case "pollclients": { data.sockIds.forEach(sid => { - // TODO: understand clearly what happens here, problems when a - // game is quit, and then launch a new game from hall. if (!!this.people[sid]) return; this.$set(this.people, sid, {id:0, name:""}); @@ -552,7 +556,11 @@ export default { this.drawOffer = "threerep"; }, toggleChat: function() { - document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2"; + let modalChat = document.getElementById("modalChat"); + modalChat.style.backgroundColor = + (modalChat.style.backgroundColor == "#e2e2e2" + ? "#c5fefe" + : "#e2e2e2"); }, finishSendChat: function(chat) { // NOTE: anonymous chats in corr games are not stored on server (TODO?) @@ -560,7 +568,7 @@ export default { GameStorage.update(this.gameRef.id, {chat: chat}); }, processChat: function() { - if (!document.getElementById("inputChat").checked) + if (!document.getElementById("modalChat").checked) document.getElementById("chatBtn").style.backgroundColor = "#c5fefe"; }, gameOver: function(score, scoreMsg) { @@ -583,6 +591,13 @@ export default { .connected background-color: lightgreen +#participants + margin-left: 5px + +.anonymous + color: grey + font-style: italic + @media screen and (min-width: 768px) #actions width: 300px diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index f165b0a9..ee7e01b5 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -31,42 +31,40 @@ main button#newGame(onClick="doClick('modalNewgame')") New game .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - .collapse - div - .button-group - button(@click="(e) => setDisplay('c','live',e)" class="active") - | Live Challenges - button(@click="(e) => setDisplay('c','corr',e)") - | Correspondance challenges - ChallengeList(v-show="cdisplay=='live'" - :challenges="filterChallenges('live')" @click-challenge="clickChallenge") - ChallengeList(v-show="cdisplay=='corr'" - :challenges="filterChallenges('corr')" @click-challenge="clickChallenge") - div - .button-group - button(@click="(e) => setDisplay('p','players',e)" class="active") - | Players - button(@click="(e) => setDisplay('p','chat',e)") - | Chat - #players(v-show="pdisplay=='players'") - p(v-for="p in uniquePlayers") - span(:class="{anonymous: !!p.count}") - | {{ (p.name || '@nonymous') + (!!p.count ? " ("+p.count+")" : "") }} - button.player-action(v-if="!p.count && p.name != st.user.name" - @click="challOrWatch(p,$event)") - | {{ whatPlayerDoes(p) }} - #chat(v-show="pdisplay=='chat'") - Chat(:players="[]") - div - .button-group - button(@click="(e) => setDisplay('g','live',e)" class="active") - | Live games - button(@click="(e) => setDisplay('g','corr',e)") - | Correspondance games - GameList(v-show="gdisplay=='live'" :games="filterGames('live')" - @show-game="showGame") - GameList(v-show="gdisplay=='corr'" :games="filterGames('corr')" - @show-game="showGame") + div + .button-group + button(@click="(e) => setDisplay('c','live',e)" class="active") + | Live Challenges + button(@click="(e) => setDisplay('c','corr',e)") + | Correspondance challenges + ChallengeList(v-show="cdisplay=='live'" + :challenges="filterChallenges('live')" @click-challenge="clickChallenge") + ChallengeList(v-show="cdisplay=='corr'" + :challenges="filterChallenges('corr')" @click-challenge="clickChallenge") + #people + h3.text-center Who's there? + #players + p(v-for="p in Object.values(people)" v-if="!!p.name") + span {{ p.name }} + button.player-action( + v-if="p.name != st.user.name" + @click="challOrWatch(p,$event)" + ) + | {{ whatPlayerDoes(p) }} + p.anonymous @nonymous ({{ anonymousCount }}) + #chat + Chat(:players="[]") + .clearer + div + .button-group + button(@click="(e) => setDisplay('g','live',e)" class="active") + | Live games + button(@click="(e) => setDisplay('g','corr',e)") + | Correspondance games + GameList(v-show="gdisplay=='live'" :games="filterGames('live')" + @show-game="showGame") + GameList(v-show="gdisplay=='corr'" :games="filterGames('corr')" + @show-game="showGame") </template> <script> @@ -119,23 +117,10 @@ export default { }, }, computed: { - uniquePlayers: function() { - // Show e.g. "@nonymous (5)", and do nothing on click on anonymous - let anonymous = {name:"", count:0}; - let playerList = {}; - Object.values(this.people).forEach(p => { - if (p.id > 0) - { - // We don't count registered users connections: either they are here or not. - if (!playerList[p.id]) - playerList[p.id] = {name: p.name}; - } - else - anonymous.count++; - }); - if (anonymous.count > 0) - playerList[0] = anonymous; - return Object.values(playerList); + anonymousCount: function() { + let count = 0; + Object.values(this.people).forEach(p => { count += (!p.name ? 1 : 0); }); + return count; }, }, created: function() { @@ -194,6 +179,9 @@ export default { ); // 0.1] Ask server for room composition: const funcPollClients = () => { + // Same strategy as in Game.vue: send connection + // after we're sure WebSocket is initialized + this.st.conn.send(JSON.stringify({code:"connect"})); this.st.conn.send(JSON.stringify({code:"pollclients"})); }; if (!!this.st.conn && this.st.conn.readyState == 1) //1 == OPEN state @@ -638,15 +626,25 @@ export default { #newGame display: block margin: 10px auto 5px auto +#people + width: 100% +#players + width: 50% + position: relative + float: left +#chat + width: 50% + float: left + position: relative +@media screen and (max-width: 767px) + #players, #chats + width: 100% #chat > .card max-width: 100% margin: 0; border: none; #players > p - margin-left: 40% -@media screen and (max-width: 767px) - #players > p - margin-left: 5px + margin-left: 5px .anonymous font-style: italic button.player-action -- 2.48.1