Commit | Line | Data |
---|---|---|
1d184b4c BA |
1 | Vue.component('my-game', { |
2 | data: function() { | |
3 | return { | |
4 | vr: null, //object to check moves, store them, FEN.. | |
5 | mycolor: "w", | |
6 | possibleMoves: [], //filled after each valid click/dragstart | |
7 | choices: [], //promotion pieces, or checkered captures... (contain possible pieces) | |
8 | start: {}, //pixels coordinates + id of starting square (click or drag) | |
9 | selectedPiece: null, //moving piece (or clicked piece) | |
10 | conn: null, //socket messages | |
11 | endofgame: "", //end of game message | |
12 | mode: "idle", //human, computer or idle (when not playing) | |
13 | oppid: "", //opponent ID in case of HH game | |
14 | oppConnected: false, | |
15 | }; | |
16 | }, | |
17 | render(h) { | |
18 | let [sizeX,sizeY] = VariantRules.size; | |
19 | // Precompute hints squares to facilitate rendering | |
20 | let hintSquares = doubleArray(sizeX, sizeY, false); | |
21 | this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; }); | |
22 | let elementArray = []; | |
23 | let square00 = document.getElementById("sq-0-0"); | |
24 | let squareWidth = !!square00 | |
25 | ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2)) | |
26 | : 0; | |
27 | let actionArray = [ | |
28 | h('button', | |
29 | { | |
30 | on: { click: () => this.newGame("human") }, | |
31 | attrs: { "aria-label": 'New game VS human' }, | |
32 | 'class': { "tooltip":true }, | |
33 | }, | |
34 | [h('i', { 'class': { "material-icons": true } }, "accessibility")]), | |
35 | h('button', | |
36 | { | |
37 | on: { click: () => this.newGame("computer") }, | |
38 | attrs: { "aria-label": 'New game VS computer' }, | |
39 | 'class': { "tooltip":true }, | |
40 | }, | |
41 | [h('i', { 'class': { "material-icons": true } }, "computer")]) | |
42 | ]; | |
43 | if (!!this.vr) | |
44 | { | |
45 | if (this.mode == "human") | |
46 | { | |
47 | let connectedIndic = h( | |
48 | 'div', | |
49 | { | |
50 | "class": { | |
51 | "connected": this.oppConnected, | |
52 | "disconnected": !this.oppConnected, | |
53 | }, | |
54 | } | |
55 | ); | |
56 | elementArray.push(connectedIndic); | |
57 | } | |
58 | let choices = h('div', | |
59 | { | |
60 | attrs: { "id": "choices" }, | |
61 | 'class': { 'row': true }, | |
62 | style: { | |
63 | //"position": "relative", | |
64 | "display": this.choices.length>0?"block":"none", | |
65 | "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px", | |
66 | "width": (this.choices.length * squareWidth) + "px", | |
67 | "height": squareWidth + "px", | |
68 | }, | |
69 | }, | |
70 | this.choices.map( m => { //a "choice" is a move | |
71 | return h('div', | |
72 | { | |
73 | 'class': { 'board': true }, | |
74 | style: { | |
75 | 'width': (100/this.choices.length) + "%", | |
76 | 'padding-bottom': (100/this.choices.length) + "%", | |
77 | }, | |
78 | }, | |
79 | [h('img', | |
80 | { | |
81 | attrs: { "src": '/images/pieces/' + VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' }, | |
82 | 'class': { 'choice-piece': true, 'board': true }, | |
83 | on: { "click": e => { this.play(m); this.choices=[]; } }, | |
84 | }) | |
85 | ] | |
86 | ); | |
87 | }) | |
88 | ); | |
89 | // Create board element (+ reserves if needed by variant or mode) | |
90 | let gameDiv = h('div', | |
91 | { | |
92 | 'class': { 'game': true }, | |
93 | }, | |
94 | [_.range(sizeX).map(i => { | |
95 | let ci = this.mycolor=='w' ? i : sizeX-i-1; | |
96 | return h( | |
97 | 'div', | |
98 | { | |
99 | 'class': { | |
100 | 'row': true, | |
101 | }, | |
102 | style: { 'opacity': this.choices.length>0?"0.5":"1" }, | |
103 | }, | |
104 | _.range(sizeY).map(j => { | |
105 | let cj = this.mycolor=='w' ? j : sizeY-j-1; | |
106 | let elems = []; | |
107 | if (this.vr.board[ci][cj] != VariantRules.EMPTY) | |
108 | { | |
109 | elems.push( | |
110 | h( | |
111 | 'img', | |
112 | { | |
113 | 'class': { | |
114 | 'piece': true, | |
115 | 'ghost': !!this.selectedPiece && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj, | |
116 | }, | |
117 | attrs: { | |
118 | src: "/images/pieces/" + VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg", | |
119 | }, | |
120 | } | |
121 | ) | |
122 | ); | |
123 | } | |
124 | if (hintSquares[ci][cj]) | |
125 | { | |
126 | elems.push( | |
127 | h( | |
128 | 'img', | |
129 | { | |
130 | 'class': { | |
131 | 'mark-square': true, | |
132 | }, | |
133 | attrs: { | |
134 | src: "/images/mark.svg", | |
135 | }, | |
136 | } | |
137 | ) | |
138 | ); | |
139 | } | |
140 | const lm = this.vr.lastMove; //TODO: interruptions (FEN local storage..) | |
141 | const highlight = !!lm && _.isMatch(lm.end, {x:ci,y:cj}); //&& _.isMatch(lm.start, {x:ci,y:cj}) | |
142 | return h( | |
143 | 'div', | |
144 | { | |
145 | 'class': { | |
146 | 'board': true, | |
147 | 'light-square': !highlight && (i+j)%2==0, | |
148 | 'dark-square': !highlight && (i+j)%2==1, | |
149 | 'highlight': highlight, | |
150 | }, | |
151 | attrs: { | |
152 | id: this.getSquareId({x:ci,y:cj}), | |
153 | }, | |
154 | }, | |
155 | elems | |
156 | ); | |
157 | }) | |
158 | ); | |
159 | }), choices] | |
160 | ); | |
161 | actionArray.push( | |
162 | h('button', | |
163 | { | |
164 | on: { click: this.resign }, | |
165 | attrs: { "aria-label": 'Resign' }, | |
166 | 'class': { "tooltip":true }, | |
167 | }, | |
168 | [h('i', { 'class': { "material-icons": true } }, "flag")]) | |
169 | ); | |
170 | elementArray.push(gameDiv); | |
171 | // if (!!vr.reserve) | |
172 | // { | |
173 | // let reserve = h('div', | |
174 | // {'class':{'game':true}}, [ | |
175 | // h('div', | |
176 | // { 'class': { 'row': true }}, | |
177 | // [ | |
178 | // h('div', | |
179 | // {'class':{'board':true}}, | |
180 | // [h('img',{'class':{"piece":true},attrs:{"src":"/images/pieces/wb.svg"}})] | |
181 | // ) | |
182 | // ] | |
183 | // ) | |
184 | // ], | |
185 | // ); | |
186 | // elementArray.push(reserve); | |
187 | // } | |
188 | const modalEog = [ | |
189 | h('input', | |
190 | { | |
191 | attrs: { "id": "modal-control", type: "checkbox" }, | |
192 | "class": { "modal": true }, | |
193 | }), | |
194 | h('div', | |
195 | { | |
196 | attrs: { "role": "dialog", "aria-labelledby": "dialog-title" }, | |
197 | }, | |
198 | [ | |
199 | h('div', | |
200 | { | |
201 | "class": { "card": true, "smallpad": true }, | |
202 | }, | |
203 | [ | |
204 | h('label', | |
205 | { | |
206 | attrs: { "for": "modal-control" }, | |
207 | "class": { "modal-close": true }, | |
208 | } | |
209 | ), | |
210 | h('h3', | |
211 | { | |
212 | "class": { "section": true }, | |
213 | domProps: { innerHTML: "End of game" }, | |
214 | } | |
215 | ), | |
216 | h('p', | |
217 | { | |
218 | "class": { "section": true }, | |
219 | domProps: { innerHTML: this.endofgame }, | |
220 | } | |
221 | ) | |
222 | ] | |
223 | ) | |
224 | ] | |
225 | ) | |
226 | ]; | |
227 | elementArray = elementArray.concat(modalEog); | |
228 | } | |
229 | const modalNewgame = [ | |
230 | h('input', | |
231 | { | |
232 | attrs: { "id": "modal-control2", type: "checkbox" }, | |
233 | "class": { "modal": true }, | |
234 | }), | |
235 | h('div', | |
236 | { | |
237 | attrs: { "role": "dialog", "aria-labelledby": "dialog-title" }, | |
238 | }, | |
239 | [ | |
240 | h('div', | |
241 | { | |
242 | "class": { "card": true, "smallpad": true }, | |
243 | }, | |
244 | [ | |
245 | h('label', | |
246 | { | |
247 | attrs: { "id": "close-newgame", "for": "modal-control2" }, | |
248 | "class": { "modal-close": true }, | |
249 | } | |
250 | ), | |
251 | h('h3', | |
252 | { | |
253 | "class": { "section": true }, | |
254 | domProps: { innerHTML: "New game" }, | |
255 | } | |
256 | ), | |
257 | h('p', | |
258 | { | |
259 | "class": { "section": true }, | |
260 | domProps: { innerHTML: "Waiting for opponent..." }, | |
261 | } | |
262 | ) | |
263 | ] | |
264 | ) | |
265 | ] | |
266 | ) | |
267 | ]; | |
268 | elementArray = elementArray.concat(modalNewgame); | |
269 | const actions = h('div', | |
270 | { | |
271 | attrs: { "id": "actions" }, | |
272 | 'class': { 'text-center': true }, | |
273 | }, | |
274 | actionArray | |
275 | ); | |
276 | elementArray.push(actions); | |
277 | return h( | |
278 | 'div', | |
279 | { | |
280 | 'class': { | |
281 | "col-sm-12":true, | |
282 | "col-md-8":true, | |
283 | "col-md-offset-2":true, | |
284 | "col-lg-6":true, | |
285 | "col-lg-offset-3":true, | |
286 | }, | |
287 | // NOTE: click = mousedown + mouseup --> what about smartphone?! | |
288 | on: { | |
289 | mousedown: this.mousedown, | |
290 | mousemove: this.mousemove, | |
291 | mouseup: this.mouseup, | |
292 | touchdown: this.mousedown, | |
293 | touchmove: this.mousemove, | |
294 | touchup: this.mouseup, | |
295 | }, | |
296 | }, | |
297 | elementArray | |
298 | ); | |
299 | }, | |
300 | created: function() { | |
301 | const url = socketUrl; | |
302 | const continuation = (localStorage.getItem("variant") === variant); | |
303 | this.myid = continuation | |
304 | ? localStorage.getItem("myid") | |
305 | // random enough (TODO: function) | |
306 | : (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase(); | |
307 | this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant); | |
308 | this.conn.onopen = () => { | |
309 | if (continuation) | |
310 | { | |
311 | // TODO: check FEN integrity with opponent | |
312 | this.newGame("human", localStorage.getItem("fen"), | |
313 | localStorage.getItem("mycolor"), localStorage.getItem("oppid"), true); | |
314 | // Send ping to server, which answers pong if opponent is connected | |
315 | this.conn.send(JSON.stringify({code:"ping", oppid:this.oppId})); | |
316 | } | |
317 | }; | |
318 | this.conn.onmessage = msg => { | |
319 | const data = JSON.parse(msg.data); | |
320 | switch (data.code) | |
321 | { | |
322 | case "newgame": //opponent found | |
323 | this.newGame("human", data.fen, data.color, data.oppid); //oppid: opponent socket ID | |
324 | break; | |
325 | case "newmove": //..he played! | |
326 | this.play(data.move, "animate"); | |
327 | break; | |
328 | case "pong": //sent when opponent stayed online after we disconnected | |
329 | this.oppConnected = true; | |
330 | break; | |
331 | case "resign": //..you won! | |
332 | this.endGame("Victory!"); | |
333 | break; | |
334 | // TODO: also use (dis)connect info to count online players | |
335 | case "connect": | |
336 | case "disconnect": | |
337 | if (this.mode == "human" && this.oppid == data.id) | |
338 | this.oppConnected = (data.code == "connect"); | |
339 | break; | |
340 | } | |
341 | }; | |
342 | }, | |
343 | methods: { | |
344 | endGame: function(message) { | |
345 | this.endofgame = message; | |
346 | document.getElementById("modal-control").checked = true; | |
347 | if (this.mode == "human") | |
348 | this.clearStorage(); | |
349 | this.mode = "idle"; | |
350 | this.oppid = ""; | |
351 | }, | |
352 | resign: function() { | |
353 | if (this.mode == "human" && this.oppConnected) | |
354 | this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); | |
355 | this.endGame("Try again!"); | |
356 | }, | |
357 | updateStorage: function() { | |
358 | if (!localStorage.getItem("myid")) | |
359 | { | |
360 | localStorage.setItem("myid", this.myid); | |
361 | localStorage.setItem("variant", variant); | |
362 | localStorage.setItem("mycolor", this.mycolor); | |
363 | localStorage.setItem("oppid", this.oppid); | |
364 | } | |
365 | localStorage.setItem("fen", this.vr.getFen()); | |
366 | }, | |
367 | clearStorage: function() { | |
368 | delete localStorage["variant"]; | |
369 | delete localStorage["myid"]; | |
370 | delete localStorage["mycolor"]; | |
371 | delete localStorage["oppid"]; | |
372 | delete localStorage["fen"]; | |
373 | }, | |
374 | newGame: function(mode, fenInit, color, oppId, continuation) { | |
375 | const fen = fenInit || VariantRules.GenRandInitFen(); | |
376 | console.log(fen); //DEBUG | |
377 | if (mode=="human" && !oppId) | |
378 | { | |
379 | // Send game request and wait.. | |
380 | this.clearStorage(); //in case of | |
381 | this.conn.send(JSON.stringify({code:"newgame", fen:fen})); | |
382 | document.getElementById("modal-control2").checked = true; | |
383 | return; | |
384 | } | |
385 | this.vr = new VariantRules(fen); | |
386 | this.mode = mode; | |
387 | if (mode=="human") | |
388 | { | |
389 | // Opponent found! | |
390 | if (!continuation) | |
391 | { | |
392 | // Playing sound fails on game continuation: | |
393 | new Audio("/sounds/newgame.mp3").play(); | |
394 | document.getElementById("modal-control2").checked = false; | |
395 | } | |
396 | this.oppid = oppId; | |
397 | this.oppConnected = true; | |
398 | this.mycolor = color; | |
399 | } | |
400 | else //against computer | |
401 | { | |
402 | this.mycolor = Math.random() < 0.5 ? 'w' : 'b'; | |
403 | if (this.mycolor == 'b') | |
404 | setTimeout(this.playComputerMove, 500); | |
405 | } | |
406 | }, | |
407 | playComputerMove: function() { | |
408 | const compColor = this.mycolor=='w' ? 'b' : 'w'; | |
409 | const compMove = this.vr.getComputerMove(compColor); | |
410 | // HACK: avoid selecting elements before they appear on page: | |
411 | setTimeout(() => this.play(compMove, "animate"), 500); | |
412 | }, | |
413 | // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y. | |
414 | getSquareId: function(o) { | |
415 | // NOTE: a separator is required to allow any size of board | |
416 | return "sq-" + o.x + "-" + o.y; | |
417 | }, | |
418 | // Inverse function | |
419 | getSquareFromId: function(id) { | |
420 | let idParts = id.split('-'); | |
421 | return [parseInt(idParts[1]), parseInt(idParts[2])]; | |
422 | }, | |
423 | mousedown: function(e) { | |
424 | e = e || window.event; | |
425 | e.preventDefault(); //disable native drag & drop | |
426 | if (!this.selectedPiece && e.target.classList.contains("piece")) | |
427 | { | |
428 | // Next few lines to center the piece on mouse cursor | |
429 | let rect = e.target.parentNode.getBoundingClientRect(); | |
430 | this.start = { | |
431 | x: rect.x + rect.width/2, | |
432 | y: rect.y + rect.width/2, | |
433 | id: e.target.parentNode.id | |
434 | }; | |
435 | this.selectedPiece = e.target.cloneNode(); | |
436 | this.selectedPiece.style.position = "absolute"; | |
437 | this.selectedPiece.style.top = 0; | |
438 | this.selectedPiece.style.display = "inline-block"; | |
439 | this.selectedPiece.style.zIndex = 3000; | |
440 | let startSquare = this.getSquareFromId(e.target.parentNode.id); | |
441 | this.possibleMoves = this.vr.canIplay(this.mycolor,startSquare) | |
442 | ? this.vr.getPossibleMovesFrom(startSquare) | |
443 | : []; | |
444 | e.target.parentNode.appendChild(this.selectedPiece); | |
445 | } | |
446 | }, | |
447 | mousemove: function(e) { | |
448 | if (!this.selectedPiece) | |
449 | return; | |
450 | e = e || window.event; | |
451 | // If there is an active element, move it around | |
452 | if (!!this.selectedPiece) | |
453 | { | |
454 | this.selectedPiece.style.left = (e.clientX-this.start.x) + "px"; | |
455 | this.selectedPiece.style.top = (e.clientY-this.start.y) + "px"; | |
456 | } | |
457 | }, | |
458 | mouseup: function(e) { | |
459 | if (!this.selectedPiece) | |
460 | return; | |
461 | e = e || window.event; | |
462 | // Read drop target (or parentElement, parentNode... if type == "img") | |
463 | this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coordinates | |
464 | let landing = document.elementFromPoint(e.clientX, e.clientY); | |
465 | this.selectedPiece.style.zIndex = 3000; | |
466 | while (landing.tagName == "IMG") //classList.contains(piece) fails because of mark/highlight | |
467 | landing = landing.parentNode; | |
468 | if (this.start.id == landing.id) //a click: selectedPiece and possibleMoves already filled | |
469 | return; | |
470 | // OK: process move attempt | |
471 | let endSquare = this.getSquareFromId(landing.id); | |
472 | let moves = this.findMatchingMoves(endSquare); | |
473 | this.possibleMoves = []; | |
474 | if (moves.length > 1) | |
475 | this.choices = moves; | |
476 | else if (moves.length==1) | |
477 | this.play(moves[0]); | |
478 | // Else: impossible move | |
479 | this.selectedPiece.parentNode.removeChild(this.selectedPiece); | |
480 | delete this.selectedPiece; | |
481 | this.selectedPiece = null; | |
482 | }, | |
483 | findMatchingMoves: function(endSquare) { | |
484 | // Run through moves list and return the matching set (if promotions...) | |
485 | let moves = []; | |
486 | this.possibleMoves.forEach(function(m) { | |
487 | if (endSquare[0] == m.end.x && endSquare[1] == m.end.y) | |
488 | moves.push(m); | |
489 | }); | |
490 | return moves; | |
491 | }, | |
492 | animateMove: function(move) { | |
493 | let startSquare = document.getElementById(this.getSquareId(move.start)); | |
494 | let endSquare = document.getElementById(this.getSquareId(move.end)); | |
495 | let rectStart = startSquare.getBoundingClientRect(); | |
496 | let rectEnd = endSquare.getBoundingClientRect(); | |
497 | let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y}; | |
498 | let movingPiece = document.querySelector("#" + this.getSquareId(move.start) + " > img.piece"); | |
499 | // HACK for animation (otherwise with positive translate, image slides "under background"...) | |
500 | // Possible improvement: just alter squares on the piece's way... | |
501 | squares = document.getElementsByClassName("board"); | |
502 | for (let i=0; i<squares.length; i++) | |
503 | { | |
504 | let square = squares.item(i); | |
505 | if (square.id != this.getSquareId(move.start)) | |
506 | square.style.zIndex = "-1"; | |
507 | } | |
508 | movingPiece.style.transform = "translate(" + translation.x + "px," + translation.y + "px)"; | |
509 | movingPiece.style.transitionDuration = "0.2s"; | |
510 | movingPiece.style.zIndex = "3000"; | |
511 | setTimeout( () => { | |
512 | for (let i=0; i<squares.length; i++) | |
513 | squares.item(i).style.zIndex = "auto"; | |
514 | movingPiece.style = {}; //required e.g. for 0-0 with KR swap | |
515 | this.play(move); | |
516 | }, 200); | |
517 | }, | |
518 | play: function(move, programmatic) { | |
519 | if (!!programmatic) //computer or human opponent | |
520 | { | |
521 | this.animateMove(move); | |
522 | return; | |
523 | } | |
524 | // Not programmatic, or animation is over | |
525 | if (this.mode == "human" && this.vr.turn == this.mycolor) | |
526 | { | |
527 | if (!this.oppConnected) | |
528 | return; //abort move if opponent is gone | |
0cb758e0 BA |
529 | try { |
530 | this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid})); | |
531 | } catch(INVALID_STATE_ERR) { | |
532 | return; //abort also if we lost connection | |
533 | } | |
1d184b4c BA |
534 | } |
535 | new Audio("/sounds/chessmove1.mp3").play(); | |
536 | this.vr.play(move, "ingame"); | |
537 | if (this.mode == "human") | |
538 | this.updateStorage(); //after our moves and opponent moves | |
539 | const eog = this.vr.checkGameOver(this.vr.turn); | |
540 | if (eog != "*") | |
541 | this.endGame(eog); | |
542 | else if (this.mode == "computer" && this.vr.turn != this.mycolor) | |
543 | setTimeout(this.playComputerMove, 500); | |
544 | }, | |
545 | }, | |
546 | }) |