<template lang="pug">
main
- input#modalChat.modal(type="checkbox" @change="toggleChat")
+ input#modalChat.modal(type="checkbox" @click="resetChatColor")
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
#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=='*'")
+ #actions(v-if="game.score=='*'")
button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}") Draw
button(@click="abortGame") Abort
button(@click="resign") Resign
#playersInfo
p
- span.name(:class="{connected: isConnected(0)}") {{ game.players[0].name }}
+ span.name(:class="{connected: isConnected(0)}")
+ | {{ game.players[0].name || "@nonymous" }}
span.time(v-if="game.score=='*'") {{ virtualClocks[0] }}
span.split-names -
- span.name(:class="{connected: isConnected(1)}") {{ game.players[1].name }}
+ span.name(:class="{connected: isConnected(1)}")
+ | {{ game.players[1].name || "@nonymous" }}
span.time(v-if="game.score=='*'") {{ virtualClocks[1] }}
BaseGame(:game="game" :vr="vr" ref="basegame"
@newmove="processMove" @gameover="gameOver")
methods: {
// O.1] Ask server for room composition:
roomInit: function() {
+ // Notify the room only now that I connected, because
+ // messages might be lost otherwise (if game loading is slow)
+ this.st.conn.send(JSON.stringify({code:"connect"}));
this.st.conn.send(JSON.stringify({code:"pollclients"}));
},
isConnected: function(index) {
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:""});
}
case "identity":
{
- let player = this.people[data.user.sid];
// NOTE: sometimes player.id fails because player is undefined...
// Probably because the event was meant for Hall?
- if (!player)
+ if (!this.people[data.user.sid])
return;
- player.id = data.user.id;
- player.name = data.user.name;
+ this.$set(this.people, data.user.sid,
+ {id: data.user.id, name: data.user.name});
// Sending last state only for live games: corr games are complete
if (this.game.type == "live" && this.game.oppsid == data.user.sid)
{
break;
}
case "askgame":
- // Send current (live) game
+ // Send current (live) game if not asked by opponent (!)
+ if (this.game.players.some(p => p.sid == data.from))
+ return;
const myGame =
{
// Minimal game informations:
game:myGame, target:data.from}));
break;
case "newmove":
- this.$set(this.game, "moveToPlay", data.move); //TODO: Vue3...
+ this.$set(this.game, "moveToPlay", data.move);
break;
case "lastate": //got opponent infos about last move
{
this.gameOver("1/2", data.message);
break;
case "drawoffer":
- this.drawOffer = "received"; //TODO: observers don't know who offered draw
+ // NOTE: observers don't know who offered draw
+ this.drawOffer = "received";
break;
case "askfullgame":
- this.st.conn.send(JSON.stringify({code:"fullgame", game:this.game, target:data.from}));
+ this.st.conn.send(JSON.stringify({code:"fullgame",
+ game:this.game, target:data.from}));
break;
case "fullgame":
// Callback "roomInit" to poll clients only after game is loaded
});
this.gameOver("1/2", message);
}
- else if (this.drawOffer == "sent")
- {
- this.drawOffer = "";
- if (this.game.type == "corr")
- GameStorage.update(this.gameRef.id, {drawOffer: false});
- }
- else
+ else if (this.drawOffer == "") //no effect if drawOffer == "sent"
{
if (!confirm("Offer draw?"))
return;
if (sid != this.st.user.sid)
this.st.conn.send(JSON.stringify({code:"drawoffer", target:sid}));
});
- if (this.game.type == "corr")
- GameStorage.update(this.gameRef.id, {drawOffer: true});
+ GameStorage.update(this.gameRef.id, {drawOffer: true});
}
},
abortGame: function() {
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) {
- if (this.game.type == "corr")
+ // NOTE: anonymous chats in corr games are not stored on server (TODO?)
+ if (this.game.type == "corr" && this.st.user.id > 0)
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) {
- this.game.mode = "analyze";
this.game.score = score;
this.game.scoreMsg = scoreMsg;
const myIdx = this.game.players.findIndex(p => {
};
</script>
-<style lang="sass">
+<style lang="sass" scoped>
.connected
background-color: lightgreen
+#participants
+ margin-left: 5px
+
+.anonymous
+ color: grey
+ font-style: italic
+
@media screen and (min-width: 768px)
#actions
width: 300px
projects / vchess.git / blobdiff