From: Benjamin Auder Date: Thu, 31 Jan 2019 23:19:13 +0000 (+0100) Subject: Draft of Rules view (not working) with computer play X-Git-Url: https://git.auder.net/?p=vchess.git;a=commitdiff_plain;h=cf2343cee5729c011770ace6d5b4f79d1ac3a2b6 Draft of Rules view (not working) with computer play --- 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 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: ` -
- -
-
- -

- {{ translate("Chat with ") }} - {{ o.name }} -

-

o.id == chat.uid)"} - v-html="chat.msg" - > - TODO: why chat.msg fails here? -

- - -
-
-
- `, - 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: ` -
- -
-
- -

- {{ endgameMessage }} -

-
-
- - - - -
- - - - - -
-
- - - -
-
- -
- {{ moves[cursor].message }} -
-
-
-

- {{ vr.getFen() }} -

-
-
- - -
- - -
-
- - -
- `, - 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 { - for (let i=0; i {}); - 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: ` -
-
- - - - -
-
- - -
- `, - 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 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/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 @@ + + + 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 @@ + 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 @@ + + + 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 @@