X-Git-Url: https://git.auder.net/images/pieces/Cwda/bt.svg?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHome.vue;h=dfd3939103a9d22d67e2dfcd09364864c5709f87;hb=ccd4a2b74aecdd6e52960a9ed42acea3e40c9271;hp=de83b095d1d5b2c84ee481760c9ac01b8f47cb8d;hpb=98db2082fd31e7a7bc0348e31ce119f39dbc31b3;p=vchess.git

diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index de83b095..dfd39391 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,18 +1,87 @@
-<template>
-  <div class="home">
-		<!--<img alt="Vue logo" src="../assets/logo.png">-->
-    <HelloWorld msg="Welcome to Your Vue.js Apppp"/>
-  </div>
+<template lang="pug">
+div
+	.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+		label(for="prefixFilter") Type first letters...
+		input#prefixFilter(v-model="curPrefix")
+	.variant.col-sm-12.col-md-5.col-lg-4(
+		v-for="(v,idx) in sortedCounts"
+		:class="{'col-md-offset-1': idx%2==0, 'col-lg-offset-2': idx%2==0}"
+	)
+		a(:href="v.name")
+			h4.boxtitle.text-center {{ v.name }}
+			span.count-players / {{ v.count }}
+			p.description.text-center {{ $tr(v.desc) }}
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
 export default {
   name: "home",
-  components: {
-    HelloWorld,
-  }
+  data: function() {
+    return {
+      counts: {},
+		  curPrefix: "",
+    };
+	},
+	computed: {
+		sortedCounts: function () {
+			const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
+			const variantsCounts = this.$variants
+			.filter( v => {
+				return v.name.startsWith(capitalizedPrefix);
+			})
+			.map( v => {
+				return {
+					name: v.name,
+					desc: v.description,
+					count: this.counts[v.name] || 0,
+				};
+			});
+			return variantsCounts.sort((a,b) => {
+				if (a.count != b.count)
+					return b.count - a.count;
+				// Else, alphabetic ordering
+				return a.name.localeCompare(b.name);
+			});
+		},
+	},
+	created: function() {
+		const socketMessageListener = msg => {
+			const data = JSON.parse(msg.data);
+			if (data.code == "counts")
+				this.counts = data.counts;
+			else if (data.code == "increase")
+				this.counts[data.vid]++;
+			else if (data.code == "decrease")
+				this.counts[data.vid]--;
+		};
+		const socketCloseListener = () => {
+			this.$conn.addEventListener('message', socketMessageListener);
+			this.$conn.addEventListener('close', socketCloseListener);
+		};
+		this.$conn.onmessage = socketMessageListener;
+		this.$conn.onclose = socketCloseListener;
+		// TODO: AJAX call get corr games (all variants)
+		// si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
+		// ==> background orange si à moi de jouer par corr (sur main index)
+		// (helper: static fonction "GetNextCol()" dans base_rules.js)
+	},
 };
 </script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>