Step toward a one-page application
[vchess.git] / public / javascripts / variant.js
1 new Vue({
2 el: "#VueElement",
3 data: {
4 display: "", //default to main hall; see "created()" function
5 gameRef: undefined, //...for now
6 probId: undefined,
7 conn: null,
8 mode: "analyze",
9 allowChat: false,
10 allowMovelist: true,
11 // Settings initialized with values from localStorage
12 settings: {
13 bcolor: localStorage["bcolor"] || "lichess",
14 sound: parseInt(localStorage["sound"]) || 2,
15 hints: parseInt(localStorage["hints"]) || 1,
16 coords: !!eval(localStorage["coords"]),
17 highlight: !!eval(localStorage["highlight"]),
18 sqSize: parseInt(localStorage["sqSize"]),
19 },
20 },
21 created: function() {
22 window.onhashchange = this.setDisplay;
23 if (!!localStorage["variant"])
24 location.hash = "#game?id=" + localStorage["gameId"];
25 else
26 this.setDisplay();
27 // Our ID, always set (DB id if registered, collision-free random string otherwise)
28 this.myid = user.id || localStorage["myid"] || "anon-" + getRandString();
29 this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
30 const socketCloseListener = () => {
31 this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
32 }
33 this.conn.onclose = socketCloseListener;
34 },
35 methods: {
36 updateSettings: function(event) {
37 const propName =
38 event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
39 localStorage[propName] = ["highlight","coords"].includes(propName)
40 ? event.target.checked
41 : event.target.value;
42 },
43 // Game is over, clear storage and put it in indexedDB
44 archiveGame: function() {
45 // TODO: ...
46 //clearStorage();
47 },
48 setDisplay: function() {
49 // Prevent set display if there is a running game
50 if (!!localStorage["variant"])
51 return;
52 if (!location.hash)
53 location.hash = "#room"; //default
54 const hashParts = location.hash.substr(1).split("?");
55 this.display = hashParts[0];
56 if (hashParts[0] == "problems" && !!hashParts[1])
57 {
58 // Show a specific problem
59 this.probId = hashParts[1].split("=")[1];
60 }
61 else if (hashParts[0] == "game" && !!hashParts[1])
62 {
63 // Show a specific game, maybe with a user ID
64 const params = hashParts[1].split("&").filter(h => h.split("=")[1]);
65 // TODO: Vue.set(...) probably required here
66 this.gameRef = {
67 id: params[0],
68 uid: params[1], //may be undefined
69 };
70 }
71 // Close menu on small screens:
72 let menuToggle = document.getElementById("drawer-control");
73 if (!!menuToggle)
74 menuToggle.checked = false;
75 },
76 },
77 });