From ee37e2af8fc3ce2273eddfbe66822ce8b6b011d6 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 25 Jan 2019 22:00:34 +0100
Subject: [PATCH] Saving state (broken as usual)

---
 client/client_OLD/javascripts/index.js |  70 -----------
 client/client_OLD/views/app.pug        |  55 ---------
 client/src/App.vue                     |  55 +++++++--
 client/src/components/HelloWorld.vue   |  63 ----------
 client/src/components/Home.vue         | 163 +++++++++++++++++++++++++
 5 files changed, 206 insertions(+), 200 deletions(-)
 delete mode 100644 client/client_OLD/javascripts/index.js
 delete mode 100644 client/src/components/HelloWorld.vue
 create mode 100644 client/src/components/Home.vue

diff --git a/client/client_OLD/javascripts/index.js b/client/client_OLD/javascripts/index.js
deleted file mode 100644
index 0e2a2631..00000000
--- a/client/client_OLD/javascripts/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// Javascript for index page: mostly counters updating
-new Vue({
-	el: "#VueElement",
-	data: {
-		counts: {},
-		curPrefix: "",
-		conn: null,
-		display: "variants",
-	},
-	computed: {
-		sortedCounts: function () {
-			const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
-			const variantsCounts = variantArray
-			.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() {
-		this.setDisplay();
-		window.onhashchange = this.setDisplay;
-		
-		const url = socketUrl;
-		const sid = getRandString();
-		this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
-		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 = new WebSocket(url + "/?sid=" + sid + "&page=index");
-			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)
-
-	},
-	methods: {
-		setDisplay: function() {
-			if (!location.hash)
-				location.hash = "#variants"; //default
-			this.display = location.hash.substr(1);
-		},
-
-	},
-});
diff --git a/client/client_OLD/views/app.pug b/client/client_OLD/views/app.pug
index c2469602..7137b191 100644
--- a/client/client_OLD/views/app.pug
+++ b/client/client_OLD/views/app.pug
@@ -3,47 +3,6 @@ html
 		main#VueElement
 			my-upsert-user
 			.container
-				.row(v-show="display=='index'")
-				.row
-					.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-						label.drawer-toggle(for="drawerControl")
-						input#drawerControl.drawer(type="checkbox")
-						#menuBar
-							label.drawer-close(for="drawerControl")
-							a.icon-link(href="/")
-								i(data-feather="home")
-							a(href="#room")
-								=translations["Hall"]
-							a(href="#tabGames")
-								=translations["My games"]
-							a(href="#rules")
-								=translations["Rules"]
-							a(href="#problems")
-								=translations["Problems"]
-							#userMenu.clickable.right-menu(onClick="doClick('modalUser')")
-								.info-container
-									if !user.email
-										p
-											span Login
-											span.icon-user
-									else
-										p
-											span Update
-											span.icon-user
-							#flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
-							img(src="/images/flags/" + lang + ".svg")
-						#settings.clickable(v-show="display!='index'" onClick="doClick('modalSettings')")
-							i(data-feather="settings")
-						#mainTitle.clickable(onClick="doClick('modalWelcome')")
-							.info-container
-								p Introduction
-				.row
-					.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-				.row(v-show="display=='variants'")
-					.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")
-					my-variant-summary(v-for="(v,idx) in sortedCounts"
 						v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name")
 				.row(v-show="display=='correspondance'")
 					my-correspondance
@@ -56,25 +15,11 @@ html
 						:allow-chat="allowChat" :allow-movelist="allowMovelist"
 						:mode="mode" :settings="settings" @game-over="archiveGame")
 
-		footer.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
-			div
-				a(href="https://github.com/yagu0/vchess") Source code
-				p.clickable(onClick="document.getElementById('modalContact').checked=true")
-					=translations["Contact form"]
-
-		script.
-			const translations = !{JSON.stringify(translations)};
-			const user = !{JSON.stringify(user)};
-			const variantArray = !{JSON.stringify(variantArray)};
 		// TODO: get rid of underscore
 		// (used essentially for _.random(), _.sample() and _.range())
 		script(src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js")
 		// TODO: add only the necessary icons to mini-css custom build
 		script(src="//unpkg.com/feather-icons")
-		if development
-			script(src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js")
-		else
-			script(src="https://cdn.jsdelivr.net/npm/vue")
 		script(src="/javascripts/utils/printDiagram.js")
 		script(src="/javascripts/utils/datetime.js")
 		script(src="/javascripts/utils/squareId.js")
diff --git a/client/src/App.vue b/client/src/App.vue
index f68877e1..89b645b3 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -10,20 +10,51 @@
       // Header (on index only)
       header
         .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-          header
-            img(src="./assets/images/index/unicorn.svg")
-            .info-container
-              p vchess.club {{ $lang }}
-            img(src="./assets/images/index/wildebeest.svg")
+					img(src="./assets/images/index/unicorn.svg")
+					.info-container
+						p vchess.club {{ $lang }}
+					img(src="./assets/images/index/wildebeest.svg")
     .row
-      // Menu (top of page): TODO how to organize it ?
-      nav
-        router-link(to="/") Home
-        | &nbsp;|&nbsp;
-        router-link(to="/about") About
-        | &nbsp;|&nbsp;
-        router-link(to="/test") Test
+      // Menu (top of page):
+      // shared: Home + flags, userMenu
+			// variant: hall, problems, rules, my games + settings
+			nav
+				label.drawer-toggle(for="drawerControl")
+				input#drawerControl.drawer(type="checkbox")
+				#menuBar
+					label.drawer-close(for="drawerControl")
+					router-link(v-if="$route.path != '/'" to="/")
+						| Home
+					router-link(:href="getLink('/hall')")
+						| getLink function : suffix ==> /variant + suffix
+						=translations["Hall"]
+					router-link(href="#tabGames")
+						=translations["My games"]
+					router-link(href="#rules")
+						=translations["Rules"]
+					router-link(href="#problems")
+						=translations["Problems"]
+					#userMenu.clickable.right-menu(onClick="doClick('modalUser')")
+						.info-container
+							if !user.email
+								p
+									span Login
+									span.icon-user
+							else
+								p
+									span Update
+									span.icon-user
+					#flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
+					img(src="/images/flags/" + lang + ".svg")
+				#settings.clickable(v-show="display!='index'" onClick="doClick('modalSettings')")
+					i(data-feather="settings")
       router-view
+		.row
+			footer
+				.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
+					a(href="https://github.com/yagu0/vchess") Source code
+					p.clickable(onClick="doClick('modalContact')")
+						= translations["Contact form"]
 </template>
 
 <script>
diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue
deleted file mode 100644
index f491a1a1..00000000
--- a/client/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  },
-//	created: function() {
-//		alert("test");
-//	},
-	methods: {
-		
-	},
-};
-</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>
diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue
new file mode 100644
index 00000000..8213a86a
--- /dev/null
+++ b/client/src/components/Home.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="hello">
+
+
+
+
+//Index: rename into Home
+				.row(v-show="display=='variants'")
+					.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")
+					my-variant-summary(v-for="(v,idx) in sortedCounts"
+
+
+
+
+
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String
+  },
+//	created: function() {
+//		alert("test");
+//	},
+	methods: {
+		
+	},
+};
+</script>
+
+
+
+
+
+
+
+
+// Javascript for index page: mostly counters updating
+new Vue({
+	el: "#VueElement",
+	data: {
+		counts: {},
+		curPrefix: "",
+		conn: null,
+		display: "variants",
+	},
+	computed: {
+		sortedCounts: function () {
+			const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
+			const variantsCounts = variantArray
+			.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() {
+		this.setDisplay();
+		window.onhashchange = this.setDisplay;
+		
+		const url = socketUrl;
+		const sid = getRandString();
+		this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
+		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 = new WebSocket(url + "/?sid=" + sid + "&page=index");
+			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)
+
+	},
+	methods: {
+		setDisplay: function() {
+			if (!location.hash)
+				location.hash = "#variants"; //default
+			this.display = location.hash.substr(1);
+		},
+
+	},
+});
+
+
+
+
+
+
+
+
+<!-- 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>
-- 
2.44.0