public/javascripts/variant.js

   1 new Vue({
   2     el: "#VueElement",
   3     data: {
   4         display: "", //default to main hall; see "created()" function
   5         gameid: undefined, //...yet
   6         queryHash: "",
   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         if (!!localStorage["variant"])
  23         {
  24             location.hash = "#game?id=" + localStorage["gameId"];
  25             this.display = location.hash.substr(1);
  26         }
  27         else
  28             this.setDisplay();
  29         window.onhashchange = this.setDisplay;
  30         // Our ID, always set (DB id if registered, collision-free random string otherwise)
  31         this.myid = user.id || localStorage["myid"] || "anon-" + getRandString();
  32         this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
  33         const socketCloseListener = () => {
  34             this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
  35         }
  36         this.conn.onclose = socketCloseListener;
  37     },
  38     methods: {
  39         updateSettings: function(event) {
  40             const propName =
  41                 event.target.id.substr(3).replace(/^\w/, c => c.toLowerCase())
  42             localStorage[propName] = ["highlight","coords"].includes(propName)
  43                 ? event.target.checked
  44                 : event.target.value;
  45         },
  46         // Game is over, clear storage and put it in indexedDB
  47         archiveGame: function() {
  48             // TODO: ...
  49             //clearStorage();
  50         },
  51         setDisplay: function() {
  52             // Prevent set display if there is a running game
  53             if (!!localStorage["variant"])
  54                 return;
  55             if (!location.hash)
  56                 location.hash = "#room"; //default
  57             const hashParts = location.hash.substr(1).split("?");
  58             this.display = hashParts[0];
  59             this.queryHash = hashParts[1]; //may be empty, undefined...
  60             // Close menu on small screens:
  61             let menuToggle = document.getElementById("drawer-control");
  62             if (!!menuToggle)
  63                 menuToggle.checked = false;
  64         },
  65     },
  66 });