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     },
   9     computed: {
  10         sortedCounts: function () {
  11             // TODO: priorité aux parties corr où c'est à nous de jouer !
  12             const variantsCounts = variantArray
  13             .filter( v => {
  14                 return v.name.startsWith(this.curPrefix);
  15             })
  16             .map( v => {
  17                 return {
  18                     name: v.name,
  19                     desc: v.description,
  20                     count: this.counts[v.name] || 0,
  21                 };
  22             });
  23             return variantsCounts.sort((a,b) => {
  24                 if (a.count != b.count)
  25                     return b.count - a.count;
  26                 // Else, alphabetic ordering
  27                 return a.name.localeCompare(b.name);
  28             });
  29         },
  30     },
  31     created: function() {
  32         const url = socketUrl;
  33         const sid = getRandString();
  34         this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
  35         const socketMessageListener = msg => {
  36             const data = JSON.parse(msg.data);
  37             if (data.code == "counts")
  38                 this.counts = data.counts;
  39             else if (data.code == "increase")
  40                 this.counts[data.vname]++;
  41             else if (data.code == "decrease")
  42                 this.counts[data.vname]--;
  43         };
  44         const socketCloseListener = () => {
  45             this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
  46             this.conn.addEventListener('message', socketMessageListener);
  47             this.conn.addEventListener('close', socketCloseListener);
  48         };
  49         this.conn.onmessage = socketMessageListener;
  50         this.conn.onclose = socketCloseListener;
  51     },
  52 //  mounted: function() {
  53 //      // Handle key stroke
  54 //      document.onkeydown = event => {
  55 //          // Is it Back or Esc? If yes, apply action on current word
  56 //          if (event.keyCode == 8) //Back
  57 //          {
  58 //              event.preventDefault();
  59 //              this.curPrefix = this.curPrefix.slice(0,-1);
  60 //          }
  61 //          else if (event.keyCode == 27) //Esc
  62 //          {
  63 //              event.preventDefault();
  64 //              this.curPrefix = "";
  65 //          }
  66 //          // Is it alphanumeric? If yes, stack it
  67 //          else if (_.range(48,58).includes(event.keyCode)
  68 //              || _.range(65,91).includes(event.keyCode)
  69 //              || _.range(97,123).includes(event.keyCode))
  70 //          {
  71 //              let newChar = String.fromCharCode(event.keyCode);
  72 //              this.curPrefix += this.curPrefix.length==0
  73 //                  ? newChar.toUpperCase()
  74 //                  : newChar.toLowerCase();
  75 //          }
  76 //          // ...ignore everything else
  77 //      };
  78 //  },
  79 });
  80
  81 // TODO:
  82 // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
  83 // ==> background orange si à moi de jouer par corr (sur main index)
  84 // (fonction "getNextCol()" dans base_rules.js ?)