From: Benjamin Auder <benjamin.auder@somewhere> Date: Sun, 26 Jan 2020 00:33:55 +0000 (+0100) Subject: Get rid of ugly this.... calls X-Git-Url: https://git.auder.net/variants/current/css/doc/vendor/common.css?a=commitdiff_plain;h=7e355d68b5962aad106e28a9d669a47f3cbec43a;p=vchess.git Get rid of ugly this.... calls --- diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index f10420d7..470488f6 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -1,12 +1,11 @@ <template lang="pug"> -.row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - input#modalEog.modal(type="checkbox") - div(role="dialog" aria-labelledby="eogMessage") - .card.smallpad.small-modal.text-center - label.modal-close(for="modalEog") - h3#eogMessage.section {{ endgameMessage }} - // TODO: or "BoardHex" if this.game.vname in "Hexagonal..." +div + input#modalEog.modal(type="checkbox") + div(role="dialog" aria-labelledby="eogMessage") + .card.smallpad.small-modal.text-center + label.modal-close(for="modalEog") + h3#eogMessage.section {{ endgameMessage }} + .float70 //TODO: use mini-css predefined styles Board(:vr="vr" :last-move="lastMove" :analyze="analyze" :user-color="game.mycolor" :orientation="orientation" :vname="game.vname" @play-move="play") @@ -16,15 +15,14 @@ button(@click="flip") Flip button(@click="gotoBegin") GotoBegin button(@click="gotoEnd") GotoEnd - #messageDiv.section-content(v-if="game.type=='corr'") {{ curMoveMessage() }} - #fenDiv.section-content(v-if="showFen && !!vr") - p#fenString.text-center {{ vr.getFen() }} - #pgnDiv.section-content + #fenDiv(v-if="showFen && !!vr") + p {{ vr.getFen() }} + #pgnDiv a#download(href="#") - button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }} - div#movesList - MoveList(v-if="showMoves" - :moves="moves" :cursor="cursor" @goto-move="gotoMove") + button(@click="download") {{ st.tr["Download PGN"] }} + .float30 //TODO: should be optional (adjust widths dynamically) + MoveList(v-if="showMoves" + :moves="moves" :cursor="cursor" @goto-move="gotoMove") </template> <script> @@ -59,8 +57,12 @@ export default { "game.fenStart": function() { this.re_setVariables(); }, + // Received a new move to play: + "game.moveToPlay": function() { + this.play(this.game.moveToPlay, "receive", this.game.vname=="Dark"); + }, "game.score": function() { - this.score = this.game.score; + this.endGame(this.game.score, this.game.scoreMsg); }, }, computed: { @@ -100,15 +102,6 @@ export default { this.cursor = L-1; this.lastMove = (L > 0 ? this.moves[L-1] : null); }, - // For corr games, potential message with each move sent - curMoveMessage: function() { - if (this.cursor < 0) - return ""; - return this.game.moves[this.cursor].message || ""; - }, - setCurrentMessage: function(message) { - this.game.moves[this.game.moves.length-1].message = message; - }, download: function() { const content = this.getPgn(); // Prepare and trigger download link diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 4da64271..7257b218 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -237,13 +237,6 @@ export default { return h( 'div', { - 'class': { - "col-sm-12": true, - "col-md-10": true, - "col-md-offset-1": true, - "col-lg-8": true, - "col-lg-offset-2": true, - }, // NOTE: click = mousedown + mouseup on: { mousedown: this.mousedown, diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 0d9e8d34..cebbff47 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -3,11 +3,6 @@ export default { name: 'my-move-list', props: ["moves","cursor"], - data: function() { - return { - something: "", //TODO? - }; - }, render(h) { if (this.moves.length == 0) return; @@ -73,10 +68,14 @@ export default { tableRow.children = moveCells; tableContent.push(tableRow); const movesTable = h( - "table", - { }, - tableContent - ); + "div", + { }, + [h( + "table", + { }, + tableContent + )] + ); return movesTable; }, methods: { diff --git a/client/src/stylesheets/_users.sass b/client/src/stylesheets/_users.sass index 69bc438d..35ebdb59 100644 --- a/client/src/stylesheets/_users.sass +++ b/client/src/stylesheets/_users.sass @@ -6,4 +6,4 @@ button#submit margin-right: 7px #dialog - clear: both + clear: both diff --git a/client/src/stylesheets/layout.sass b/client/src/stylesheets/layout.sass index b7446750..81427718 100644 --- a/client/src/stylesheets/layout.sass +++ b/client/src/stylesheets/layout.sass @@ -14,19 +14,19 @@ body padding: 0 overflow: hidden -.row - div - padding: 0 - .section-content - * - margin-left: auto - margin-right: auto - max-width: 767px - figure.diagram-container - max-width: 1000px - @media screen and (max-width: 767px) - max-width: 100% - padding: 0 5px +div + padding: 0 + +.section-content + * + margin-left: auto + margin-right: auto + max-width: 767px + figure.diagram-container + max-width: 1000px + @media screen and (max-width: 767px) + max-width: 100% + padding: 0 5px @media screen and (max-width: 767px) .button-group diff --git a/client/src/utils/gameStorage.js b/client/src/utils/gameStorage.js index 668a2306..b7cf85c1 100644 --- a/client/src/utils/gameStorage.js +++ b/client/src/utils/gameStorage.js @@ -81,6 +81,7 @@ export const GameStorage = { move: obj.move, //may be undefined... fen: obj.fen, + message: obj.message, score: obj.score, drawOffer: obj.drawOffer, } diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 2751b56b..5199154a 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -9,6 +9,7 @@ button(@click="offerDraw") Draw button(@click="abortGame") Abort button(@click="resign") Resign + div(v-if="game.type=='corr'") {{ game.corrMsg }} textarea(v-if="game.score=='*'" v-model="corrMsg") Chat(:players="game.players") </template> @@ -73,10 +74,7 @@ export default { { clearInterval(clockUpdate); if (countdown < 0) - { - this.$refs["basegame"].endGame( - this.vr.turn=="w" ? "0-1" : "1-0", "Time"); - } + this.setScore(this.vr.turn=="w" ? "0-1" : "1-0", "Time"); } else { @@ -196,9 +194,8 @@ export default { game:myGame, target:data.from})); break; case "newmove": - // NOTE: this call to play() will trigger processMove() - this.$refs["basegame"].play(data.move, - "receive", this.game.vname!="Dark" ? "animate" : null); + this.corrMsg = data.move.message; //may be empty + this.game.moveToPlay = data.move; break; case "lastate": //got opponent infos about last move { @@ -209,14 +206,13 @@ export default { break; } case "resign": - this.$refs["basegame"].endGame( - (data.side=="b" ? "1-0" : "0-1"), "Resign"); + this.setScore(data.side=="b" ? "1-0" : "0-1", "Resign"); break; case "abort": - this.$refs["basegame"].endGame("?", "Abort"); + this.setScore("?", "Abort"); break; case "draw": - this.$refs["basegame"].endGame("1/2", "Mutual agreement"); + this.setScore("1/2", "Mutual agreement"); break; case "drawoffer": this.drawOffer = "received"; //TODO: observers don't know who offered draw @@ -247,19 +243,22 @@ export default { if (data.movesCount > L) { // Just got last move from him - this.$refs["basegame"].play(data.lastMove, - "receive", this.game.vname!="Dark" ? "animate" : null); + this.game.moveToPlay = data.lastMove; if (data.score != "*" && this.game.score == "*") { // Opponent resigned or aborted game, or accepted draw offer // (this is not a stalemate or checkmate) - this.$refs["basegame"].endGame(data.score, "Opponent action"); + this.setScore(data.score, "Opponent action"); } this.game.clocks = data.clocks; //TODO: check this? if (!!data.lastMove.draw) this.drawOffer = "received"; } }, + setScore: function(score, message) { + this.game.scoreMsg = message; + this.game.score = score; + }, offerDraw: function() { if (this.drawOffer == "received") { @@ -269,7 +268,7 @@ export default { if (p.sid != this.st.user.sid) this.st.conn.send(JSON.stringify({code:"draw", target:p.sid})); }); - this.$refs["basegame"].endGame("1/2", "Mutual agreement"); + this.setScore("1/2", "Mutual agreement"); } else if (this.drawOffer == "sent") { @@ -293,8 +292,7 @@ export default { abortGame: function() { if (!confirm(this.st.tr["Terminate game?"])) return; - // Next line will trigger a "gameover" event, bubbling up till here - this.$refs["basegame"].endGame("?", "Abort"); + this.setScore("?", "Abort"); this.people.forEach(p => { if (p.sid != this.st.user.sid) { @@ -315,9 +313,7 @@ export default { side:this.game.mycolor, target:p.sid})); } }); - // Next line will trigger a "gameover" event, bubbling up till here - this.$refs["basegame"].endGame( - this.game.mycolor=="w" ? "0-1" : "1-0", "Resign"); + this.setScore(this.game.mycolor=="w" ? "0-1" : "1-0", "Resign"); }, // 3 cases for loading a game: // - from indexedDB (running or completed live game I play) @@ -462,12 +458,6 @@ export default { })); } }); - if (this.game.type == "corr" && this.corrMsg != "") - { - // Add message to last move in BaseGame: - // TODO: not very good style... - this.$refs["basegame"].setCurrentMessage(this.corrMsg); - } } else addTime = move.addTime; //supposed transmitted @@ -481,10 +471,10 @@ export default { GameStorage.update(this.gameRef.id, { fen: move.fen, + message: this.corrMsg, move: { squares: filtered_move, - message: this.corrMsg, played: Date.now(), //TODO: on server? idx: this.game.moves.length, }, @@ -511,9 +501,6 @@ export default { //TODO: (Vue3) just this.game.clocks[colorIdx] += addTime; this.$set(this.game.clocks, colorIdx, this.game.clocks[colorIdx] + addTime); this.game.initime[nextIdx] = Date.now(); - // Finally reset curMoveMessage if needed - if (this.game.type == "corr" && move.color == this.game.mycolor) - this.corrMsg = ""; }, gameOver: function(score) { this.game.mode = "analyze";