client/src/views/Home.vue

   1 <template lang="pug">
   2 div
   3     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
   4         label(for="prefixFilter") Type first letters...
   5         input#prefixFilter(v-model="curPrefix")
   6     .variant.col-sm-12.col-md-5.col-lg-4(
   7         v-for="(v,idx) in sortedCounts"
   8         :class="{'col-md-offset-1': idx%2==0, 'col-lg-offset-2': idx%2==0}"
   9     )
  10         a(:href="v.name")
  11             h4.boxtitle.text-center {{ v.name }}
  12             span.count-players / {{ v.count }}
  13             p.description.text-center {{ $tr(v.desc) }}
  14 </template>
  15
  16 <script>
  17 export default {
  18   name: "home",
  19   data: function() {
  20     return {
  21       counts: {},
  22           curPrefix: "",
  23     };
  24     },
  25     computed: {
  26         sortedCounts: function () {
  27             const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
  28             const variantsCounts = this.$variants
  29             .filter( v => {
  30                 return v.name.startsWith(capitalizedPrefix);
  31             })
  32             .map( v => {
  33                 return {
  34                     name: v.name,
  35                     desc: v.description,
  36                     count: this.counts[v.name] || 0,
  37                 };
  38             });
  39             return variantsCounts.sort((a,b) => {
  40                 if (a.count != b.count)
  41                     return b.count - a.count;
  42                 // Else, alphabetic ordering
  43                 return a.name.localeCompare(b.name);
  44             });
  45         },
  46     },
  47     created: function() {
  48         const socketMessageListener = msg => {
  49             const data = JSON.parse(msg.data);
  50             if (data.code == "counts")
  51                 this.counts = data.counts;
  52             else if (data.code == "increase")
  53                 this.counts[data.vid]++;
  54             else if (data.code == "decrease")
  55                 this.counts[data.vid]--;
  56         };
  57         const socketCloseListener = () => {
  58             this.$conn.addEventListener('message', socketMessageListener);
  59             this.$conn.addEventListener('close', socketCloseListener);
  60         };
  61         this.$conn.onmessage = socketMessageListener;
  62         this.$conn.onclose = socketCloseListener;
  63         // TODO: AJAX call get corr games (all variants)
  64         // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
  65         // ==> background orange si à moi de jouer par corr (sur main index)
  66         // (helper: static fonction "GetNextCol()" dans base_rules.js)
  67     },
  68 };
  69 </script>
  70
  71 <!-- Add "scoped" attribute to limit CSS to this component only -->
  72 <style scoped lang="scss">
  73 h3 {
  74   margin: 40px 0 0;
  75 }
  76 ul {
  77   list-style-type: none;
  78   padding: 0;
  79 }
  80 li {
  81   display: inline-block;
  82   margin: 0 10px;
  83 }
  84 a {
  85   color: #42b983;
  86 }
  87 </style>