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 });