From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 14 Jan 2019 01:12:08 +0000 (+0100)
Subject: Advance on components/game.js
X-Git-Url: https://git.auder.net/assets/js/%7B%7B%20asset('mixstore/css/static/home.css')%20%7D%7D?a=commitdiff_plain;h=d44df0b01732d1948525daef5df62211ea6e1f64;p=vchess.git

Advance on components/game.js
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 555d3924..096a9e56 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -5,7 +5,7 @@
 Vue.component('my-game', {
 	// gameId: to find the game in storage (assumption: it exists)
 	// fen: to start from a FEN without identifiers (analyze mode)
-	props: ["gameId","fen","mode","allowChat","allowMovelist"],
+	props: ["conn","gameId","fen","mode","allowChat","allowMovelist"],
 	data: function() {
 		return {
 			// if oppid == "computer" then mode = "computer" (otherwise human)
@@ -14,7 +14,6 @@ Vue.component('my-game', {
 			oppid: "", //opponent ID in case of HH game
 			score: "*", //'*' means 'unfinished'
 			mycolor: "w",
-			conn: null, //socket connection (et WebRTC connection ?!)
 			oppConnected: false, //TODO?
 			pgnTxt: "",
 			// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
@@ -23,7 +22,10 @@ Vue.component('my-game', {
 			compWorker: new Worker('/javascripts/playCompMove.js'),
 			timeStart: undefined, //time when computer starts thinking
 			vr: null, //VariantRules object, describing the game state + rules
-		
+			endgameMessage: "",
+			orientation: "w",
+			
+			moves: [], //TODO: initialize if gameId is defined...
 			// orientation :: button flip
 			// userColor: given by gameId, or fen (if no game Id)
 			// gameOver: known if gameId; otherwise assue false
@@ -36,6 +38,9 @@ Vue.component('my-game', {
 		fen: function(newFen) {
 			this.vr = new VariantRules(newFen);
 		},
+		gameId: function() {
+			this.loadGame();
+		},
 	},
 	computed: {
 		showChat: function() {
@@ -70,9 +75,9 @@ Vue.component('my-game', {
 			</div>
 			<my-chat v-if="showChat">
 			</my-chat>
-			<my-board v-bind:vr="vr">
+			<my-board v-bind:vr="vr" :mode="mode" :orientation="orientation" :user-color="mycolor" @play-move="play">
 			</my-board>
-			<div v-show="showFen" id="fen-div" class="section-content">
+			<div v-if="showFen && !!vr" id="fen-div" class="section-content">
 				<p id="fen-string" class="text-center">
 					{{ vr.getFen() }}
 				</p>
@@ -81,7 +86,7 @@ Vue.component('my-game', {
 				<a id="download" href: "#">
 				</a>
 				<button id="downloadBtn" @click="download">
-					{{ translations["Download PGN"] }}
+					{{ translate("Download PGN") }}
 				</button>
 			</div>
 			<my-move-list v-if="showMoves">
@@ -89,10 +94,13 @@ Vue.component('my-game', {
 		</div>
 	`,
 	created: function() {
-		const url = socketUrl;
-
-// TODO: connexion initialized in variant.js and passed as a prop
 
+//		console.log(this.fen);
+//		console.log(this.gameId);
+		if (!!this.gameId)
+			this.loadGame();
+		else if (!!this.fen)
+			this.vr = new VariantRules(this.fen);
 		// TODO: after game, archive in indexedDB
 		// TODO: this events listener is central. Refactor ? How ?
 		const socketMessageListener = msg => {
@@ -199,10 +207,14 @@ Vue.component('my-game', {
 			}, delay);
 		}
 	},
-	//TODO: conn pourrait être une prop, donnée depuis variant.js
+	// this.conn est une prop, donnée depuis variant.js
 	//dans variant.js (plutôt room.js) conn gère aussi les challenges
 	// Puis en webRTC, repenser tout ça.
 	methods: {
+		translate: translate,
+		loadGame: function() {
+			// TODO: load this.gameId ...
+		},
 		setEndgameMessage: function(score) {
 			let eogMessage = "Undefined";
 			switch (score)
diff --git a/public/javascripts/index.js b/public/javascripts/index.js
index bc4cd9e1..fe0b36a3 100644
--- a/public/javascripts/index.js
+++ b/public/javascripts/index.js
@@ -38,9 +38,9 @@ new Vue({
 			if (data.code == "counts")
 				this.counts = data.counts;
 			else if (data.code == "increase")
-				this.counts[data.vname]++;
+				this.counts[data.vid]++;
 			else if (data.code == "decrease")
-				this.counts[data.vname]--;
+				this.counts[data.vid]--;
 		};
 		const socketCloseListener = () => {
 			this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
diff --git a/public/javascripts/utils/misc.js b/public/javascripts/utils/misc.js
index 4ad07661..3643fa7f 100644
--- a/public/javascripts/utils/misc.js
+++ b/public/javascripts/utils/misc.js
@@ -41,3 +41,7 @@ function doClick(elemId)
 {
 	document.getElementById(elemId).click(); //or ".checked = true"
 }
+
+function translate(msg) {
+	return translations[msg];
+}
diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js
index 7d30d731..e24dfc68 100644
--- a/public/javascripts/variant.js
+++ b/public/javascripts/variant.js
@@ -2,7 +2,7 @@ new Vue({
 	el: "#VueElement",
 	data: {
 		display: "undefined", //default to main hall; see "created()" function
-		gameid: "undefined", //...yet
+		gameid: undefined, //...yet
 	
 		conn: null,
 
@@ -10,25 +10,35 @@ new Vue({
 		mode: "analyze",
 		orientation: "w",
 		userColor: "w",
+
+		allowChat: false,
+		allowMovelist: false,
+		fen: V.GenRandInitFen(),
 	},
 	created: function() {
 		// TODO: navigation becomes a little more complex
-		const url = window.location.href;
-		const hashPos = url.indexOf("#");
-		const page = (hashPos >= 0 ? url.substr(hashPos+1) : "room");
-		this.setDisplay(page);
+		this.setDisplay();
+
+
+		this.myid = "abcdefghij";
+//console.log(this.myid + " " + variant);
 
-		this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
+		this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
 		const socketCloseListener = () => {
-			this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
+			this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
 		}
 		this.conn.onclose = socketCloseListener;
 
-		this.vr = new VariantRules( V.GenRandInitFen() );
+		window.onhashchange = this.setDisplay;
+		//this.vr = new VariantRules( V.GenRandInitFen() );
 	},
 	methods: {
-		setDisplay: function(elt) {
-			this.display = elt;
+		setDisplay: function() {
+
+//TODO: prevent set display if there is a running game
+
+			const page = (location.hash || "#room").substr(1);
+			this.display = page;
 			// Close menu on small screens:
 			let menuToggle = document.getElementById("drawer-control");
 			if (!!menuToggle)
diff --git a/sockets.js b/sockets.js
index 60434b5e..21742d1d 100644
--- a/sockets.js
+++ b/sockets.js
@@ -22,7 +22,7 @@ module.exports = function(wss) {
 			let clients = { "index": {} };
 			let games = {}; //pending games (player sid)
 			for (const v of variants)
-				clients[v.name] = {};
+				clients[v.id] = {};
 			// No-op function as a callback when sending messages
 			const noop = () => { };
 			wss.on("connection", (socket, req) => {
@@ -44,7 +44,7 @@ module.exports = function(wss) {
 					// Send counting info
 					const countings = {};
 					for (const v of variants)
-						countings[v.name] = Object.keys(clients[v.name]).length;
+						countings[v.id] = Object.keys(clients[v.id]).length;
 					socket.send(JSON.stringify({code:"counts",counts:countings}));
 				}
 				else
@@ -52,7 +52,7 @@ module.exports = function(wss) {
 					// 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",vname:page}), noop);
+							JSON.stringify({code:"increase",vid:page}), noop);
 					});
 					// Also notify potential opponents:
 					// hit all clients which check if sid corresponds
@@ -139,7 +139,7 @@ module.exports = function(wss) {
 						// 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",vname:page}), noop);
+								JSON.stringify({code:"decrease",vid:page}), noop);
 						});
 					}
 					// Also notify potential opponents:
diff --git a/views/variant.pug b/views/variant.pug
index 490a13ae..c7f4e55f 100644
--- a/views/variant.pug
+++ b/views/variant.pug
@@ -30,8 +30,10 @@ block content
 			//my-game-list(v-show="display=='gameList'")
 			//my-rules(v-show="display=='rules'")
 			//my-problems(v-show="display=='problems'")
-			//my-game(v-show="display=='game'" :gameId="gameid")
-			my-board(:vr="vr" :mode="mode" :orientation="orientation"
+			my-game(v-show="display=='game'" :game-id="gameid" :conn="conn"
+				:allow-chat="allowChat" :allow-movelist="allowMovelist"
+				:mode="mode" :fen="fen")
+			//my-board(:vr="vr" :mode="mode" :orientation="orientation"
 				:user-color="userColor" v-on:play-move="play")
 
 block javascripts
@@ -50,5 +52,5 @@ block javascripts
 	script(src="/javascripts/components/board.js")
 	//script(src="/javascripts/components/problemPreview.js")
 	//script(src="/javascripts/components/problems.js")
-	//script(src="/javascripts/components/game.js")
+	script(src="/javascripts/components/game.js")
 	script(src="/javascripts/variant.js")