From: Benjamin Auder <benjamin.auder@somewhere>
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/variants/current/doc/scripts/pieces/css/common.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', {
 		</div>
 	`,
 	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', {
 				<div id="instructions-div" class="section-content">
 					<p id="problem-instructions">{{ curProb.instructions }}</p>
 				</div>
-				<my-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true"
-					:settings="settings"
-				>
+				<my-game :fen="curProb.fen" :mode="mode" :allowMovelist="true"
+					:settings="settings">
 				</my-game>
 				<div id="solution-div" class="section-content">
 					<h3 class="clickable" @click="showSolution = !showSolution">
-						{{ translations["Show solution"] }}
+						{{ translate("Show solution") }}
 					</h3>
 					<p id="problem-solution" v-show="showSolution">{{ curProb.solution }}</p>
 				</div>
@@ -120,27 +120,18 @@ Vue.component('my-problems', {
 		</div>
 	`,
 	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")