client/client_OLD/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         // Game is over, clear storage and put it in indexedDB
  37         archiveGame: function() {
  38             // TODO: ...
  39             //clearStorage();
  40         },
  41         setDisplay: function() {
  42             // Prevent set display if there is a running game
  43             if (!!localStorage["variant"])
  44                 return;
  45             if (!location.hash)
  46                 location.hash = "#room"; //default
  47             const hashParts = location.hash.substr(1).split("?");
  48             this.display = hashParts[0];
  49             if (hashParts[0] == "problems" && !!hashParts[1])
  50             {
  51                 // Show a specific problem
  52                 this.probId = hashParts[1].split("=")[1];
  53             }
  54             else if (hashParts[0] == "game" && !!hashParts[1])
  55             {
  56                 // Show a specific game, maybe with a user ID
  57                 const params = hashParts[1].split("&").filter(h => h.split("=")[1]);
  58                 // TODO: Vue.set(...) probably required here
  59                 this.gameRef = {
  60                     id: params[0],
  61                     uid: params[1], //may be undefined
  62                 };
  63             }
  64             // Close menu on small screens:
  65             let menuToggle = document.getElementById("drawer-control");
  66             if (!!menuToggle)
  67                 menuToggle.checked = false;
  68         },
  69     },
  70 });