projects
/
vchess.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
'update'
[vchess.git]
/
client
/
src
/
views
/
Game.vue
diff --git
a/client/src/views/Game.vue
b/client/src/views/Game.vue
index
edaca5c
..
2e3509b
100644
(file)
--- a/
client/src/views/Game.vue
+++ b/
client/src/views/Game.vue
@@
-1,10
+1,16
@@
<template lang="pug">
main
<template lang="pug">
main
- input#modalChat.modal(type="checkbox" @c
hange="toggleChat
")
+ input#modalChat.modal(type="checkbox" @c
lick="resetChatColor
")
div#chatWrap(role="dialog" data-checkbox="modalChat"
aria-labelledby="inputChat")
#chat.card
label.modal-close(for="modalChat")
div#chatWrap(role="dialog" data-checkbox="modalChat"
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
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 => {
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:""});
if (!!this.people[sid])
return;
this.$set(this.people, sid, {id:0, name:""});
@@
-551,7
+555,8
@@
export default {
if (this.repeat[repIdx] >= 3)
this.drawOffer = "threerep";
},
if (this.repeat[repIdx] >= 3)
this.drawOffer = "threerep";
},
- toggleChat: function() {
+ resetChatColor: function() {
+ // TODO: this is called twice, once on opening an once on closing
document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2";
},
finishSendChat: function(chat) {
document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2";
},
finishSendChat: function(chat) {
@@
-560,7
+565,7
@@
export default {
GameStorage.update(this.gameRef.id, {chat: chat});
},
processChat: function() {
GameStorage.update(this.gameRef.id, {chat: chat});
},
processChat: function() {
- if (!document.getElementById("
input
Chat").checked)
+ if (!document.getElementById("
modal
Chat").checked)
document.getElementById("chatBtn").style.backgroundColor = "#c5fefe";
},
gameOver: function(score, scoreMsg) {
document.getElementById("chatBtn").style.backgroundColor = "#c5fefe";
},
gameOver: function(score, scoreMsg) {
@@
-583,6
+588,13
@@
export default {
.connected
background-color: lightgreen
.connected
background-color: lightgreen
+#participants
+ margin-left: 5px
+
+.anonymous
+ color: grey
+ font-style: italic
+
@media screen and (min-width: 768px)
#actions
width: 300px
@media screen and (min-width: 768px)
#actions
width: 300px
@@
-601,6
+613,9
@@
export default {
@media screen and (max-width: 767px)
#aboveBoard
text-align: center
@media screen and (max-width: 767px)
#aboveBoard
text-align: center
+@media screen and (min-width: 768px)
+ #aboveBoard
+ margin-left: 30%
.name
font-size: 1.5rem
.name
font-size: 1.5rem