From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 14 Jan 2019 04:14:53 +0000 (+0100)
Subject: Simplify navigation
X-Git-Url: https://git.auder.net/doc/html/assets/scripts/current/pieces/cp.svg?a=commitdiff_plain;h=4608eed94432356bd2df8c144d7d233913c6483c;p=vchess.git

Simplify navigation
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 096a9e56..6361b8a1 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -55,12 +55,16 @@ Vue.component('my-game', {
 	},
 	// Modal end of game, and then sub-components
 	// TODO: provide chat parameters (connection, players ID...)
-	// and alwo moveList parameters (just moves ?)
+	// and also moveList parameters (just moves ?)
 	// TODO: connection + turn indicators en haut à droite (superposé au menu)
 	// TODO: controls: abort, clear, resign, draw (avec confirm box)
 	// et si partie terminée : (mode analyse) just clear, back / play
 	// + flip button toujours disponible
 	// gotoMove : vr = new VariantRules(fen stocké dans le coup [TODO])
+	
+	// NOTE: move.color must be fulfilled after each move played, because of Marseille (or Avalanche) chess
+	// --> useful in moveList component (universal comma separator ?)
+	
 	template: `
 		<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
 			<input id="modal-eog" type="checkbox" class="modal"/>
@@ -83,7 +87,7 @@ Vue.component('my-game', {
 				</p>
 			</div>
 			<div id="pgn-div" class="section-content">
-				<a id="download" href: "#">
+				<a id="download" href="#">
 				</a>
 				<button id="downloadBtn" @click="download">
 					{{ translate("Download PGN") }}
diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 53077049..cf2cd074 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -129,6 +129,7 @@ Vue.component('my-problems', {
 		</div>
 	`,
 	created: function() {
+		// TODO: adapt this, #problems:28 ? (for example)
 		if (location.hash.length > 0)
 			this.showProblem(location.hash.slice(1));
 		else
diff --git a/public/javascripts/index.js b/public/javascripts/index.js
index fe0b36a3..0e2a2631 100644
--- a/public/javascripts/index.js
+++ b/public/javascripts/index.js
@@ -30,6 +30,9 @@ new Vue({
 		},
 	},
 	created: function() {
+		this.setDisplay();
+		window.onhashchange = this.setDisplay;
+		
 		const url = socketUrl;
 		const sid = getRandString();
 		this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
@@ -54,5 +57,14 @@ new Vue({
 		// si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
 		// ==> background orange si à moi de jouer par corr (sur main index)
 		// (helper: static fonction "GetNextCol()" dans base_rules.js)
+
+	},
+	methods: {
+		setDisplay: function() {
+			if (!location.hash)
+				location.hash = "#variants"; //default
+			this.display = location.hash.substr(1);
+		},
+
 	},
 });
diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js
index e24dfc68..74c4298c 100644
--- a/public/javascripts/variant.js
+++ b/public/javascripts/variant.js
@@ -18,7 +18,7 @@ new Vue({
 	created: function() {
 		// TODO: navigation becomes a little more complex
 		this.setDisplay();
-
+		window.onhashchange = this.setDisplay;
 
 		this.myid = "abcdefghij";
 //console.log(this.myid + " " + variant);
@@ -29,7 +29,6 @@ new Vue({
 		}
 		this.conn.onclose = socketCloseListener;
 
-		window.onhashchange = this.setDisplay;
 		//this.vr = new VariantRules( V.GenRandInitFen() );
 	},
 	methods: {
@@ -37,8 +36,9 @@ new Vue({
 
 //TODO: prevent set display if there is a running game
 
-			const page = (location.hash || "#room").substr(1);
-			this.display = page;
+			if (!location.hash)
+				location.hash = "#room"; //default
+			this.display = location.hash.substr(1);
 			// Close menu on small screens:
 			let menuToggle = document.getElementById("drawer-control");
 			if (!!menuToggle)
diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass
index 161995db..5639c7b2 100644
--- a/public/stylesheets/layout.sass
+++ b/public/stylesheets/layout.sass
@@ -42,6 +42,10 @@ body
       p
         margin-right: 5px
 
+a.right-menu
+  &:link, &:visited, &:hover
+    color: black
+
 #settings, #contactForm
   max-width: 767px
   @media screen and (max-width: 767px)
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 15c1996d..78570856 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -37,7 +37,7 @@ a#homeLink
       margin-top: 10px
       display: block
 
-#helpMenu
+#userMenu, #settings
   @media screen and (min-width: 768px)
     float: right
   .info-container
diff --git a/reflexions b/reflexions
index 61c9932a..82e59809 100644
--- a/reflexions
+++ b/reflexions
@@ -1,4 +1,6 @@
 tell opponent that I got the move, for him to start timer (and lose...)
+  --> no, not needed and impossible if everybody is offline
+	==> just store this time locally (cheating possible but...)
 board2, board3, board4
 VariantRules2, 3 et 4 aussi
 fetch challenges and corr games from server at startup (room)
diff --git a/sockets.js b/sockets.js
index 21742d1d..1ebd5212 100644
--- a/sockets.js
+++ b/sockets.js
@@ -1,6 +1,5 @@
 const url = require('url');
-const sqlite3 = require('sqlite3');
-const db = new sqlite3.Database(__dirname + "/db/vchess.sqlite");
+const VariantModel = require("./models/Variant");
 
 // Node version in Ubuntu 16.04 does not know about URL class
 function getJsonFromUrl(url) {
@@ -16,137 +15,140 @@ function getJsonFromUrl(url) {
 // TODO: empêcher multi-log du même user (envoyer le user ID + secret en même temps que name et...)
 // --> si secret ne matche pas celui trouvé en DB, stop
 
+// TODO: this file in the end will be much simpler, just tracking connect/disconnect
+// (everything else using WebRTC)
+
 module.exports = function(wss) {
-	db.serialize(function() {
-		db.all("SELECT * FROM Variants", (err,variants) => {
-			let clients = { "index": {} };
-			let games = {}; //pending games (player sid)
-			for (const v of variants)
-				clients[v.id] = {};
-			// No-op function as a callback when sending messages
-			const noop = () => { };
-			wss.on("connection", (socket, req) => {
+	VariantModel.getAll((err,variants) => {
+		let clients = { "index": {} };
+		let games = {}; //pending games (player sid)
+		for (const v of variants)
+			clients[v.id] = {};
+		// No-op function as a callback when sending messages
+		const noop = () => { };
+		wss.on("connection", (socket, req) => {
 //				const params = new URL("http://localhost" + req.url).searchParams;
 //				const sid = params.get("sid");
 //				const page = params.get("page");
-				var query = getJsonFromUrl(req.url);
-				const sid = query["sid"];
-				const page = query["page"];
-				// Ignore duplicate connections:
-				if (!!clients[page][sid])
-				{
-					socket.send(JSON.stringify({code:"duplicate"}));
-					return;
-				}
-				clients[page][sid] = socket;
-				if (page == "index")
-				{
-					// Send counting info
-					const countings = {};
-					for (const v of variants)
-						countings[v.id] = Object.keys(clients[v.id]).length;
-					socket.send(JSON.stringify({code:"counts",counts:countings}));
-				}
-				else
+			var query = getJsonFromUrl(req.url);
+			const sid = query["sid"];
+			const page = query["page"];
+			// Ignore duplicate connections:
+			if (!!clients[page][sid])
+			{
+				socket.send(JSON.stringify({code:"duplicate"}));
+				return;
+			}
+			clients[page][sid] = socket;
+			if (page == "index")
+			{
+				// Send counting info
+				const countings = {};
+				for (const v of variants)
+					countings[v.id] = Object.keys(clients[v.id]).length;
+				socket.send(JSON.stringify({code:"counts",counts:countings}));
+			}
+			else
+			{
+				// Send to every client connected on index an update message for counts
+				Object.keys(clients["index"]).forEach( k => {
+					clients["index"][k].send(
+						JSON.stringify({code:"increase",vid:page}), noop);
+				});
+				// Also notify potential opponents:
+				// hit all clients which check if sid corresponds
+				Object.keys(clients[page]).forEach( k => {
+					clients[page][k].send(JSON.stringify({code:"connect",id:sid}), noop);
+				});
+				socket.on("message", objtxt => {
+					let obj = JSON.parse(objtxt);
+					switch (obj.code)
+					{
+						case "newchat":
+							if (!!clients[page][obj.oppid])
+							{
+								clients[page][obj.oppid].send(
+									JSON.stringify({code:"newchat",msg:obj.msg}), noop);
+							}
+							break;
+						case "newmove":
+							if (!!clients[page][obj.oppid])
+							{
+								clients[page][obj.oppid].send(
+									JSON.stringify({code:"newmove",move:obj.move}), noop);
+							}
+							break;
+						case "ping":
+							if (!!clients[page][obj.oppid])
+								socket.send(JSON.stringify({code:"pong",gameId:obj.gameId}));
+							break;
+						case "myname":
+							// Reveal my username to opponent
+							if (!!clients[page][obj.oppid])
+							{
+								clients[page][obj.oppid].send(JSON.stringify({
+									code:"oppname", name:obj.name}));
+							}
+							break;
+						case "lastate":
+							if (!!clients[page][obj.oppid])
+							{
+								const oppId = obj.oppid;
+								obj.oppid = sid; //I'm oppid for my opponent
+								clients[page][oppId].send(JSON.stringify(obj), noop);
+							}
+							break;
+						case "newgame":
+							if (!!games[page])
+							{
+								// Start a new game
+								const oppId = games[page]["id"];
+								const fen = games[page]["fen"];
+								const gameId = games[page]["gameid"];
+								delete games[page];
+								const mycolor = (Math.random() < 0.5 ? 'w' : 'b');
+								socket.send(JSON.stringify(
+									{code:"newgame",fen:fen,oppid:oppId,color:mycolor,gameid:gameId}));
+								if (!!clients[page][oppId])
+								{
+									clients[page][oppId].send(
+										JSON.stringify(
+											{code:"newgame",fen:fen,oppid:sid,color:mycolor=="w"?"b":"w",gameid:gameId}),
+										noop);
+								}
+							}
+							else
+								games[page] = {id:sid, fen:obj.fen, gameid:obj.gameid}; //wait for opponent
+							break;
+						case "cancelnewgame": //if a user cancel his seek
+							delete games[page];
+							break;
+						case "resign":
+							if (!!clients[page][obj.oppid])
+								clients[page][obj.oppid].send(JSON.stringify({code:"resign"}), noop);
+							break;
+						// TODO: case "challenge" (get ID) --> send to all, "acceptchallenge" (with ID) --> send to all, "cancelchallenge" --> send to all
+						// also, "sendgame" (give current game info, if any) --> to new connections, "sendchallenges" (same for challenges) --> to new connections
+					}
+				});
+			}
+			socket.on("close", () => {
+				delete clients[page][sid];
+				// Remove potential pending game
+				if (!!games[page] && games[page]["id"] == sid)
+					delete games[page];
+				if (page != "index")
 				{
 					// Send to every client connected on index an update message for counts
 					Object.keys(clients["index"]).forEach( k => {
 						clients["index"][k].send(
-							JSON.stringify({code:"increase",vid:page}), noop);
-					});
-					// Also notify potential opponents:
-					// hit all clients which check if sid corresponds
-					Object.keys(clients[page]).forEach( k => {
-						clients[page][k].send(JSON.stringify({code:"connect",id:sid}), noop);
-					});
-					socket.on("message", objtxt => {
-						let obj = JSON.parse(objtxt);
-						switch (obj.code)
-						{
-							case "newchat":
-								if (!!clients[page][obj.oppid])
-								{
-									clients[page][obj.oppid].send(
-										JSON.stringify({code:"newchat",msg:obj.msg}), noop);
-								}
-								break;
-							case "newmove":
-								if (!!clients[page][obj.oppid])
-								{
-									clients[page][obj.oppid].send(
-										JSON.stringify({code:"newmove",move:obj.move}), noop);
-								}
-								break;
-							case "ping":
-								if (!!clients[page][obj.oppid])
-									socket.send(JSON.stringify({code:"pong",gameId:obj.gameId}));
-								break;
-							case "myname":
-								// Reveal my username to opponent
-								if (!!clients[page][obj.oppid])
-								{
-									clients[page][obj.oppid].send(JSON.stringify({
-										code:"oppname", name:obj.name}));
-								}
-								break;
-							case "lastate":
-								if (!!clients[page][obj.oppid])
-								{
-									const oppId = obj.oppid;
-									obj.oppid = sid; //I'm oppid for my opponent
-									clients[page][oppId].send(JSON.stringify(obj), noop);
-								}
-								break;
-							case "newgame":
-								if (!!games[page])
-								{
-									// Start a new game
-									const oppId = games[page]["id"];
-									const fen = games[page]["fen"];
-									const gameId = games[page]["gameid"];
-									delete games[page];
-									const mycolor = (Math.random() < 0.5 ? 'w' : 'b');
-									socket.send(JSON.stringify(
-										{code:"newgame",fen:fen,oppid:oppId,color:mycolor,gameid:gameId}));
-									if (!!clients[page][oppId])
-									{
-										clients[page][oppId].send(
-											JSON.stringify(
-												{code:"newgame",fen:fen,oppid:sid,color:mycolor=="w"?"b":"w",gameid:gameId}),
-											noop);
-									}
-								}
-								else
-									games[page] = {id:sid, fen:obj.fen, gameid:obj.gameid}; //wait for opponent
-								break;
-							case "cancelnewgame": //if a user cancel his seek
-								delete games[page];
-								break;
-							case "resign":
-								if (!!clients[page][obj.oppid])
-									clients[page][obj.oppid].send(JSON.stringify({code:"resign"}), noop);
-								break;
-						}
+							JSON.stringify({code:"decrease",vid:page}), noop);
 					});
 				}
-				socket.on("close", () => {
-					delete clients[page][sid];
-					// Remove potential pending game
-					if (!!games[page] && games[page]["id"] == sid)
-						delete games[page];
-					if (page != "index")
-					{
-						// Send to every client connected on index an update message for counts
-						Object.keys(clients["index"]).forEach( k => {
-							clients["index"][k].send(
-								JSON.stringify({code:"decrease",vid:page}), noop);
-						});
-					}
-					// Also notify potential opponents:
-					// hit all clients which check if sid corresponds
-					Object.keys(clients[page]).forEach( k => {
-						clients[page][k].send(JSON.stringify({code:"disconnect",id:sid}), noop);
-					});
+				// Also notify potential opponents:
+				// hit all clients which check if sid corresponds
+				Object.keys(clients[page]).forEach( k => {
+					clients[page][k].send(JSON.stringify({code:"disconnect",id:sid}), noop);
 				});
 			});
 		});
diff --git a/views/index.pug b/views/index.pug
index 823b67c5..377aef94 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -22,10 +22,10 @@ block content
 				#flagMenu.clickable(onClick="doClick('modalLang')")
 					img(src="/images/flags/" + lang + ".svg")
 				include userMenu
-				#mygamesMenu.clickable.right-menu(v-show="display=='variants'" @click="display='games'")
+				a.right-menu(v-show="display=='variants'" href="#games")
 					.info-container
 						p My games
-				#variantsMenu.clickable.right-menu(v-show="display=='games'" @click="display='variants'")
+				a.right-menu(v-show="display=='games'" href="#variants")
 					.info-container
 						p Variants
 		.row(v-show="display=='variants'")
diff --git a/views/variant.pug b/views/variant.pug
index c7f4e55f..dbdbabae 100644
--- a/views/variant.pug
+++ b/views/variant.pug
@@ -14,21 +14,23 @@ block content
 					label.drawer-close(for="drawer-control")
 					a.icon-link(href="/")
 						i.material-icons home
-					a(href="#room" @click="setDisplay('room')")
+					a(href="#room")
 						=translations["Hall"]
-					a(href="#gameList" @click="setDisplay('gameList')")
+					a(href="#gameList")
 						=translations["My games"]
-					a(href="#rules" @click="setDisplay('rules')")
+					a(href="#rules")
 						=translations["Rules"]
-					a(href="#problems" @click="setDisplay('problems')")
+					a(href="#problems")
 						=translations["Problems"]
+					#flagMenu.clickable(onClick="doClick('modalLang')")
+						img(src="/images/flags/" + lang + ".svg")
 					#settings.clickable(onClick="doClick('modalSettings')")
 						i.material-icons settings
 					include userMenu
 		.row
 			//my-room(v-show="display=='room'")
 			//my-game-list(v-show="display=='gameList'")
-			//my-rules(v-show="display=='rules'")
+			my-rules(v-show="display=='rules'")
 			//my-problems(v-show="display=='problems'")
 			my-game(v-show="display=='game'" :game-id="gameid" :conn="conn"
 				:allow-chat="allowChat" :allow-movelist="allowMovelist"
@@ -48,7 +50,7 @@ block javascripts
 		const variant = !{JSON.stringify(variant)};
 	//script(src="/javascripts/components/room.js")
 	//script(src="/javascripts/components/gameList.js")
-	//script(src="/javascripts/components/rules.js")
+	script(src="/javascripts/components/rules.js")
 	script(src="/javascripts/components/board.js")
 	//script(src="/javascripts/components/problemPreview.js")
 	//script(src="/javascripts/components/problems.js")