client/src/components/Home.vue

   1 <template>
   2   <div class="hello">
   3
   4
   5
   6
   7 //Index: rename into Home
   8                 .row(v-show="display=='variants'")
   9                     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  10                         label(for="prefixFilter") Type first letters...
  11                         input#prefixFilter(v-model="curPrefix")
  12                     my-variant-summary(v-for="(v,idx) in sortedCounts"
  13
  14
  15
  16
  17
  18     <h1>{{ msg }}</h1>
  19     <p>
  20       For a guide and recipes on how to configure / customize this project,<br>
  21       check out the
  22       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
  23     </p>
  24     <h3>Installed CLI Plugins</h3>
  25     <ul>
  26       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
  27     </ul>
  28     <h3>Essential Links</h3>
  29     <ul>
  30       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
  31       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
  32       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
  33       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
  34       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
  35     </ul>
  36     <h3>Ecosystem</h3>
  37     <ul>
  38       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
  39       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
  40       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
  41       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
  42       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
  43     </ul>
  44   </div>
  45 </template>
  46
  47 <script>
  48 export default {
  49   name: "HelloWorld",
  50   props: {
  51     msg: String
  52   },
  53 //  created: function() {
  54 //      alert("test");
  55 //  },
  56     methods: {
  57
  58     },
  59 };
  60 </script>
  61
  62
  63
  64
  65
  66
  67
  68
  69 // Javascript for index page: mostly counters updating
  70 new Vue({
  71     el: "#VueElement",
  72     data: {
  73         counts: {},
  74         curPrefix: "",
  75         conn: null,
  76         display: "variants",
  77     },
  78     computed: {
  79         sortedCounts: function () {
  80             const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
  81             const variantsCounts = variantArray
  82             .filter( v => {
  83                 return v.name.startsWith(capitalizedPrefix);
  84             })
  85             .map( v => {
  86                 return {
  87                     name: v.name,
  88                     desc: v.description,
  89                     count: this.counts[v.name] || 0,
  90                 };
  91             });
  92             return variantsCounts.sort((a,b) => {
  93                 if (a.count != b.count)
  94                     return b.count - a.count;
  95                 // Else, alphabetic ordering
  96                 return a.name.localeCompare(b.name);
  97             });
  98         },
  99     },
 100     created: function() {
 101         this.setDisplay();
 102         window.onhashchange = this.setDisplay;
 103
 104         const url = socketUrl;
 105         const sid = getRandString();
 106         this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
 107         const socketMessageListener = msg => {
 108             const data = JSON.parse(msg.data);
 109             if (data.code == "counts")
 110                 this.counts = data.counts;
 111             else if (data.code == "increase")
 112                 this.counts[data.vid]++;
 113             else if (data.code == "decrease")
 114                 this.counts[data.vid]--;
 115         };
 116         const socketCloseListener = () => {
 117             this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
 118             this.conn.addEventListener('message', socketMessageListener);
 119             this.conn.addEventListener('close', socketCloseListener);
 120         };
 121         this.conn.onmessage = socketMessageListener;
 122         this.conn.onclose = socketCloseListener;
 123
 124         // TODO: AJAX call get corr games (all variants)
 125         // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
 126         // ==> background orange si à moi de jouer par corr (sur main index)
 127         // (helper: static fonction "GetNextCol()" dans base_rules.js)
 128
 129     },
 130     methods: {
 131         setDisplay: function() {
 132             if (!location.hash)
 133                 location.hash = "#variants"; //default
 134             this.display = location.hash.substr(1);
 135         },
 136
 137     },
 138 });
 139
 140
 141
 142
 143
 144
 145
 146
 147 <!-- Add "scoped" attribute to limit CSS to this component only -->
 148 <style scoped lang="scss">
 149 h3 {
 150   margin: 40px 0 0;
 151 }
 152 ul {
 153   list-style-type: none;
 154   padding: 0;
 155 }
 156 li {
 157   display: inline-block;
 158   margin: 0 10px;
 159 }
 160 a {
 161   color: #42b983;
 162 }
 163 </style>