81ced5b431408773a05ea78747cd0415edf15320
1 // TODO: use indexedDB instead of localStorage? (more flexible...)
3 Vue
.component('my-game', {
6 vr: null, //object to check moves, store them, FEN..
8 possibleMoves: [], //filled after each valid click/dragstart
9 choices: [], //promotion pieces, or checkered captures... (contain possible pieces)
10 start: {}, //pixels coordinates + id of starting square (click or drag)
11 selectedPiece: null, //moving piece (or clicked piece)
12 conn: null, //socket messages
13 score: "*", //'*' means 'unfinished'
14 mode: "idle", //human, computer or idle (when not playing)
15 oppid: "", //opponent ID in case of HH game
22 let [sizeX
,sizeY
] = VariantRules
.size
;
23 // Precompute hints squares to facilitate rendering
24 let hintSquares
= doubleArray(sizeX
, sizeY
, false);
25 this.possibleMoves
.forEach(m
=> { hintSquares
[m
.end
.x
][m
.end
.y
] = true; });
26 let elementArray
= [];
27 let square00
= document
.getElementById("sq-0-0");
28 let squareWidth
= !!square00
29 ? parseFloat(window
.getComputedStyle(square00
).width
.slice(0,-2))
31 const playingHuman
= (this.mode
== "human");
32 const playingComp
= (this.mode
== "computer");
39 delete localStorage
["newgame"]; //cancel game seek
42 localStorage
["newgame"] = variant
;
43 this.newGame("human");
45 this.seek
= !this.seek
;
48 attrs: { "aria-label": 'New game VS human' },
52 "playing": playingHuman
,
55 [h('i', { 'class': { "material-icons": true } }, "accessibility")]),
58 on: { click: () => this.newGame("computer") },
59 attrs: { "aria-label": 'New game VS computer' },
62 "playing": playingComp
,
65 [h('i', { 'class': { "material-icons": true } }, "computer")])
69 if (this.mode
== "human")
71 let connectedIndic
= h(
75 "connected": this.oppConnected
,
76 "disconnected": !this.oppConnected
,
80 elementArray
.push(connectedIndic
);
82 let choices
= h('div',
84 attrs: { "id": "choices" },
85 'class': { 'row': true },
87 //"position": "relative",
88 "display": this.choices
.length
>0?"block":"none",
89 "top": "-" + ((sizeY
/2)*squareWidth+squareWidth/2) + "px",
90 "width": (this.choices
.length
* squareWidth
) + "px",
91 "height": squareWidth
+ "px",
94 this.choices
.map( m
=> { //a "choice" is a move
97 'class': { 'board': true },
99 'width': (100/this.choices
.length
) + "%",
100 'padding-bottom': (100/this.choices
.length
) + "%",
105 attrs: { "src": '/images/pieces/' + VariantRules
.getPpath(m
.appear
[0].c
+m
.appear
[0].p
) + '.svg' },
106 'class': { 'choice-piece': true, 'board': true },
107 on: { "click": e
=> { this.play(m
); this.choices
=[]; } },
113 // Create board element (+ reserves if needed by variant or mode)
114 let gameDiv
= h('div',
116 'class': { 'game': true },
118 [_
.range(sizeX
).map(i
=> {
119 let ci
= this.mycolor
=='w' ? i : sizeX
-i
-1;
126 style: { 'opacity': this.choices
.length
>0?"0.5":"1" },
128 _
.range(sizeY
).map(j
=> {
129 let cj
= this.mycolor
=='w' ? j : sizeY
-j
-1;
131 if (this.vr
.board
[ci
][cj
] != VariantRules
.EMPTY
)
139 'ghost': !!this.selectedPiece
&& this.selectedPiece
.parentNode
.id
== "sq-"+ci
+"-"+cj
,
142 src: "/images/pieces/" + VariantRules
.getPpath(this.vr
.board
[ci
][cj
]) + ".svg",
148 if (hintSquares
[ci
][cj
])
158 src: "/images/mark.svg",
164 const lm
= this.vr
.lastMove
;
165 const highlight
= !!lm
&& _
.isMatch(lm
.end
, {x:ci
,y:cj
}); //&& _.isMatch(lm.start, {x:ci,y:cj})
171 'light-square': !highlight
&& (i
+j
)%2==0,
172 'dark-square': !highlight
&& (i
+j
)%2==1,
173 'highlight': highlight
,
176 id: this.getSquareId({x:ci
,y:cj
}),
188 on: { click: this.resign
},
189 attrs: { "aria-label": 'Resign' },
190 'class': { "tooltip":true },
192 [h('i', { 'class': { "material-icons": true } }, "flag")])
194 elementArray
.push(gameDiv
);
197 // let reserve = h('div',
198 // {'class':{'game':true}}, [
200 // { 'class': { 'row': true }},
203 // {'class':{'board':true}},
204 // [h('img',{'class':{"piece":true},attrs:{"src":"/images/pieces/wb.svg"}})]
210 // elementArray.push(reserve);
212 let eogMessage
= "Unfinished";
216 eogMessage
= "White win";
219 eogMessage
= "Black win";
229 attrs: { "for": "modal-control" },
230 "class": { "modal-close": true },
235 "class": { "section": true },
236 domProps: { innerHTML: eogMessage
},
240 if (this.score
!= "*")
243 h('p', //'textarea', //TODO: selectable!
245 domProps: { innerHTML: this.vr
.getPGN(this.mycolor
, this.score
, this.fenStart
) },
246 //attrs: { "readonly": true },
254 attrs: { "id": "modal-control", type: "checkbox" },
255 "class": { "modal": true },
259 attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
264 "class": { "card": true, "smallpad": true },
271 elementArray
= elementArray
.concat(modalEog
);
273 const modalNewgame
= [
276 attrs: { "id": "modal-control2", type: "checkbox" },
277 "class": { "modal": true },
281 attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
286 "class": { "card": true, "smallpad": true },
291 attrs: { "id": "close-newgame", "for": "modal-control2" },
292 "class": { "modal-close": true },
297 "class": { "section": true },
298 domProps: { innerHTML: "New game" },
303 "class": { "section": true },
304 domProps: { innerHTML: "Waiting for opponent..." },
312 elementArray
= elementArray
.concat(modalNewgame
);
313 const actions
= h('div',
315 attrs: { "id": "actions" },
316 'class': { 'text-center': true },
320 elementArray
.push(actions
);
327 "col-md-offset-2":true,
329 "col-lg-offset-3":true,
331 // NOTE: click = mousedown + mouseup --> what about smartphone?!
333 mousedown: this.mousedown
,
334 mousemove: this.mousemove
,
335 mouseup: this.mouseup
,
336 touchdown: this.mousedown
,
337 touchmove: this.mousemove
,
338 touchup: this.mouseup
,
344 created: function() {
345 const url
= socketUrl
;
346 const continuation
= (localStorage
.getItem("variant") === variant
);
347 this.myid
= continuation
348 ? localStorage
.getItem("myid")
349 // random enough (TODO: function)
350 : (Date
.now().toString(36) + Math
.random().toString(36).substr(2, 7)).toUpperCase();
351 this.conn
= new WebSocket(url
+ "/?sid=" + this.myid
+ "&page=" + variant
);
352 const socketOpenListener
= () => {
355 // TODO: check FEN integrity with opponent
356 const fen
= localStorage
.getItem("fen");
357 const mycolor
= localStorage
.getItem("mycolor");
358 const oppid
= localStorage
.getItem("oppid");
359 const moves
= JSON
.parse(localStorage
.getItem("moves"));
360 this.newGame("human", fen
, mycolor
, oppid
, moves
, true);
361 // Send ping to server, which answers pong if opponent is connected
362 this.conn
.send(JSON
.stringify({code:"ping", oppid:this.oppId
}));
364 else if (localStorage
.getItem("newgame") === variant
)
366 // New game request has been cancelled on disconnect
368 this.newGame("human");
371 const socketMessageListener
= msg
=> {
372 const data
= JSON
.parse(msg
.data
);
375 case "newgame": //opponent found
376 this.newGame("human", data
.fen
, data
.color
, data
.oppid
); //oppid: opponent socket ID
378 case "newmove": //..he played!
379 this.play(data
.move, "animate");
381 case "pong": //sent when opponent stayed online after we disconnected
382 this.oppConnected
= true;
384 case "resign": //..you won!
385 this.endGame(this.mycolor
=="w"?"1-0":"0-1");
387 // TODO: also use (dis)connect info to count online players
390 if (this.mode
== "human" && this.oppid
== data
.id
)
391 this.oppConnected
= (data
.code
== "connect");
395 const socketCloseListener
= () => {
396 console
.log("Lost connection -- reconnect");
397 this.conn
= new WebSocket(url
+ "/?sid=" + this.myid
+ "&page=" + variant
);
398 this.conn
.addEventListener('open', socketOpenListener
);
399 this.conn
.addEventListener('message', socketMessageListener
);
400 this.conn
.addEventListener('close', socketCloseListener
);
402 this.conn
.onopen
= socketOpenListener
;
403 this.conn
.onmessage
= socketMessageListener
;
404 this.conn
.onclose
= socketCloseListener
;
407 endGame: function(score
) {
409 let modalBox
= document
.getElementById("modal-control");
410 modalBox
.checked
= true;
411 //setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN
412 if (this.mode
== "human")
418 if (this.mode
== "human" && this.oppConnected
)
421 this.conn
.send(JSON
.stringify({code: "resign", oppid: this.oppid
}));
422 } catch (INVALID_STATE_ERR
) {
423 return; //resign failed for some reason...
426 this.endGame(this.mycolor
=="w"?"0-1":"1-0");
428 setStorage: function() {
429 localStorage
.setItem("myid", this.myid
);
430 localStorage
.setItem("variant", variant
);
431 localStorage
.setItem("mycolor", this.mycolor
);
432 localStorage
.setItem("oppid", this.oppid
);
433 localStorage
.setItem("fenStart", this.fenStart
);
434 localStorage
.setItem("moves", JSON
.stringify(this.vr
.moves
));
435 localStorage
.setItem("fen", this.vr
.getFen());
437 updateStorage: function() {
438 localStorage
.setItem("moves", JSON
.stringify(this.vr
.moves
));
439 localStorage
.setItem("fen", this.vr
.getFen());
441 clearStorage: function() {
442 delete localStorage
["variant"];
443 delete localStorage
["myid"];
444 delete localStorage
["mycolor"];
445 delete localStorage
["oppid"];
446 delete localStorage
["fenStart"];
447 delete localStorage
["fen"];
448 delete localStorage
["moves"];
450 newGame: function(mode
, fenInit
, color
, oppId
, moves
, continuation
) {
451 const fen
= fenInit
|| VariantRules
.GenRandInitFen();
452 console
.log(fen
); //DEBUG
454 if (mode
=="human" && !oppId
)
456 // Send game request and wait..
457 this.clearStorage(); //in case of
459 this.conn
.send(JSON
.stringify({code:"newgame", fen:fen
}));
460 } catch (INVALID_STATE_ERR
) {
461 return; //nothing achieved
463 let modalBox
= document
.getElementById("modal-control2");
464 modalBox
.checked
= true;
465 setTimeout(() => { modalBox
.checked
= false; }, 2000);
468 this.vr
= new VariantRules(fen
, moves
|| []);
470 this.fenStart
= continuation
471 ? localStorage
.getItem("fenStart")
472 : fen
.split(" ")[0]; //Only the position matters
478 // Playing sound fails on game continuation:
479 new Audio("/sounds/newgame.mp3").play();
480 document
.getElementById("modal-control2").checked
= false;
483 this.oppConnected
= true;
484 this.mycolor
= color
;
486 delete localStorage
["newgame"];
487 this.setStorage(); //in case of interruptions
489 else //against computer
491 this.mycolor
= Math
.random() < 0.5 ? 'w' : 'b';
492 if (this.mycolor
== 'b')
493 setTimeout(this.playComputerMove
, 500);
496 playComputerMove: function() {
497 const compColor
= this.mycolor
=='w' ? 'b' : 'w';
498 const compMove
= this.vr
.getComputerMove(compColor
);
499 // HACK: avoid selecting elements before they appear on page:
500 setTimeout(() => this.play(compMove
, "animate"), 500);
502 // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
503 getSquareId: function(o
) {
504 // NOTE: a separator is required to allow any size of board
505 return "sq-" + o
.x
+ "-" + o
.y
;
508 getSquareFromId: function(id
) {
509 let idParts
= id
.split('-');
510 return [parseInt(idParts
[1]), parseInt(idParts
[2])];
512 mousedown: function(e
) {
513 e
= e
|| window
.event
;
514 e
.preventDefault(); //disable native drag & drop
515 if (!this.selectedPiece
&& e
.target
.classList
.contains("piece"))
517 // Next few lines to center the piece on mouse cursor
518 let rect
= e
.target
.parentNode
.getBoundingClientRect();
520 x: rect
.x
+ rect
.width
/2,
521 y: rect
.y
+ rect
.width
/2,
522 id: e
.target
.parentNode
.id
524 this.selectedPiece
= e
.target
.cloneNode();
525 this.selectedPiece
.style
.position
= "absolute";
526 this.selectedPiece
.style
.top
= 0;
527 this.selectedPiece
.style
.display
= "inline-block";
528 this.selectedPiece
.style
.zIndex
= 3000;
529 let startSquare
= this.getSquareFromId(e
.target
.parentNode
.id
);
530 this.possibleMoves
= this.vr
.canIplay(this.mycolor
,startSquare
)
531 ? this.vr
.getPossibleMovesFrom(startSquare
)
533 e
.target
.parentNode
.appendChild(this.selectedPiece
);
536 mousemove: function(e
) {
537 if (!this.selectedPiece
)
539 e
= e
|| window
.event
;
540 // If there is an active element, move it around
541 if (!!this.selectedPiece
)
543 this.selectedPiece
.style
.left
= (e
.clientX
-this.start
.x
) + "px";
544 this.selectedPiece
.style
.top
= (e
.clientY
-this.start
.y
) + "px";
547 mouseup: function(e
) {
548 if (!this.selectedPiece
)
550 e
= e
|| window
.event
;
551 // Read drop target (or parentElement, parentNode... if type == "img")
552 this.selectedPiece
.style
.zIndex
= -3000; //HACK to find square from final coordinates
553 let landing
= document
.elementFromPoint(e
.clientX
, e
.clientY
);
554 this.selectedPiece
.style
.zIndex
= 3000;
555 while (landing
.tagName
== "IMG") //classList.contains(piece) fails because of mark/highlight
556 landing
= landing
.parentNode
;
557 if (this.start
.id
== landing
.id
) //a click: selectedPiece and possibleMoves already filled
559 // OK: process move attempt
560 let endSquare
= this.getSquareFromId(landing
.id
);
561 let moves
= this.findMatchingMoves(endSquare
);
562 this.possibleMoves
= [];
563 if (moves
.length
> 1)
564 this.choices
= moves
;
565 else if (moves
.length
==1)
567 // Else: impossible move
568 this.selectedPiece
.parentNode
.removeChild(this.selectedPiece
);
569 delete this.selectedPiece
;
570 this.selectedPiece
= null;
572 findMatchingMoves: function(endSquare
) {
573 // Run through moves list and return the matching set (if promotions...)
575 this.possibleMoves
.forEach(function(m
) {
576 if (endSquare
[0] == m
.end
.x
&& endSquare
[1] == m
.end
.y
)
581 animateMove: function(move) {
582 let startSquare
= document
.getElementById(this.getSquareId(move.start
));
583 let endSquare
= document
.getElementById(this.getSquareId(move.end
));
584 let rectStart
= startSquare
.getBoundingClientRect();
585 let rectEnd
= endSquare
.getBoundingClientRect();
586 let translation
= {x:rectEnd
.x
-rectStart
.x
, y:rectEnd
.y
-rectStart
.y
};
587 let movingPiece
= document
.querySelector("#" + this.getSquareId(move.start
) + " > img.piece");
588 // HACK for animation (otherwise with positive translate, image slides "under background"...)
589 // Possible improvement: just alter squares on the piece's way...
590 squares
= document
.getElementsByClassName("board");
591 for (let i
=0; i
<squares
.length
; i
++)
593 let square
= squares
.item(i
);
594 if (square
.id
!= this.getSquareId(move.start
))
595 square
.style
.zIndex
= "-1";
597 movingPiece
.style
.transform
= "translate(" + translation
.x
+ "px," + translation
.y
+ "px)";
598 movingPiece
.style
.transitionDuration
= "0.2s";
599 movingPiece
.style
.zIndex
= "3000";
601 for (let i
=0; i
<squares
.length
; i
++)
602 squares
.item(i
).style
.zIndex
= "auto";
603 movingPiece
.style
= {}; //required e.g. for 0-0 with KR swap
607 play: function(move, programmatic
) {
608 if (!!programmatic
) //computer or human opponent
610 this.animateMove(move);
613 // Not programmatic, or animation is over
614 if (this.mode
== "human" && this.vr
.turn
== this.mycolor
)
616 if (!this.oppConnected
)
617 return; //abort move if opponent is gone
619 this.conn
.send(JSON
.stringify({code:"newmove", move:move, oppid:this.oppid
}));
620 } catch(INVALID_STATE_ERR
) {
621 return; //abort also if sending failed
624 new Audio("/sounds/chessmove1.mp3").play();
625 this.vr
.play(move, "ingame");
626 if (this.mode
== "human")
627 this.updateStorage(); //after our moves and opponent moves
628 const eog
= this.vr
.checkGameOver(this.vr
.turn
);
631 else if (this.mode
== "computer" && this.vr
.turn
!= this.mycolor
)
632 setTimeout(this.playComputerMove
, 500);