From: Benjamin Auder Date: Thu, 17 Jan 2019 14:09:03 +0000 (+0100) Subject: Advance on problems debug. Navigation much cleaner now X-Git-Url: https://git.auder.net/js/pieces/bundles/framework/css/body.css?a=commitdiff_plain;h=97da8720d3f33cb0c29079baf42c52ed047c3049;p=vchess.git Advance on problems debug. Navigation much cleaner now --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 8662028c..0d9322e2 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -10,8 +10,8 @@ Vue.component('my-game', { // fen: to start from a FEN without identifiers (analyze mode) // subMode: "auto" (game comp vs comp) or "corr" (correspondance game), // or "examine" (after human game: TODO) - props: ["conn","gameId","fen","mode","subMode","allowChat","allowMovelist", - "queryHash","settings"], + props: ["conn","gameRef","fen","mode","subMode", + "allowChat","allowMovelist","settings"], data: function() { return { // Web worker to play computer moves without freezing interface: @@ -41,12 +41,7 @@ Vue.component('my-game', { return this.$emit("computer-think"); this.newGameFromFen(); }, - gameId: function() { - this.loadGame(); - }, - queryHash: function(newQhash) { - // New query hash = "id=42"; get 42 as gameId - this.gameId = parseInt(newQhash.substr(2)); + gameRef: function() { this.loadGame(); }, }, @@ -121,7 +116,7 @@ Vue.component('my-game', { `, created: function() { - if (!!this.gameId) + if (!!this.gameRef) this.loadGame(); else if (!!this.fen) { @@ -130,11 +125,11 @@ Vue.component('my-game', { } // TODO: if I'm one of the players in game, then: // Send ping to server (answer pong if opponent is connected) - if (true && !!this.conn) + if (true && !!this.conn && !!this.gameRef) { this.conn.onopen = () => { this.conn.send(JSON.stringify({ - code:"ping",oppid:this.oppid,gameId:this.gameId})); + code:"ping",oppid:this.oppid,gameId:this.gameRef.id})); }; } // TODO: also handle "draw accepted" (use opponents array?) @@ -149,7 +144,7 @@ Vue.component('my-game', { this.play(data.move, variant.name!="Dark" ? "animate" : null); break; case "pong": //received if we sent a ping (game still alive on our side) - if (this.gameId != data.gameId) + if (this.gameRef.id != data.gameId) break; //games IDs don't match: definitely over... this.oppConnected = true; // Send our "last state" informations to opponent(s) @@ -158,7 +153,7 @@ Vue.component('my-game', { this.conn.send(JSON.stringify({ code: "lastate", oppid: oid, - gameId: this.gameId, + gameId: this.gameRef.id, lastMove: (L>0?this.vr.moves[L-1]:undefined), movesCount: L, })); @@ -167,7 +162,7 @@ Vue.component('my-game', { // TODO: refactor this, because at 3 or 4 players we may have missed 2 or 3 moves (not just one) case "lastate": //got opponent infos about last move L = this.vr.moves.length; - if (this.gameId != data.gameId) + if (this.gameRef.id != data.gameId) break; //games IDs don't match: nothing we can do... // OK, opponent still in game (which might be over) if (this.score != "*") @@ -176,7 +171,7 @@ Vue.component('my-game', { this.conn.send(JSON.stringify({ code: "lastate", oppid: data.oppid, - gameId: this.gameId, + gameId: this.gameRef.id, score: this.score, })); } @@ -188,7 +183,7 @@ Vue.component('my-game', { this.conn.send(JSON.stringify({ code: "lastate", oppid: this.opponent.id, - gameId: this.gameId, + gameId: this.gameRef.id, lastMove: this.vr.moves[L-1], movesCount: L, })); @@ -324,7 +319,7 @@ Vue.component('my-game', { // TODO: ask game to remote peer if this.remoteId is set // (or just if game not found locally) // NOTE: if it's a corr game, ask it from server - const game = getGameFromStorage(this.gameId); + const game = getGameFromStorage(this.gameRef.id, this.gameRef.uid); //uid may be blank this.opponent.id = game.oppid; //opponent ID in case of running HH game this.opponent.name = game.oppname; //maye be blank (if anonymous) this.score = game.score; diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js index 6edab93d..d1ec9a21 100644 --- a/public/javascripts/components/problems.js +++ b/public/javascripts/components/problems.js @@ -1,5 +1,5 @@ Vue.component('my-problems', { - props: ["queryHash","settings"], + props: ["probId","settings"], data: function () { return { userId: user.id, @@ -10,6 +10,7 @@ Vue.component('my-problems', { curProb: null, //(reference to) current displayed problem (if any) showSolution: false, nomoreMessage: "", + mode: "analyze", //for game component pbNum: 0, //to navigate directly to some problem // New problem (to upload), or existing problem to edit: modalProb: { @@ -45,13 +46,12 @@ Vue.component('my-problems', {

{{ curProb.instructions }}

- +

- {{ translations["Show solution"] }} + {{ translate("Show solution") }}

{{ curProb.solution }}

@@ -120,27 +120,18 @@ Vue.component('my-problems', { `, watch: { - queryHash: function(newQhash) { - if (!!newQhash) - { - // New query hash = "id=42"; get 42 as problem ID - const pid = parseInt(newQhash.substr(2)); - this.showProblem(pid); - } - else - this.curProb = null; //(back to) list display + probId: function() { + this.showProblem(this.probId); }, }, created: function() { - if (!!this.queryHash) - { - const pid = parseInt(this.queryHash.substr(2)); - this.showProblem(pid); - } + if (!!this.probId) + this.showProblem(this.probId); else this.firstFetch(); }, methods: { + translate: translate, firstFetch: function() { // Fetch most recent problems from server, for both lists this.fetchProblems("others", "bacwkard"); @@ -155,15 +146,15 @@ Vue.component('my-problems', { const pIdx = parray.findIndex(p => p.id == pid); if (pIdx >= 0) { - curProb = parray[pIdx]; + this.curProb = parray[pIdx]; break; } } - if (!curProb) + if (!this.curProb) { // Cannot find problem in current set; get from server, and add to singletons. ajax( - "/problems/" + variant.name + "/" + pid, //TODO: use variant._id ? + "/problems/" + variant.id + "/" + pid, //TODO: variant ID should not be required "GET", response => { if (!!response.problem) @@ -177,9 +168,6 @@ Vue.component('my-problems', { ); } }, - translate: function(text) { - return translations[text]; - }, curProblems: function() { switch (this.display) { diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js index 5a6c224a..5920c0c7 100644 --- a/public/javascripts/variant.js +++ b/public/javascripts/variant.js @@ -2,8 +2,8 @@ new Vue({ el: "#VueElement", data: { display: "", //default to main hall; see "created()" function - gameid: undefined, //...yet - queryHash: "", + gameRef: undefined, //...for now + probId: undefined, conn: null, mode: "analyze", allowChat: false, @@ -19,14 +19,11 @@ new Vue({ }, }, created: function() { + window.onhashchange = this.setDisplay; if (!!localStorage["variant"]) - { location.hash = "#game?id=" + localStorage["gameId"]; - this.display = location.hash.substr(1); - } else this.setDisplay(); - window.onhashchange = this.setDisplay; // Our ID, always set (DB id if registered, collision-free random string otherwise) this.myid = user.id || localStorage["myid"] || "anon-" + getRandString(); this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id); @@ -56,7 +53,21 @@ new Vue({ location.hash = "#room"; //default const hashParts = location.hash.substr(1).split("?"); this.display = hashParts[0]; - this.queryHash = hashParts[1]; //may be empty, undefined... + if (hashParts[0] == "problems" && !!hashParts[1]) + { + // Show a specific problem + this.probId = hashParts[1].split("=")[1]; + } + else if (hashParts[0] == "game" && !!hashParts[1]) + { + // Show a specific game, maybe with a user ID + const params = hashParts[1].split("&").filter(h => h.split("=")[1]); + // TODO: Vue.set(...) probably required here + this.gameRef = { + id: params[0], + uid: params[1], //may be undefined + }; + } // Close menu on small screens: let menuToggle = document.getElementById("drawer-control"); if (!!menuToggle) diff --git a/views/variant.pug b/views/variant.pug index 1050f064..c6303f3f 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -31,12 +31,10 @@ block content my-room(v-show="display=='room'" :conn="conn" :settings="settings") my-tab-games(v-show="display=='tabGames'") my-rules(v-show="display=='rules'" :settings="settings") - my-problems(v-show="display=='problems'" :query-hash="queryHash" - :settings="settings") - my-game(v-show="display=='game'" :game-id="gameid" :conn="conn" + my-problems(v-show="display=='problems'" :prob-id="probId" :settings="settings") + my-game(v-show="display=='game'" :game-ref="gameRef" :conn="conn" :allow-chat="allowChat" :allow-movelist="allowMovelist" - :mode="mode" :query-hash="queryHash" :settings="settings" - @game-over="archiveGame") + :mode="mode" :settings="settings" @game-over="archiveGame") block javascripts script(src="/javascripts/utils/array.js")