public/javascripts/index.js

   1 // Javascript for index page: mostly counters updating
   2 new Vue({
   3     el: "#indexPage",
   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 ?)