ef3855927b7fea90bbe44c64d1415ae53e949226
1 // Game logic on a variant page: 3 modes, analyze, computer or human
2 // TODO: envoyer juste "light move", sans FEN ni notation ...etc
3 // TODO: if I'm an observer and player(s) disconnect/reconnect, how to find me ?
4 // onClick :: ask full game to remote player, and register as an observer in game
5 // (use gameId to communicate)
6 // on landing on game :: if gameId not found locally, check remotely
7 // ==> il manque un param dans game : "remoteId"
8 Vue
.component('my-game', {
9 // gameId: to find the game in storage (assumption: it exists)
10 // fen: to start from a FEN without identifiers (analyze mode)
11 // subMode: "auto" (game comp vs comp) or "corr" (correspondance game),
12 // or "examine" (after human game: TODO)
13 props: ["conn","gameId","fen","mode","subMode","allowChat","allowMovelist",
14 "queryHash","settings"],
17 // Web worker to play computer moves without freezing interface:
18 compWorker: new Worker('/javascripts/playCompMove.js'),
19 timeStart: undefined, //time when computer starts thinking
20 vr: null, //VariantRules object, describing the game state + rules
23 lockCompThink: false, //used to avoid some ghost moves
24 myname: user
.name
, //may be anonymous (thus no name)
25 opponents: {}, //filled later (potentially 2 or 3 opponents)
26 drawOfferSent: false, //did I just ask for draw?
27 people: {}, //observers
28 score: "*", //'*' means 'unfinished'
29 // userColor: given by gameId, or fen in problems mode (if no game Id)...
32 moves: [], //TODO: initialize if gameId is defined...
33 cursor: -1, //index of the move just played
38 fen: function(newFen
) {
39 // (Security) No effect if a computer move is in progress:
40 if (this.mode
== "computer" && this.lockCompThink
)
41 return this.$emit("computer-think");
42 this.newGameFromFen(newFen
);
47 queryHash: function(newQhash
) {
48 // New query hash = "id=42"; get 42 as gameId
49 this.gameId
= parseInt(newQhash
.substr(2));
54 showChat: function() {
55 return this.allowChat
&& this.mode
=='human' && this.score
!= '*';
57 showMoves: function() {
59 return this.allowMovelist
&& window
.innerWidth
>= 768;
62 return variant
.name
!= "Dark" || this.score
!= "*";
65 // Modal end of game, and then sub-components
67 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
68 <input id="modal-eog" type="checkbox" class="modal"/>
69 <div role="dialog" aria-labelledby="eogMessage">
70 <div class="card smallpad small-modal text-center">
71 <label for="modal-eog" class="modal-close">
73 <h3 id="eogMessage" class="section">
78 <my-chat v-if="showChat" :conn="conn" :myname="myname"
79 :opponents="opponents" :people="people">
81 <my-board v-bind:vr="vr" :last-move="lastMove" :mode="mode"
82 :orientation="orientation" :user-color="mycolor" :settings="settings"
85 <div class="button-group">
86 <button @click="() => play()">Play</button>
87 <button @click="() => undo()">Undo</button>
88 <button @click="flip">Flip</button>
89 <button @click="gotoBegin">GotoBegin</button>
90 <button @click="gotoEnd">GotoEnd</button>
92 <div v-if="mode=='human'" class="button-group">
93 <button @click="offerDraw">Draw</button>
94 <button @click="abortGame">Abort</button>
95 <button @click="resign">Resign</button>
97 <div v-if="mode=='human' && subMode=='corr'">
98 <textarea v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg">
100 <div v-show="cursor>=0">
101 {{ moves[cursor].message }}
104 <div v-if="showFen && !!vr" id="fen-div" class="section-content">
105 <p id="fen-string" class="text-center">
109 <div id="pgn-div" class="section-content">
110 <a id="download" href="#">
112 <div class="button-group">
113 <button id="downloadBtn" @click="download">
114 {{ translate("Download PGN") }}
116 <button>Import game</button>
119 <my-move-list v-if="showMoves" :moves="moves" :cursor="cursor" @goto-move="gotoMove">
123 created: function() {
128 this.vr
= new VariantRules(this.fen
);
129 this.fenStart
= this.fen
;
131 // TODO: if I'm one of the players in game, then:
132 // Send ping to server (answer pong if opponent is connected)
133 if (true && !!this.conn
)
135 this.conn
.send(JSON
.stringify({
136 code:"ping",oppid:this.oppid
,gameId:this.gameId
}));
138 // TODO: also handle "draw accepted" (use opponents array?)
139 // --> must give this info also when sending lastState...
140 // and, if all players agree then OK draw (end game ...etc)
141 const socketMessageListener
= msg
=> {
142 const data
= JSON
.parse(msg
.data
);
146 case "newmove": //..he played!
147 this.play(data
.move, variant
.name
!="Dark" ? "animate" : null);
149 case "pong": //received if we sent a ping (game still alive on our side)
150 if (this.gameId
!= data
.gameId
)
151 break; //games IDs don't match: definitely over...
152 this.oppConnected
= true;
153 // Send our "last state" informations to opponent(s)
154 L
= this.vr
.moves
.length
;
155 Object
.keys(this.opponents
).forEach(oid
=> {
156 this.conn
.send(JSON
.stringify({
160 lastMove: (L
>0?this.vr
.moves
[L
-1]:undefined),
165 // TODO: refactor this, because at 3 or 4 players we may have missed 2 or 3 moves (not just one)
166 case "lastate": //got opponent infos about last move
167 L
= this.vr
.moves
.length
;
168 if (this.gameId
!= data
.gameId
)
169 break; //games IDs don't match: nothing we can do...
170 // OK, opponent still in game (which might be over)
171 if (this.score
!= "*")
173 // We finished the game (any result possible)
174 this.conn
.send(JSON
.stringify({
181 else if (!!data
.score
) //opponent finished the game
182 this.endGame(data
.score
);
183 else if (data
.movesCount
< L
)
185 // We must tell last move to opponent
186 this.conn
.send(JSON
.stringify({
188 oppid: this.opponent
.id
,
190 lastMove: this.vr
.moves
[L
-1],
194 else if (data
.movesCount
> L
) //just got last move from him
195 this.play(data
.lastMove
, "animate");
197 case "resign": //..you won!
198 this.endGame(this.mycolor
=="w"?"1-0":"0-1");
200 // TODO: also use (dis)connect info to count online players?
203 if (this.mode
=="human")
205 const online
= (data
.code
== "connect");
206 // If this is an opponent ?
207 if (!!this.opponents
[data
.id
])
208 this.opponents
[data
.id
].online
= online
;
213 delete this.people
[data
.id
];
215 this.people
[data
.id
] = data
.name
;
221 const socketCloseListener
= () => {
222 this.conn
.addEventListener('message', socketMessageListener
);
223 this.conn
.addEventListener('close', socketCloseListener
);
227 this.conn
.onmessage
= socketMessageListener
;
228 this.conn
.onclose
= socketCloseListener
;
230 // Computer moves web worker logic: (TODO: also for observers in HH games ?)
231 this.compWorker
.postMessage(["scripts",variant
.name
]);
232 this.compWorker
.onmessage
= e
=> {
233 this.lockCompThink
= true; //to avoid some ghost moves
234 let compMove
= e
.data
;
235 if (!Array
.isArray(compMove
))
236 compMove
= [compMove
]; //to deal with MarseilleRules
237 // Small delay for the bot to appear "more human"
238 const delay
= Math
.max(500-(Date
.now()-this.timeStart
), 0);
240 const animate
= variant
.name
!= "Dark";
241 this.play(compMove
[0], animate
);
242 if (compMove
.length
== 2)
243 setTimeout( () => { this.play(compMove
[1], animate
); }, 750);
244 else //250 == length of animation (TODO: should be a constant somewhere)
245 setTimeout( () => this.lockCompThink
= false, 250);
249 // dans variant.js (plutôt room.js) conn gère aussi les challenges
250 // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
252 offerDraw: function() {
253 if (!confirm("Offer draw?"))
255 // Stay in "draw offer sent" state until next move is played
256 this.drawOfferSent
= true;
257 if (this.subMode
== "corr")
259 // TODO: set drawOffer on in game (how ?)
263 this.opponents
.forEach(o
=> {
267 this.conn
.send(JSON
.stringify({code: "draw", oppid: o
.id
}));
268 } catch (INVALID_STATE_ERR
) {
275 // + conn handling: "draw" message ==> agree for draw (if we have "drawOffered" at true)
276 receiveDrawOffer: function() {
278 // TODO: ignore if preventDrawOffer is set; otherwise show modal box with option "prevent future offers"
279 // if accept: send message "draw"
281 abortGame: function() {
282 if (!confirm("Abort the game?"))
284 //+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions,
285 //send message: "gameOver" avec score "?"
287 resign: function(e
) {
288 if (!confirm("Resign the game?"))
290 if (this.mode
== "human" && this.oppConnected(this.oppid
))
293 this.conn
.send(JSON
.stringify({code: "resign", oppid: this.oppid
}));
294 } catch (INVALID_STATE_ERR
) {
298 this.endGame(this.mycolor
=="w"?"0-1":"1-0");
300 translate: translate
,
301 newGameFromFen: function(fen
) {
302 this.vr
= new VariantRules(fen
);
305 this.fenStart
= newFen
;
307 if (this.mode
== "analyze")
309 this.mycolor
= V
.ParseFen(newFen
).turn
;
310 this.orientation
= this.mycolor
;
312 else if (this.mode
== "computer") //only other alternative (HH with gameId)
314 this.mycolor
= (Math
.random() < 0.5 ? "w" : "b");
315 this.orientation
= this.mycolor
;
316 this.compWorker
.postMessage(["init",newFen
]);
317 if (this.mycolor
!= "w" || this.subMode
== "auto")
318 this.playComputerMove();
321 loadGame: function() {
322 // TODO: ask game to remote peer if this.remoteId is set
323 // (or just if game not found locally)
324 // NOTE: if it's a corr game, ask it from server
325 const game
= getGameFromStorage(this.gameId
);
326 this.opponent
.id
= game
.oppid
; //opponent ID in case of running HH game
327 this.opponent
.name
= game
.oppname
; //maye be blank (if anonymous)
328 this.score
= game
.score
;
329 this.mycolor
= game
.mycolor
;
330 this.fenStart
= game
.fenStart
;
331 this.moves
= game
.moves
;
332 this.cursor
= game
.moves
.length
-1;
333 this.lastMove
= (game
.moves
.length
> 0 ? game
.moves
[this.cursor
] : null);
335 setEndgameMessage: function(score
) {
336 let eogMessage
= "Undefined";
340 eogMessage
= translations
["White win"];
343 eogMessage
= translations
["Black win"];
346 eogMessage
= translations
["Draw"];
349 eogMessage
= "Unfinished";
352 this.endgameMessage
= eogMessage
;
354 download: function() {
355 const content
= this.getPgn();
356 // Prepare and trigger download link
357 let downloadAnchor
= document
.getElementById("download");
358 downloadAnchor
.setAttribute("download", "game.pgn");
359 downloadAnchor
.href
= "data:text/plain;charset=utf-8," + encodeURIComponent(content
);
360 downloadAnchor
.click();
364 pgn
+= '[Site "vchess.club"]\n';
365 const opponent
= (this.mode
=="human" ? "Anonymous" : "Computer");
366 pgn
+= '[Variant "' + variant
.name
+ '"]\n';
367 pgn
+= '[Date "' + getDate(new Date()) + '"]\n';
368 const whiteName
= ["human","computer"].includes(this.mode
)
369 ? (this.mycolor
=='w'?'Myself':opponent
)
371 const blackName
= ["human","computer"].includes(this.mode
)
372 ? (this.mycolor
=='b'?'Myself':opponent
)
374 pgn
+= '[White "' + whiteName
+ '"]\n';
375 pgn
+= '[Black "' + blackName
+ '"]\n';
376 pgn
+= '[Fen "' + this.fenStart
+ '"]\n';
377 pgn
+= '[Result "' + this.score
+ '"]\n\n';
380 while (i
< this.moves
.length
)
382 pgn
+= (counter
++) + ".";
383 for (let color
of ["w","b"])
386 while (i
< this.moves
.length
&& this.moves
[i
].color
== color
)
387 move += this.moves
[i
++].notation
[0] + ",";
388 move = move.slice(0,-1); //remove last comma
389 pgn
+= move + (i
< this.moves
.length
-1 ? " " : "");
394 showScoreMsg: function(score
) {
395 this.setEndgameMessage(score
);
396 let modalBox
= document
.getElementById("modal-eog");
397 modalBox
.checked
= true;
398 setTimeout(() => { modalBox
.checked
= false; }, 2000);
400 endGame: function(score
) {
402 this.showScoreMsg(score
);
403 if (this.mode
== "human")
404 localStorage
["score"] = score
;
405 this.$emit("game-over");
407 oppConnected: function(uid
) {
408 return this.opponents
.any(o
=> o
.id
== uidi
&& o
.online
);
410 playComputerMove: function() {
411 this.timeStart
= Date
.now();
412 this.compWorker
.postMessage(["askmove"]);
414 animateMove: function(move) {
415 let startSquare
= document
.getElementById(getSquareId(move.start
));
416 let endSquare
= document
.getElementById(getSquareId(move.end
));
417 let rectStart
= startSquare
.getBoundingClientRect();
418 let rectEnd
= endSquare
.getBoundingClientRect();
419 let translation
= {x:rectEnd
.x
-rectStart
.x
, y:rectEnd
.y
-rectStart
.y
};
421 document
.querySelector("#" + getSquareId(move.start
) + " > img.piece");
422 // HACK for animation (with positive translate, image slides "under background")
423 // Possible improvement: just alter squares on the piece's way...
424 squares
= document
.getElementsByClassName("board");
425 for (let i
=0; i
<squares
.length
; i
++)
427 let square
= squares
.item(i
);
428 if (square
.id
!= getSquareId(move.start
))
429 square
.style
.zIndex
= "-1";
431 movingPiece
.style
.transform
= "translate(" + translation
.x
+ "px," +
432 translation
.y
+ "px)";
433 movingPiece
.style
.transitionDuration
= "0.2s";
434 movingPiece
.style
.zIndex
= "3000";
436 for (let i
=0; i
<squares
.length
; i
++)
437 squares
.item(i
).style
.zIndex
= "auto";
438 movingPiece
.style
= {}; //required e.g. for 0-0 with KR swap
442 play: function(move, programmatic
) {
443 let navigate
= !move;
444 // Forbid playing outside analyze mode when cursor isn't at moves.length-1
445 // (except if we receive opponent's move, human or computer)
446 if (!navigate
&& this.mode
!= "analyze" && !programmatic
447 && this.cursor
< this.moves
.length
-1)
453 if (this.cursor
== this.moves
.length
-1)
454 return; //no more moves
455 move = this.moves
[this.cursor
+1];
457 if (!!programmatic
) //computer or (remote) human opponent
459 if (this.cursor
< this.moves
.length
-1)
460 this.gotoEnd(); //required to play the move
461 return this.animateMove(move);
463 // Not programmatic, or animation is over
464 if (this.mode
== "human" && this.subMode
== "corr" && this.mycolor
== this.vr
.turn
)
466 // TODO: show confirm box "validate move ?"
469 move.notation
= this.vr
.getNotation(move);
471 move.color
= this.vr
.turn
;
474 this.lastMove
= move;
476 move.fen
= this.vr
.getFen();
477 if (this.settings
.sound
== 2)
478 new Audio("/sounds/move.mp3").play().catch(err
=> {});
479 if (this.mode
== "human")
481 updateStorage(move); //after our moves and opponent moves
482 if (this.vr
.turn
== this.mycolor
)
483 this.conn
.send(JSON
.stringify({code:"newmove", move:move, oppid:this.oppid
}));
485 else if (this.mode
== "computer")
487 // Send the move to web worker (including his own moves)
488 this.compWorker
.postMessage(["newmove",move]);
490 if (!navigate
&& (this.score
== "*" || this.mode
== "analyze"))
492 // Stack move on movesList at current cursor
493 if (this.cursor
== this.moves
.length
)
494 this.moves
.push(move);
496 this.moves
= this.moves
.slice(0,this.cursor
-1).concat([move]);
498 // Is opponent in check?
499 this.incheck
= this.vr
.getCheckSquares(this.vr
.turn
);
500 const score
= this.vr
.getCurrentScore();
503 if (["human","computer"].includes(this.mode
))
505 else //just show score on screen (allow undo)
506 this.showScoreMsg(score
);
508 // subTurn condition for Marseille (and Avalanche) rules
509 else if ((this.mode
== "computer" && (!this.vr
.subTurn
|| this.vr
.subTurn
<= 1))
510 && (this.subMode
== "auto" || this.vr
.turn
!= this.mycolor
))
512 this.playComputerMove();
514 // https://vuejs.org/v2/guide/list.html#Caveats (also for undo)
516 this.$children
[0].$forceUpdate(); //TODO!?
518 undo: function(move) {
519 let navigate
= !move;
523 return; //no more moves
524 move = this.moves
[this.cursor
];
528 this.lastMove
= (this.cursor
>= 0 ? this.moves
[this.cursor
] : undefined);
529 if (this.settings
.sound
== 2)
530 new Audio("/sounds/undo.mp3").play().catch(err
=> {});
531 this.incheck
= this.vr
.getCheckSquares(this.vr
.turn
);
533 this.$children
[0].$forceUpdate(); //TODO!?
534 else if (this.mode
== "analyze") //TODO: can this happen?
537 gotoMove: function(index
) {
538 this.vr
= new VariantRules(this.moves
[index
].fen
);
540 this.lastMove
= this.moves
[index
];
542 gotoBegin: function() {
543 this.vr
= new VariantRules(this.fenStart
);
545 this.lastMove
= null;
547 gotoEnd: function() {
548 this.gotoMove(this.moves
.length
-1);
551 this.orientation
= V
.GetNextCol(this.orientation
);