-
-
{{ endgameMessage }}
+
+
+ {{ endgameMessage }}
+
-
-
- //TODO: connection + turn indicators en haut à droite (superposé au menu)
-
- // TODO: controls: abort, clear, resign, draw (avec confirm box)
- // et si partie terminée : (mode analyse) just clear, back / play
- // + flip button toujours disponible
- // Show current FEN (just below board, lower right corner)
-// (if mode != Dark ...)
- elementArray.push(
- h('div',
- {
- attrs: { id: "fen-div" },
- "class": { "section-content": true },
- },
- [
- h('p',
- {
- attrs: { id: "fen-string" },
- domProps: { innerHTML: this.vr.getBaseFen() },
- "class": { "text-center": true },
- }
- )
- ]
- )
- );
-
+
+
+
+
+
+
+ {{ vr.getFen() }}
+
+
-
+
+
-
-
+
+
+
`,
- computed: {
- endgameMessage: function() {
- let eogMessage = "Unfinished";
- switch (this.game.score)
- {
- case "1-0":
- eogMessage = translations["White win"];
- break;
- case "0-1":
- eogMessage = translations["Black win"];
- break;
- case "1/2":
- eogMessage = translations["Draw"];
- break;
- }
- return eogMessage;
- },
- },
created: function() {
const url = socketUrl;
this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
-// const socketOpenListener = () => {
-// };
-
-// TODO: after game, archive in indexedDB
-
+ // TODO: after game, archive in indexedDB
// TODO: this events listener is central. Refactor ? How ?
const socketMessageListener = msg => {
const data = JSON.parse(msg.data);
@@ -183,29 +152,11 @@ Vue.component('my-game', {
const socketCloseListener = () => {
this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
- //this.conn.addEventListener('open', socketOpenListener);
this.conn.addEventListener('message', socketMessageListener);
this.conn.addEventListener('close', socketCloseListener);
};
- //this.conn.onopen = socketOpenListener;
this.conn.onmessage = socketMessageListener;
this.conn.onclose = socketCloseListener;
-
-
- // Listen to keyboard left/right to navigate in game
- // TODO: also mouse wheel !
- document.onkeydown = event => {
- if (["human","computer"].includes(this.mode) &&
- !!this.vr && this.vr.moves.length > 0 && [37,39].includes(event.keyCode))
- {
- event.preventDefault();
- if (event.keyCode == 37) //Back
- this.undo();
- else //Forward (39)
- this.play();
- }
- };
-
// Computer moves web worker logic: (TODO: also for observers in HH games)
this.compWorker.postMessage(["scripts",variant.name]);
@@ -233,19 +184,41 @@ Vue.component('my-game', {
}, delay);
}
},
-
-
+ //TODO: conn pourrait être une prop, donnée depuis variant.js
+ //dans variant.js (plutôt room.js) conn gère aussi les challenges
+ // Puis en webRTC, repenser tout ça.
methods: {
+ 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() {
// Variants may have special PGN structure (so next function isn't defined here)
- const content = V.GetPGN(this.moves, this.mycolor, this.score, this.fenStart, this.mode);
+ // TODO: get fenStart from local game (using gameid)
+ const content = V.GetPGN(this.moves, this.mycolor, this.score, fenStart, this.mode);
// 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();
},
- showScoreMsg: function() {
+ showScoreMsg: function(score) {
+ this.setEndgameMessage(score);
let modalBox = document.getElementById("modal-eog");
modalBox.checked = true;
setTimeout(() => { modalBox.checked = false; }, 2000);
@@ -257,14 +230,15 @@ Vue.component('my-game', {
const prefix = (this.mode=="computer" ? "comp-" : "");
localStorage.setItem(prefix+"score", score);
}
- this.showScoreMsg();
+ this.showScoreMsg(score);
if (this.mode == "human" && this.oppConnected)
{
// Send our nickname to opponent
this.conn.send(JSON.stringify({
code:"myname", name:this.myname, oppid:this.oppid}));
}
- this.cursor = this.vr.moves.length; //to navigate in finished game
+ // TODO: what about cursor ?
+ //this.cursor = this.vr.moves.length; //to navigate in finished game
},
resign: function(e) {
this.getRidOfTooltip(e.currentTarget);
@@ -282,42 +256,88 @@ Vue.component('my-game', {
this.timeStart = Date.now();
this.compWorker.postMessage(["askmove"]);
},
- // OK, these last functions can stay here (?!)
+ animateMove: function(move) {
+ let startSquare = document.getElementById(this.getSquareId(move.start));
+ let endSquare = document.getElementById(this.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("#" + this.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