<template lang="pug">
main
- input#modalChat.modal(type="checkbox" @change="toggleChat")
- div#chatWrap(role="dialog" data-checkbox="modalChat"
- aria-labelledby="inputChat")
+ 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 }} st.tr["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.score=='*'")
- button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}") Draw
- button(@click="abortGame") Abort
- button(@click="resign") Resign
+ button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}")
+ | {{ st.tr["Draw"] }}
+ button(@click="abortGame") {{ st.tr["Abort"] }}
+ button(@click="resign") {{ st.tr["Resign"] }}
#playersInfo
p
span.name(:class="{connected: isConnected(0)}")
{
clearInterval(clockUpdate);
if (countdown < 0)
- this.gameOver(this.vr.turn=="w" ? "0-1" : "1-0", "Time");
+ this.gameOver(this.vr.turn=="w" ? "0-1" : "1-0", this.st.tr["Time"]);
}
else
{
switch (data.code)
{
case "duplicate":
- alert("Warning: duplicate 'offline' connection");
+ alert(this.st.tr["Warning: multi-tabs not supported"]);
break;
// 0.2] Receive clients list (just socket IDs)
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:""});
{
// Minimal game informations:
id: this.game.id,
- players: this.game.players.map(p => { return {name:p.name}; }),
+ players: this.game.players,
vid: this.game.vid,
timeControl: this.game.timeControl,
};
break;
}
case "resign":
- this.gameOver(data.side=="b" ? "1-0" : "0-1", "Resign");
+ this.gameOver(data.side=="b" ? "1-0" : "0-1", this.st.tr["Resign"]);
break;
case "abort":
- this.gameOver("?", "Abort");
+ this.gameOver("?", this.st.tr["Abort"]);
break;
case "draw":
- this.gameOver("1/2", data.message);
+ this.gameOver("1/2", this.st.tr[data.message]);
break;
case "drawoffer":
// NOTE: observers don't know who offered draw
clickDraw: function() {
if (["received","threerep"].includes(this.drawOffer))
{
- if (!confirm("Accept draw?"))
+ if (!confirm(this.st.tr["Accept draw?"]))
return;
const message = (this.drawOffer == "received"
? "Mutual agreement"
message:message, target:sid}));
}
});
- this.gameOver("1/2", message);
+ this.gameOver("1/2", this.st.tr[message]);
}
else if (this.drawOffer == "") //no effect if drawOffer == "sent"
{
- if (!confirm("Offer draw?"))
+ if (this.game.mycolor != this.vr.turn)
+ return alert(this.st.tr["Draw offer only in your turn"]);
+ if (!confirm(this.st.tr["Offer draw?"]))
return;
this.drawOffer = "sent";
Object.keys(this.people).forEach(sid => {
if (sid != this.st.user.sid)
this.st.conn.send(JSON.stringify({code:"drawoffer", target:sid}));
});
- GameStorage.update(this.gameRef.id, {drawOffer: true});
+ GameStorage.update(this.gameRef.id, {drawOffer: this.game.mycolor});
}
},
abortGame: function() {
if (!confirm(this.st.tr["Terminate game?"]))
return;
- this.gameOver("?", "Abort");
+ this.gameOver("?", this.st.tr["Abort"]);
Object.keys(this.people).forEach(sid => {
if (sid != this.st.user.sid)
{
});
},
resign: function(e) {
- if (!confirm("Resign the game?"))
+ if (!confirm(this.st.tr["Resign the game?"]))
return;
Object.keys(this.people).forEach(sid => {
if (sid != this.st.user.sid)
side:this.game.mycolor, target:sid}));
}
});
- this.gameOver(this.game.mycolor=="w" ? "0-1" : "1-0", "Resign");
+ this.gameOver(this.game.mycolor=="w" ? "0-1" : "1-0", this.st.tr["Resign"]);
},
// 3 cases for loading a game:
// - from indexedDB (running or completed live game I play)
}
if (L >= 1)
game.initime[L%2] = game.moves[L-1].played;
- if (game.drawOffer)
- this.drawOffer = "received";
}
// Now that we used idx and played, re-format moves as for live games
game.moves = game.moves.map( (m) => {
}
}
}
+
+
+
+ // TODO: (and also when receiving / sending a move ?)
+// if (!!game.drawOffer)
+// {
+// if (game.drawOffer == "w")
+// {
+// if (myIdx == 0)
+// {
+// this.drawOffer = "sent";
+
+
+
+
+
this.game = Object.assign({},
game,
// NOTE: assign mycolor here, since BaseGame could also be VS computer
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) {
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) {
.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 (max-width: 767px)
#aboveBoard
text-align: center
+@media screen and (min-width: 768px)
+ #aboveBoard
+ margin-left: 30%
.name
font-size: 1.5rem