From: Benjamin Auder Date: Wed, 16 Jan 2019 01:28:22 +0000 (+0100) Subject: rearrange room.js draft. think about game list components X-Git-Url: https://git.auder.net/doc/html/css/scripts/pieces/DESCRIPTION?a=commitdiff_plain;h=a6403027a66411ead248aab0369bf3ee3a75d8ec;p=vchess.git rearrange room.js draft. think about game list components --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index d370d66e..d0d81258 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -105,9 +105,12 @@ Vue.component('my-game', {
- +
+ + +
diff --git a/public/javascripts/components/room.js b/public/javascripts/components/room.js index c8071094..84c82f7c 100644 --- a/public/javascripts/components/room.js +++ b/public/javascripts/components/room.js @@ -19,19 +19,58 @@ chat général (gauche, activé ou non (bool global storage)). quand je poste un lastMove corr, supprimer mon ancien lastMove le cas échéant (tlm l'a eu) fin de partie corr: garder maxi nbPlayers lastMove sur serveur, pendant 7 jours (arbitraire) */ +// TODO: au moins l'échange des coups en P2P ? Vue.component('my-room', { props: ["conn","settings"], data: { something: "", //TODO }, - -}); - + // Modal new game, and then sub-components + template: ` +
+ +
+
+ +

+ {{ translate("Game state (FEN):") }} +

+ +

TODO: cadence, adversaire (pre-filled if click on name)

+

Note: leave FEN blank for random

+ +
+
+ + + + + onClick :: ask full game to remote player, and register as an observer in game + (use gameId to communicate) + on landing on game :: if gameId not found locally, check remotely + ==> il manque un param dans game : "remoteId" +
+ `, + created: function() { + const socketMessageListener = msg => { + const data = JSON.parse(msg.data); + switch (data.code) + { case "newgame": //challenge accepted // oppid: opponent socket ID (or DB id if registered) this.newGame("human", data.fen, data.color, data.oppid, data.gameid); break; - + } + }; + const socketCloseListener = () => { + this.conn.addEventListener('message', socketMessageListener); + this.conn.addEventListener('close', socketCloseListener); + }; + this.conn.onmessage = socketMessageListener; + this.conn.onclose = socketCloseListener; + }, + methods: { clickGameSeek: function(e) { if (this.mode == "human" && this.score == "*") return; //no newgame while playing @@ -43,15 +82,6 @@ Vue.component('my-room', { else this.newGame("human"); }, - clickComputerGame: function(e) { - if (this.mode == "computer" && this.score == "*" - && this.vr.turn != this.mycolor) - { - // Wait for computer reply first (avoid potential "ghost move" bug) - return; - } - this.newGame("computer"); - }, newGame: function(mode, fenInit, color, oppId, gameId) { const fen = fenInit || VariantRules.GenRandInitFen(); console.log(fen); //DEBUG @@ -76,39 +106,6 @@ Vue.component('my-room', { setTimeout(() => { modalBox.checked = false; }, 2000); return; } - const prefix = this.getStoragePrefix(mode); - if (mode == "computer") - { - const storageVariant = localStorage.getItem(prefix+"variant"); - if (!!storageVariant) - { - const score = localStorage.getItem(prefix+"score"); - if (storageVariant !== variant.name && score == "*") - { - if (!confirm(storageVariant + - translations[": unfinished computer game will be erased"])) - { - return; - } - } - } - } - else if (mode == "friend") - { - const storageVariant = localStorage.getItem(prefix+"variant"); - if (!!storageVariant) - { - const score = localStorage.getItem(prefix+"score"); - if (storageVariant !== variant.name && score == "*") - { - if (!confirm(storageVariant + - translations[": current analysis will be erased"])) - { - return; - } - } - } - } this.vr = new VariantRules(fen, []); this.score = "*"; this.pgnTxt = ""; //redundant with this.score = "*", but cleaner @@ -127,117 +124,21 @@ Vue.component('my-room', { new Audio("/sounds/newgame.mp3").play().catch(err => {}); document.getElementById("modal-newgame").checked = false; } - else if (mode == "computer") - { - this.compWorker.postMessage(["init",this.vr.getFen()]); - this.mycolor = (Math.random() < 0.5 ? 'w' : 'b'); - if (this.mycolor != this.vr.turn) - this.playComputerMove(); - } - else if (mode == "friend") - this.mycolor = "w"; //convention... - //else: problem solving: nothing more to do - if (mode != "problem") - this.setStorage(); //store game state in case of interruptions + this.setStorage(); //store game state in case of interruptions }, - continueGame: function(mode) { - this.mode = mode; - this.oppid = (mode=="human" ? localStorage.getItem("oppid") : undefined); - const prefix = this.getStoragePrefix(mode); - this.mycolor = localStorage.getItem(prefix+"mycolor"); - const moves = JSON.parse(localStorage.getItem(prefix+"moves")); - const fen = localStorage.getItem(prefix+"fen"); - const score = localStorage.getItem(prefix+"score"); //set in "endGame()" - this.fenStart = localStorage.getItem(prefix+"fenStart"); - this.vr = new VariantRules(fen, moves); + continueGame: function() { + this.oppid = localStorage.getItem("oppid"); + this.mycolor = localStorage.getItem("mycolor"); + const moves = JSON.parse(localStorage.getItem("moves")); + const fen = localStorage.getItem("fen"); + const score = localStorage.getItem("score"); //always "*" ?! + this.fenStart = localStorage.getItem("fenStart"); + this.vr = new VariantRules(fen); this.incheck = this.vr.getCheckSquares(this.vr.turn); - if (mode == "human") - { - this.gameId = localStorage.getItem("gameId"); - // Send ping to server (answer pong if opponent is connected) - this.conn.send(JSON.stringify({ - code:"ping",oppid:this.oppid,gameId:this.gameId})); - } - else if (mode == "computer") - { - this.compWorker.postMessage(["init",fen]); - if (score == "*" && this.mycolor != this.vr.turn) - this.playComputerMove(); - } - //else: nothing special to do in friend mode - if (score != "*") - { - // Small delay required when continuation run faster than drawing page - setTimeout(() => this.endGame(score), 100); - } + this.gameId = localStorage.getItem("gameId"); + // Send ping to server (answer pong if opponent is connected) + this.conn.send(JSON.stringify({ + code:"ping",oppid:this.oppid,gameId:this.gameId})); }, - - - // TODO: option du bouton "new game" :: seulement pour challenge indiv - const modalFenEdit = [ - h('input', - { - attrs: { "id": "modal-fenedit", type: "checkbox" }, - "class": { "modal": true }, - }), - h('div', - { - attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" }, - }, - [ - h('div', - { - "class": { "card": true, "smallpad": true }, - }, - [ - h('label', - { - attrs: { "id": "close-fenedit", "for": "modal-fenedit" }, - "class": { "modal-close": true }, - } - ), - h('h3', - { - attrs: { "id": "titleFenedit" }, - "class": { "section": true }, - domProps: { innerHTML: translations["Game state (FEN):"] }, - } - ), - h('input', - { - attrs: { - "id": "input-fen", - type: "text", - value: VariantRules.GenRandInitFen(), - }, - } - ), - h('button', - { - on: { click: - () => { - const fen = document.getElementById("input-fen").value; - document.getElementById("modal-fenedit").checked = false; - this.newGame("friend", fen); - } - }, - domProps: { innerHTML: translations["Ok"] }, - } - ), - h('button', - { - on: { click: - () => { - document.getElementById("input-fen").value = - VariantRules.GenRandInitFen(); - } - }, - domProps: { innerHTML: translations["Random"] }, - } - ), - ] - ) - ] - ) - ]; - elementArray = elementArray.concat(modalFenEdit); + }, +});