X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FMyGames.vue;h=1362cb24176c4b8876f44e99157a4db57cb2e403;hb=585d095517ca2aedab8ad125cc7c39b90e13d5cc;hp=5148c3cfd00ab5f21445fecec10d1b673c74cb83;hpb=e57c4de4148d43e7635e09adcde4e56585aea303;p=vchess.git diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue index 5148c3cf..1362cb24 100644 --- a/client/src/views/MyGames.vue +++ b/client/src/views/MyGames.vue @@ -8,12 +8,14 @@ main button.tabbtn#corrGames(@click="setDisplay('corr',$event)") | {{ st.tr["Correspondance games"] }} GameList( + ref="livegames" v-show="display=='live'" :games="liveGames" @show-game="showGame" @abortgame="abortGame" ) GameList( + ref="corrgames" v-show="display=='corr'" :games="corrGames" @show-game="showGame" @@ -45,35 +47,13 @@ export default { }; }, created: function() { - GameStorage.getAll(true, localGames => { - localGames.forEach(g => g.type = "live"); - this.liveGames = localGames; - }); - if (this.st.user.id > 0) { - ajax( - "/games", - "GET", - { - data: { uid: this.st.user.id }, - success: (res) => { - let serverGames = res.games.filter(g => { - const mySide = - g.players[0].uid == this.st.user.id - ? "White" - : "Black"; - return !g["deletedBy" + mySide]; - }); - serverGames.forEach(g => g.type = "corr"); - this.corrGames = serverGames; - } - } - ); - } // Initialize connection this.connexionString = params.socketUrl + "/?sid=" + this.st.user.sid + + "&id=" + + this.st.user.id + "&tmpId=" + getRandString() + "&page=" + @@ -83,8 +63,54 @@ export default { this.conn.onclose = this.socketCloseListener; }, mounted: function() { - const showType = localStorage.getItem("type-myGames") || "live"; - this.setDisplay(showType); + const adjustAndSetDisplay = () => { + // showType is the last type viwed by the user (default) + let showType = localStorage.getItem("type-myGames") || "live"; + // Live games, my turn: highest priority: + if (this.liveGames.some(g => !!g.myTurn)) showType = "live"; + // Then corr games, my turn: + else if (this.corrGames.some(g => !!g.myTurn)) showType = "corr"; + else { + // If a listing is empty, try showing the other (if non-empty) + const types = ["corr", "live"]; + for (let i of [0,1]) { + if ( + this[types[i] + "Games"].length > 0 && + this[types[1-i] + "Games"].length == 0 + ) { + showType = types[i]; + } + } + } + this.setDisplay(showType); + }; + GameStorage.getAll(localGames => { + localGames.forEach(g => g.type = "live"); + this.decorate(localGames); + this.liveGames = localGames; + if (this.st.user.id > 0) { + ajax( + "/games", + "GET", + { + data: { uid: this.st.user.id }, + success: (res) => { + let serverGames = res.games.filter(g => { + const mySide = + g.players[0].uid == this.st.user.id + ? "White" + : "Black"; + return !g["deletedBy" + mySide]; + }); + serverGames.forEach(g => g.type = "corr"); + this.decorate(serverGames); + this.corrGames = serverGames; + adjustAndSetDisplay(); + } + } + ); + } else adjustAndSetDisplay(); + }); }, beforeDestroy: function() { this.conn.send(JSON.stringify({code: "disconnect"})); @@ -100,33 +126,97 @@ export default { elt.previousElementSibling.classList.remove("active"); else elt.nextElementSibling.classList.remove("active"); }, - // TODO: classifyObject is redundant (see Hall.vue) - classifyObject: function(o) { - return o.cadence.indexOf("d") === -1 ? "live" : "corr"; + tryShowNewsIndicator: function(type) { + if ( + (type == "live" && this.display == "corr") || + (type == "corr" && this.display == "live") + ) { + document + .getElementById(type + "Games") + .classList.add("somethingnew"); + } }, - showGame: function(game) { - // TODO: "isMyTurn" is duplicated (see GameList component). myColor also - const isMyTurn = (g) => { - if (g.score != "*") return false; - const myColor = - g.players[0].uid == this.st.user.id || - g.players[0].sid == this.st.user.sid - ? "w" - : "b"; - const rem = g.movesCount % 2; - return ( - (rem == 0 && myColor == "w") || - (rem == 1 && myColor == "b") - ); + // Called at loading to augment games with myColor + myTurn infos + decorate: function(games) { + games.forEach(g => { + g.myColor = + (g.type == "corr" && g.players[0].uid == this.st.user.id) || + (g.type == "live" && g.players[0].sid == this.st.user.sid) + ? 'w' + : 'b'; + // If game is over, myTurn doesn't exist: + if (g.score == "*") { + const rem = g.movesCount % 2; + if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b')) + g.myTurn = true; + } + }); + }, + socketMessageListener: function(msg) { + const data = JSON.parse(msg.data); + let gamesArrays = { + "corr": this.corrGames, + "live": this.liveGames }; - if (game.type == "live" || !isMyTurn(game)) { + switch (data.code) { + case "notifyturn": + case "notifyscore": { + const info = data.data; + const type = (!!parseInt(info.gid) ? "corr" : "live"); + let game = gamesArrays[type].find(g => g.id == info.gid); + // "notifything" --> "thing": + const thing = data.code.substr(6); + game[thing] = info[thing]; + if (thing == "turn") { + game.myTurn = !game.myTurn; + if (game.myTurn) this.tryShowNewsIndicator(type); + } + // TODO: forcing refresh like that is ugly and wrong. + // How to do it cleanly? + this.$refs[type + "games"].$forceUpdate(); + break; + } + case "notifynewgame": { + const gameInfo = data.data; + // st.variants might be uninitialized, + // if unlucky and newgame right after connect: + const v = this.st.variants.find(v => v.id == gameInfo.vid); + const vname = !!v ? v.name : ""; + const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live"); + let game = Object.assign( + { + vname: vname, + type: type, + score: "*", + created: Date.now() + }, + gameInfo + ); + game.myTurn = + (type == "corr" && game.players[0].uid == this.st.user.id) || + (type == "live" && game.players[0].sid == this.st.user.sid); + gamesArrays[type].push(game); + if (game.myTurn) this.tryShowNewsIndicator(type); + // TODO: cleaner refresh + this.$refs[type + "games"].$forceUpdate(); + break; + } + } + }, + socketCloseListener: function() { + this.conn = new WebSocket(this.connexionString); + this.conn.addEventListener("message", this.socketMessageListener); + this.conn.addEventListener("close", this.socketCloseListener); + }, + showGame: function(game) { + if (game.type == "live" || !game.myTurn) { this.$router.push("/game/" + game.id); return; } // It's my turn in this game. Are there others? let nextIds = ""; - let otherCorrGamesMyTurn = this.corrGames.filter( - g => g.id != game.id && isMyTurn(g)); + let otherCorrGamesMyTurn = this.corrGames.filter(g => + g.id != game.id && !!g.myTurn); if (otherCorrGamesMyTurn.length > 0) { nextIds += "/?next=["; otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; }); @@ -170,30 +260,6 @@ export default { } ); } - }, - socketMessageListener: function(msg) { - const data = JSON.parse(msg.data); - if (data.code == "changeturn") { - let games = !!parseInt(data.gid) - ? this.corrGames - : this.liveGames; - // NOTE: new move itself is not received, because it wouldn't be used. - let g = games.find(g => g.id == data.gid); - this.$set(g, "movesCount", g.movesCount + 1); - if ( - (g.type == "live" && this.display == "corr") || - (g.type == "corr" && this.display == "live") - ) { - document - .getElementById(g.type + "Games") - .classList.add("somethingnew"); - } - } - }, - socketCloseListener: function() { - this.conn = new WebSocket(this.connexionString); - this.conn.addEventListener("message", this.socketMessageListener); - this.conn.addEventListener("close", this.socketCloseListener); } } };