projects / vchess.git / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
blame | history | raw | HEAD
Prepare some more variants (unfinished)
[vchess.git] / public / javascripts / components / game.js
1 // Game logic on a variant page
2 Vue.component('my-game', {
3 props: ["problem"],
4 data: function() {
5 return {
6 vr: null, //object to check moves, store them, FEN..
7 mycolor: "w",
8 possibleMoves: [], //filled after each valid click/dragstart
9 choices: [], //promotion pieces, or checkered captures... (as moves)
10 start: {}, //pixels coordinates + id of starting square (click or drag)
11 selectedPiece: null, //moving piece (or clicked piece)
12 conn: null, //socket connection
13 score: "*", //'*' means 'unfinished'
14 mode: "idle", //human, chat, friend, problem, computer or idle (if not playing)
15 myid: "", //our ID, always set
16 oppid: "", //opponent ID in case of HH game
17 gameId: "", //useful if opponent started other human games after we disconnected
18 myname: localStorage["username"] || "anonymous",
19 oppName: "anonymous", //opponent name, revealed after a game (if provided)
20 chats: [], //chat messages after human game
21 oppConnected: false,
22 seek: false,
23 fenStart: "",
24 incheck: [],
25 pgnTxt: "",
26 hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
27 color: localStorage["color"] || "lichess", //lichess, chesscom or chesstempo
28 // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
29 sound: parseInt(localStorage["sound"] || "2"),
30 // Web worker to play computer moves without freezing interface:
31 compWorker: new Worker('/javascripts/playCompMove.js'),
32 timeStart: undefined, //time when computer starts thinking
33 };
34 },
35 watch: {
36 problem: function(p) {
37 // 'problem' prop changed: update board state
38 this.newGame("problem", p.fen, V.ParseFen(p.fen).turn);
39 },
40 },
41 render(h) {
42 const [sizeX,sizeY] = [V.size.x,V.size.y];
43 // Precompute hints squares to facilitate rendering
44 let hintSquares = doubleArray(sizeX, sizeY, false);
45 this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
46 // Also precompute in-check squares
47 let incheckSq = doubleArray(sizeX, sizeY, false);
48 this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
49 let elementArray = [];
50 let actionArray = [];
51 actionArray.push(
52 h('button',
53 {
54 on: { click: this.clickGameSeek },
55 attrs: { "aria-label": translations['New live game'] },
56 'class': {
57 "tooltip": true,
58 "play": true,
59 "seek": this.seek,
60 "playing": this.mode == "human",
61 "spaceright": true,
62 },
63 },
64 [h('i', { 'class': { "material-icons": true } }, "accessibility")])
65 );
66 if (variant!="Dark" && ["idle","chat","computer"].includes(this.mode))
67 {
68 actionArray.push(
69 h('button',
70 {
71 on: { click: this.clickComputerGame },
72 attrs: { "aria-label": translations['New game versus computer'] },
73 'class': {
74 "tooltip":true,
75 "play": true,
76 "playing": this.mode == "computer",
77 "spaceright": true,
78 },
79 },
80 [h('i', { 'class': { "material-icons": true } }, "computer")])
81 );
82 }
83 if (variant!="Dark" && ["idle","chat","friend"].includes(this.mode))
84 {
85 actionArray.push(
86 h('button',
87 {
88 on: { click: this.clickFriendGame },
89 attrs: { "aria-label": translations['Analysis mode'] },
90 'class': {
91 "tooltip":true,
92 "play": true,
93 "playing": this.mode == "friend",
94 "spaceright": true,
95 },
96 },
97 [h('i', { 'class': { "material-icons": true } }, "people")])
98 );
99 }
100 if (!!this.vr)
101 {
102 const square00 = document.getElementById("sq-0-0");
103 const squareWidth = !!square00
104 ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
105 : 0;
106 const settingsBtnElt = document.getElementById("settingsBtn");
107 const settingsStyle = !!settingsBtnElt
108 ? window.getComputedStyle(settingsBtnElt)
109 : {width:"46px", height:"26px"};
110 const [indicWidth,indicHeight] = //[44,24];
111 [
112 // NOTE: -2 for border
113 parseFloat(settingsStyle.width.slice(0,-2)) - 2,
114 parseFloat(settingsStyle.height.slice(0,-2)) - 2
115 ];
116 let aboveBoardElts = [];
117 if (["chat","human"].includes(this.mode))
118 {
119 const connectedIndic = h(
120 'div',
121 {
122 "class": {
123 "indic-left": true,
124 "connected": this.oppConnected,
125 "disconnected": !this.oppConnected,
126 },
127 style: {
128 "width": indicWidth + "px",
129 "height": indicHeight + "px",
130 },
131 }
132 );
133 aboveBoardElts.push(connectedIndic);
134 }
135 if (this.mode == "chat")
136 {
137 const chatButton = h(
138 'button',
139 {
140 on: { click: this.startChat },
141 attrs: {
142 "aria-label": translations['Start chat'],
143 "id": "chatBtn",
144 },
145 'class': {
146 "tooltip": true,
147 "play": true,
148 "above-board": true,
149 "indic-left": true,
150 },
151 },
152 [h('i', { 'class': { "material-icons": true } }, "chat")]
153 );
154 aboveBoardElts.push(chatButton);
155 }
156 else if (this.mode == "computer")
157 {
158 const clearButton = h(
159 'button',
160 {
161 on: { click: this.clearComputerGame },
162 attrs: {
163 "aria-label": translations['Clear game versus computer'],
164 "id": "clearBtn",
165 },
166 'class': {
167 "tooltip": true,
168 "play": true,
169 "above-board": true,
170 "indic-left": true,
171 },
172 },
173 [h('i', { 'class': { "material-icons": true } }, "clear")]
174 );
175 aboveBoardElts.push(clearButton);
176 }
177 const turnIndic = h(
178 'div',
179 {
180 "class": {
181 "indic-right": true,
182 "white-turn": this.vr.turn=="w",
183 "black-turn": this.vr.turn=="b",
184 },
185 style: {
186 "width": indicWidth + "px",
187 "height": indicHeight + "px",
188 },
189 }
190 );
191 aboveBoardElts.push(turnIndic);
192 const settingsBtn = h(
193 'button',
194 {
195 on: { click: this.showSettings },
196 attrs: {
197 "aria-label": translations['Settings'],
198 "id": "settingsBtn",
199 },
200 'class': {
201 "tooltip": true,
202 "play": true,
203 "above-board": true,
204 "indic-right": true,
205 },
206 },
207 [h('i', { 'class': { "material-icons": true } }, "settings")]
208 );
209 aboveBoardElts.push(settingsBtn);
210 elementArray.push(
211 h('div',
212 { "class": { "aboveboard-wrapper": true } },
213 aboveBoardElts
214 )
215 );
216 if (this.mode == "problem")
217 {
218 // Show problem instructions
219 elementArray.push(
220 h('div',
221 {
222 attrs: { id: "instructions-div" },
223 "class": {
224 "clearer": true,
225 "section-content": true,
226 },
227 },
228 [
229 h('p',
230 {
231 attrs: { id: "problem-instructions" },
232 domProps: { innerHTML: this.problem.instructions }
233 }
234 )
235 ]
236 )
237 );
238 }
239 const choices = h('div',
240 {
241 attrs: { "id": "choices" },
242 'class': { 'row': true },
243 style: {
244 "display": this.choices.length>0?"block":"none",
245 "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
246 "width": (this.choices.length * squareWidth) + "px",
247 "height": squareWidth + "px",
248 },
249 },
250 this.choices.map( m => { //a "choice" is a move
251 return h('div',
252 {
253 'class': {
254 'board': true,
255 ['board'+sizeY]: true,
256 },
257 style: {
258 'width': (100/this.choices.length) + "%",
259 'padding-bottom': (100/this.choices.length) + "%",
260 },
261 },
262 [h('img',
263 {
264 attrs: { "src": '/images/pieces/' +
265 VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
266 'class': { 'choice-piece': true },
267 on: {
268 "click": e => { this.play(m); this.choices=[]; },
269 // NOTE: add 'touchstart' event to fix a problem on smartphones
270 "touchstart": e => { this.play(m); this.choices=[]; },
271 },
272 })
273 ]
274 );
275 })
276 );
277 // Create board element (+ reserves if needed by variant or mode)
278 const lm = this.vr.lastMove;
279 const showLight = this.hints &&
280 (!["idle","chat"].includes(this.mode) || this.cursor==this.vr.moves.length);
281 const gameDiv = h('div',
282 {
283 'class': {
284 'game': true,
285 'clearer': true,
286 },
287 },
288 [_.range(sizeX).map(i => {
289 let ci = (this.mycolor=='w' ? i : sizeX-i-1);
290 return h(
291 'div',
292 {
293 'class': {
294 'row': true,
295 },
296 style: { 'opacity': this.choices.length>0?"0.5":"1" },
297 },
298 _.range(sizeY).map(j => {
299 let cj = (this.mycolor=='w' ? j : sizeY-j-1);
300 let elems = [];
301 if (this.vr.board[ci][cj] != VariantRules.EMPTY && (variant!="Dark"
302 || this.score!="*" || this.vr.isEnlightened(ci,cj,this.mycolor)))
303 {
304 elems.push(
305 h(
306 'img',
307 {
308 'class': {
309 'piece': true,
310 'ghost': !!this.selectedPiece
311 && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
312 },
313 attrs: {
314 src: "/images/pieces/" +
315 VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
316 },
317 }
318 )
319 );
320 }
321 if (this.hints && hintSquares[ci][cj])
322 {
323 elems.push(
324 h(
325 'img',
326 {
327 'class': {
328 'mark-square': true,
329 },
330 attrs: {
331 src: "/images/mark.svg",
332 },
333 }
334 )
335 );
336 }
337 return h(
338 'div',
339 {
340 'class': {
341 'board': true,
342 ['board'+sizeY]: true,
343 'light-square': (i+j)%2==0,
344 'dark-square': (i+j)%2==1,
345 [this.color]: true,
346 'in-shadow': variant=="Dark" && this.score=="*"
347 && !this.vr.isEnlightened(ci,cj,this.mycolor),
348 'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
349 'incheck': showLight && incheckSq[ci][cj],
350 },
351 attrs: {
352 id: this.getSquareId({x:ci,y:cj}),
353 },
354 },
355 elems
356 );
357 })
358 );
359 }), choices]
360 );
361 if (!["idle","chat"].includes(this.mode))
362 {
363 actionArray.push(
364 h('button',
365 {
366 on: { click: this.resign },
367 attrs: { "aria-label": translations['Resign'] },
368 'class': {
369 "tooltip":true,
370 "play": true,
371 },
372 },
373 [h('i', { 'class': { "material-icons": true } }, "flag")])
374 );
375 }
376 else if (this.vr.moves.length > 0)
377 {
378 // A game finished, and another is not started yet: allow navigation
379 actionArray = actionArray.concat([
380 h('button',
381 {
382 on: { click: e => this.undo() },
383 attrs: { "aria-label": translations['Undo'] },
384 "class": {
385 "play": true,
386 "spaceleft": true,
387 },
388 },
389 [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
390 h('button',
391 {
392 on: { click: e => this.play() },
393 attrs: { "aria-label": translations['Play'] },
394 "class": {
395 "play": true,
396 "spaceleft": true,
397 },
398 },
399 [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
400 ]
401 );
402 }
403 if (["friend","problem"].includes(this.mode))
404 {
405 actionArray = actionArray.concat(
406 [
407 h('button',
408 {
409 on: { click: this.undoInGame },
410 attrs: { "aria-label": translations['Undo'] },
411 "class": {
412 "play": true,
413 "spaceleft": true,
414 },
415 },
416 [h('i', { 'class': { "material-icons": true } }, "undo")]
417 ),
418 h('button',
419 {
420 on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
421 attrs: { "aria-label": translations['Flip board'] },
422 "class": {
423 "play": true,
424 "spaceleft": true,
425 },
426 },
427 [h('i', { 'class': { "material-icons": true } }, "cached")]
428 ),
429 ]);
430 }
431 elementArray.push(gameDiv);
432 if (!!this.vr.reserve)
433 {
434 const shiftIdx = (this.mycolor=="w" ? 0 : 1);
435 let myReservePiecesArray = [];
436 for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
437 {
438 myReservePiecesArray.push(h('div',
439 {
440 'class': {'board':true, ['board'+sizeY+'-reserve']:true},
441 attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
442 },
443 [
444 h('img',
445 {
446 'class': {"piece":true, "reserve":true},
447 attrs: {
448 "src": "/images/pieces/" +
449 this.vr.getReservePpath(this.mycolor,i) + ".svg",
450 }
451 }),
452 h('sup',
453 {"class": { "reserve-count": true } },
454 [ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
455 )
456 ]));
457 }
458 let oppReservePiecesArray = [];
459 const oppCol = this.vr.getOppCol(this.mycolor);
460 for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
461 {
462 oppReservePiecesArray.push(h('div',
463 {
464 'class': {'board':true, ['board'+sizeY+'-reserve']:true},
465 attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
466 },
467 [
468 h('img',
469 {
470 'class': {"piece":true, "reserve":true},
471 attrs: {
472 "src": "/images/pieces/" +
473 this.vr.getReservePpath(oppCol,i) + ".svg",
474 }
475 }),
476 h('sup',
477 {"class": { "reserve-count": true } },
478 [ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
479 )
480 ]));
481 }
482 let reserves = h('div',
483 {
484 'class':{
485 'game': true,
486 "reserve-div": true,
487 },
488 },
489 [
490 h('div',
491 {
492 'class': {
493 'row': true,
494 "reserve-row-1": true,
495 },
496 },
497 myReservePiecesArray
498 ),
499 h('div',
500 { 'class': { 'row': true }},
501 oppReservePiecesArray
502 )
503 ]
504 );
505 elementArray.push(reserves);
506 }
507 const modalEog = [
508 h('input',
509 {
510 attrs: { "id": "modal-eog", type: "checkbox" },
511 "class": { "modal": true },
512 }),
513 h('div',
514 {
515 attrs: { "role": "dialog", "aria-labelledby": "eogMessage" },
516 },
517 [
518 h('div',
519 {
520 "class": {
521 "card": true,
522 "smallpad": true,
523 "small-modal": true,
524 "text-center": true,
525 },
526 },
527 [
528 h('label',
529 {
530 attrs: { "for": "modal-eog" },
531 "class": { "modal-close": true },
532 }
533 ),
534 h('h3',
535 {
536 attrs: { "id": "eogMessage" },
537 "class": { "section": true },
538 domProps: { innerHTML: this.endgameMessage },
539 }
540 )
541 ]
542 )
543 ]
544 )
545 ];
546 elementArray = elementArray.concat(modalEog);
547 }
548 const modalFenEdit = [
549 h('input',
550 {
551 attrs: { "id": "modal-fenedit", type: "checkbox" },
552 "class": { "modal": true },
553 }),
554 h('div',
555 {
556 attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
557 },
558 [
559 h('div',
560 {
561 "class": { "card": true, "smallpad": true },
562 },
563 [
564 h('label',
565 {
566 attrs: { "id": "close-fenedit", "for": "modal-fenedit" },
567 "class": { "modal-close": true },
568 }
569 ),
570 h('h3',
571 {
572 attrs: { "id": "titleFenedit" },
573 "class": { "section": true },
574 domProps: { innerHTML: translations["Game state (FEN):"] },
575 }
576 ),
577 h('input',
578 {
579 attrs: {
580 "id": "input-fen",
581 type: "text",
582 value: VariantRules.GenRandInitFen(),
583 },
584 }
585 ),
586 h('button',
587 {
588 on: { click:
589 () => {
590 const fen = document.getElementById("input-fen").value;
591 document.getElementById("modal-fenedit").checked = false;
592 this.newGame("friend", fen);
593 }
594 },
595 domProps: { innerHTML: translations["Ok"] },
596 }
597 ),
598 h('button',
599 {
600 on: { click:
601 () => {
602 document.getElementById("input-fen").value =
603 VariantRules.GenRandInitFen();
604 }
605 },
606 domProps: { innerHTML: translations["Random"] },
607 }
608 ),
609 ]
610 )
611 ]
612 )
613 ];
614 elementArray = elementArray.concat(modalFenEdit);
615 const modalSettings = [
616 h('input',
617 {
618 attrs: { "id": "modal-settings", type: "checkbox" },
619 "class": { "modal": true },
620 }),
621 h('div',
622 {
623 attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" },
624 },
625 [
626 h('div',
627 {
628 "class": { "card": true, "smallpad": true },
629 },
630 [
631 h('label',
632 {
633 attrs: { "id": "close-settings", "for": "modal-settings" },
634 "class": { "modal-close": true },
635 }
636 ),
637 h('h3',
638 {
639 attrs: { "id": "settingsTitle" },
640 "class": { "section": true },
641 domProps: { innerHTML: translations["Preferences"] },
642 }
643 ),
644 h('fieldset',
645 { },
646 [
647 h('label',
648 {
649 attrs: { for: "nameSetter" },
650 domProps: { innerHTML: translations["My name is..."] },
651 },
652 ),
653 h('input',
654 {
655 attrs: {
656 "id": "nameSetter",
657 type: "text",
658 value: this.myname,
659 },
660 on: { "change": this.setMyname },
661 }
662 ),
663 ]
664 ),
665 h('fieldset',
666 { },
667 [
668 h('label',
669 {
670 attrs: { for: "setHints" },
671 domProps: { innerHTML: translations["Show hints?"] },
672 },
673 ),
674 h('input',
675 {
676 attrs: {
677 "id": "setHints",
678 type: "checkbox",
679 checked: this.hints,
680 },
681 on: { "change": this.toggleHints },
682 }
683 ),
684 ]
685 ),
686 h('fieldset',
687 { },
688 [
689 h('label',
690 {
691 attrs: { for: "selectColor" },
692 domProps: { innerHTML: translations["Board colors"] },
693 },
694 ),
695 h("select",
696 {
697 attrs: { "id": "selectColor" },
698 on: { "change": this.setColor },
699 },
700 [
701 h("option",
702 {
703 domProps: {
704 "value": "lichess",
705 innerHTML: translations["brown"]
706 },
707 attrs: { "selected": this.color=="lichess" },
708 }
709 ),
710 h("option",
711 {
712 domProps: {
713 "value": "chesscom",
714 innerHTML: translations["green"]
715 },
716 attrs: { "selected": this.color=="chesscom" },
717 }
718 ),
719 h("option",
720 {
721 domProps: {
722 "value": "chesstempo",
723 innerHTML: translations["blue"]
724 },
725 attrs: { "selected": this.color=="chesstempo" },
726 }
727 ),
728 ],
729 ),
730 ]
731 ),
732 h('fieldset',
733 { },
734 [
735 h('label',
736 {
737 attrs: { for: "selectSound" },
738 domProps: { innerHTML: translations["Play sounds?"] },
739 },
740 ),
741 h("select",
742 {
743 attrs: { "id": "selectSound" },
744 on: { "change": this.setSound },
745 },
746 [
747 h("option",
748 {
749 domProps: {
750 "value": "0",
751 innerHTML: translations["None"]
752 },
753 attrs: { "selected": this.sound==0 },
754 }
755 ),
756 h("option",
757 {
758 domProps: {
759 "value": "1",
760 innerHTML: translations["New game"]
761 },
762 attrs: { "selected": this.sound==1 },
763 }
764 ),
765 h("option",
766 {
767 domProps: {
768 "value": "2",
769 innerHTML: translations["All"]
770 },
771 attrs: { "selected": this.sound==2 },
772 }
773 ),
774 ],
775 ),
776 ]
777 ),
778 ]
779 )
780 ]
781 )
782 ];
783 elementArray = elementArray.concat(modalSettings);
784 let chatEltsArray =
785 [
786 h('label',
787 {
788 attrs: { "id": "close-chat", "for": "modal-chat" },
789 "class": { "modal-close": true },
790 }
791 ),
792 h('h3',
793 {
794 attrs: { "id": "titleChat" },
795 "class": { "section": true },
796 domProps: { innerHTML: translations["Chat with "] + this.oppName },
797 }
798 )
799 ];
800 for (let chat of this.chats)
801 {
802 chatEltsArray.push(
803 h('p',
804 {
805 "class": {
806 "my-chatmsg": chat.author==this.myid,
807 "opp-chatmsg": chat.author==this.oppid,
808 },
809 domProps: { innerHTML: chat.msg }
810 }
811 )
812 );
813 }
814 chatEltsArray = chatEltsArray.concat([
815 h('input',
816 {
817 attrs: {
818 "id": "input-chat",
819 type: "text",
820 placeholder: translations["Type here"],
821 },
822 on: { keyup: this.trySendChat }, //if key is 'enter'
823 }
824 ),
825 h('button',
826 {
827 attrs: { id: "sendChatBtn"},
828 on: { click: this.sendChat },
829 domProps: { innerHTML: translations["Send"] },
830 }
831 )
832 ]);
833 const modalChat = [
834 h('input',
835 {
836 attrs: { "id": "modal-chat", type: "checkbox" },
837 "class": { "modal": true },
838 }),
839 h('div',
840 {
841 attrs: { "role": "dialog", "aria-labelledby": "titleChat" },
842 },
843 [
844 h('div',
845 {
846 "class": { "card": true, "smallpad": true },
847 },
848 chatEltsArray
849 )
850 ]
851 )
852 ];
853 elementArray = elementArray.concat(modalChat);
854 const actions = h('div',
855 {
856 attrs: { "id": "actions" },
857 'class': { 'text-center': true },
858 },
859 actionArray
860 );
861 elementArray.push(actions);
862 if (this.score != "*" && this.pgnTxt.length > 0)
863 {
864 elementArray.push(
865 h('div',
866 {
867 attrs: { id: "pgn-div" },
868 "class": { "section-content": true },
869 },
870 [
871 h('a',
872 {
873 attrs: {
874 id: "download",
875 href: "#",
876 }
877 }
878 ),
879 h('p',
880 {
881 attrs: { id: "pgn-game" },
882 domProps: { innerHTML: this.pgnTxt }
883 }
884 ),
885 h('button',
886 {
887 attrs: { "id": "downloadBtn" },
888 on: { click: this.download },
889 domProps: { innerHTML: translations["Download game"] },
890 }
891 ),
892 ]
893 )
894 );
895 }
896 else if (this.mode != "idle")
897 {
898 if (this.mode == "problem")
899 {
900 // Show problem solution (on click)
901 elementArray.push(
902 h('div',
903 {
904 attrs: { id: "solution-div" },
905 "class": { "section-content": true },
906 },
907 [
908 h('h3',
909 {
910 "class": { clickable: true },
911 domProps: { innerHTML: translations["Show solution"] },
912 on: { click: this.toggleShowSolution },
913 }
914 ),
915 h('p',
916 {
917 attrs: { id: "problem-solution" },
918 domProps: { innerHTML: this.problem.solution }
919 }
920 )
921 ]
922 )
923 );
924 }
925 if (variant != "Dark" || this.score!="*")
926 {
927 // Show current FEN
928 elementArray.push(
929 h('div',
930 {
931 attrs: { id: "fen-div" },
932 "class": { "section-content": true },
933 },
934 [
935 h('p',
936 {
937 attrs: { id: "fen-string" },
938 domProps: { innerHTML: this.vr.getBaseFen() },
939 "class": { "text-center": true },
940 }
941 )
942 ]
943 )
944 );
945 }
946 }
947 return h(
948 'div',
949 {
950 'class': {
951 "col-sm-12":true,
952 "col-md-10":true,
953 "col-md-offset-1":true,
954 "col-lg-8":true,
955 "col-lg-offset-2":true,
956 },
957 // NOTE: click = mousedown + mouseup
958 on: {
959 mousedown: this.mousedown,
960 mousemove: this.mousemove,
961 mouseup: this.mouseup,
962 touchstart: this.mousedown,
963 touchmove: this.mousemove,
964 touchend: this.mouseup,
965 },
966 },
967 elementArray
968 );
969 },
970 computed: {
971 endgameMessage: function() {
972 let eogMessage = "Unfinished";
973 switch (this.score)
974 {
975 case "1-0":
976 eogMessage = translations["White win"];
977 break;
978 case "0-1":
979 eogMessage = translations["Black win"];
980 break;
981 case "1/2":
982 eogMessage = translations["Draw"];
983 break;
984 }
985 return eogMessage;
986 },
987 },
988 created: function() {
989 const url = socketUrl;
990 const humanContinuation = (localStorage.getItem("variant") === variant);
991 const computerContinuation = (localStorage.getItem("comp-variant") === variant);
992 this.myid = (humanContinuation ? localStorage.getItem("myid") : getRandString());
993 this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
994 const socketOpenListener = () => {
995 if (humanContinuation) //game VS human has priority
996 this.continueGame("human");
997 else if (computerContinuation)
998 this.continueGame("computer");
999 };
1000 const socketMessageListener = msg => {
1001 const data = JSON.parse(msg.data);
1002 const L = (!!this.vr ? this.vr.moves.length : 0);
1003 switch (data.code)
1004 {
1005 case "oppname":
1006 // Receive opponent's name
1007 this.oppName = data.name;
1008 break;
1009 case "newchat":
1010 // Receive new chat
1011 this.chats.push({msg:data.msg, author:this.oppid});
1012 break;
1013 case "duplicate":
1014 // We opened another tab on the same game
1015 this.mode = "idle";
1016 this.vr = null;
1017 alert(translations[
1018 "Already playing a game in this variant on another tab!"]);
1019 break;
1020 case "newgame": //opponent found
1021 // oppid: opponent socket ID
1022 this.newGame("human", data.fen, data.color, data.oppid);
1023 break;
1024 case "newmove": //..he played!
1025 this.play(data.move, "animate");
1026 break;
1027 case "pong": //received if we sent a ping (game still alive on our side)
1028 if (this.gameId != data.gameId)
1029 break; //games IDs don't match: definitely over...
1030 this.oppConnected = true;
1031 // Send our "last state" informations to opponent
1032 this.conn.send(JSON.stringify({
1033 code: "lastate",
1034 oppid: this.oppid,
1035 gameId: this.gameId,
1036 lastMove: (L>0?this.vr.moves[L-1]:undefined),
1037 movesCount: L,
1038 }));
1039 break;
1040 case "lastate": //got opponent infos about last move
1041 if (this.gameId != data.gameId)
1042 break; //games IDs don't match: nothing we can do...
1043 // OK, opponent still in game (which might be over)
1044 if (this.mode != "human")
1045 {
1046 // We finished the game (any result possible)
1047 this.conn.send(JSON.stringify({
1048 code: "lastate",
1049 oppid: data.oppid,
1050 gameId: this.gameId,
1051 score: this.score,
1052 }));
1053 }
1054 else if (!!data.score) //opponent finished the game
1055 this.endGame(data.score);
1056 else if (data.movesCount < L)
1057 {
1058 // We must tell last move to opponent
1059 this.conn.send(JSON.stringify({
1060 code: "lastate",
1061 oppid: this.oppid,
1062 lastMove: this.vr.moves[L-1],
1063 movesCount: L,
1064 }));
1065 }
1066 else if (data.movesCount > L) //just got last move from him
1067 this.play(data.lastMove, "animate");
1068 break;
1069 case "resign": //..you won!
1070 this.endGame(this.mycolor=="w"?"1-0":"0-1");
1071 break;
1072 // TODO: also use (dis)connect info to count online players?
1073 case "connect":
1074 case "disconnect":
1075 if (["human","chat"].includes(this.mode) && this.oppid == data.id)
1076 this.oppConnected = (data.code == "connect");
1077 if (this.oppConnected && this.mode == "chat")
1078 {
1079 // Send our name to the opponent, in case of he hasn't it
1080 this.conn.send(JSON.stringify({
1081 code:"myname", name:this.myname, oppid: this.oppid}));
1082 }
1083 break;
1084 }
1085 };
1086 const socketCloseListener = () => {
1087 this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
1088 this.conn.addEventListener('open', socketOpenListener);
1089 this.conn.addEventListener('message', socketMessageListener);
1090 this.conn.addEventListener('close', socketCloseListener);
1091 };
1092 this.conn.onopen = socketOpenListener;
1093 this.conn.onmessage = socketMessageListener;
1094 this.conn.onclose = socketCloseListener;
1095 // Listen to keyboard left/right to navigate in game
1096 document.onkeydown = event => {
1097 if (["idle","chat"].includes(this.mode) &&
1098 !!this.vr && this.vr.moves.length > 0 && [37,39].includes(event.keyCode))
1099 {
1100 event.preventDefault();
1101 if (event.keyCode == 37) //Back
1102 this.undo();
1103 else //Forward (39)
1104 this.play();
1105 }
1106 };
1107 // Computer moves web worker logic:
1108 this.compWorker.postMessage(["scripts",variant]);
1109 const self = this;
1110 this.compWorker.onmessage = function(e) {
1111 let compMove = e.data;
1112 compMove.computer = true; //TODO: imperfect attempt to avoid ghost move
1113 // (first move) HACK: small delay to avoid selecting elements
1114 // before they appear on page:
1115 const delay = Math.max(500-(Date.now()-self.timeStart), 0);
1116 setTimeout(() => {
1117 if (self.mode == "computer") //warning: mode could have changed!
1118 self.play(compMove, "animate")
1119 }, delay);
1120 }
1121 },
1122 methods: {
1123 setMyname: function(e) {
1124 this.myname = e.target.value;
1125 localStorage["username"] = this.myname;
1126 },
1127 trySendChat: function(e) {
1128 if (e.keyCode == 13) //'enter' key
1129 this.sendChat();
1130 },
1131 sendChat: function() {
1132 let chatInput = document.getElementById("input-chat");
1133 const chatTxt = chatInput.value;
1134 chatInput.value = "";
1135 this.chats.push({msg:chatTxt, author:this.myid});
1136 this.conn.send(JSON.stringify({
1137 code:"newchat", oppid: this.oppid, msg: chatTxt}));
1138 },
1139 toggleShowSolution: function() {
1140 let problemSolution = document.getElementById("problem-solution");
1141 problemSolution.style.display =
1142 !problemSolution.style.display || problemSolution.style.display == "none"
1143 ? "block"
1144 : "none";
1145 },
1146 download: function() {
1147 let content = document.getElementById("pgn-game").innerHTML;
1148 content = content.replace(/<br>/g, "\n");
1149 // Prepare and trigger download link
1150 let downloadAnchor = document.getElementById("download");
1151 downloadAnchor.setAttribute("download", "game.pgn");
1152 downloadAnchor.href = "data:text/plain;charset=utf-8," +
1153 encodeURIComponent(content);
1154 downloadAnchor.click();
1155 },
1156 showScoreMsg: function() {
1157 let modalBox = document.getElementById("modal-eog");
1158 modalBox.checked = true;
1159 setTimeout(() => { modalBox.checked = false; }, 2000);
1160 },
1161 endGame: function(score) {
1162 this.score = score;
1163 if (["human","computer"].includes(this.mode))
1164 {
1165 const prefix = (this.mode=="computer" ? "comp-" : "");
1166 localStorage.setItem(prefix+"score", score);
1167 }
1168 this.showScoreMsg();
1169 // Variants may have special PGN structure (so next function isn't defined here)
1170 this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
1171 if (this.mode == "human" && this.oppConnected)
1172 {
1173 // Send our nickname to opponent
1174 this.conn.send(JSON.stringify({
1175 code:"myname", name:this.myname, oppid:this.oppid}));
1176 }
1177 this.mode = (this.mode=="human" ? "chat" : "idle");
1178 this.cursor = this.vr.moves.length; //to navigate in finished game
1179 },
1180 setStorage: function() {
1181 if (this.mode=="human")
1182 {
1183 localStorage.setItem("myid", this.myid);
1184 localStorage.setItem("oppid", this.oppid);
1185 localStorage.setItem("gameId", this.gameId);
1186 }
1187 // 'prefix' = "comp-" to resume games vs. computer
1188 const prefix = (this.mode=="computer" ? "comp-" : "");
1189 localStorage.setItem(prefix+"variant", variant);
1190 localStorage.setItem(prefix+"mycolor", this.mycolor);
1191 localStorage.setItem(prefix+"fenStart", this.fenStart);
1192 localStorage.setItem(prefix+"moves", JSON.stringify(this.vr.moves));
1193 localStorage.setItem(prefix+"fen", this.vr.getFen());
1194 localStorage.setItem(prefix+"score", "*");
1195 },
1196 updateStorage: function() {
1197 const prefix = (this.mode=="computer" ? "comp-" : "");
1198 localStorage.setItem(prefix+"moves", JSON.stringify(this.vr.moves));
1199 localStorage.setItem(prefix+"fen", this.vr.getFen());
1200 if (this.score != "*")
1201 localStorage.setItem(prefix+"score", this.score);
1202 },
1203 // "computer mode" clearing is done through the menu
1204 clearStorage: function() {
1205 if (["human","chat"].includes(this.mode))
1206 {
1207 delete localStorage["myid"];
1208 delete localStorage["oppid"];
1209 delete localStorage["gameId"];
1210 }
1211 const prefix = (this.mode=="computer" ? "comp-" : "");
1212 delete localStorage[prefix+"variant"];
1213 delete localStorage[prefix+"mycolor"];
1214 delete localStorage[prefix+"fenStart"];
1215 delete localStorage[prefix+"moves"];
1216 delete localStorage[prefix+"fen"];
1217 delete localStorage[prefix+"score"];
1218 },
1219 // HACK because mini-css tooltips are persistent after click...
1220 // NOTE: seems to work only in chrome/chromium. TODO...
1221 getRidOfTooltip: function(elt) {
1222 elt.style.visibility = "hidden";
1223 setTimeout(() => { elt.style.visibility="visible"; }, 100);
1224 },
1225 startChat: function(e) {
1226 this.getRidOfTooltip(e.currentTarget);
1227 document.getElementById("modal-chat").checked = true;
1228 },
1229 clearComputerGame: function(e) {
1230 this.getRidOfTooltip(e.currentTarget);
1231 this.clearStorage(); //this.mode=="computer" (already checked)
1232 location.reload(); //to see clearing effects
1233 },
1234 showSettings: function(e) {
1235 this.getRidOfTooltip(e.currentTarget);
1236 document.getElementById("modal-settings").checked = true;
1237 },
1238 toggleHints: function() {
1239 this.hints = !this.hints;
1240 localStorage["hints"] = (this.hints ? "1" : "0");
1241 },
1242 setColor: function(e) {
1243 this.color = e.target.options[e.target.selectedIndex].value;
1244 localStorage["color"] = this.color;
1245 },
1246 setSound: function(e) {
1247 this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
1248 localStorage["sound"] = this.sound;
1249 },
1250 clickGameSeek: function(e) {
1251 this.getRidOfTooltip(e.currentTarget);
1252 if (this.mode == "human")
1253 return; //no newgame while playing
1254 if (this.seek)
1255 {
1256 this.conn.send(JSON.stringify({code:"cancelnewgame"}));
1257 this.seek = false;
1258 }
1259 else
1260 this.newGame("human");
1261 },
1262 clickComputerGame: function(e) {
1263 this.getRidOfTooltip(e.currentTarget);
1264 this.newGame("computer");
1265 },
1266 clickFriendGame: function(e) {
1267 this.getRidOfTooltip(e.currentTarget);
1268 document.getElementById("modal-fenedit").checked = true;
1269 },
1270 resign: function(e) {
1271 this.getRidOfTooltip(e.currentTarget);
1272 if (this.mode == "human" && this.oppConnected)
1273 {
1274 try {
1275 this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
1276 } catch (INVALID_STATE_ERR) {
1277 return; //socket is not ready (and not yet reconnected)
1278 }
1279 }
1280 this.endGame(this.mycolor=="w"?"0-1":"1-0");
1281 },
1282 newGame: function(mode, fenInit, color, oppId) {
1283 let fen = fenInit || VariantRules.GenRandInitFen();
1284 console.log(fen); //DEBUG
1285 if (mode=="human" && !oppId)
1286 {
1287 const storageVariant = localStorage.getItem("variant");
1288 if (!!storageVariant && storageVariant !== variant)
1289 {
1290 return alert(translations["Finish your "] +
1291 storageVariant + translations[" game first!"]);
1292 }
1293 // Send game request and wait..
1294 try {
1295 this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
1296 } catch (INVALID_STATE_ERR) {
1297 return; //nothing achieved
1298 }
1299 this.seek = true;
1300 let modalBox = document.getElementById("modal-newgame");
1301 modalBox.checked = true;
1302 setTimeout(() => { modalBox.checked = false; }, 2000);
1303 return;
1304 }
1305 if (["human","chat"].includes(this.mode))
1306 {
1307 // Start a new game vs. another human (or...) => forget about current one
1308 this.clearStorage();
1309 }
1310 if (mode == "computer")
1311 {
1312 const storageVariant = localStorage.getItem("comp-variant");
1313 if (!!storageVariant)
1314 {
1315 const score = localStorage.getItem("comp-score");
1316 if (storageVariant !== variant && score == "*")
1317 {
1318 if (!confirm(storageVariant +
1319 translations[": unfinished computer game will be erased"]))
1320 {
1321 return;
1322 }
1323 }
1324 else if (score == "*")
1325 return this.continueGame("computer");
1326 }
1327 }
1328 this.vr = new VariantRules(fen, []);
1329 this.score = "*";
1330 this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
1331 this.mode = mode;
1332 this.incheck = [];
1333 this.fenStart = V.ParseFen(fen).position; //this is enough
1334 if (mode=="human")
1335 {
1336 // Opponent found!
1337 this.gameId = getRandString();
1338 this.oppid = oppId;
1339 this.oppConnected = true;
1340 this.mycolor = color;
1341 this.seek = false;
1342 if (this.sound >= 1)
1343 new Audio("/sounds/newgame.mp3").play().catch(err => {});
1344 document.getElementById("modal-newgame").checked = false;
1345 this.setStorage(); //in case of interruptions
1346 }
1347 else if (mode == "computer")
1348 {
1349 this.compWorker.postMessage(["init",this.vr.getFen()]);
1350 this.mycolor = (Math.random() < 0.5 ? 'w' : 'b');
1351 this.setStorage(); //store game state
1352 if (this.mycolor != this.vr.turn)
1353 this.playComputerMove();
1354 }
1355 //else: against a (IRL) friend or problem solving: nothing more to do
1356 },
1357 continueGame: function(mode) {
1358 this.mode = mode;
1359 this.oppid = (mode=="human" ? localStorage.getItem("oppid") : undefined);
1360 const prefix = (mode=="computer" ? "comp-" : "");
1361 this.mycolor = localStorage.getItem(prefix+"mycolor");
1362 const moves = JSON.parse(localStorage.getItem(prefix+"moves"));
1363 const fen = localStorage.getItem(prefix+"fen");
1364 const score = localStorage.getItem(prefix+"score"); //set in "endGame()"
1365 this.fenStart = localStorage.getItem(prefix+"fenStart");
1366 this.vr = new VariantRules(fen, moves);
1367 if (mode == "human")
1368 {
1369 this.gameId = localStorage.getItem("gameId");
1370 // Send ping to server (answer pong if opponent is connected)
1371 this.conn.send(JSON.stringify({
1372 code:"ping",oppid:this.oppid,gameId:this.gameId}));
1373 }
1374 else
1375 {
1376 this.compWorker.postMessage(["init",fen]);
1377 if (this.mycolor != this.vr.turn)
1378 this.playComputerMove();
1379 }
1380 if (moves.length > 0)
1381 {
1382 const lastMove = moves[moves.length-1];
1383 this.vr.undo(lastMove);
1384 this.incheck = this.vr.getCheckSquares(lastMove);
1385 this.vr.play(lastMove, "ingame");
1386 }
1387 if (score != "*")
1388 {
1389 // Small delay required when continuation run faster than drawing page
1390 setTimeout(() => this.endGame(score), 100);
1391 }
1392 },
1393 playComputerMove: function() {
1394 this.timeStart = Date.now();
1395 this.compWorker.postMessage(["askmove"]);
1396 },
1397 // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
1398 getSquareId: function(o) {
1399 // NOTE: a separator is required to allow any size of board
1400 return "sq-" + o.x + "-" + o.y;
1401 },
1402 // Inverse function
1403 getSquareFromId: function(id) {
1404 let idParts = id.split('-');
1405 return [parseInt(idParts[1]), parseInt(idParts[2])];
1406 },
1407 mousedown: function(e) {
1408 e = e || window.event;
1409 let ingame = false;
1410 let elem = e.target;
1411 while (!ingame && elem !== null)
1412 {
1413 if (elem.classList.contains("game"))
1414 {
1415 ingame = true;
1416 break;
1417 }
1418 elem = elem.parentElement;
1419 }
1420 if (!ingame) //let default behavior (click on button...)
1421 return;
1422 e.preventDefault(); //disable native drag & drop
1423 if (!this.selectedPiece && e.target.classList.contains("piece"))
1424 {
1425 // Next few lines to center the piece on mouse cursor
1426 let rect = e.target.parentNode.getBoundingClientRect();
1427 this.start = {
1428 x: rect.x + rect.width/2,
1429 y: rect.y + rect.width/2,
1430 id: e.target.parentNode.id
1431 };
1432 this.selectedPiece = e.target.cloneNode();
1433 this.selectedPiece.style.position = "absolute";
1434 this.selectedPiece.style.top = 0;
1435 this.selectedPiece.style.display = "inline-block";
1436 this.selectedPiece.style.zIndex = 3000;
1437 const startSquare = this.getSquareFromId(e.target.parentNode.id);
1438 this.possibleMoves = [];
1439 if (!["idle","chat"].includes(this.mode))
1440 {
1441 const color = ["friend","problem"].includes(this.mode)
1442 ? this.vr.turn
1443 : this.mycolor;
1444 if (this.vr.canIplay(color,startSquare))
1445 this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
1446 }
1447 // Next line add moving piece just after current image
1448 // (required for Crazyhouse reserve)
1449 e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
1450 }
1451 },
1452 mousemove: function(e) {
1453 if (!this.selectedPiece)
1454 return;
1455 e = e || window.event;
1456 // If there is an active element, move it around
1457 if (!!this.selectedPiece)
1458 {
1459 const [offsetX,offsetY] = !!e.clientX
1460 ? [e.clientX,e.clientY] //desktop browser
1461 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
1462 this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
1463 this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
1464 }
1465 },
1466 mouseup: function(e) {
1467 if (!this.selectedPiece)
1468 return;
1469 e = e || window.event;
1470 // Read drop target (or parentElement, parentNode... if type == "img")
1471 this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
1472 const [offsetX,offsetY] = !!e.clientX
1473 ? [e.clientX,e.clientY]
1474 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
1475 let landing = document.elementFromPoint(offsetX, offsetY);
1476 this.selectedPiece.style.zIndex = 3000;
1477 // Next condition: classList.contains(piece) fails because of marks
1478 while (landing.tagName == "IMG")
1479 landing = landing.parentNode;
1480 if (this.start.id == landing.id)
1481 {
1482 // A click: selectedPiece and possibleMoves are already filled
1483 return;
1484 }
1485 // OK: process move attempt
1486 let endSquare = this.getSquareFromId(landing.id);
1487 let moves = this.findMatchingMoves(endSquare);
1488 this.possibleMoves = [];
1489 if (moves.length > 1)
1490 this.choices = moves;
1491 else if (moves.length==1)
1492 this.play(moves[0]);
1493 // Else: impossible move
1494 this.selectedPiece.parentNode.removeChild(this.selectedPiece);
1495 delete this.selectedPiece;
1496 this.selectedPiece = null;
1497 },
1498 findMatchingMoves: function(endSquare) {
1499 // Run through moves list and return the matching set (if promotions...)
1500 let moves = [];
1501 this.possibleMoves.forEach(function(m) {
1502 if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
1503 moves.push(m);
1504 });
1505 return moves;
1506 },
1507 animateMove: function(move) {
1508 let startSquare = document.getElementById(this.getSquareId(move.start));
1509 let endSquare = document.getElementById(this.getSquareId(move.end));
1510 let rectStart = startSquare.getBoundingClientRect();
1511 let rectEnd = endSquare.getBoundingClientRect();
1512 let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
1513 let movingPiece =
1514 document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
1515 // HACK for animation (with positive translate, image slides "under background")
1516 // Possible improvement: just alter squares on the piece's way...
1517 squares = document.getElementsByClassName("board");
1518 for (let i=0; i<squares.length; i++)
1519 {
1520 let square = squares.item(i);
1521 if (square.id != this.getSquareId(move.start))
1522 square.style.zIndex = "-1";
1523 }
1524 movingPiece.style.transform = "translate(" + translation.x + "px," +
1525 translation.y + "px)";
1526 movingPiece.style.transitionDuration = "0.2s";
1527 movingPiece.style.zIndex = "3000";
1528 setTimeout( () => {
1529 for (let i=0; i<squares.length; i++)
1530 squares.item(i).style.zIndex = "auto";
1531 movingPiece.style = {}; //required e.g. for 0-0 with KR swap
1532 this.play(move);
1533 }, 250);
1534 },
1535 play: function(move, programmatic) {
1536 if (!move)
1537 {
1538 // Navigate after game is over
1539 if (this.cursor >= this.vr.moves.length)
1540 return; //already at the end
1541 move = this.vr.moves[this.cursor++];
1542 }
1543 if (!!programmatic) //computer or human opponent
1544 {
1545 this.animateMove(move);
1546 return;
1547 }
1548 // Not programmatic, or animation is over
1549 if (this.mode == "human" && this.vr.turn == this.mycolor)
1550 this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
1551 if (!["idle","chat"].includes(this.mode))
1552 {
1553 // Emergency check, if human game started "at the same time"
1554 // TODO: robustify this...
1555 if (this.mode == "human" && !!move.computer)
1556 return;
1557 this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
1558 this.vr.play(move, "ingame");
1559 if (this.sound == 2)
1560 new Audio("/sounds/move.mp3").play().catch(err => {});
1561 if (this.mode == "computer")
1562 {
1563 // Send the move to web worker (TODO: including his own moves?!)
1564 this.compWorker.postMessage(["newmove",move]);
1565 }
1566 }
1567 else
1568 {
1569 VariantRules.PlayOnBoard(this.vr.board, move);
1570 this.$forceUpdate(); //TODO: ?!
1571 }
1572 if (!["idle","chat"].includes(this.mode))
1573 {
1574 const eog = this.vr.checkGameOver();
1575 if (eog != "*")
1576 {
1577 if (["human","computer"].includes(this.mode))
1578 this.endGame(eog);
1579 else
1580 {
1581 // Just show score on screen (allow undo)
1582 this.score = eog;
1583 this.showScoreMsg();
1584 }
1585 }
1586 }
1587 if (["human","computer"].includes(this.mode))
1588 this.updateStorage(); //after our moves and opponent moves
1589 if (this.mode == "computer" && this.vr.turn != this.mycolor && this.score == "*")
1590 this.playComputerMove();
1591 },
1592 undo: function() {
1593 // Navigate after game is over
1594 if (this.cursor == 0)
1595 return; //already at the beginning
1596 if (this.cursor == this.vr.moves.length)
1597 this.incheck = []; //in case of...
1598 const move = this.vr.moves[--this.cursor];
1599 VariantRules.UndoOnBoard(this.vr.board, move);
1600 this.$forceUpdate(); //TODO: ?!
1601 },
1602 undoInGame: function() {
1603 const lm = this.vr.lastMove;
1604 if (!!lm)
1605 {
1606 this.vr.undo(lm);
1607 if (this.sound == 2)
1608 new Audio("/sounds/undo.mp3").play().catch(err => {});
1609 const lmBefore = this.vr.lastMove;
1610 if (!!lmBefore)
1611 {
1612 this.vr.undo(lmBefore);
1613 this.incheck = this.vr.getCheckSquares(lmBefore);
1614 this.vr.play(lmBefore, "ingame");
1615 }
1616 else
1617 this.incheck = [];
1618 }
1619 },
1620 },
1621 })
Website to play original chess variants