span {{ Object.keys(people).length + " " + st.tr["participant(s):"] }}
span(
v-for="p in Object.values(people)"
- v-if="p.name"
+ v-if="p.focus && !!p.name"
)
| {{ p.name }}
- span.anonymous(v-if="Object.values(people).some(p => !p.name && p.id === 0)")
+ span.anonymous(
+ v-if="Object.values(people).some(p => p.focus && !p.name)"
+ )
| + @nonymous
Chat(
ref="chatcomp"
input#modalConfirm.modal(type="checkbox")
div#confirmDiv(role="dialog")
.card
- .diagram(v-html="curDiag")
+ .diagram(
+ v-if="!!vr && ['all','byrow'].includes(vr.showMoves)"
+ v-html="curDiag"
+ )
+ p.text-center(v-else)
+ span {{ st.tr["Move played:"] + " " }}
+ span.bold {{ moveNotation }}
+ br
+ span {{ st.tr["Are you sure?"] }}
.button-group#buttonsConfirm
// onClick for acceptBtn: set dynamically
button.acceptBtn
// If newmove got no pingback, send again:
opponentGotMove: false,
connexionString: "",
+ // Incomplete info games: show move played
+ moveNotation: "",
// Intervals from setInterval():
askLastate: null,
retrySendmove: null,
this.atCreation();
},
mounted: function() {
+ document.addEventListener('visibilitychange', this.visibilityChange);
document
.getElementById("chatWrap")
.addEventListener("click", processModalClick);
}
},
beforeDestroy: function() {
+ document.removeEventListener('visibilitychange', this.visibilityChange);
this.cleanBeforeDestroy();
},
methods: {
+ visibilityChange: function() {
+ // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27
+ this.send(
+ document.visibilityState == "visible"
+ ? "getfocus"
+ : "losefocus"
+ );
+ },
atCreation: function() {
// 0] (Re)Set variables
this.gameRef.id = this.$route.params["id"];
this.nextIds = JSON.parse(this.$route.query["next"] || "[]");
// Always add myself to players' list
const my = this.st.user;
- this.$set(this.people, my.sid, { id: my.id, name: my.name });
+ this.$set(
+ this.people,
+ my.sid,
+ {
+ id: my.id,
+ name: my.name,
+ focus: true
+ }
+ );
this.game = {
players: [{ name: "" }, { name: "" }],
chats: [],
},
isConnected: function(index) {
const player = this.game.players[index];
- // Is it me ?
+ // Is it me ? In this case no need to bother with focus
if (this.st.user.sid == player.sid || this.st.user.id == player.uid)
// Still have to check for name (because of potential multi-accounts
// on same browser, although this should be rare...)
// Try to find a match in people:
return (
(
- player.sid &&
- Object.keys(this.people).some(sid => sid == player.sid)
+ !!player.sid &&
+ Object.keys(this.people).some(sid =>
+ sid == player.sid && this.people[sid].focus)
)
||
(
player.uid &&
- Object.values(this.people).some(p => p.id == player.uid)
+ Object.values(this.people).some(p =>
+ p.id == player.uid && p.focus)
)
);
},
switch (data.code) {
case "pollclients":
data.sockIds.forEach(sid => {
- if (sid != this.st.user.sid)
+ if (sid != this.st.user.sid) {
+ this.people[sid] = { focus: true };
this.send("askidentity", { target: sid });
+ }
});
break;
case "connect":
if (!this.people[data.from]) {
+ this.people[data.from] = { focus: true };
this.newConnect[data.from] = true; //for self multi-connects tests
this.send("askidentity", { target: data.from });
}
case "mdisconnect":
ArrayFun.remove(this.onMygames, sid => sid == data.from);
break;
+ case "getfocus": {
+ let player = this.people[data.from];
+ if (!!player) {
+ player.focus = true;
+ this.$forceUpdate(); //TODO: shouldn't be required
+ }
+ break;
+ }
+ case "losefocus": {
+ let player = this.people[data.from];
+ if (!!player) {
+ player.focus = false;
+ this.$forceUpdate(); //TODO: shouldn't be required
+ }
+ break;
+ }
case "killed":
// I logged in elsewhere:
this.conn = null;
}
case "identity": {
const user = data.data;
- this.$set(this.people, user.sid, { name: user.name, id: user.id });
+ let player = this.people[user.sid];
+ // player.focus is already set
+ player.name = user.name;
+ player.id = user.id;
+ this.$forceUpdate(); //TODO: shouldn't be required
// If I multi-connect, kill current connexion if no mark (I'm older)
if (this.newConnect[user.sid]) {
if (
// only drawOffer=="sent" is possible
drawSent: this.drawOffer == "sent",
score: this.game.score,
+ score: this.game.scoreMsg,
movesCount: L,
initime: this.game.initime[1 - myIdx] //relevant only if I played
};
if (data.score != "*") {
this.drawOffer = "";
if (this.game.score == "*")
- // TODO: also pass scoreMsg in lastate
- this.gameOver(data.score);
+ this.gameOver(data.score, data.scoreMsg);
}
},
clickDraw: function() {
moveCol == this.game.mycolor &&
!data.receiveMyMove
) {
+ let boardDiv = document.querySelector(".game");
const afterSetScore = () => {
doProcessMove();
if (this.st.settings.gotonext && this.nextIds.length > 0)
this.showNextGame();
else {
// The board might have been hidden:
- let boardDiv = document.querySelector(".game");
if (boardDiv.style.visibility == "hidden")
boardDiv.style.visibility = "visible";
}
};
+ let el = document.querySelector("#buttonsConfirm > .acceptBtn");
+ // We may play several moves in a row: in case of, remove listener:
+ let elClone = el.cloneNode(true);
+ el.parentNode.replaceChild(elClone, el);
+ elClone.addEventListener(
+ "click",
+ () => {
+ document.getElementById("modalConfirm").checked = false;
+ if (!!data.score && data.score != "*")
+ // Set score first
+ this.gameOver(data.score, null, afterSetScore);
+ else afterSetScore();
+ }
+ );
+ // PlayOnBoard is enough, and more appropriate for Synchrone Chess
+ V.PlayOnBoard(this.vr.board, move);
+ const position = this.vr.getBaseFen();
+ V.UndoOnBoard(this.vr.board, move);
if (["all","byrow"].includes(V.ShowMoves)) {
- let el = document.querySelector("#buttonsConfirm > .acceptBtn");
- // We may play several moves in a row: in case of, remove listener:
- let elClone = el.cloneNode(true);
- el.parentNode.replaceChild(elClone, el);
- elClone.addEventListener(
- "click",
- () => {
- document.getElementById("modalConfirm").checked = false;
- if (!!data.score && data.score != "*")
- // Set score first
- this.gameOver(data.score, null, afterSetScore);
- else afterSetScore();
- }
- );
- // PlayOnBoard is enough, and more appropriate for Synchrone Chess
- V.PlayOnBoard(this.vr.board, move);
- const position = this.vr.getBaseFen();
- V.UndoOnBoard(this.vr.board, move);
this.curDiag = getDiagram({
position: position,
orientation: V.CanFlip ? this.game.mycolor : "w"
});
- document.getElementById("modalConfirm").checked = true;
} else {
// Incomplete information: just ask confirmation
- // Hide the board, because otherwise it could be revealed (TODO?)
- let boardDiv = document.querySelector(".game");
+ // Hide the board, because otherwise it could reveal infos
boardDiv.style.visibility = "hidden";
- if (
- !confirm(
- this.st.tr["Move played:"] + " " +
- getFullNotation(move) + "\n" +
- this.st.tr["Are you sure?"]
- )
- ) {
- this.$refs["basegame"].cancelLastMove();
- boardDiv.style.visibility = "visible";
- return;
- }
- if (!!data.score && data.score != "*")
- this.gameOver(data.score, null, afterSetScore);
- else afterSetScore();
+ this.moveNotation = getFullNotation(move);
}
+ document.getElementById("modalConfirm").checked = true;
}
else {
// Normal situation
}
},
cancelMove: function() {
+ let boardDiv = document.querySelector(".game");
+ if (boardDiv.style.visibility == "hidden")
+ boardDiv.style.visibility = "visible";
document.getElementById("modalConfirm").checked = false;
this.$refs["basegame"].cancelLastMove();
},
gameOver: function(score, scoreMsg, callback) {
this.game.score = score;
if (!scoreMsg) scoreMsg = getScoreMessage(score);
+ this.game.scoreMsg = scoreMsg;
this.$set(this.game, "scoreMsg", scoreMsg);
const myIdx = this.game.players.findIndex(p => {
return p.sid == this.st.user.sid || p.uid == this.st.user.id;
.diagram
margin: 0 auto
- max-width: 400px
- // width: 100% required for Firefox
width: 100%
#buttonsConfirm
projects / vchess.git / blobdiff