X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fvariant.js;h=5920c0c783d885bcaaba1e06f199f377c96598a5;hb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;hp=2174c50918498f1cfe0e73daa7b4c65dfed03cab;hpb=4ecf423bce243e8e10b5b777a95f67ecc9f8d8d3;p=vchess.git

diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js
index 2174c509..5920c0c7 100644
--- a/public/javascripts/variant.js
+++ b/public/javascripts/variant.js
@@ -1,15 +1,77 @@
 new Vue({
-	el: "#variantPage",
-	data: { display: "" }, //do not show anything...
-	// TODO: listen event "show problem", avec le probleme stringifié en arg
-	// Alors: display=game, mode=friend, newGame(fen, turn, ...),
-	//   et set Instructions+Soluce
+	el: "#VueElement",
+	data: {
+		display: "", //default to main hall; see "created()" function
+		gameRef: undefined, //...for now
+		probId: undefined,
+		conn: null,
+		mode: "analyze",
+		allowChat: false,
+		allowMovelist: true,
+		// Settings initialized with values from localStorage
+		settings:	{
+			bcolor: localStorage["bcolor"] || "lichess",
+			sound: parseInt(localStorage["sound"]) || 2,
+			hints: parseInt(localStorage["hints"]) || 1,
+			coords: !!eval(localStorage["coords"]),
+			highlight: !!eval(localStorage["highlight"]),
+			sqSize: parseInt(localStorage["sqSize"]),
+		},
+	},
+	created: function() {
+		window.onhashchange = this.setDisplay;
+		if (!!localStorage["variant"])
+			location.hash = "#game?id=" + localStorage["gameId"];
+		else
+			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);
+		const socketCloseListener = () => {
+			this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
+		}
+		this.conn.onclose = socketCloseListener;
+	},
 	methods: {
-		toggleDisplay: function(elt) {
-			if (this.display == elt)
-				this.display = ""; //hide
-			else
-				this.display = elt; //show
+		updateSettings: function(event) {
+			const propName =
+				event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
+			localStorage[propName] = ["highlight","coords"].includes(propName)
+				? event.target.checked
+				: event.target.value;
+		},
+		// Game is over, clear storage and put it in indexedDB
+		archiveGame: function() {
+			// TODO: ...
+			//clearStorage();
+		},
+		setDisplay: function() {
+			// Prevent set display if there is a running game
+			if (!!localStorage["variant"])
+				return;
+			if (!location.hash)
+				location.hash = "#room"; //default
+			const hashParts = location.hash.substr(1).split("?");
+			this.display = hashParts[0];
+			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)
+				menuToggle.checked = false;
 		},
 	},
 });