Step toward a one-page application

[vchess.git] / public / javascripts / variant.js

diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js
index f074bae..5920c0c 100644 (file)
--- a/public/javascripts/variant.js
+++ b/public/javascripts/variant.js
@@ -1,76 +1,77 @@
 new Vue({
        el: "#VueElement",
        data: {
-               display: "undefined", //default to main hall; see "created()" function
-               gameid: undefined, //...yet
-       
+               display: "", //default to main hall; see "created()" function
+               gameRef: undefined, //...for now
+               probId: undefined,
                conn: null,
-
-               // TEMPORARY: DEBUG
                mode: "analyze",
-               orientation: "w",
-               userColor: "w",
-
                allowChat: false,
                allowMovelist: true,
-               fen: V.GenRandInitFen(),
+               // 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() {
-               // TODO: navigation becomes a little more complex
-               this.setDisplay();
                window.onhashchange = this.setDisplay;
-
-               this.myid = "abcdefghij";
-//console.log(this.myid + " " + variant);
-
+               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;
-
-               //this.vr = new VariantRules( V.GenRandInitFen() );
        },
        methods: {
+               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() {
-
-//TODO: prevent set display if there is a running game
-
+                       // Prevent set display if there is a running game
+                       if (!!localStorage["variant"])
+                               return;
                        if (!location.hash)
                                location.hash = "#room"; //default
-                       this.display = location.hash.substr(1);
+                       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;
                },
-
-               // TEMPORARY: DEBUG (duplicate code)
-               play: function(move) {
-                       // Not programmatic, or animation is over
-                       if (!move.notation)
-                               move.notation = this.vr.getNotation(move);
-                       this.vr.play(move);
-                       if (!move.fen)
-                               move.fen = this.vr.getFen();
-                       if (this.sound == 2)
-                               new Audio("/sounds/move.mp3").play().catch(err => {});
-                       // Is opponent in check?
-                       this.incheck = this.vr.getCheckSquares(this.vr.turn);
-                       const score = this.vr.getCurrentScore();
-               },
-               undo: function(move) {
-                       this.vr.undo(move);
-                       if (this.sound == 2)
-                               new Audio("/sounds/undo.mp3").play().catch(err => {});
-                       this.incheck = this.vr.getCheckSquares(this.vr.turn);
-               },
        },
 });
-               
-//const continuation = (localStorage.getItem("variant") === variant.name);
-//                     if (continuation) //game VS human has priority
-//                             this.continueGame("human");
-
-// TODO:
-// si quand on arrive il y a une continuation "humaine" : display="game" et retour à la partie !