X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHome.vue;fp=client%2Fsrc%2Fviews%2FHome.vue;h=dfd3939103a9d22d67e2dfcd09364864c5709f87;hb=ccd4a2b74aecdd6e52960a9ed42acea3e40c9271;hp=1eaa6b17daf5273867706cf539eaaa9fe3f135cf;hpb=8d61fc4ab7373b4a576f3f9108cdf7768ae27096;p=vchess.git

diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 1eaa6b17..dfd39391 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,48 +1,87 @@
-<template>
-  <div class="home">
-    <Home 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,
-  }
-};
-</script>
-
-// Show a variant summary on index
-Vue.component('my-variant-summary', {
-	props: ['vobj','index'],
-	template: `
-		<div class="variant col-sm-12 col-md-5 col-lg-4" :id="vobj.name"
-			:class="{'col-md-offset-1': index%2==0, 'col-lg-offset-2': index%2==0}">
-			<a :href="url">
-				<h4 class="boxtitle text-center">
-					{{ vobj.name }}
-					<span class="count-players">
-						/ {{ vobj.count }}
-					</span>
-				</h4>
-				<p class="description text-center">
-					{{ translate(vobj.desc) }}
-				</p>
-			</a>
-		</div>
-	`,
+  data: function() {
+    return {
+      counts: {},
+		  curPrefix: "",
+    };
+	},
 	computed: {
-		url: function() {
-			return "/" + this.vobj.name;
+		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);
+			});
 		},
 	},
-	methods: {
-		translate: function(text) {
-			return translations[text];
-		},
+	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>