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