public/javascripts/index.js

   1 // Javascript for index page: mostly counters updating
   2 new Vue({
   3     el: "#VueElement",
   4     data: {
   5         counts: {},
   6         curPrefix: "",
   7         conn: null,
   8         display: "variants",
   9     },
  10     computed: {
  11         sortedCounts: function () {
  12             const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
  13             const variantsCounts = variantArray
  14             .filter( v => {
  15                 return v.name.startsWith(capitalizedPrefix);
  16             })
  17             .map( v => {
  18                 return {
  19                     name: v.name,
  20                     desc: v.description,
  21                     count: this.counts[v.name] || 0,
  22                 };
  23             });
  24             return variantsCounts.sort((a,b) => {
  25                 if (a.count != b.count)
  26                     return b.count - a.count;
  27                 // Else, alphabetic ordering
  28                 return a.name.localeCompare(b.name);
  29             });
  30         },
  31     },
  32     created: function() {
  33         this.setDisplay();
  34         window.onhashchange = this.setDisplay;
  35
  36         const url = socketUrl;
  37         const sid = getRandString();
  38         this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
  39         const socketMessageListener = msg => {
  40             const data = JSON.parse(msg.data);
  41             if (data.code == "counts")
  42                 this.counts = data.counts;
  43             else if (data.code == "increase")
  44                 this.counts[data.vid]++;
  45             else if (data.code == "decrease")
  46                 this.counts[data.vid]--;
  47         };
  48         const socketCloseListener = () => {
  49             this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
  50             this.conn.addEventListener('message', socketMessageListener);
  51             this.conn.addEventListener('close', socketCloseListener);
  52         };
  53         this.conn.onmessage = socketMessageListener;
  54         this.conn.onclose = socketCloseListener;
  55
  56         // TODO: AJAX call get corr games (all variants)
  57         // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
  58         // ==> background orange si à moi de jouer par corr (sur main index)
  59         // (helper: static fonction "GetNextCol()" dans base_rules.js)
  60
  61     },
  62     methods: {
  63         setDisplay: function() {
  64             if (!location.hash)
  65                 location.hash = "#variants"; //default
  66             this.display = location.hash.substr(1);
  67         },
  68
  69     },
  70 });