From cf2343cee5729c011770ace6d5b4f79d1ac3a2b6 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Fri, 1 Feb 2019 00:19:13 +0100 Subject: [PATCH] Draft of Rules view (not working) with computer play --- client/icons_TODO | 4 - client/next_src/components/board.js | 357 ------------ client/next_src/components/chat.js | 79 --- client/next_src/components/game.js | 551 ------------------ client/next_src/views/rules.js | 80 --- client/src/App.vue | 12 +- client/src/components/Board.vue | 359 ++++++++++++ client/src/components/Chat.vue | 71 +++ client/src/components/Game.vue | 538 +++++++++++++++++ .../components/MoveList.vue} | 7 +- client/src/router.js | 16 +- client/src/translations/en.js | 2 +- client/src/translations/fr.js | 2 +- client/src/views/{Home.vue => Hall.vue} | 2 +- client/src/views/Rules.vue | 79 +++ client/src/views/Variants.vue | 2 +- 16 files changed, 1066 insertions(+), 1095 deletions(-) delete mode 100644 client/next_src/components/board.js delete mode 100644 client/next_src/components/chat.js delete mode 100644 client/next_src/components/game.js delete mode 100644 client/next_src/views/rules.js create mode 100644 client/src/components/Board.vue create mode 100644 client/src/components/Chat.vue create mode 100644 client/src/components/Game.vue rename client/{next_src/components/moveList.js => src/components/MoveList.vue} (97%) rename client/src/views/{Home.vue => Hall.vue} (99%) create mode 100644 client/src/views/Rules.vue diff --git a/client/icons_TODO b/client/icons_TODO index 2ded8657..d6ed03c7 100644 --- a/client/icons_TODO +++ b/client/icons_TODO @@ -25,7 +25,3 @@ send settings user x - -Use raw-loader to show rules (+ post-processing) -document.getElementById("modalWelcome").innerHTML = - require("raw-loader!pug-plain-loader!@/welcome/" + this.state.lang + ".pug"); diff --git a/client/next_src/components/board.js b/client/next_src/components/board.js deleted file mode 100644 index cd3373c4..00000000 --- a/client/next_src/components/board.js +++ /dev/null @@ -1,357 +0,0 @@ -// This can work for squared boards (2 or 4 players), with some adaptations (TODO) -// TODO: for 3 players, write a "board3.js" -Vue.component('my-board', { - // Last move cannot be guessed from here, and is required to highlight squares - // vr: object to check moves, print board... - // mode: HH, HC or analyze - // userColor: for mode HH or HC - props: ["vr","lastMove","mode","orientation","userColor"], - data: function () { - return { - hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"), - bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo - possibleMoves: [], //filled after each valid click/dragstart - choices: [], //promotion pieces, or checkered captures... (as moves) - selectedPiece: null, //moving piece (or clicked piece) - incheck: [], - start: {}, //pixels coordinates + id of starting square (click or drag) - }; - }, - render(h) { - if (!this.vr) - return; - const [sizeX,sizeY] = [V.size.x,V.size.y]; - // Precompute hints squares to facilitate rendering - let hintSquares = doubleArray(sizeX, sizeY, false); - this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; }); - // Also precompute in-check squares - let incheckSq = doubleArray(sizeX, sizeY, false); - this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; }); - const squareWidth = 40; //TODO: compute this - const choices = h( - 'div', - { - attrs: { "id": "choices" }, - 'class': { 'row': true }, - style: { - "display": this.choices.length>0?"block":"none", - "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px", - "width": (this.choices.length * squareWidth) + "px", - "height": squareWidth + "px", - }, - }, - this.choices.map(m => { //a "choice" is a move - return h('div', - { - 'class': { - 'board': true, - ['board'+sizeY]: true, - }, - style: { - 'width': (100/this.choices.length) + "%", - 'padding-bottom': (100/this.choices.length) + "%", - }, - }, - [h('img', - { - attrs: { "src": '/images/pieces/' + - V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' }, - 'class': { 'choice-piece': true }, - on: { - "click": e => { this.play(m); this.choices=[]; }, - // NOTE: add 'touchstart' event to fix a problem on smartphones - "touchstart": e => { this.play(m); this.choices=[]; }, - }, - }) - ] - ); - }) - ); - // Create board element (+ reserves if needed by variant or mode) - const lm = this.lastMove; - const showLight = this.hints && variant.name != "Dark"; - const gameDiv = h( - 'div', - { - 'class': { - 'game': true, - 'clearer': true, - }, - }, - [...Array(sizeX).keys()].map(i => { - let ci = (this.orientation=='w' ? i : sizeX-i-1); - return h( - 'div', - { - 'class': { - 'row': true, - }, - style: { 'opacity': this.choices.length>0?"0.5":"1" }, - }, - [...Array(sizeY).keys()].map(j => { - let cj = (this.orientation=='w' ? j : sizeY-j-1); - let elems = []; - if (this.vr.board[ci][cj] != V.EMPTY && (variant.name!="Dark" - || this.gameOver || this.mode == "analyze" - || this.vr.enlightened[this.userColor][ci][cj])) - { - elems.push( - h( - 'img', - { - 'class': { - 'piece': true, - 'ghost': !!this.selectedPiece - && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj, - }, - attrs: { - src: "/images/pieces/" + - V.getPpath(this.vr.board[ci][cj]) + ".svg", - }, - } - ) - ); - } - if (this.hints && hintSquares[ci][cj]) - { - elems.push( - h( - 'img', - { - 'class': { - 'mark-square': true, - }, - attrs: { - src: "/images/mark.svg", - }, - } - ) - ); - } - return h( - 'div', - { - 'class': { - 'board': true, - ['board'+sizeY]: true, - 'light-square': (i+j)%2==0, - 'dark-square': (i+j)%2==1, - [this.bcolor]: true, - 'in-shadow': variant.name=="Dark" && !this.gameOver - && this.mode != "analyze" - && !this.vr.enlightened[this.userColor][ci][cj], - 'highlight': showLight && !!lm && lm.end.x == ci && lm.end.y == cj, - 'incheck': showLight && incheckSq[ci][cj], - }, - attrs: { - id: getSquareId({x:ci,y:cj}), - }, - }, - elems - ); - }) - ); - }), choices] - ); - let elementArray = [choices, gameDiv]; - if (!!this.vr.reserve) - { - const shiftIdx = (this.userColor=="w" ? 0 : 1); - let myReservePiecesArray = []; - for (let i=0; i<V.RESERVE_PIECES.length; i++) - { - myReservePiecesArray.push(h('div', - { - 'class': {'board':true, ['board'+sizeY]:true}, - attrs: { id: getSquareId({x:sizeX+shiftIdx,y:i}) } - }, - [ - h('img', - { - 'class': {"piece":true, "reserve":true}, - attrs: { - "src": "/images/pieces/" + - this.vr.getReservePpath(this.userColor,i) + ".svg", - } - }), - h('sup', - {"class": { "reserve-count": true } }, - [ this.vr.reserve[this.userColor][V.RESERVE_PIECES[i]] ] - ) - ])); - } - let oppReservePiecesArray = []; - const oppCol = V.GetOppCol(this.userColor); - for (let i=0; i<V.RESERVE_PIECES.length; i++) - { - oppReservePiecesArray.push(h('div', - { - 'class': {'board':true, ['board'+sizeY]:true}, - attrs: { id: getSquareId({x:sizeX+(1-shiftIdx),y:i}) } - }, - [ - h('img', - { - 'class': {"piece":true, "reserve":true}, - attrs: { - "src": "/images/pieces/" + - this.vr.getReservePpath(oppCol,i) + ".svg", - } - }), - h('sup', - {"class": { "reserve-count": true } }, - [ this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] ] - ) - ])); - } - let reserves = h('div', - { - 'class':{ - 'game': true, - "reserve-div": true, - }, - }, - [ - h('div', - { - 'class': { - 'row': true, - "reserve-row-1": true, - }, - }, - myReservePiecesArray - ), - h('div', - { 'class': { 'row': true }}, - oppReservePiecesArray - ) - ] - ); - elementArray.push(reserves); - } - 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, - mousemove: this.mousemove, - mouseup: this.mouseup, - touchstart: this.mousedown, - touchmove: this.mousemove, - touchend: this.mouseup, - }, - }, - elementArray - ); - }, - methods: { - mousedown: function(e) { - e = e || window.event; - let ingame = false; - let elem = e.target; - while (!ingame && elem !== null) - { - if (elem.classList.contains("game")) - { - ingame = true; - break; - } - elem = elem.parentElement; - } - if (!ingame) //let default behavior (click on button...) - return; - e.preventDefault(); //disable native drag & drop - if (!this.selectedPiece && e.target.classList.contains("piece")) - { - // Next few lines to center the piece on mouse cursor - let rect = e.target.parentNode.getBoundingClientRect(); - this.start = { - x: rect.x + rect.width/2, - y: rect.y + rect.width/2, - id: e.target.parentNode.id - }; - this.selectedPiece = e.target.cloneNode(); - this.selectedPiece.style.position = "absolute"; - this.selectedPiece.style.top = 0; - this.selectedPiece.style.display = "inline-block"; - this.selectedPiece.style.zIndex = 3000; - const startSquare = getSquareFromId(e.target.parentNode.id); - this.possibleMoves = []; - const color = this.mode=="analyze" || this.gameOver - ? 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) - e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling); - } - }, - mousemove: function(e) { - if (!this.selectedPiece) - return; - e = e || window.event; - // If there is an active element, move it around - if (!!this.selectedPiece) - { - const [offsetX,offsetY] = !!e.clientX - ? [e.clientX,e.clientY] //desktop browser - : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone - this.selectedPiece.style.left = (offsetX-this.start.x) + "px"; - this.selectedPiece.style.top = (offsetY-this.start.y) + "px"; - } - }, - mouseup: function(e) { - if (!this.selectedPiece) - return; - e = e || window.event; - // Read drop target (or parentElement, parentNode... if type == "img") - this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords - const [offsetX,offsetY] = !!e.clientX - ? [e.clientX,e.clientY] - : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; - 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) - { - // A click: selectedPiece and possibleMoves are already filled - return; - } - // OK: process move attempt - 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; - }, - 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; - }, - play: function(move) { - this.$emit('play-move', move); - }, - }, -}) diff --git a/client/next_src/components/chat.js b/client/next_src/components/chat.js deleted file mode 100644 index 8230e9f8..00000000 --- a/client/next_src/components/chat.js +++ /dev/null @@ -1,79 +0,0 @@ -// TODO: myname, opppnents (optional, different style), people -// --> also show messages like "X offers draw ?" (probably not) -// myname: localStorage["username"] || "anonymous", -Vue.component("my-chat", { - props: ["conn","myname","opponents","people"], - data: function() { - return { - chats: [], //chat messages after human game - }; - }, - // TODO: Chat modal sur petit écran, dans la page pour grand écran - template: ` - <div> - <input id="modal-chat" type="checkbox" class="modal"> - <div role="dialog" aria-labelledby="titleChat"> - <div class="card smallpad"> - <label id="close-chat" for="modal-chat" class="modal-close"></label> - <h3 v-if="!!opponents" id="titleChat" class="section"> - <span>{{ translate("Chat with ") }}</span> - <span v-for="o in opponents">{{ o.name }}</span> - </h3> - <p v-for="chat in chats" :class={ - "my-chatmsg": "chat.uid==user.id", - "opp-chatmsg": "opponents.any(o => o.id == chat.uid)"} - v-html="chat.msg" - > - TODO: why chat.msg fails here? - </p> - <input id="input-chat" type="text" placeholder="translate('Type here')" - @keyup.enter="sendChat"/> - <button id="sendChatBtn" @click="sendChat">{{ translate("Send") }}</button> - </div> - </div> - </div> - `, - created: function() { - const socketMessageListener = msg => { - const data = JSON.parse(msg.data); - switch (data.code) - { - case "newchat": - // TODO: new chat just arrived: data contain all informations - // (uid, name, message; no need for timestamp, we can use local time here) - this.chats.push({msg:data.msg, author:this.oppid}); - break; - // TODO: distinguish these (dis)connect events from their analogs in game.js - // TODO: implement and harmonize: opponents and people are arrays, not objects ?! - case "connect": - this.players.push({name:data.name, id:data.uid}); - break; - case "disconnect": - const pIdx = this.players.findIndex(p => p.id == data.uid); - this.players.splice(pIdx); - break; - } - }; - const socketCloseListener = () => { - this.conn.addEventListener('message', socketMessageListener); - this.conn.addEventListener('close', socketCloseListener); - }; - this.conn.onmessage = socketMessageListener; - this.conn.onclose = socketCloseListener; - }, - methods: { - translate: translate, - // TODO: complete this component - sendChat: function() { - let chatInput = document.getElementById("input-chat"); - const chatTxt = chatInput.value; - chatInput.value = ""; - this.chats.push({msg:chatTxt, author:this.myid}); - this.conn.send(JSON.stringify({ - code:"newchat", oppid: this.oppid, msg: chatTxt})); - }, -// startChat: function(e) { -// document.getElementById("modal-chat").checked = true; -// }, - }, -}); diff --git a/client/next_src/components/game.js b/client/next_src/components/game.js deleted file mode 100644 index fb4564f7..00000000 --- a/client/next_src/components/game.js +++ /dev/null @@ -1,551 +0,0 @@ -// Game logic on a variant page: 3 modes, analyze, computer or human -// TODO: envoyer juste "light move", sans FEN ni notation ...etc -// TODO: if I'm an observer and player(s) disconnect/reconnect, how to find me ? -// onClick :: ask full game to remote player, and register as an observer in game -// (use gameId to communicate) -// on landing on game :: if gameId not found locally, check remotely -// ==> il manque un param dans game : "remoteId" -Vue.component('my-game', { - // gameId: to find the game in storage (assumption: it exists) - // fen: to start from a FEN without identifiers (analyze mode) - // subMode: "auto" (game comp vs comp) or "corr" (correspondance game), - // or "examine" (after human game: TODO) - props: ["conn","gameRef","fen","mode","subMode", - "allowChat","allowMovelist","settings"], - data: function() { - return { - // Web worker to play computer moves without freezing interface: - compWorker: new Worker('/javascripts/playCompMove.js'), - timeStart: undefined, //time when computer starts thinking - vr: null, //VariantRules object, describing the game state + rules - endgameMessage: "", - orientation: "w", - lockCompThink: false, //used to avoid some ghost moves - myname: user.name, //may be anonymous (thus no name) - opponents: {}, //filled later (potentially 2 or 3 opponents) - drawOfferSent: false, //did I just ask for draw? - people: {}, //observers - score: "*", //'*' means 'unfinished' - // userColor: given by gameId, or fen in problems mode (if no game Id)... - mycolor: "w", - fenStart: "", - moves: [], //TODO: initialize if gameId is defined... - cursor: -1, //index of the move just played - lastMove: null, - }; - }, - watch: { - fen: function() { - // (Security) No effect if a computer move is in progress: - if (this.mode == "computer" && this.lockCompThink) - return this.$emit("computer-think"); - this.newGameFromFen(); - }, - gameRef: function() { - this.loadGame(); - }, - }, - computed: { - showChat: function() { - return this.allowChat && this.mode=='human' && this.score != '*'; - }, - showMoves: function() { - return true; - return this.allowMovelist && window.innerWidth >= 768; - }, - showFen: function() { - return variant.name != "Dark" || this.score != "*"; - }, - }, - // Modal end of game, and then sub-components - template: ` - <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> - <input id="modal-eog" type="checkbox" class="modal"/> - <div role="dialog" aria-labelledby="eogMessage"> - <div class="card smallpad small-modal text-center"> - <label for="modal-eog" class="modal-close"> - </label> - <h3 id="eogMessage" class="section"> - {{ endgameMessage }} - </h3> - </div> - </div> - <my-chat v-if="showChat" :conn="conn" :myname="myname" - :opponents="opponents" :people="people"> - </my-chat> - <my-board v-bind:vr="vr" :last-move="lastMove" :mode="mode" - :orientation="orientation" :user-color="mycolor" :settings="settings" - @play-move="play"> - </my-board> - <div class="button-group"> - <button @click="() => play()">Play</button> - <button @click="() => undo()">Undo</button> - <button @click="flip">Flip</button> - <button @click="gotoBegin">GotoBegin</button> - <button @click="gotoEnd">GotoEnd</button> - </div> - <div v-if="mode=='human'" class="button-group"> - <button @click="offerDraw">Draw</button> - <button @click="abortGame">Abort</button> - <button @click="resign">Resign</button> - </div> - <div v-if="mode=='human' && subMode=='corr'"> - <textarea v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg"> - </textarea> - <div v-show="cursor>=0"> - {{ moves[cursor].message }} - </div> - </div> - <div v-if="showFen && !!vr" id="fen-div" class="section-content"> - <p id="fen-string" class="text-center"> - {{ vr.getFen() }} - </p> - </div> - <div id="pgn-div" class="section-content"> - <a id="download" href="#"> - </a> - <div class="button-group"> - <button id="downloadBtn" @click="download"> - {{ translate("Download PGN") }} - </button> - <button>Import game</button> - </div> - </div> - <my-move-list v-if="showMoves" :moves="moves" :cursor="cursor" @goto-move="gotoMove"> - </my-move-list> - </div> - `, - created: function() { - if (!!this.gameRef) - this.loadGame(); - else if (!!this.fen) - { - this.vr = new V(this.fen); - this.fenStart = this.fen; - } - // TODO: if I'm one of the players in game, then: - // Send ping to server (answer pong if opponent is connected) - if (true && !!this.conn && !!this.gameRef) - { - this.conn.onopen = () => { - this.conn.send(JSON.stringify({ - code:"ping",oppid:this.oppid,gameId:this.gameRef.id})); - }; - } - // TODO: also handle "draw accepted" (use opponents array?) - // --> must give this info also when sending lastState... - // and, if all players agree then OK draw (end game ...etc) - const socketMessageListener = msg => { - const data = JSON.parse(msg.data); - let L = undefined; - switch (data.code) - { - case "newmove": //..he played! - this.play(data.move, variant.name!="Dark" ? "animate" : null); - break; - case "pong": //received if we sent a ping (game still alive on our side) - if (this.gameRef.id != data.gameId) - break; //games IDs don't match: definitely over... - this.oppConnected = true; - // Send our "last state" informations to opponent(s) - L = this.vr.moves.length; - Object.keys(this.opponents).forEach(oid => { - this.conn.send(JSON.stringify({ - code: "lastate", - oppid: oid, - gameId: this.gameRef.id, - lastMove: (L>0?this.vr.moves[L-1]:undefined), - movesCount: L, - })); - }); - break; - // TODO: refactor this, because at 3 or 4 players we may have missed 2 or 3 moves (not just one) - case "lastate": //got opponent infos about last move - L = this.vr.moves.length; - if (this.gameRef.id != data.gameId) - break; //games IDs don't match: nothing we can do... - // OK, opponent still in game (which might be over) - if (this.score != "*") - { - // We finished the game (any result possible) - this.conn.send(JSON.stringify({ - code: "lastate", - oppid: data.oppid, - gameId: this.gameRef.id, - score: this.score, - })); - } - else if (!!data.score) //opponent finished the game - this.endGame(data.score); - else if (data.movesCount < L) - { - // We must tell last move to opponent - this.conn.send(JSON.stringify({ - code: "lastate", - oppid: this.opponent.id, - gameId: this.gameRef.id, - lastMove: this.vr.moves[L-1], - movesCount: L, - })); - } - else if (data.movesCount > L) //just got last move from him - this.play(data.lastMove, "animate"); - break; - case "resign": //..you won! - this.endGame(this.mycolor=="w"?"1-0":"0-1"); - break; - // TODO: also use (dis)connect info to count online players? - case "connect": - case "disconnect": - if (this.mode=="human") - { - const online = (data.code == "connect"); - // If this is an opponent ? - if (!!this.opponents[data.id]) - this.opponents[data.id].online = online; - else - { - // Or an observer ? - if (!online) - delete this.people[data.id]; - else - this.people[data.id] = data.name; - } - } - break; - } - }; - const socketCloseListener = () => { - this.conn.addEventListener('message', socketMessageListener); - this.conn.addEventListener('close', socketCloseListener); - }; - if (!!this.conn) - { - this.conn.onmessage = socketMessageListener; - this.conn.onclose = socketCloseListener; - } - // Computer moves web worker logic: (TODO: also for observers in HH games ?) - this.compWorker.postMessage(["scripts",variant.name]); - this.compWorker.onmessage = e => { - this.lockCompThink = true; //to avoid some ghost moves - let compMove = e.data; - if (!Array.isArray(compMove)) - compMove = [compMove]; //to deal with MarseilleRules - // Small delay for the bot to appear "more human" - const delay = Math.max(500-(Date.now()-this.timeStart), 0); - setTimeout(() => { - const animate = variant.name != "Dark"; - this.play(compMove[0], animate); - if (compMove.length == 2) - setTimeout( () => { this.play(compMove[1], animate); }, 750); - else //250 == length of animation (TODO: should be a constant somewhere) - setTimeout( () => this.lockCompThink = false, 250); - }, delay); - } - }, - // dans variant.js (plutôt room.js) conn gère aussi les challenges - // et les chats dans chat.js. Puis en webRTC, repenser tout ça. - methods: { - offerDraw: function() { - if (!confirm("Offer draw?")) - return; - // Stay in "draw offer sent" state until next move is played - this.drawOfferSent = true; - if (this.subMode == "corr") - { - // TODO: set drawOffer on in game (how ?) - } - else //live game - { - this.opponents.forEach(o => { - if (!!o.online) - { - try { - this.conn.send(JSON.stringify({code: "draw", oppid: o.id})); - } catch (INVALID_STATE_ERR) { - return; - } - } - }); - } - }, - // + conn handling: "draw" message ==> agree for draw (if we have "drawOffered" at true) - receiveDrawOffer: function() { - //if (...) - // TODO: ignore if preventDrawOffer is set; otherwise show modal box with option "prevent future offers" - // if accept: send message "draw" - }, - abortGame: function() { - if (!confirm("Abort the game?")) - return; - //+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions, - //send message: "gameOver" avec score "?" - }, - resign: function(e) { - if (!confirm("Resign the game?")) - return; - if (this.mode == "human" && this.oppConnected(this.oppid)) - { - try { - this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); - } catch (INVALID_STATE_ERR) { - return; - } - } - this.endGame(this.mycolor=="w"?"0-1":"1-0"); - }, - translate: translate, - newGameFromFen: function() { - this.vr = new V(this.fen); - this.moves = []; - this.cursor = -1; - this.fenStart = this.fen; - this.score = "*"; - if (this.mode == "analyze") - { - this.mycolor = V.ParseFen(this.fen).turn; - this.orientation = this.mycolor; - } - else if (this.mode == "computer") //only other alternative (HH with gameId) - { - this.mycolor = (Math.random() < 0.5 ? "w" : "b"); - this.orientation = this.mycolor; - this.compWorker.postMessage(["init",this.fen]); - if (this.mycolor != "w" || this.subMode == "auto") - this.playComputerMove(); - } - }, - loadGame: function() { - // TODO: ask game to remote peer if this.remoteId is set - // (or just if game not found locally) - // NOTE: if it's a corr game, ask it from server - const game = getGameFromStorage(this.gameRef.id, this.gameRef.uid); //uid may be blank - this.opponent.id = game.oppid; //opponent ID in case of running HH game - this.opponent.name = game.oppname; //maye be blank (if anonymous) - this.score = game.score; - this.mycolor = game.mycolor; - this.fenStart = game.fenStart; - this.moves = game.moves; - this.cursor = game.moves.length-1; - this.lastMove = (game.moves.length > 0 ? game.moves[this.cursor] : null); - }, - setEndgameMessage: function(score) { - let eogMessage = "Undefined"; - switch (score) - { - case "1-0": - eogMessage = translations["White win"]; - break; - case "0-1": - eogMessage = translations["Black win"]; - break; - case "1/2": - eogMessage = translations["Draw"]; - break; - case "?": - eogMessage = "Unfinished"; - break; - } - this.endgameMessage = eogMessage; - }, - download: function() { - const content = this.getPgn(); - // Prepare and trigger download link - let downloadAnchor = document.getElementById("download"); - downloadAnchor.setAttribute("download", "game.pgn"); - downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content); - downloadAnchor.click(); - }, - getPgn: function() { - let pgn = ""; - pgn += '[Site "vchess.club"]\n'; - const opponent = (this.mode=="human" ? "Anonymous" : "Computer"); - pgn += '[Variant "' + variant.name + '"]\n'; - pgn += '[Date "' + getDate(new Date()) + '"]\n'; - const whiteName = ["human","computer"].includes(this.mode) - ? (this.mycolor=='w'?'Myself':opponent) - : "analyze"; - const blackName = ["human","computer"].includes(this.mode) - ? (this.mycolor=='b'?'Myself':opponent) - : "analyze"; - pgn += '[White "' + whiteName + '"]\n'; - pgn += '[Black "' + blackName + '"]\n'; - pgn += '[Fen "' + this.fenStart + '"]\n'; - pgn += '[Result "' + this.score + '"]\n\n'; - let counter = 1; - let i = 0; - while (i < this.moves.length) - { - pgn += (counter++) + "."; - for (let color of ["w","b"]) - { - let move = ""; - while (i < this.moves.length && this.moves[i].color == color) - move += this.moves[i++].notation[0] + ","; - move = move.slice(0,-1); //remove last comma - pgn += move + (i < this.moves.length-1 ? " " : ""); - } - } - return pgn + "\n"; - }, - showScoreMsg: function(score) { - this.setEndgameMessage(score); - let modalBox = document.getElementById("modal-eog"); - modalBox.checked = true; - setTimeout(() => { modalBox.checked = false; }, 2000); - }, - endGame: function(score) { - this.score = score; - this.showScoreMsg(score); - if (this.mode == "human") - localStorage["score"] = score; - this.$emit("game-over"); - }, - oppConnected: function(uid) { - return this.opponents.any(o => o.id == uidi && o.online); - }, - playComputerMove: function() { - this.timeStart = Date.now(); - this.compWorker.postMessage(["askmove"]); - }, - animateMove: function(move) { - let startSquare = document.getElementById(getSquareId(move.start)); - let endSquare = document.getElementById(getSquareId(move.end)); - let rectStart = startSquare.getBoundingClientRect(); - let rectEnd = endSquare.getBoundingClientRect(); - let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y}; - let movingPiece = - document.querySelector("#" + getSquareId(move.start) + " > img.piece"); - // HACK for animation (with positive translate, image slides "under background") - // Possible improvement: just alter squares on the piece's way... - squares = document.getElementsByClassName("board"); - for (let i=0; i<squares.length; i++) - { - let square = squares.item(i); - if (square.id != getSquareId(move.start)) - square.style.zIndex = "-1"; - } - movingPiece.style.transform = "translate(" + translation.x + "px," + - translation.y + "px)"; - movingPiece.style.transitionDuration = "0.2s"; - movingPiece.style.zIndex = "3000"; - setTimeout( () => { - for (let i=0; i<squares.length; i++) - squares.item(i).style.zIndex = "auto"; - movingPiece.style = {}; //required e.g. for 0-0 with KR swap - this.play(move); - }, 250); - }, - play: function(move, programmatic) { - let navigate = !move; - // Forbid playing outside analyze mode when cursor isn't at moves.length-1 - // (except if we receive opponent's move, human or computer) - if (!navigate && this.mode != "analyze" && !programmatic - && this.cursor < this.moves.length-1) - { - return; - } - if (navigate) - { - if (this.cursor == this.moves.length-1) - return; //no more moves - move = this.moves[this.cursor+1]; - } - if (!!programmatic) //computer or (remote) human opponent - { - if (this.cursor < this.moves.length-1) - this.gotoEnd(); //required to play the move - return this.animateMove(move); - } - // Not programmatic, or animation is over - if (this.mode == "human" && this.subMode == "corr" && this.mycolor == this.vr.turn) - { - // TODO: show confirm box "validate move ?" - } - if (!move.notation) - move.notation = this.vr.getNotation(move); - if (!move.color) - move.color = this.vr.turn; - this.vr.play(move); - this.cursor++; - this.lastMove = move; - if (!move.fen) - move.fen = this.vr.getFen(); - if (this.settings.sound == 2) - new Audio("/sounds/move.mp3").play().catch(err => {}); - if (this.mode == "human") - { - updateStorage(move); //after our moves and opponent moves - if (this.vr.turn == this.mycolor) - this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid})); - } - else if (this.mode == "computer") - { - // Send the move to web worker (including his own moves) - this.compWorker.postMessage(["newmove",move]); - } - if (!navigate && (this.score == "*" || this.mode == "analyze")) - { - // Stack move on movesList at current cursor - if (this.cursor == this.moves.length) - this.moves.push(move); - else - this.moves = this.moves.slice(0,this.cursor).concat([move]); - } - // Is opponent in check? - this.incheck = this.vr.getCheckSquares(this.vr.turn); - const score = this.vr.getCurrentScore(); - if (score != "*") - { - if (["human","computer"].includes(this.mode)) - this.endGame(score); - else //just show score on screen (allow undo) - this.showScoreMsg(score); - } - // subTurn condition for Marseille (and Avalanche) rules - else if ((this.mode == "computer" && (!this.vr.subTurn || this.vr.subTurn <= 1)) - && (this.subMode == "auto" || this.vr.turn != this.mycolor)) - { - this.playComputerMove(); - } - // https://vuejs.org/v2/guide/list.html#Caveats (also for undo) - if (navigate) - this.$children[0].$forceUpdate(); //TODO!? - }, - undo: function(move) { - let navigate = !move; - if (navigate) - { - if (this.cursor < 0) - return; //no more moves - move = this.moves[this.cursor]; - } - this.vr.undo(move); - this.cursor--; - this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined); - if (this.settings.sound == 2) - new Audio("/sounds/undo.mp3").play().catch(err => {}); - this.incheck = this.vr.getCheckSquares(this.vr.turn); - if (navigate) - this.$children[0].$forceUpdate(); //TODO!? - else if (this.mode == "analyze") //TODO: can this happen? - this.moves.pop(); - }, - gotoMove: function(index) { - this.vr = new V(this.moves[index].fen); - this.cursor = index; - this.lastMove = this.moves[index]; - }, - gotoBegin: function() { - this.vr = new V(this.fenStart); - this.cursor = -1; - this.lastMove = null; - }, - gotoEnd: function() { - this.gotoMove(this.moves.length-1); - }, - flip: function() { - this.orientation = V.GetNextCol(this.orientation); - }, - }, -}) diff --git a/client/next_src/views/rules.js b/client/next_src/views/rules.js deleted file mode 100644 index 0f27d532..00000000 --- a/client/next_src/views/rules.js +++ /dev/null @@ -1,80 +0,0 @@ -// Load rules on variant page -Vue.component('my-rules', { - props: ["settings"], - data: function() { - return { - content: "", - display: "rules", - mode: "computer", - subMode: "", //'auto' for game CPU vs CPU - gameInProgress: false, - mycolor: "w", - allowMovelist: true, - fen: "", - }; - }, - template: ` - <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> - <div class="button-group"> - <button @click="display='rules'"> - Read the rules - </button> - <button v-show="!gameInProgress" @click="watchComputerGame"> - Observe a sample game - </button> - <button v-show="!gameInProgress" @click="playAgainstComputer"> - Beat the computer! - </button> - <button v-show="gameInProgress" @click="stopGame"> - Stop game - </button> - </div> - <div v-show="display=='rules'" v-html="content" class="section-content"></div> - <my-game v-show="display=='computer'" :mycolor="mycolor" :settings="settings" - :allow-movelist="allowMovelist" :mode="mode" :sub-mode="subMode" :fen="fen" - @computer-think="gameInProgress=false" @game-over="stopGame"> - </my-game> - </div> - `, - mounted: function() { - // AJAX request to get rules content (plain text, HTML) - ajax("/rules/" + variant.name, "GET", response => { - let replaceByDiag = (match, p1, p2) => { - const args = this.parseFen(p2); - return getDiagram(args); - }; - this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag); - }); - }, - methods: { - parseFen(fen) { - const fenParts = fen.split(" "); - return { - position: fenParts[0], - marks: fenParts[1], - orientation: fenParts[2], - shadow: fenParts[3], - }; - }, - startGame: function() { - if (this.gameInProgress) - return; - this.gameInProgress = true; - this.mode = "computer"; - this.display = "computer"; - this.fen = V.GenRandInitFen(); - }, - stopGame: function() { - this.gameInProgress = false; - this.mode = "analyze"; - }, - playAgainstComputer: function() { - this.subMode = ""; - this.startGame(); - }, - watchComputerGame: function() { - this.subMode = "auto"; - this.startGame(); - }, - }, -}) diff --git a/client/src/App.vue b/client/src/App.vue index 91f82eea..0aad59be 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -5,18 +5,10 @@ ContactForm UpsertUser .container - .row(v-show="$route.path == '/'") - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - // Header (on index only) - header - img(src="./assets/images/index/unicorn.svg") - .info-container - p vchess.club - img(src="./assets/images/index/wildebeest.svg") .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 // Menu (top of page): - // Left: home, variants, mygames, problems + // Left: hall, variants, mygames, problems // Right: usermenu, settings, flag nav label.drawer-toggle(for="drawerControl") @@ -25,7 +17,7 @@ label.drawer-close(for="drawerControl") #leftMenu router-link(to="/") - | {{ st.tr["Home"] }} + | {{ st.tr["Hall"] }} router-link(to="/variants") | {{ st.tr["Variants"] }} router-link(to="/mygames") diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue new file mode 100644 index 00000000..b7dac640 --- /dev/null +++ b/client/src/components/Board.vue @@ -0,0 +1,359 @@ +// This can work for squared boards (2 or 4 players), with some adaptations (TODO) +// TODO: for 3 players, write a "board3.js" +export default { + name: 'my-board', + // Last move cannot be guessed from here, and is required to highlight squares + // vr: object to check moves, print board... + // mode: HH, HC or analyze + // userColor: for mode HH or HC + props: ["vr","lastMove","mode","orientation","userColor"], + data: function () { + return { + hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"), + bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo + possibleMoves: [], //filled after each valid click/dragstart + choices: [], //promotion pieces, or checkered captures... (as moves) + selectedPiece: null, //moving piece (or clicked piece) + incheck: [], + start: {}, //pixels coordinates + id of starting square (click or drag) + }; + }, + render(h) { + if (!this.vr) + return; + const [sizeX,sizeY] = [V.size.x,V.size.y]; + // Precompute hints squares to facilitate rendering + let hintSquares = doubleArray(sizeX, sizeY, false); + this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; }); + // Also precompute in-check squares + let incheckSq = doubleArray(sizeX, sizeY, false); + this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; }); + const squareWidth = 40; //TODO: compute this + const choices = h( + 'div', + { + attrs: { "id": "choices" }, + 'class': { 'row': true }, + style: { + "display": this.choices.length>0?"block":"none", + "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px", + "width": (this.choices.length * squareWidth) + "px", + "height": squareWidth + "px", + }, + }, + this.choices.map(m => { //a "choice" is a move + return h('div', + { + 'class': { + 'board': true, + ['board'+sizeY]: true, + }, + style: { + 'width': (100/this.choices.length) + "%", + 'padding-bottom': (100/this.choices.length) + "%", + }, + }, + [h('img', + { + attrs: { "src": '/images/pieces/' + + V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' }, + 'class': { 'choice-piece': true }, + on: { + "click": e => { this.play(m); this.choices=[]; }, + // NOTE: add 'touchstart' event to fix a problem on smartphones + "touchstart": e => { this.play(m); this.choices=[]; }, + }, + }) + ] + ); + }) + ); + // Create board element (+ reserves if needed by variant or mode) + const lm = this.lastMove; + const showLight = this.hints && variant.name != "Dark"; + const gameDiv = h( + 'div', + { + 'class': { + 'game': true, + 'clearer': true, + }, + }, + [...Array(sizeX).keys()].map(i => { + let ci = (this.orientation=='w' ? i : sizeX-i-1); + return h( + 'div', + { + 'class': { + 'row': true, + }, + style: { 'opacity': this.choices.length>0?"0.5":"1" }, + }, + [...Array(sizeY).keys()].map(j => { + let cj = (this.orientation=='w' ? j : sizeY-j-1); + let elems = []; + if (this.vr.board[ci][cj] != V.EMPTY && (variant.name!="Dark" + || this.gameOver || this.mode == "analyze" + || this.vr.enlightened[this.userColor][ci][cj])) + { + elems.push( + h( + 'img', + { + 'class': { + 'piece': true, + 'ghost': !!this.selectedPiece + && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj, + }, + attrs: { + src: "/images/pieces/" + + V.getPpath(this.vr.board[ci][cj]) + ".svg", + }, + } + ) + ); + } + if (this.hints && hintSquares[ci][cj]) + { + elems.push( + h( + 'img', + { + 'class': { + 'mark-square': true, + }, + attrs: { + src: "/images/mark.svg", + }, + } + ) + ); + } + return h( + 'div', + { + 'class': { + 'board': true, + ['board'+sizeY]: true, + 'light-square': (i+j)%2==0, + 'dark-square': (i+j)%2==1, + [this.bcolor]: true, + 'in-shadow': variant.name=="Dark" && !this.gameOver + && this.mode != "analyze" + && !this.vr.enlightened[this.userColor][ci][cj], + 'highlight': showLight && !!lm && lm.end.x == ci && lm.end.y == cj, + 'incheck': showLight && incheckSq[ci][cj], + }, + attrs: { + id: getSquareId({x:ci,y:cj}), + }, + }, + elems + ); + }) + ); + }), choices] + ); + let elementArray = [choices, gameDiv]; + if (!!this.vr.reserve) + { + const shiftIdx = (this.userColor=="w" ? 0 : 1); + let myReservePiecesArray = []; + for (let i=0; i<V.RESERVE_PIECES.length; i++) + { + myReservePiecesArray.push(h('div', + { + 'class': {'board':true, ['board'+sizeY]:true}, + attrs: { id: getSquareId({x:sizeX+shiftIdx,y:i}) } + }, + [ + h('img', + { + 'class': {"piece":true, "reserve":true}, + attrs: { + "src": "/images/pieces/" + + this.vr.getReservePpath(this.userColor,i) + ".svg", + } + }), + h('sup', + {"class": { "reserve-count": true } }, + [ this.vr.reserve[this.userColor][V.RESERVE_PIECES[i]] ] + ) + ])); + } + let oppReservePiecesArray = []; + const oppCol = V.GetOppCol(this.userColor); + for (let i=0; i<V.RESERVE_PIECES.length; i++) + { + oppReservePiecesArray.push(h('div', + { + 'class': {'board':true, ['board'+sizeY]:true}, + attrs: { id: getSquareId({x:sizeX+(1-shiftIdx),y:i}) } + }, + [ + h('img', + { + 'class': {"piece":true, "reserve":true}, + attrs: { + "src": "/images/pieces/" + + this.vr.getReservePpath(oppCol,i) + ".svg", + } + }), + h('sup', + {"class": { "reserve-count": true } }, + [ this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] ] + ) + ])); + } + let reserves = h('div', + { + 'class':{ + 'game': true, + "reserve-div": true, + }, + }, + [ + h('div', + { + 'class': { + 'row': true, + "reserve-row-1": true, + }, + }, + myReservePiecesArray + ), + h('div', + { 'class': { 'row': true }}, + oppReservePiecesArray + ) + ] + ); + elementArray.push(reserves); + } + 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, + mousemove: this.mousemove, + mouseup: this.mouseup, + touchstart: this.mousedown, + touchmove: this.mousemove, + touchend: this.mouseup, + }, + }, + elementArray + ); + }, + methods: { + mousedown: function(e) { + e = e || window.event; + let ingame = false; + let elem = e.target; + while (!ingame && elem !== null) + { + if (elem.classList.contains("game")) + { + ingame = true; + break; + } + elem = elem.parentElement; + } + if (!ingame) //let default behavior (click on button...) + return; + e.preventDefault(); //disable native drag & drop + if (!this.selectedPiece && e.target.classList.contains("piece")) + { + // Next few lines to center the piece on mouse cursor + let rect = e.target.parentNode.getBoundingClientRect(); + this.start = { + x: rect.x + rect.width/2, + y: rect.y + rect.width/2, + id: e.target.parentNode.id + }; + this.selectedPiece = e.target.cloneNode(); + this.selectedPiece.style.position = "absolute"; + this.selectedPiece.style.top = 0; + this.selectedPiece.style.display = "inline-block"; + this.selectedPiece.style.zIndex = 3000; + const startSquare = getSquareFromId(e.target.parentNode.id); + this.possibleMoves = []; + const color = this.mode=="analyze" || this.gameOver + ? 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) + e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling); + } + }, + mousemove: function(e) { + if (!this.selectedPiece) + return; + e = e || window.event; + // If there is an active element, move it around + if (!!this.selectedPiece) + { + const [offsetX,offsetY] = !!e.clientX + ? [e.clientX,e.clientY] //desktop browser + : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone + this.selectedPiece.style.left = (offsetX-this.start.x) + "px"; + this.selectedPiece.style.top = (offsetY-this.start.y) + "px"; + } + }, + mouseup: function(e) { + if (!this.selectedPiece) + return; + e = e || window.event; + // Read drop target (or parentElement, parentNode... if type == "img") + this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords + const [offsetX,offsetY] = !!e.clientX + ? [e.clientX,e.clientY] + : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; + 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) + { + // A click: selectedPiece and possibleMoves are already filled + return; + } + // OK: process move attempt + 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; + }, + 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; + }, + play: function(move) { + this.$emit('play-move', move); + }, + }, +}; +</script> diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue new file mode 100644 index 00000000..fcdfc840 --- /dev/null +++ b/client/src/components/Chat.vue @@ -0,0 +1,71 @@ +<template lang="pug"> +div + input#modalChat.modal(type="checkbox") + div(role="dialog") + .card.smallpad + label#closeChat.modal-close(for="modalChat") + p(v-for="chat in chats" :class={ + "my-chatmsg": "chat.uid==user.id", + "opp-chatmsg": "opponents.any(o => o.id == chat.uid)"} + v-html="chat.msg") + input#inputChat(type="text" placeholder="st.tr['Type here']" + @keyup.enter="sendChat") + button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }} +</template> + +<script> +// TODO: myname, opppnents (optional, different style), people +// --> also show messages like "X offers draw ?" (probably not) +// myname: localStorage["username"] || "anonymous", +export default { + name: "my-chat", + props: ["opponents","people"], + data: function() { + return { + chats: [], //chat messages after human game + }; + }, +// // TODO: Chat modal sur petit écran, dans la page pour grand écran +// created: function() { +// const socketMessageListener = msg => { +// const data = JSON.parse(msg.data); +// switch (data.code) +// { +// case "newchat": +// // TODO: new chat just arrived: data contain all informations +// // (uid, name, message; no need for timestamp, we can use local time here) +// this.chats.push({msg:data.msg, author:this.oppid}); +// break; +// // TODO: distinguish these (dis)connect events from their analogs in game.js +// // TODO: implement and harmonize: opponents and people are arrays, not objects ?! +// case "connect": +// this.players.push({name:data.name, id:data.uid}); +// break; +// case "disconnect": +// const pIdx = this.players.findIndex(p => p.id == data.uid); +// this.players.splice(pIdx); +// break; +// } +// }; +// const socketCloseListener = () => { +// this.conn.addEventListener('message', socketMessageListener); +// this.conn.addEventListener('close', socketCloseListener); +// }; +// this.conn.onmessage = socketMessageListener; +// this.conn.onclose = socketCloseListener; +// }, +// methods: { +// // TODO: complete this component +// sendChat: function() { +// let chatInput = document.getElementById("input-chat"); +// const chatTxt = chatInput.value; +// chatInput.value = ""; +// this.chats.push({msg:chatTxt, author:this.myid}); +// this.conn.send(JSON.stringify({ +// code:"newchat", oppid: this.oppid, msg: chatTxt})); +// }, +//// startChat: function(e) { +//// document.getElementById("modal-chat").checked = true; +//// }, + }, +}); diff --git a/client/src/components/Game.vue b/client/src/components/Game.vue new file mode 100644 index 00000000..2ae451f0 --- /dev/null +++ b/client/src/components/Game.vue @@ -0,0 +1,538 @@ +<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 }} + Chat(v-if="showChat" :opponents="opponents" :people="people") + Board(:vr="vr" :last-move="lastMove" :mode="mode" :user-color="mycolor" + :orientation="orientation" @play-move="play") + .button-group + button(@click="() => play()") Play + button(@click="() => undo()") Undo + button(@click="flip") Flip + button(@click="gotoBegin") GotoBegin + button(@click="gotoEnd") GotoEnd + .button-group(v-if="mode=='human'") + button(@click="offerDraw") Draw + button(@click="abortGame") Abort + button(@click="resign") Resign + div(v-if="mode=='human' && subMode=='corr'") + textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg") + div(v-show="cursor>=0") {{ moves[cursor].message }} + .section-content(v-if="showFen && !!vr" id="fen-div") + p#fenString.text-center {{ vr.getFen() }} + #pgnDiv.section-content + a#download(href="#") + .button-group + button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }} + button Import game + MoveList(v-if="showMoves" + :moves="moves" :cursor="cursor" @goto-move="gotoMove") +</template> + +<script> +// Game logic on a variant page: 3 modes, analyze, computer or human +// TODO: envoyer juste "light move", sans FEN ni notation ...etc +// TODO: if I'm an observer and player(s) disconnect/reconnect, how to find me ? +// onClick :: ask full game to remote player, and register as an observer in game +// (use gameId to communicate) +// on landing on game :: if gameId not found locally, check remotely +// ==> il manque un param dans game : "remoteId" +// TODO: import store, st +import Board from "@/components/Board.vue"; +import Chat from "@/components/Chat.vue"; +import MoveList from "@/components/MoveList.vue"; +export default { + name: 'my-game', + // gameId: to find the game in storage (assumption: it exists) + // fen: to start from a FEN without identifiers (analyze mode) + // subMode: "auto" (game comp vs comp) or "corr" (correspondance game), + // or "examine" (after human game: TODO) + // gameRef in URL hash (listen for changes) + props: ["fen","mode","subMode"], + data: function() { + return { + gameRef: "", + // Web worker to play computer moves without freezing interface: + compWorker: new Worker('/javascripts/playCompMove.js'), + timeStart: undefined, //time when computer starts thinking + vr: null, //VariantRules object, describing the game state + rules + endgameMessage: "", + orientation: "w", + lockCompThink: false, //to avoid some ghost moves + myname: user.name, //may be anonymous (thus no name) + opponents: {}, //filled later (potentially 2 or 3 opponents) + drawOfferSent: false, //did I just ask for draw? + people: {}, //observers + score: "*", //'*' means 'unfinished' + // userColor: given by gameId, or fen in problems mode (if no game Id)... + mycolor: "w", + fenStart: "", + moves: [], //TODO: initialize if gameId is defined... + cursor: -1, //index of the move just played + lastMove: null, + }; + }, +// watch: { +// fen: function() { +// // (Security) No effect if a computer move is in progress: +// if (this.mode == "computer" && this.lockCompThink) +// return this.$emit("computer-think"); +// this.newGameFromFen(); +// }, +//// // TODO: $route: ... +//// gameRef: function() { +//// this.loadGame(); +//// }, +// }, +// computed: { +// showChat: function() { +// return this.mode=='human' && this.score != '*'; +// }, +// showMoves: function() { +// return true; +// //return window.innerWidth >= 768; +// }, +// showFen: function() { +// return variant.name != "Dark" || this.score != "*"; +// }, +// }, +// // Modal end of game, and then sub-components +// created: function() { +// if (!!this.gameRef) +// this.loadGame(); +// else if (!!this.fen) +// { +// this.vr = new V(this.fen); +// this.fenStart = this.fen; +// } +// // TODO: if I'm one of the players in game, then: +// // Send ping to server (answer pong if opponent is connected) +// if (true && !!this.conn && !!this.gameRef) +// { +// this.conn.onopen = () => { +// this.conn.send(JSON.stringify({ +// code:"ping",oppid:this.oppid,gameId:this.gameRef.id})); +// }; +// } +// // TODO: also handle "draw accepted" (use opponents array?) +// // --> must give this info also when sending lastState... +// // and, if all players agree then OK draw (end game ...etc) +// const socketMessageListener = msg => { +// const data = JSON.parse(msg.data); +// let L = undefined; +// switch (data.code) +// { +// case "newmove": //..he played! +// this.play(data.move, variant.name!="Dark" ? "animate" : null); +// break; +// case "pong": //received if we sent a ping (game still alive on our side) +// if (this.gameRef.id != data.gameId) +// break; //games IDs don't match: definitely over... +// this.oppConnected = true; +// // Send our "last state" informations to opponent(s) +// L = this.vr.moves.length; +// Object.keys(this.opponents).forEach(oid => { +// this.conn.send(JSON.stringify({ +// code: "lastate", +// oppid: oid, +// gameId: this.gameRef.id, +// lastMove: (L>0?this.vr.moves[L-1]:undefined), +// movesCount: L, +// })); +// }); +// break; +// // TODO: refactor this, because at 3 or 4 players we may have missed 2 or 3 moves (not just one) +// case "lastate": //got opponent infos about last move +// L = this.vr.moves.length; +// if (this.gameRef.id != data.gameId) +// break; //games IDs don't match: nothing we can do... +// // OK, opponent still in game (which might be over) +// if (this.score != "*") +// { +// // We finished the game (any result possible) +// this.conn.send(JSON.stringify({ +// code: "lastate", +// oppid: data.oppid, +// gameId: this.gameRef.id, +// score: this.score, +// })); +// } +// else if (!!data.score) //opponent finished the game +// this.endGame(data.score); +// else if (data.movesCount < L) +// { +// // We must tell last move to opponent +// this.conn.send(JSON.stringify({ +// code: "lastate", +// oppid: this.opponent.id, +// gameId: this.gameRef.id, +// lastMove: this.vr.moves[L-1], +// movesCount: L, +// })); +// } +// else if (data.movesCount > L) //just got last move from him +// this.play(data.lastMove, "animate"); +// break; +// case "resign": //..you won! +// this.endGame(this.mycolor=="w"?"1-0":"0-1"); +// break; +// // TODO: also use (dis)connect info to count online players? +// case "connect": +// case "disconnect": +// if (this.mode=="human") +// { +// const online = (data.code == "connect"); +// // If this is an opponent ? +// if (!!this.opponents[data.id]) +// this.opponents[data.id].online = online; +// else +// { +// // Or an observer ? +// if (!online) +// delete this.people[data.id]; +// else +// this.people[data.id] = data.name; +// } +// } +// break; +// } +// }; +// const socketCloseListener = () => { +// this.conn.addEventListener('message', socketMessageListener); +// this.conn.addEventListener('close', socketCloseListener); +// }; +// if (!!this.conn) +// { +// this.conn.onmessage = socketMessageListener; +// this.conn.onclose = socketCloseListener; +// } +// // Computer moves web worker logic: (TODO: also for observers in HH games ?) +// this.compWorker.postMessage(["scripts",variant.name]); +// this.compWorker.onmessage = e => { +// this.lockCompThink = true; //to avoid some ghost moves +// let compMove = e.data; +// if (!Array.isArray(compMove)) +// compMove = [compMove]; //to deal with MarseilleRules +// // Small delay for the bot to appear "more human" +// const delay = Math.max(500-(Date.now()-this.timeStart), 0); +// setTimeout(() => { +// const animate = variant.name != "Dark"; +// this.play(compMove[0], animate); +// if (compMove.length == 2) +// setTimeout( () => { this.play(compMove[1], animate); }, 750); +// else //250 == length of animation (TODO: should be a constant somewhere) +// setTimeout( () => this.lockCompThink = false, 250); +// }, delay); +// } +// }, +// // dans variant.js (plutôt room.js) conn gère aussi les challenges +// // et les chats dans chat.js. Puis en webRTC, repenser tout ça. +// methods: { +// offerDraw: function() { +// if (!confirm("Offer draw?")) +// return; +// // Stay in "draw offer sent" state until next move is played +// this.drawOfferSent = true; +// if (this.subMode == "corr") +// { +// // TODO: set drawOffer on in game (how ?) +// } +// else //live game +// { +// this.opponents.forEach(o => { +// if (!!o.online) +// { +// try { +// this.conn.send(JSON.stringify({code: "draw", oppid: o.id})); +// } catch (INVALID_STATE_ERR) { +// return; +// } +// } +// }); +// } +// }, +// // + conn handling: "draw" message ==> agree for draw (if we have "drawOffered" at true) +// receiveDrawOffer: function() { +// //if (...) +// // TODO: ignore if preventDrawOffer is set; otherwise show modal box with option "prevent future offers" +// // if accept: send message "draw" +// }, +// abortGame: function() { +// if (!confirm("Abort the game?")) +// return; +// //+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions, +// //send message: "gameOver" avec score "?" +// }, +// resign: function(e) { +// if (!confirm("Resign the game?")) +// return; +// if (this.mode == "human" && this.oppConnected(this.oppid)) +// { +// try { +// this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); +// } catch (INVALID_STATE_ERR) { +// return; +// } +// } +// this.endGame(this.mycolor=="w"?"0-1":"1-0"); +// }, +// translate: translate, +// newGameFromFen: function() { +// this.vr = new V(this.fen); +// this.moves = []; +// this.cursor = -1; +// this.fenStart = this.fen; +// this.score = "*"; +// if (this.mode == "analyze") +// { +// this.mycolor = V.ParseFen(this.fen).turn; +// this.orientation = this.mycolor; +// } +// else if (this.mode == "computer") //only other alternative (HH with gameId) +// { +// this.mycolor = (Math.random() < 0.5 ? "w" : "b"); +// this.orientation = this.mycolor; +// this.compWorker.postMessage(["init",this.fen]); +// if (this.mycolor != "w" || this.subMode == "auto") +// this.playComputerMove(); +// } +// }, +// loadGame: function() { +// // TODO: ask game to remote peer if this.remoteId is set +// // (or just if game not found locally) +// // NOTE: if it's a corr game, ask it from server +// const game = getGameFromStorage(this.gameRef.id, this.gameRef.uid); //uid may be blank +// this.opponent.id = game.oppid; //opponent ID in case of running HH game +// this.opponent.name = game.oppname; //maye be blank (if anonymous) +// this.score = game.score; +// this.mycolor = game.mycolor; +// this.fenStart = game.fenStart; +// this.moves = game.moves; +// this.cursor = game.moves.length-1; +// this.lastMove = (game.moves.length > 0 ? game.moves[this.cursor] : null); +// }, +// setEndgameMessage: function(score) { +// let eogMessage = "Undefined"; +// switch (score) +// { +// case "1-0": +// eogMessage = translations["White win"]; +// break; +// case "0-1": +// eogMessage = translations["Black win"]; +// break; +// case "1/2": +// eogMessage = translations["Draw"]; +// break; +// case "?": +// eogMessage = "Unfinished"; +// break; +// } +// this.endgameMessage = eogMessage; +// }, +// download: function() { +// const content = this.getPgn(); +// // Prepare and trigger download link +// let downloadAnchor = document.getElementById("download"); +// downloadAnchor.setAttribute("download", "game.pgn"); +// downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content); +// downloadAnchor.click(); +// }, +// getPgn: function() { +// let pgn = ""; +// pgn += '[Site "vchess.club"]\n'; +// const opponent = (this.mode=="human" ? "Anonymous" : "Computer"); +// pgn += '[Variant "' + variant.name + '"]\n'; +// pgn += '[Date "' + getDate(new Date()) + '"]\n'; +// const whiteName = ["human","computer"].includes(this.mode) +// ? (this.mycolor=='w'?'Myself':opponent) +// : "analyze"; +// const blackName = ["human","computer"].includes(this.mode) +// ? (this.mycolor=='b'?'Myself':opponent) +// : "analyze"; +// pgn += '[White "' + whiteName + '"]\n'; +// pgn += '[Black "' + blackName + '"]\n'; +// pgn += '[Fen "' + this.fenStart + '"]\n'; +// pgn += '[Result "' + this.score + '"]\n\n'; +// let counter = 1; +// let i = 0; +// while (i < this.moves.length) +// { +// pgn += (counter++) + "."; +// for (let color of ["w","b"]) +// { +// let move = ""; +// while (i < this.moves.length && this.moves[i].color == color) +// move += this.moves[i++].notation[0] + ","; +// move = move.slice(0,-1); //remove last comma +// pgn += move + (i < this.moves.length-1 ? " " : ""); +// } +// } +// return pgn + "\n"; +// }, +// showScoreMsg: function(score) { +// this.setEndgameMessage(score); +// let modalBox = document.getElementById("modal-eog"); +// modalBox.checked = true; +// setTimeout(() => { modalBox.checked = false; }, 2000); +// }, +// endGame: function(score) { +// this.score = score; +// this.showScoreMsg(score); +// if (this.mode == "human") +// localStorage["score"] = score; +// this.$emit("game-over"); +// }, +// oppConnected: function(uid) { +// return this.opponents.any(o => o.id == uidi && o.online); +// }, +// playComputerMove: function() { +// this.timeStart = Date.now(); +// this.compWorker.postMessage(["askmove"]); +// }, +// animateMove: function(move) { +// let startSquare = document.getElementById(getSquareId(move.start)); +// let endSquare = document.getElementById(getSquareId(move.end)); +// let rectStart = startSquare.getBoundingClientRect(); +// let rectEnd = endSquare.getBoundingClientRect(); +// let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y}; +// let movingPiece = +// document.querySelector("#" + getSquareId(move.start) + " > img.piece"); +// // HACK for animation (with positive translate, image slides "under background") +// // Possible improvement: just alter squares on the piece's way... +// squares = document.getElementsByClassName("board"); +// for (let i=0; i<squares.length; i++) +// { +// let square = squares.item(i); +// if (square.id != getSquareId(move.start)) +// square.style.zIndex = "-1"; +// } +// movingPiece.style.transform = "translate(" + translation.x + "px," + +// translation.y + "px)"; +// movingPiece.style.transitionDuration = "0.2s"; +// movingPiece.style.zIndex = "3000"; +// setTimeout( () => { +// for (let i=0; i<squares.length; i++) +// squares.item(i).style.zIndex = "auto"; +// movingPiece.style = {}; //required e.g. for 0-0 with KR swap +// this.play(move); +// }, 250); +// }, +// play: function(move, programmatic) { +// let navigate = !move; +// // Forbid playing outside analyze mode when cursor isn't at moves.length-1 +// // (except if we receive opponent's move, human or computer) +// if (!navigate && this.mode != "analyze" && !programmatic +// && this.cursor < this.moves.length-1) +// { +// return; +// } +// if (navigate) +// { +// if (this.cursor == this.moves.length-1) +// return; //no more moves +// move = this.moves[this.cursor+1]; +// } +// if (!!programmatic) //computer or (remote) human opponent +// { +// if (this.cursor < this.moves.length-1) +// this.gotoEnd(); //required to play the move +// return this.animateMove(move); +// } +// // Not programmatic, or animation is over +// if (this.mode == "human" && this.subMode == "corr" && this.mycolor == this.vr.turn) +// { +// // TODO: show confirm box "validate move ?" +// } +// if (!move.notation) +// move.notation = this.vr.getNotation(move); +// if (!move.color) +// move.color = this.vr.turn; +// this.vr.play(move); +// this.cursor++; +// this.lastMove = move; +// if (!move.fen) +// move.fen = this.vr.getFen(); +// if (this.settings.sound == 2) +// new Audio("/sounds/move.mp3").play().catch(err => {}); +// if (this.mode == "human") +// { +// updateStorage(move); //after our moves and opponent moves +// if (this.vr.turn == this.mycolor) +// this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid})); +// } +// else if (this.mode == "computer") +// { +// // Send the move to web worker (including his own moves) +// this.compWorker.postMessage(["newmove",move]); +// } +// if (!navigate && (this.score == "*" || this.mode == "analyze")) +// { +// // Stack move on movesList at current cursor +// if (this.cursor == this.moves.length) +// this.moves.push(move); +// else +// this.moves = this.moves.slice(0,this.cursor).concat([move]); +// } +// // Is opponent in check? +// this.incheck = this.vr.getCheckSquares(this.vr.turn); +// const score = this.vr.getCurrentScore(); +// if (score != "*") +// { +// if (["human","computer"].includes(this.mode)) +// this.endGame(score); +// else //just show score on screen (allow undo) +// this.showScoreMsg(score); +// } +// // subTurn condition for Marseille (and Avalanche) rules +// else if ((this.mode == "computer" && (!this.vr.subTurn || this.vr.subTurn <= 1)) +// && (this.subMode == "auto" || this.vr.turn != this.mycolor)) +// { +// this.playComputerMove(); +// } +// // https://vuejs.org/v2/guide/list.html#Caveats (also for undo) +// if (navigate) +// this.$children[0].$forceUpdate(); //TODO!? +// }, +// undo: function(move) { +// let navigate = !move; +// if (navigate) +// { +// if (this.cursor < 0) +// return; //no more moves +// move = this.moves[this.cursor]; +// } +// this.vr.undo(move); +// this.cursor--; +// this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined); +// if (this.settings.sound == 2) +// new Audio("/sounds/undo.mp3").play().catch(err => {}); +// this.incheck = this.vr.getCheckSquares(this.vr.turn); +// if (navigate) +// this.$children[0].$forceUpdate(); //TODO!? +// else if (this.mode == "analyze") //TODO: can this happen? +// this.moves.pop(); +// }, +// gotoMove: function(index) { +// this.vr = new V(this.moves[index].fen); +// this.cursor = index; +// this.lastMove = this.moves[index]; +// }, +// gotoBegin: function() { +// this.vr = new V(this.fenStart); +// this.cursor = -1; +// this.lastMove = null; +// }, +// gotoEnd: function() { +// this.gotoMove(this.moves.length-1); +// }, +// flip: function() { +// this.orientation = V.GetNextCol(this.orientation); +// }, +// }, +}; +</script> diff --git a/client/next_src/components/moveList.js b/client/src/components/MoveList.vue similarity index 97% rename from client/next_src/components/moveList.js rename to client/src/components/MoveList.vue index 48a8e05c..fa01cf16 100644 --- a/client/next_src/components/moveList.js +++ b/client/src/components/MoveList.vue @@ -1,5 +1,7 @@ +<script> // Component for moves list on the right -Vue.component('my-move-list', { +export default { + name: 'my-move-list', props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator // --> we could also add turn indicator here data: function() { @@ -91,4 +93,5 @@ Vue.component('my-move-list', { this.$emit("goto-move", index); }, }, -}) +}; +</script> diff --git a/client/src/router.js b/client/src/router.js index b373cdc2..82f01009 100644 --- a/client/src/router.js +++ b/client/src/router.js @@ -1,6 +1,6 @@ import Vue from "vue"; import Router from "vue-router"; -import Home from "./views/Home.vue"; +import Hall from "./views/Hall.vue"; Vue.use(Router); @@ -12,19 +12,19 @@ export default new Router({ routes: [ { path: "/", - name: "home", - component: Home, + name: "hall", + component: Hall, }, { path: "/variants", name: "variants", component: loadView("Variants"), }, -// { -// path: "/variants/:vname([a-zA-Z0-9]+)", -// name: "rules", -// component: Rules, -// }, + { + path: "/variants/:vname([a-zA-Z0-9]+)", + name: "rules", + component: loadView("Rules"), + }, // { // path: "/about", // name: "about", diff --git a/client/src/translations/en.js b/client/src/translations/en.js index 28c83dd3..44e35539 100644 --- a/client/src/translations/en.js +++ b/client/src/translations/en.js @@ -1,6 +1,6 @@ export const translations = { - "Home": "Home", + "Hall": "Hall", "Variants": "Variants", "My games": "My games", "Problems": "Problems", diff --git a/client/src/translations/fr.js b/client/src/translations/fr.js index 4d242c2c..4fa79575 100644 --- a/client/src/translations/fr.js +++ b/client/src/translations/fr.js @@ -1,6 +1,6 @@ export const translations = { - "Home": "Accueil", + "Hall": "Hall", "Variants": "Variantes", "My games": "Mes parties", "Problems": "Problèmes", diff --git a/client/src/views/Home.vue b/client/src/views/Hall.vue similarity index 99% rename from client/src/views/Home.vue rename to client/src/views/Hall.vue index 3a7e383f..ca0caa26 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Hall.vue @@ -69,7 +69,7 @@ import { NbPlayers } from "@/data/nbPlayers"; import GameList from "@/components/GameList.vue"; import ChallengeList from "@/components/ChallengeList.vue"; export default { - name: "home", + name: "my-hall", components: { GameList, ChallengeList, diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue new file mode 100644 index 00000000..2cfd3318 --- /dev/null +++ b/client/src/views/Rules.vue @@ -0,0 +1,79 @@ +<template lang="pug"> +.row + .col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 + .button-group + button(@click="display='rules'") Read the rules + button(v-show="!gameInProgress" @click="watchComputerGame") + | Observe a sample game + button(v-show="!gameInProgress" @click="playAgainstComputer") + | Beat the computer! + button(v-show="gameInProgress" @click="stopGame") + | Stop game + div(v-show="display=='rules'" v-html="content" class="section-content") + Game(v-show="display=='computer'" :mycolor="mycolor" :fen="fen" + :mode="mode" :sub-mode="subMode" + @computer-think="gameInProgress=false" @game-over="stopGame") +</template> + +<script> +import Game from "@/components/Game.vue"; +import { store } from "@/store"; +export default { + name: 'my-rules', + data: function() { + return { + st: store.state, + content: "", + display: "rules", + mode: "computer", + subMode: "", //'auto' for game CPU vs CPU + gameInProgress: false, + mycolor: "w", + fen: "", + }; + }, + mounted: function() { + // Method to replace diagrams in loaded HTML + const replaceByDiag = (match, p1, p2) => { + const args = this.parseFen(p2); + return getDiagram(args); + }; + // (AJAX) Request to get rules content (plain text, HTML) + this.content = + require("raw-loader!pug-plain-loader!@/rules/" + + this.$route.params["vname"] + "/" + this.st.lang + ".pug") + .replace(/(fen:)([^:]*):/g, replaceByDiag); + }, + methods: { + parseFen(fen) { + const fenParts = fen.split(" "); + return { + position: fenParts[0], + marks: fenParts[1], + orientation: fenParts[2], + shadow: fenParts[3], + }; + }, + startGame: function() { + if (this.gameInProgress) + return; + this.gameInProgress = true; + this.mode = "computer"; + this.display = "computer"; + this.fen = V.GenRandInitFen(); + }, + stopGame: function() { + this.gameInProgress = false; + this.mode = "analyze"; + }, + playAgainstComputer: function() { + this.subMode = ""; + this.startGame(); + }, + watchComputerGame: function() { + this.subMode = "auto"; + this.startGame(); + }, + }, +}; +</script> diff --git a/client/src/views/Variants.vue b/client/src/views/Variants.vue index bb345257..503be054 100644 --- a/client/src/views/Variants.vue +++ b/client/src/views/Variants.vue @@ -15,7 +15,7 @@ <script> import { store } from "@/store"; export default { - name: "variants", + name: "my-variants", data: function() { return { curPrefix: "", -- 2.44.0