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