projects / vchess.git / blob
? search:


278e07824ed9066db980f8a0d5492f2d387cb289
[vchess.git] / public / javascripts / components / game.js
1 // Game logic on a variant page
2 Vue.component('my-game', {
3 data: function() {
4 return {
5 vr: null, //object to check moves, store them, FEN..
6 mycolor: "w",
7 possibleMoves: [], //filled after each valid click/dragstart
8 choices: [], //promotion pieces, or checkered captures... (as moves)
9 start: {}, //pixels coordinates + id of starting square (click or drag)
10 selectedPiece: null, //moving piece (or clicked piece)
11 conn: null, //socket connection
12 score: "*", //'*' means 'unfinished'
13 mode: "idle", //human, friend, computer or idle (when not playing)
14 oppid: "", //opponent ID in case of HH game
15 oppConnected: false,
16 seek: false,
17 fenStart: "",
18 incheck: [],
19 pgnTxt: "",
20 hints: (getCookie("hints") === "1" ? true : false),
21 color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
22 // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
23 sound: parseInt(getCookie("sound", "2")),
24 };
25 },
26 render(h) {
27 const [sizeX,sizeY] = [V.size.x,V.size.y];
28 const smallScreen = (window.innerWidth <= 420);
29 // Precompute hints squares to facilitate rendering
30 let hintSquares = doubleArray(sizeX, sizeY, false);
31 this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
32 // Also precompute in-check squares
33 let incheckSq = doubleArray(sizeX, sizeY, false);
34 this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
35 let elementArray = [];
36 let actionArray = [];
37 actionArray.push(
38 h('button',
39 {
40 on: { click: this.clickGameSeek },
41 attrs: { "aria-label": 'New online game' },
42 'class': {
43 "tooltip": true,
44 "bottom": true, //display below
45 "seek": this.seek,
46 "playing": this.mode == "human",
47 "small": smallScreen,
48 },
49 },
50 [h('i', { 'class': { "material-icons": true } }, "accessibility")])
51 );
52 if (["idle","computer"].includes(this.mode))
53 {
54 actionArray.push(
55 h('button',
56 {
57 on: { click: this.clickComputerGame },
58 attrs: { "aria-label": 'New game VS computer' },
59 'class': {
60 "tooltip":true,
61 "bottom": true,
62 "playing": this.mode == "computer",
63 "small": smallScreen,
64 },
65 },
66 [h('i', { 'class': { "material-icons": true } }, "computer")])
67 );
68 }
69 if (["idle","friend"].includes(this.mode))
70 {
71 actionArray.push(
72 h('button',
73 {
74 on: { click: this.clickFriendGame },
75 attrs: { "aria-label": 'New IRL game' },
76 'class': {
77 "tooltip":true,
78 "bottom": true,
79 "playing": this.mode == "friend",
80 "small": smallScreen,
81 },
82 },
83 [h('i', { 'class': { "material-icons": true } }, "people")])
84 );
85 }
86 if (!!this.vr)
87 {
88 const square00 = document.getElementById("sq-0-0");
89 const squareWidth = !!square00
90 ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
91 : 0;
92 const settingsBtnElt = document.getElementById("settingsBtn");
93 const indicWidth = !!settingsBtnElt //-2 for border:
94 ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
95 : (smallScreen ? 31 : 37);
96 if (this.mode == "human")
97 {
98 let connectedIndic = h(
99 'div',
100 {
101 "class": {
102 "topindicator": true,
103 "indic-left": true,
104 "connected": this.oppConnected,
105 "disconnected": !this.oppConnected,
106 },
107 style: {
108 "width": indicWidth + "px",
109 "height": indicWidth + "px",
110 },
111 }
112 );
113 elementArray.push(connectedIndic);
114 }
115 let turnIndic = h(
116 'div',
117 {
118 "class": {
119 "topindicator": true,
120 "indic-right": true,
121 "white-turn": this.vr.turn=="w",
122 "black-turn": this.vr.turn=="b",
123 },
124 style: {
125 "width": indicWidth + "px",
126 "height": indicWidth + "px",
127 },
128 }
129 );
130 elementArray.push(turnIndic);
131 let settingsBtn = h(
132 'button',
133 {
134 on: { click: this.showSettings },
135 attrs: {
136 "aria-label": 'Settings',
137 "id": "settingsBtn",
138 },
139 'class': {
140 "tooltip": true,
141 "topindicator": true,
142 "indic-right": true,
143 "settings-btn": !smallScreen,
144 "settings-btn-small": smallScreen,
145 },
146 },
147 [h('i', { 'class': { "material-icons": true } }, "settings")]
148 );
149 elementArray.push(settingsBtn);
150 let choices = h('div',
151 {
152 attrs: { "id": "choices" },
153 'class': { 'row': true },
154 style: {
155 "display": this.choices.length>0?"block":"none",
156 "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
157 "width": (this.choices.length * squareWidth) + "px",
158 "height": squareWidth + "px",
159 },
160 },
161 this.choices.map( m => { //a "choice" is a move
162 return h('div',
163 {
164 'class': {
165 'board': true,
166 ['board'+sizeY]: true,
167 },
168 style: {
169 'width': (100/this.choices.length) + "%",
170 'padding-bottom': (100/this.choices.length) + "%",
171 },
172 },
173 [h('img',
174 {
175 attrs: { "src": '/images/pieces/' +
176 VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
177 'class': { 'choice-piece': true },
178 on: { "click": e => { this.play(m); this.choices=[]; } },
179 })
180 ]
181 );
182 })
183 );
184 // Create board element (+ reserves if needed by variant or mode)
185 const lm = this.vr.lastMove;
186 const showLight = this.hints &&
187 (this.mode!="idle" || this.cursor==this.vr.moves.length);
188 let gameDiv = h('div',
189 {
190 'class': { 'game': true },
191 },
192 [_.range(sizeX).map(i => {
193 let ci = this.mycolor=='w' ? i : sizeX-i-1;
194 return h(
195 'div',
196 {
197 'class': {
198 'row': true,
199 },
200 style: { 'opacity': this.choices.length>0?"0.5":"1" },
201 },
202 _.range(sizeY).map(j => {
203 let cj = this.mycolor=='w' ? j : sizeY-j-1;
204 let elems = [];
205 if (this.vr.board[ci][cj] != VariantRules.EMPTY)
206 {
207 elems.push(
208 h(
209 'img',
210 {
211 'class': {
212 'piece': true,
213 'ghost': !!this.selectedPiece
214 && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
215 },
216 attrs: {
217 src: "/images/pieces/" +
218 VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
219 },
220 }
221 )
222 );
223 }
224 if (this.hints && hintSquares[ci][cj])
225 {
226 elems.push(
227 h(
228 'img',
229 {
230 'class': {
231 'mark-square': true,
232 },
233 attrs: {
234 src: "/images/mark.svg",
235 },
236 }
237 )
238 );
239 }
240 return h(
241 'div',
242 {
243 'class': {
244 'board': true,
245 ['board'+sizeY]: true,
246 'light-square': (i+j)%2==0,
247 'dark-square': (i+j)%2==1,
248 [this.color]: true,
249 'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
250 'incheck': showLight && incheckSq[ci][cj],
251 },
252 attrs: {
253 id: this.getSquareId({x:ci,y:cj}),
254 },
255 },
256 elems
257 );
258 })
259 );
260 }), choices]
261 );
262 if (this.mode != "idle")
263 {
264 actionArray.push(
265 h('button',
266 {
267 on: { click: this.resign },
268 attrs: { "aria-label": 'Resign' },
269 'class': {
270 "tooltip":true,
271 "bottom": true,
272 "small": smallScreen,
273 },
274 },
275 [h('i', { 'class': { "material-icons": true } }, "flag")])
276 );
277 }
278 else if (this.vr.moves.length > 0)
279 {
280 // A game finished, and another is not started yet: allow navigation
281 actionArray = actionArray.concat([
282 h('button',
283 {
284 on: { click: e => this.undo() },
285 attrs: { "aria-label": 'Undo' },
286 "class": {
287 "small": smallScreen,
288 "marginleft": true,
289 },
290 },
291 [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
292 h('button',
293 {
294 on: { click: e => this.play() },
295 attrs: { "aria-label": 'Play' },
296 "class": { "small": smallScreen },
297 },
298 [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
299 ]
300 );
301 }
302 if (this.mode == "friend")
303 {
304 actionArray = actionArray.concat(
305 [
306 h('button',
307 {
308 on: { click: this.undoInGame },
309 attrs: { "aria-label": 'Undo' },
310 "class": {
311 "small": smallScreen,
312 "marginleft": true,
313 },
314 },
315 [h('i', { 'class': { "material-icons": true } }, "undo")]
316 ),
317 h('button',
318 {
319 on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
320 attrs: { "aria-label": 'Flip' },
321 "class": { "small": smallScreen },
322 },
323 [h('i', { 'class': { "material-icons": true } }, "cached")]
324 ),
325 ]);
326 }
327 elementArray.push(gameDiv);
328 if (!!this.vr.reserve)
329 {
330 const shiftIdx = (this.mycolor=="w" ? 0 : 1);
331 let myReservePiecesArray = [];
332 for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
333 {
334 myReservePiecesArray.push(h('div',
335 {
336 'class': {'board':true, ['board'+sizeY]:true},
337 attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
338 },
339 [
340 h('img',
341 {
342 'class': {"piece":true},
343 attrs: {
344 "src": "/images/pieces/" +
345 this.vr.getReservePpath(this.mycolor,i) + ".svg",
346 }
347 }),
348 h('sup',
349 {"class": { "reserve-count": true } },
350 [ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
351 )
352 ]));
353 }
354 let oppReservePiecesArray = [];
355 const oppCol = this.vr.getOppCol(this.mycolor);
356 for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
357 {
358 oppReservePiecesArray.push(h('div',
359 {
360 'class': {'board':true, ['board'+sizeY]:true},
361 attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
362 },
363 [
364 h('img',
365 {
366 'class': {"piece":true},
367 attrs: {
368 "src": "/images/pieces/" +
369 this.vr.getReservePpath(oppCol,i) + ".svg",
370 }
371 }),
372 h('sup',
373 {"class": { "reserve-count": true } },
374 [ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
375 )
376 ]));
377 }
378 let reserves = h('div',
379 {
380 'class':{
381 'game': true,
382 "reserve-div": true,
383 },
384 },
385 [
386 h('div',
387 {
388 'class': {
389 'row': true,
390 "reserve-row-1": true,
391 },
392 },
393 myReservePiecesArray
394 ),
395 h('div',
396 { 'class': { 'row': true }},
397 oppReservePiecesArray
398 )
399 ]
400 );
401 elementArray.push(reserves);
402 }
403 const eogMessage = this.getEndgameMessage(this.score);
404 const modalEog = [
405 h('input',
406 {
407 attrs: { "id": "modal-eog", type: "checkbox" },
408 "class": { "modal": true },
409 }),
410 h('div',
411 {
412 attrs: { "role": "dialog", "aria-labelledby": "eogMessage" },
413 },
414 [
415 h('div',
416 {
417 "class": { "card": true, "smallpad": true },
418 },
419 [
420 h('label',
421 {
422 attrs: { "for": "modal-eog" },
423 "class": { "modal-close": true },
424 }
425 ),
426 h('h3',
427 {
428 attrs: { "id": "eogMessage" },
429 "class": { "section": true },
430 domProps: { innerHTML: eogMessage },
431 }
432 )
433 ]
434 )
435 ]
436 )
437 ];
438 elementArray = elementArray.concat(modalEog);
439 }
440 // NOTE: this modal could be in Pug view (no usage of Vue functions or variables)
441 const modalNewgame = [
442 h('input',
443 {
444 attrs: { "id": "modal-newgame", type: "checkbox" },
445 "class": { "modal": true },
446 }),
447 h('div',
448 {
449 attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" },
450 },
451 [
452 h('div',
453 {
454 "class": { "card": true, "smallpad": true },
455 },
456 [
457 h('label',
458 {
459 attrs: { "id": "close-newgame", "for": "modal-newgame" },
460 "class": { "modal-close": true },
461 }
462 ),
463 h('h3',
464 {
465 attrs: { "id": "newGameTxt" },
466 "class": { "section": true },
467 domProps: { innerHTML: "New game" },
468 }
469 ),
470 h('p',
471 {
472 "class": { "section": true },
473 domProps: { innerHTML: "Waiting for opponent..." },
474 }
475 )
476 ]
477 )
478 ]
479 )
480 ];
481 elementArray = elementArray.concat(modalNewgame);
482 const modalFenEdit = [
483 h('input',
484 {
485 attrs: { "id": "modal-fenedit", type: "checkbox" },
486 "class": { "modal": true },
487 }),
488 h('div',
489 {
490 attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
491 },
492 [
493 h('div',
494 {
495 "class": { "card": true, "smallpad": true },
496 },
497 [
498 h('label',
499 {
500 attrs: { "id": "close-fenedit", "for": "modal-fenedit" },
501 "class": { "modal-close": true },
502 }
503 ),
504 h('h3',
505 {
506 attrs: { "id": "titleFenedit" },
507 "class": { "section": true },
508 domProps: { innerHTML: "Position + flags (FEN):" },
509 }
510 ),
511 h('input',
512 {
513 attrs: {
514 "id": "input-fen",
515 type: "text",
516 value: VariantRules.GenRandInitFen(),
517 },
518 }
519 ),
520 h('button',
521 {
522 on: { click:
523 () => {
524 const fen = document.getElementById("input-fen").value;
525 document.getElementById("modal-fenedit").checked = false;
526 this.newGame("friend", fen);
527 }
528 },
529 domProps: { innerHTML: "Ok" },
530 }
531 ),
532 h('button',
533 {
534 on: { click:
535 () => {
536 document.getElementById("input-fen").value =
537 VariantRules.GenRandInitFen();
538 }
539 },
540 domProps: { innerHTML: "Random" },
541 }
542 ),
543 ]
544 )
545 ]
546 )
547 ];
548 elementArray = elementArray.concat(modalFenEdit);
549 const modalSettings = [
550 h('input',
551 {
552 attrs: { "id": "modal-settings", type: "checkbox" },
553 "class": { "modal": true },
554 }),
555 h('div',
556 {
557 attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" },
558 },
559 [
560 h('div',
561 {
562 "class": { "card": true, "smallpad": true },
563 },
564 [
565 h('label',
566 {
567 attrs: { "id": "close-settings", "for": "modal-settings" },
568 "class": { "modal-close": true },
569 }
570 ),
571 h('h3',
572 {
573 attrs: { "id": "settingsTitle" },
574 "class": { "section": true },
575 domProps: { innerHTML: "Preferences" },
576 }
577 ),
578 h('fieldset',
579 { },
580 [
581 //h('legend', { domProps: { innerHTML: "Legend title" } }),
582 h('label',
583 {
584 attrs: { for: "setHints" },
585 domProps: { innerHTML: "Show hints?" },
586 },
587 ),
588 h('input',
589 {
590 attrs: {
591 "id": "setHints",
592 type: "checkbox",
593 checked: this.hints,
594 },
595 on: { "change": this.toggleHints },
596 }
597 ),
598 ]
599 ),
600 h('fieldset',
601 { },
602 [
603 h('label',
604 {
605 attrs: { for: "selectColor" },
606 domProps: { innerHTML: "Board colors" },
607 },
608 ),
609 h("select",
610 {
611 attrs: { "id": "selectColor" },
612 on: { "change": this.setColor },
613 },
614 [
615 h("option",
616 {
617 domProps: {
618 "value": "lichess",
619 innerHTML: "brown"
620 },
621 attrs: { "selected": this.color=="lichess" },
622 }
623 ),
624 h("option",
625 {
626 domProps: {
627 "value": "chesscom",
628 innerHTML: "green"
629 },
630 attrs: { "selected": this.color=="chesscom" },
631 }
632 ),
633 h("option",
634 {
635 domProps: {
636 "value": "chesstempo",
637 innerHTML: "blue"
638 },
639 attrs: { "selected": this.color=="chesstempo" },
640 }
641 ),
642 ],
643 ),
644 ]
645 ),
646 h('fieldset',
647 { },
648 [
649 h('label',
650 {
651 attrs: { for: "selectSound" },
652 domProps: { innerHTML: "Play sounds?" },
653 },
654 ),
655 h("select",
656 {
657 attrs: { "id": "selectSound" },
658 on: { "change": this.setSound },
659 },
660 [
661 h("option",
662 {
663 domProps: {
664 "value": "0",
665 innerHTML: "None"
666 },
667 attrs: { "selected": this.sound==0 },
668 }
669 ),
670 h("option",
671 {
672 domProps: {
673 "value": "1",
674 innerHTML: "Newgame"
675 },
676 attrs: { "selected": this.sound==1 },
677 }
678 ),
679 h("option",
680 {
681 domProps: {
682 "value": "2",
683 innerHTML: "All"
684 },
685 attrs: { "selected": this.sound==2 },
686 }
687 ),
688 ],
689 ),
690 ]
691 ),
692 ]
693 )
694 ]
695 )
696 ];
697 elementArray = elementArray.concat(modalSettings);
698 const actions = h('div',
699 {
700 attrs: { "id": "actions" },
701 'class': { 'text-center': true },
702 },
703 actionArray
704 );
705 elementArray.push(actions);
706 if (this.score != "*")
707 {
708 elementArray.push(
709 h('div',
710 {
711 attrs: { id: "pgn-div" },
712 "class": { "section-content": true },
713 },
714 [
715 h('a',
716 {
717 attrs: {
718 id: "download",
719 href: "#",
720 }
721 }
722 ),
723 h('p',
724 {
725 attrs: { id: "pgn-game" },
726 domProps: { innerHTML: this.pgnTxt }
727 }
728 ),
729 h('button',
730 {
731 attrs: { "id": "downloadBtn" },
732 on: { click: this.download },
733 domProps: { innerHTML: "Download game" },
734 }
735 ),
736 ]
737 )
738 );
739 }
740 else if (this.mode != "idle")
741 {
742 // Show current FEN
743 elementArray.push(
744 h('div',
745 {
746 attrs: { id: "fen-div" },
747 "class": { "section-content": true },
748 },
749 [
750 h('p',
751 {
752 attrs: { id: "fen-string" },
753 domProps: { innerHTML: this.vr.getFen() }
754 }
755 )
756 ]
757 )
758 );
759 }
760 return h(
761 'div',
762 {
763 'class': {
764 "col-sm-12":true,
765 "col-md-8":true,
766 "col-md-offset-2":true,
767 "col-lg-6":true,
768 "col-lg-offset-3":true,
769 },
770 // NOTE: click = mousedown + mouseup
771 on: {
772 mousedown: this.mousedown,
773 mousemove: this.mousemove,
774 mouseup: this.mouseup,
775 touchstart: this.mousedown,
776 touchmove: this.mousemove,
777 touchend: this.mouseup,
778 },
779 },
780 elementArray
781 );
782 },
783 created: function() {
784 const url = socketUrl;
785 const continuation = (localStorage.getItem("variant") === variant);
786 this.myid = (continuation ? localStorage.getItem("myid") : getRandString());
787 if (!continuation)
788 {
789 // HACK: play a small silent sound to allow "new game" sound later
790 // if tab not focused (TODO: does it really work ?!)
791 new Audio("/sounds/silent.mp3").play().then(() => {}).catch(err => {});
792 }
793 this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
794 const socketOpenListener = () => {
795 if (continuation)
796 {
797 const fen = localStorage.getItem("fen");
798 const mycolor = localStorage.getItem("mycolor");
799 const oppid = localStorage.getItem("oppid");
800 const moves = JSON.parse(localStorage.getItem("moves"));
801 this.newGame("human", fen, mycolor, oppid, moves, true);
802 // Send ping to server (answer pong if opponent is connected)
803 this.conn.send(JSON.stringify({code:"ping",oppid:this.oppid}));
804 }
805 else if (localStorage.getItem("newgame") === variant)
806 {
807 // New game request has been cancelled on disconnect
808 this.newGame("human", undefined, undefined, undefined, undefined, "reconnect");
809 }
810 };
811 const socketMessageListener = msg => {
812 const data = JSON.parse(msg.data);
813 switch (data.code)
814 {
815 case "duplicate":
816 // We opened another tab on the same game
817 this.mode = "idle";
818 this.vr = null;
819 alert("Already playing a game in this variant on another tab!");
820 break;
821 case "newgame": //opponent found
822 // oppid: opponent socket ID
823 this.newGame("human", data.fen, data.color, data.oppid);
824 break;
825 case "newmove": //..he played!
826 this.play(data.move, "animate");
827 break;
828 case "pong": //received if we sent a ping (game still alive on our side)
829 this.oppConnected = true;
830 const L = this.vr.moves.length;
831 // Send our "last state" informations to opponent
832 this.conn.send(JSON.stringify({
833 code:"lastate",
834 oppid:this.oppid,
835 lastMove:L>0?this.vr.moves[L-1]:undefined,
836 movesCount:L,
837 }));
838 break;
839 case "lastate": //got opponent infos about last move (we might have resigned)
840 if (this.mode!="human" || this.oppid!=data.oppid)
841 {
842 // OK, we resigned
843 this.conn.send(JSON.stringify({
844 code:"lastate",
845 oppid:this.oppid,
846 lastMove:undefined,
847 movesCount:-1,
848 }));
849 }
850 else if (data.movesCount < 0)
851 {
852 // OK, he resigned
853 this.endGame(this.mycolor=="w"?"1-0":"0-1");
854 }
855 else if (data.movesCount < this.vr.moves.length)
856 {
857 // We must tell last move to opponent
858 const L = this.vr.moves.length;
859 this.conn.send(JSON.stringify({
860 code:"lastate",
861 oppid:this.oppid,
862 lastMove:this.vr.moves[L-1],
863 movesCount:L,
864 }));
865 }
866 else if (data.movesCount > this.vr.moves.length) //just got last move from him
867 this.play(data.lastMove, "animate");
868 break;
869 case "resign": //..you won!
870 this.endGame(this.mycolor=="w"?"1-0":"0-1");
871 break;
872 // TODO: also use (dis)connect info to count online players?
873 case "connect":
874 case "disconnect":
875 if (this.mode == "human" && this.oppid == data.id)
876 this.oppConnected = (data.code == "connect");
877 break;
878 }
879 };
880 const socketCloseListener = () => {
881 this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
882 this.conn.addEventListener('open', socketOpenListener);
883 this.conn.addEventListener('message', socketMessageListener);
884 this.conn.addEventListener('close', socketCloseListener);
885 };
886 this.conn.onopen = socketOpenListener;
887 this.conn.onmessage = socketMessageListener;
888 this.conn.onclose = socketCloseListener;
889 // Listen to keyboard left/right to navigate in game
890 document.onkeydown = event => {
891 if (this.mode == "idle" && !!this.vr && this.vr.moves.length > 0
892 && [37,39].includes(event.keyCode))
893 {
894 event.preventDefault();
895 if (event.keyCode == 37) //Back
896 this.undo();
897 else //Forward (39)
898 this.play();
899 }
900 };
901 },
902 methods: {
903 download: function() {
904 let content = document.getElementById("pgn-game").innerHTML;
905 content = content.replace(/<br>/g, "\n");
906 // Prepare and trigger download link
907 let downloadAnchor = document.getElementById("download");
908 downloadAnchor.setAttribute("download", "game.pgn");
909 downloadAnchor.href = "data:text/plain;charset=utf-8," +
910 encodeURIComponent(content);
911 downloadAnchor.click();
912 },
913 endGame: function(score) {
914 this.score = score;
915 let modalBox = document.getElementById("modal-eog");
916 modalBox.checked = true;
917 // Variants may have special PGN structure (so next function isn't defined here)
918 this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
919 setTimeout(() => { modalBox.checked = false; }, 2000);
920 if (this.mode == "human")
921 this.clearStorage();
922 this.mode = "idle";
923 this.cursor = this.vr.moves.length; //to navigate in finished game
924 this.oppid = "";
925 },
926 getEndgameMessage: function(score) {
927 let eogMessage = "Unfinished";
928 switch (this.score)
929 {
930 case "1-0":
931 eogMessage = "White win";
932 break;
933 case "0-1":
934 eogMessage = "Black win";
935 break;
936 case "1/2":
937 eogMessage = "Draw";
938 break;
939 }
940 return eogMessage;
941 },
942 setStorage: function() {
943 localStorage.setItem("myid", this.myid);
944 localStorage.setItem("variant", variant);
945 localStorage.setItem("mycolor", this.mycolor);
946 localStorage.setItem("oppid", this.oppid);
947 localStorage.setItem("fenStart", this.fenStart);
948 localStorage.setItem("moves", JSON.stringify(this.vr.moves));
949 localStorage.setItem("fen", this.vr.getFen());
950 },
951 updateStorage: function() {
952 localStorage.setItem("moves", JSON.stringify(this.vr.moves));
953 localStorage.setItem("fen", this.vr.getFen());
954 },
955 clearStorage: function() {
956 delete localStorage["variant"];
957 delete localStorage["myid"];
958 delete localStorage["mycolor"];
959 delete localStorage["oppid"];
960 delete localStorage["fenStart"];
961 delete localStorage["fen"];
962 delete localStorage["moves"];
963 },
964 // HACK because mini-css tooltips are persistent after click...
965 getRidOfTooltip: function(elt) {
966 elt.style.visibility = "hidden";
967 setTimeout(() => { elt.style.visibility="visible"; }, 100);
968 },
969 showSettings: function(e) {
970 this.getRidOfTooltip(e.currentTarget);
971 document.getElementById("modal-settings").checked = true;
972 },
973 toggleHints: function() {
974 this.hints = !this.hints;
975 setCookie("hints", this.hints ? "1" : "0");
976 },
977 setColor: function(e) {
978 this.color = e.target.options[e.target.selectedIndex].value;
979 setCookie("color", this.color);
980 },
981 setSound: function(e) {
982 this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
983 setCookie("sound", this.sound);
984 },
985 clickGameSeek: function(e) {
986 this.getRidOfTooltip(e.currentTarget);
987 if (this.mode == "human")
988 return; //no newgame while playing
989 if (this.seek)
990 {
991 this.conn.send(JSON.stringify({code:"cancelnewgame"}));
992 delete localStorage["newgame"]; //cancel game seek
993 this.seek = false;
994 }
995 else
996 this.newGame("human");
997 },
998 clickComputerGame: function(e) {
999 this.getRidOfTooltip(e.currentTarget);
1000 if (this.mode == "human")
1001 return; //no newgame while playing
1002 this.newGame("computer");
1003 },
1004 clickFriendGame: function(e) {
1005 this.getRidOfTooltip(e.currentTarget);
1006 document.getElementById("modal-fenedit").checked = true;
1007 },
1008 resign: function(e) {
1009 this.getRidOfTooltip(e.currentTarget);
1010 if (this.mode == "human" && this.oppConnected)
1011 {
1012 try {
1013 this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
1014 } catch (INVALID_STATE_ERR) {
1015 return; //socket is not ready (and not yet reconnected)
1016 }
1017 }
1018 this.endGame(this.mycolor=="w"?"0-1":"1-0");
1019 },
1020 newGame: function(mode, fenInit, color, oppId, moves, continuation) {
1021 const fen = fenInit || VariantRules.GenRandInitFen();
1022 console.log(fen); //DEBUG
1023 if (mode=="human" && !oppId)
1024 {
1025 const storageVariant = localStorage.getItem("variant");
1026 if (!!storageVariant && storageVariant !== variant)
1027 {
1028 alert("Finish your " + storageVariant + " game first!");
1029 return;
1030 }
1031 // Send game request and wait..
1032 localStorage["newgame"] = variant;
1033 this.seek = true;
1034 this.clearStorage(); //in case of
1035 try {
1036 this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
1037 } catch (INVALID_STATE_ERR) {
1038 return; //nothing achieved
1039 }
1040 if (continuation !== "reconnect") //TODO: bad HACK...
1041 {
1042 let modalBox = document.getElementById("modal-newgame");
1043 modalBox.checked = true;
1044 setTimeout(() => { modalBox.checked = false; }, 2000);
1045 }
1046 return;
1047 }
1048 this.vr = new VariantRules(fen, moves || []);
1049 this.score = "*";
1050 this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
1051 this.mode = mode;
1052 this.incheck = []; //in case of
1053 this.fenStart = (continuation ? localStorage.getItem("fenStart") : fen);
1054 if (mode=="human")
1055 {
1056 // Opponent found!
1057 if (!continuation) //not playing sound on game continuation
1058 {
1059 if (this.sound >= 1)
1060 new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
1061 document.getElementById("modal-newgame").checked = false;
1062 }
1063 this.oppid = oppId;
1064 this.oppConnected = !continuation;
1065 this.mycolor = color;
1066 this.seek = false;
1067 if (!!moves && moves.length > 0) //imply continuation
1068 {
1069 const lastMove = moves[moves.length-1];
1070 this.vr.undo(lastMove);
1071 this.incheck = this.vr.getCheckSquares(lastMove);
1072 this.vr.play(lastMove, "ingame");
1073 }
1074 delete localStorage["newgame"];
1075 this.setStorage(); //in case of interruptions
1076 }
1077 else if (mode == "computer")
1078 {
1079 this.mycolor = Math.random() < 0.5 ? 'w' : 'b';
1080 if (this.mycolor == 'b')
1081 setTimeout(this.playComputerMove, 500);
1082 }
1083 //else: against a (IRL) friend: nothing more to do
1084 },
1085 playComputerMove: function() {
1086 const timeStart = Date.now();
1087 const compMove = this.vr.getComputerMove();
1088 // (first move) HACK: avoid selecting elements before they appear on page:
1089 const delay = Math.max(500-(Date.now()-timeStart), 0);
1090 setTimeout(() => {
1091 if (this.mode == "computer") //Warning: mode could have changed!
1092 this.play(compMove, "animate")
1093 }, delay);
1094 },
1095 // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
1096 getSquareId: function(o) {
1097 // NOTE: a separator is required to allow any size of board
1098 return "sq-" + o.x + "-" + o.y;
1099 },
1100 // Inverse function
1101 getSquareFromId: function(id) {
1102 let idParts = id.split('-');
1103 return [parseInt(idParts[1]), parseInt(idParts[2])];
1104 },
1105 mousedown: function(e) {
1106 e = e || window.event;
1107 let ingame = false;
1108 let elem = e.target;
1109 while (!ingame && elem !== null)
1110 {
1111 if (elem.classList.contains("game"))
1112 {
1113 ingame = true;
1114 break;
1115 }
1116 elem = elem.parentElement;
1117 }
1118 if (!ingame) //let default behavior (click on button...)
1119 return;
1120 e.preventDefault(); //disable native drag & drop
1121 if (!this.selectedPiece && e.target.classList.contains("piece"))
1122 {
1123 // Next few lines to center the piece on mouse cursor
1124 let rect = e.target.parentNode.getBoundingClientRect();
1125 this.start = {
1126 x: rect.x + rect.width/2,
1127 y: rect.y + rect.width/2,
1128 id: e.target.parentNode.id
1129 };
1130 this.selectedPiece = e.target.cloneNode();
1131 this.selectedPiece.style.position = "absolute";
1132 this.selectedPiece.style.top = 0;
1133 this.selectedPiece.style.display = "inline-block";
1134 this.selectedPiece.style.zIndex = 3000;
1135 let startSquare = this.getSquareFromId(e.target.parentNode.id);
1136 const iCanPlay = this.mode!="idle"
1137 && (this.mode=="friend" || this.vr.canIplay(this.mycolor,startSquare));
1138 this.possibleMoves = iCanPlay ? this.vr.getPossibleMovesFrom(startSquare) : [];
1139 // Next line add moving piece just after current image
1140 // (required for Crazyhouse reserve)
1141 e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
1142 }
1143 },
1144 mousemove: function(e) {
1145 if (!this.selectedPiece)
1146 return;
1147 e = e || window.event;
1148 // If there is an active element, move it around
1149 if (!!this.selectedPiece)
1150 {
1151 const [offsetX,offsetY] = !!e.clientX
1152 ? [e.clientX,e.clientY] //desktop browser
1153 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
1154 this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
1155 this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
1156 }
1157 },
1158 mouseup: function(e) {
1159 if (!this.selectedPiece)
1160 return;
1161 e = e || window.event;
1162 // Read drop target (or parentElement, parentNode... if type == "img")
1163 this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
1164 const [offsetX,offsetY] = !!e.clientX
1165 ? [e.clientX,e.clientY]
1166 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
1167 let landing = document.elementFromPoint(offsetX, offsetY);
1168 this.selectedPiece.style.zIndex = 3000;
1169 // Next condition: classList.contains(piece) fails because of marks
1170 while (landing.tagName == "IMG")
1171 landing = landing.parentNode;
1172 if (this.start.id == landing.id)
1173 {
1174 // A click: selectedPiece and possibleMoves are already filled
1175 return;
1176 }
1177 // OK: process move attempt
1178 let endSquare = this.getSquareFromId(landing.id);
1179 let moves = this.findMatchingMoves(endSquare);
1180 this.possibleMoves = [];
1181 if (moves.length > 1)
1182 this.choices = moves;
1183 else if (moves.length==1)
1184 this.play(moves[0]);
1185 // Else: impossible move
1186 this.selectedPiece.parentNode.removeChild(this.selectedPiece);
1187 delete this.selectedPiece;
1188 this.selectedPiece = null;
1189 },
1190 findMatchingMoves: function(endSquare) {
1191 // Run through moves list and return the matching set (if promotions...)
1192 let moves = [];
1193 this.possibleMoves.forEach(function(m) {
1194 if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
1195 moves.push(m);
1196 });
1197 return moves;
1198 },
1199 animateMove: function(move) {
1200 let startSquare = document.getElementById(this.getSquareId(move.start));
1201 let endSquare = document.getElementById(this.getSquareId(move.end));
1202 let rectStart = startSquare.getBoundingClientRect();
1203 let rectEnd = endSquare.getBoundingClientRect();
1204 let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
1205 let movingPiece =
1206 document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
1207 // HACK for animation (with positive translate, image slides "under background")
1208 // Possible improvement: just alter squares on the piece's way...
1209 squares = document.getElementsByClassName("board");
1210 for (let i=0; i<squares.length; i++)
1211 {
1212 let square = squares.item(i);
1213 if (square.id != this.getSquareId(move.start))
1214 square.style.zIndex = "-1";
1215 }
1216 movingPiece.style.transform = "translate(" + translation.x + "px," +
1217 translation.y + "px)";
1218 movingPiece.style.transitionDuration = "0.2s";
1219 movingPiece.style.zIndex = "3000";
1220 setTimeout( () => {
1221 for (let i=0; i<squares.length; i++)
1222 squares.item(i).style.zIndex = "auto";
1223 movingPiece.style = {}; //required e.g. for 0-0 with KR swap
1224 this.play(move);
1225 }, 200);
1226 },
1227 play: function(move, programmatic) {
1228 if (!move)
1229 {
1230 // Navigate after game is over
1231 if (this.cursor >= this.vr.moves.length)
1232 return; //already at the end
1233 move = this.vr.moves[this.cursor++];
1234 }
1235 if (!!programmatic) //computer or human opponent
1236 {
1237 this.animateMove(move);
1238 return;
1239 }
1240 // Not programmatic, or animation is over
1241 if (this.mode == "human" && this.vr.turn == this.mycolor)
1242 this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
1243 if (this.sound == 2)
1244 new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
1245 if (this.mode != "idle")
1246 {
1247 this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
1248 this.vr.play(move, "ingame");
1249 }
1250 else
1251 {
1252 VariantRules.PlayOnBoard(this.vr.board, move);
1253 this.$forceUpdate(); //TODO: ?!
1254 }
1255 if (this.mode == "human")
1256 this.updateStorage(); //after our moves and opponent moves
1257 if (this.mode != "idle")
1258 {
1259 const eog = this.vr.checkGameOver();
1260 if (eog != "*")
1261 this.endGame(eog);
1262 }
1263 if (this.mode == "computer" && this.vr.turn != this.mycolor)
1264 setTimeout(this.playComputerMove, 500);
1265 },
1266 undo: function() {
1267 // Navigate after game is over
1268 if (this.cursor == 0)
1269 return; //already at the beginning
1270 if (this.cursor == this.vr.moves.length)
1271 this.incheck = []; //in case of...
1272 const move = this.vr.moves[--this.cursor];
1273 VariantRules.UndoOnBoard(this.vr.board, move);
1274 this.$forceUpdate(); //TODO: ?!
1275 },
1276 undoInGame: function() {
1277 const lm = this.vr.lastMove;
1278 if (!!lm)
1279 this.vr.undo(lm);
1280 },
1281 },
1282 })
Website to play original chess variants