From 28b32b4fc7c23b1c72bed68e1897576c5be46c3d Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Tue, 10 Mar 2020 20:54:10 +0100 Subject: [PATCH] Some fixes and enhancements as suggested on Discord --- TODO | 5 + client/public/images/icons/SOURCE | 1 + client/public/images/icons/delete.svg | 1 + client/src/components/BaseGame.vue | 1 + client/src/components/Board.vue | 143 ++++++++----- client/src/components/GameList.vue | 6 + client/src/components/MoveList.vue | 1 + client/src/translations/en.js | 4 + client/src/translations/es.js | 4 + client/src/translations/fr.js | 4 + client/src/variants/Eightpieces.js | 117 ++++++----- client/src/views/Game.vue | 2 +- client/src/views/Hall.vue | 290 ++++++++++++++++++-------- client/src/views/MyGames.vue | 26 +-- server/sockets.js | 6 +- 15 files changed, 402 insertions(+), 209 deletions(-) create mode 100644 client/public/images/icons/delete.svg diff --git a/TODO b/TODO index 76349413..8ac83a08 100644 --- a/TODO +++ b/TODO @@ -34,3 +34,8 @@ Possibles passes : soit à une pièce, soit sur une case. --> selon le mode de déplacement standard (donc tout droit pour les pions) Pas de notion d'échec ou de mat (?) Si une pièce est mat elle donne le ballon (?) + +Landing pieces from empty board: +https://www.chessvariants.com/diffsetup.dir/unachess.html + +Rugby http://www.echecspourtous.com/?page_id=7945 diff --git a/client/public/images/icons/SOURCE b/client/public/images/icons/SOURCE index b1c82815..eeb51d3e 100644 --- a/client/public/images/icons/SOURCE +++ b/client/public/images/icons/SOURCE @@ -12,3 +12,4 @@ https://www.flaticon.com/free-icon/right_565870?term=forward&page=1&position=31 https://www.flaticon.com/free-icon/download_724933?term=download&page=1&position=3 https://www.flaticon.com/free-icon/resize_512182?term=resize&page=1&position=49 https://www.flaticon.com/free-icon/clear_565313?term=delete&page=1&position=33 +https://www.flaticon.com/free-icon/clear_1632708?term=delete&page=1&position=3 diff --git a/client/public/images/icons/delete.svg b/client/public/images/icons/delete.svg new file mode 100644 index 00000000..875ce27c --- /dev/null +++ b/client/public/images/icons/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 0b6fa055..0d5a3bbc 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -516,6 +516,7 @@ export default { display: inline-block #controls + user-select: none margin: 0 auto text-align: center display: flex diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 19a5e321..5080e846 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -23,7 +23,8 @@ export default { possibleMoves: [], //filled after each valid click/dragstart choices: [], //promotion pieces, or checkered captures... (as moves) selectedPiece: null, //moving piece (or clicked piece) - start: {}, //pixels coordinates + id of starting square (click or drag) + start: null, //pixels coordinates + id of starting square (click or drag) + click: "", settings: store.state.settings }; }, @@ -351,76 +352,101 @@ export default { }, methods: { mousedown: function(e) { - // Abort if a piece is already being processed, or target is not a piece. - // NOTE: just looking at classList[0] because piece is the first assigned class - if (!!this.selectedPiece || e.target.classList[0] != "piece") return; - e.preventDefault(); //disable native drag & drop - let parent = e.target.parentNode; //the surrounding square - // Next few lines to center the piece on mouse cursor - let rect = parent.getBoundingClientRect(); - this.start = { - x: rect.x + rect.width / 2, - y: rect.y + rect.width / 2, - id: parent.id - }; - this.selectedPiece = e.target.cloneNode(); - let spStyle = this.selectedPiece.style; - spStyle.position = "absolute"; - spStyle.top = 0; - spStyle.display = "inline-block"; - spStyle.zIndex = 3000; - const startSquare = getSquareFromId(parent.id); - this.possibleMoves = []; - const color = this.analyze ? this.vr.turn : this.userColor; - if (this.vr.canIplay(color, startSquare)) - this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); - // Next line add moving piece just after current image - // (required for Crazyhouse reserve) - parent.insertBefore(this.selectedPiece, e.target.nextSibling); + e.preventDefault(); + if (!this.start) { + // Start square must contain a piece. + // NOTE: classList[0] is enough: 'piece' is the first assigned class + if (e.target.classList[0] != "piece") return; + let parent = e.target.parentNode; //surrounding square + // Show possible moves if current player allowed to play + const startSquare = getSquareFromId(parent.id); + this.possibleMoves = []; + const color = this.analyze ? this.vr.turn : this.userColor; + if (this.vr.canIplay(color, startSquare)) + this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); + // For potential drag'n drop, remember start coordinates + // (to center the piece on mouse cursor) + let rect = parent.getBoundingClientRect(); + this.start = { + x: rect.x + rect.width / 2, + y: rect.y + rect.width / 2, + id: parent.id + }; + // Add the moving piece to the board, just after current image + this.selectedPiece = e.target.cloneNode(); + Object.assign( + this.selectedPiece.style, + { + position: "absolute", + top: 0, + display: "inline-block", + zIndex: 3000 + } + ); + parent.insertBefore(this.selectedPiece, e.target.nextSibling); + } else { + this.processMoveAttempt(e); + } }, mousemove: function(e) { if (!this.selectedPiece) return; + e.preventDefault(); // There is an active element: move it around const [offsetX, offsetY] = this.mobileBrowser ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] : [e.clientX, e.clientY]; - this.selectedPiece.style.left = offsetX - this.start.x + "px"; - this.selectedPiece.style.top = offsetY - this.start.y + "px"; + Object.assign( + this.selectedPiece.style, + { + left: offsetX - this.start.x + "px", + top: offsetY - this.start.y + "px" + } + ); }, mouseup: function(e) { if (!this.selectedPiece) return; - // There is an active element: obtain the move from start and end squares - this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords + e.preventDefault(); + // Drag'n drop. Selected piece is no longer needed: + this.selectedPiece.parentNode.removeChild(this.selectedPiece); + delete this.selectedPiece; + this.selectedPiece = null; + this.processMoveAttempt(e); + }, + processMoveAttempt: function(e) { + // Obtain the move from start and end squares const [offsetX, offsetY] = this.mobileBrowser ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] : [e.clientX, e.clientY]; let landing = document.elementFromPoint(offsetX, offsetY); - this.selectedPiece.style.zIndex = 3000; // Next condition: classList.contains(piece) fails because of marks while (landing.tagName == "IMG") landing = landing.parentNode; - if (this.start.id == landing.id) - // One or multi clicks on same piece + if (this.start.id == landing.id) { + if (this.click == landing.id) { + // Second click on same square: cancel current move + this.possibleMoves = []; + this.start = null; + this.click = ""; + } else this.click = landing.id; return; + } + this.start = null; // OK: process move attempt, landing is a square node let endSquare = getSquareFromId(landing.id); let moves = this.findMatchingMoves(endSquare); this.possibleMoves = []; if (moves.length > 1) this.choices = moves; else if (moves.length == 1) this.play(moves[0]); - // Else: impossible move - this.selectedPiece.parentNode.removeChild(this.selectedPiece); - delete this.selectedPiece; - this.selectedPiece = null; + // else: forbidden move attempt }, findMatchingMoves: function(endSquare) { // Run through moves list and return the matching set (if promotions...) - let moves = []; - this.possibleMoves.forEach(function(m) { - if (endSquare[0] == m.end.x && endSquare[1] == m.end.y) moves.push(m); - }); - return moves; + return ( + this.possibleMoves.filter(m => { + return (endSquare[0] == m.end.x && endSquare[1] == m.end.y); + }) + ); }, play: function(move) { this.$emit("play-move", move); @@ -442,12 +468,14 @@ export default { // NOTE: no variants with reserve of size != 8 .game + user-select: none width: 100% margin: 0 .board cursor: pointer #choices + user-select: none margin: 0 position: absolute z-index: 300 @@ -465,14 +493,9 @@ export default { img.ghost position: absolute - opacity: 0.4 + opacity: 0.5 top: 0 -.highlight-light - background-color: rgba(0, 204, 102, 0.7) !important -.highlight-dark - background-color: rgba(0, 204, 102, 0.9) !important - .incheck-light background-color: rgba(204, 51, 0, 0.7) !important .incheck-dark @@ -489,7 +512,25 @@ img.ghost background-color: #6f8f57; .light-square.chesstempo - background-color: #fdfdfd; + background-color: #dfdfdf; .dark-square.chesstempo - background-color: #88a0a8; + background-color: #7287b6; + +// TODO: no predefined highlight colors, but layers. How? + +.light-square.lichess.highlight-light + background-color: #cdd26a !important +.dark-square.lichess.highlight-dark + background-color: #aaa23a !important + +.light-square.chesscom.highlight-light + background-color: #f7f783 !important +.dark-square.chesscom.highlight-dark + background-color: #bacb44 !important + +.light-square.chesstempo.highlight-light + background-color: #9f9fff !important +.dark-square.chesstempo.highlight-dark + background-color: #557fff !important + diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue index 5396d13c..354cfa03 100644 --- a/client/src/components/GameList.vue +++ b/client/src/components/GameList.vue @@ -61,6 +61,12 @@ export default { remGames.forEach(g => { if (g.created < minCreated) minCreated = g.created; if (g.created > maxCreated) maxCreated = g.created; + g.priority = 0; + if (g.score == "*") { + g.priority++; + if (!!g.myColor) g.priority++; + if (!!g.myTurn) g.priority++; + } }); const deltaCreated = maxCreated - minCreated; return remGames.sort((g1, g2) => { diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 6f2eb317..eb47dc90 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -160,6 +160,7 @@ export default { diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue index 88b69065..5faae8a5 100644 --- a/client/src/views/MyGames.vue +++ b/client/src/views/MyGames.vue @@ -114,21 +114,19 @@ export default { .classList.add("somethingnew"); } }, - // Called at loading to augment games with priority + myTurn infos + // Called at loading to augment games with myColor + myTurn infos decorate: function(games) { games.forEach(g => { - g.priority = 0; + // If game is over, myColor and myTurn are ignored: if (g.score == "*") { - g.priority++; - const myColor = + 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'; const rem = g.movesCount % 2; - if ((rem == 0 && myColor == 'w') || (rem == 1 && myColor == 'b')) { + if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b')) { g.myTurn = true; - g.priority++; } } }); @@ -148,11 +146,7 @@ export default { // "notifything" --> "thing": const thing = data.code.substr(6); game[thing] = info[thing]; - if (thing == "score") game.priority = 0; - else { - game.priority = 3 - game.priority; //toggle turn - game.myTurn = !game.myTurn; - } + if (thing == "turn") game.myTurn = !game.myTurn; this.$forceUpdate(); this.tryShowNewsIndicator(type); break; @@ -173,15 +167,9 @@ export default { }, gameInfo ); - // Compute priority: - game.priority = 1; //at least: my running game - if ( + game.myTurn = (type == "corr" && game.players[0].uid == this.st.user.id) || - (type == "live" && game.players[0].sid == this.st.user.sid) - ) { - game.priority++; - game.myTurn = true; - } + (type == "live" && game.players[0].sid == this.st.user.sid); gamesArrays[type].push(game); this.$forceUpdate(); this.tryShowNewsIndicator(type); diff --git a/server/sockets.js b/server/sockets.js index d96b6967..c8f3c7f8 100644 --- a/server/sockets.js +++ b/server/sockets.js @@ -165,7 +165,7 @@ module.exports = function(wss) { // but the requested resource can be from any tmpId (except current!) case "askidentity": case "asklastate": - case "askchallenge": + case "askchallenges": case "askgame": case "askfullgame": { const pg = obj.page || page; //required for askidentity and askgame @@ -201,7 +201,7 @@ module.exports = function(wss) { // Notify all room: mostly game events case "newchat": case "newchallenge": - case "deletechallenge": + case "deletechallenge_s": case "newgame": case "resign": case "abort": @@ -297,7 +297,7 @@ module.exports = function(wss) { // Passing, relaying something: from isn't needed, // but target is fully identified (sid + tmpId) - case "challenge": + case "challenges": case "fullgame": case "game": case "identity": -- 2.44.0