From e6dcb115eab52abefa1d54a65af546cf5a0153e9 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 21 Dec 2018 22:59:43 +0100
Subject: [PATCH] Saving state (unfinished styling on variant page)

---
 public/javascripts/components/game.js      | 64 ++++------------------
 public/javascripts/index.js                |  4 --
 public/javascripts/utils/misc.js           |  8 +++
 public/javascripts/variant.js              |  7 ++-
 public/sounds/{chessmove1.mp3 => move.mp3} |  0
 public/sounds/undo.mp3                     |  1 +
 public/stylesheets/index.sass              | 10 ----
 public/stylesheets/layout.sass             | 17 ++++++
 public/stylesheets/variant.sass            | 18 ------
 routes/all.js                              |  2 +
 views/index.pug                            | 50 +----------------
 views/modal-help.pug                       | 18 ++++++
 views/modal-lang.pug                       | 27 +++++++++
 views/variant.pug                          | 54 +++++++++---------
 14 files changed, 120 insertions(+), 160 deletions(-)
 rename public/sounds/{chessmove1.mp3 => move.mp3} (100%)
 create mode 100644 public/sounds/undo.mp3
 create mode 100644 views/modal-help.pug
 create mode 100644 views/modal-lang.pug

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 587587fb..80a8e7cb 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -15,7 +15,7 @@ Vue.component('my-game', {
 			myid: "", //our ID, always set
 			oppid: "", //opponent ID in case of HH game
 			gameId: "", //useful if opponent started other human games after we disconnected
-			myname: getCookie("username","anonymous"),
+			myname: localStorage["username"] || "anonymous",
 			oppName: "anonymous", //opponent name, revealed after a game (if provided)
 			chats: [], //chat messages after human game
 			oppConnected: false,
@@ -23,10 +23,10 @@ Vue.component('my-game', {
 			fenStart: "",
 			incheck: [],
 			pgnTxt: "",
-			hints: (getCookie("hints") === "1" ? true : false),
-			color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+			hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
+			color: localStorage["color"] || "lichess", //lichess, chesscom or chesstempo
 			// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
-			sound: parseInt(getCookie("sound", "2")),
+			sound: parseInt(localStorage["sound"] || "2"),
 			// Web worker to play computer moves without freezing interface:
 			compWorker: new Worker('/javascripts/playCompMove.js'),
 			timeStart: undefined, //time when computer starts thinking
@@ -522,48 +522,6 @@ Vue.component('my-game', {
 			];
 			elementArray = elementArray.concat(modalEog);
 		}
-		// NOTE: this modal could be in Pug view (no usage of Vue functions or variables)
-		const modalNewgame = [
-			h('input',
-				{
-					attrs: { "id": "modal-newgame", type: "checkbox" },
-					"class": { "modal": true },
-				}),
-			h('div',
-				{
-					attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" },
-				},
-				[
-					h('div',
-						{
-							"class": { "card": true, "smallpad": true },
-						},
-						[
-							h('label',
-								{
-									attrs: { "id": "close-newgame", "for": "modal-newgame" },
-									"class": { "modal-close": true },
-								}
-							),
-							h('h3',
-								{
-									attrs: { "id": "newGameTxt" },
-									"class": { "section": true },
-									domProps: { innerHTML: "New game" },
-								}
-							),
-							h('p',
-								{
-									"class": { "section": true },
-									domProps: { innerHTML: "Waiting for opponent..." },
-								}
-							)
-						]
-					)
-				]
-			)
-		];
-		elementArray = elementArray.concat(modalNewgame);
 		const modalFenEdit = [
 			h('input',
 				{
@@ -1134,7 +1092,7 @@ Vue.component('my-game', {
 	methods: {
 		setMyname: function(e) {
 			this.myname = e.target.value;
-			setCookie("username",this.myname);
+			localStorage["username"] = this.myname;
 		},
 		trySendChat: function(e) {
 			if (e.keyCode == 13) //'enter' key
@@ -1248,15 +1206,15 @@ Vue.component('my-game', {
 		},
 		toggleHints: function() {
 			this.hints = !this.hints;
-			setCookie("hints", this.hints ? "1" : "0");
+			localStorage["hints"] = (this.hints ? "1" : "0");
 		},
 		setColor: function(e) {
 			this.color = e.target.options[e.target.selectedIndex].value;
-			setCookie("color", this.color);
+			localStorage["color"] = this.color;
 		},
 		setSound: function(e) {
 			this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
-			setCookie("sound", this.sound);
+			localStorage["sound"] = this.sound;
 		},
 		clickGameSeek: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
@@ -1552,8 +1510,6 @@ Vue.component('my-game', {
 			// Not programmatic, or animation is over
 			if (this.mode == "human" && this.vr.turn == this.mycolor)
 				this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
-			if (this.sound == 2)
-				new Audio("/sounds/chessmove1.mp3").play().catch(err => {});
 			if (!["idle","chat"].includes(this.mode))
 			{
 				// Emergency check, if human game started "at the same time"
@@ -1562,6 +1518,8 @@ Vue.component('my-game', {
 					return;
 				this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
 				this.vr.play(move, "ingame");
+				if (this.sound == 2)
+					new Audio("/sounds/move.mp3").play().catch(err => {});
 				if (this.mode == "computer")
 				{
 					// Send the move to web worker (TODO: including his own moves?!)
@@ -1608,6 +1566,8 @@ Vue.component('my-game', {
 			if (!!lm)
 			{
 				this.vr.undo(lm);
+				if (this.sound == 2)
+					new Audio("/sounds/undo.mp3").play().catch(err => {});
 				const lmBefore = this.vr.lastMove;
 				if (!!lmBefore)
 				{
diff --git a/public/javascripts/index.js b/public/javascripts/index.js
index 13004f0e..e460f868 100644
--- a/public/javascripts/index.js
+++ b/public/javascripts/index.js
@@ -88,9 +88,5 @@ new Vue({
 			setCookie('visited', '1');
 			document.getElementById('modalWelcome').checked = false;
 		},
-		setLanguage: function(e) {
-			setCookie("lang", e.target.value);
-			location.reload(); //to include the right .pug file
-		},
 	},
 });
diff --git a/public/javascripts/utils/misc.js b/public/javascripts/utils/misc.js
index f2927c34..d72e3ce2 100644
--- a/public/javascripts/utils/misc.js
+++ b/public/javascripts/utils/misc.js
@@ -27,3 +27,11 @@ function getRandString()
 	return (Date.now().toString(36) + Math.random().toString(36).substr(2, 7))
 		.toUpperCase();
 }
+
+// Used both on index and variant page, to switch language
+function setLanguage(e)
+{
+	console.log(e);
+	setCookie("lang", e.target.value);
+	location.reload(); //to include the right .pug file
+}
diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js
index 03dbbdd3..f9fb0c62 100644
--- a/public/javascripts/variant.js
+++ b/public/javascripts/variant.js
@@ -5,12 +5,13 @@ new Vue({
 		problem: undefined, //current problem in view
 	},
 	methods: {
-		toggleDisplay: function(elt) {
-			this.display = elt; //show
-		},
 		showProblem: function(problemTxt) {
 			this.problem = JSON.parse(problemTxt);
 			this.display = "game";
 		},
+		setDisplay: function(elt) {
+			this.display = elt;
+			document.getElementById("drawer-control").checked = false;
+		},
 	},
 });
diff --git a/public/sounds/chessmove1.mp3 b/public/sounds/move.mp3
similarity index 100%
rename from public/sounds/chessmove1.mp3
rename to public/sounds/move.mp3
diff --git a/public/sounds/undo.mp3 b/public/sounds/undo.mp3
new file mode 100644
index 00000000..d7673144
--- /dev/null
+++ b/public/sounds/undo.mp3
@@ -0,0 +1 @@
+#$# git-fat 527d57bf4f0c83bbfdcfc18d2f9503c28b8e3cc5                 8305
diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
index 18db3c95..3b944915 100644
--- a/public/stylesheets/index.sass
+++ b/public/stylesheets/index.sass
@@ -1,10 +1,3 @@
-.container
-  padding: 0
-
-.row
-  div
-    padding: 0
-
 #header
   width: 100%
   background: linear-gradient(#e66465, #9198e5)
@@ -85,9 +78,6 @@
     @media screen and (max-width: 767px)
       margin-top: 0
 
-#b4welcome
-  max-width: 320px
-
 #readThis
   margin-top: 0
   color: var(--a-link-color)
diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass
index 52805f29..38b78b1e 100644
--- a/public/stylesheets/layout.sass
+++ b/public/stylesheets/layout.sass
@@ -8,6 +8,19 @@ body
   padding: 0
   min-width: 320px
 
+.container
+  padding: 0
+
+.row
+  div
+    padding: 0
+    .section-content
+      *
+        margin-left: 0
+        margin-right: 0
+      @media screen and (max-width: 767px)
+        padding: 0 5px
+
 a
   text-decoration: underline
 
@@ -35,3 +48,7 @@ a
 [type="checkbox"].modal+div .card
   max-width: 767px
   max-height: 100vh
+[type="checkbox"].modal+div .card.small-modal
+  max-width: 320px
+[type="checkbox"].modal+div .card.big-modal
+  max-width: 90vw
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 3631a6ed..efaf1e99 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -1,16 +1,3 @@
-.container#variantPage
-  padding: 0
-
-@media screen and (max-width: 767px)
-  .col-sm-12
-    padding: 0
-  h4
-    margin: 0 0 10px 0
-  p
-    margin-left: 0
-    margin-right: 0
-    padding: 0 3px
-
 #menuBar
   font-style: italic
   background: linear-gradient(#e66465, #9198e5)
@@ -27,8 +14,6 @@
 #menuContainer
   height: 48px
 
-//TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...)
-
 .warn
   padding: 3px
   color: red
@@ -224,9 +209,6 @@ figure.showPieces > figcaption
 .section-title > h4
   padding: 5px
 
-.section-content
-  padding: 0 5px
-
 ol, ul:not(.browser-default)
   padding-left: 20px
 
diff --git a/routes/all.js b/routes/all.js
index b2318135..691662f1 100644
--- a/routes/all.js
+++ b/routes/all.js
@@ -66,6 +66,8 @@ router.get("/:vname([a-zA-Z0-9]+)", (req,res,next) => {
 						title: vname + ' Variant',
 						variant: vname,
 						problemArray: problems,
+						lang: selectLanguage(req, res),
+						languages: supportedLang,
 					});
 				}
 			);
diff --git a/views/index.pug b/views/index.pug
index 5059f515..c8c90c52 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -12,7 +12,6 @@ block content
 					.info-container
 						p vchess.club
 					img(src="/images/index/wildebeest.svg")
-				// TODO: flags, translations
 				#flagMenu(onClick="document.getElementById('modalLang').checked=true")
 					img(src="/images/flags/" + lang + ".svg")
 				#helpMenu(onClick="document.getElementById('modalHelp').checked=true")
@@ -22,54 +21,11 @@ block content
 			my-variant-summary(v-for="(v,idx) in sortedCounts"
 				v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name")
 		// Modals:
-		input#modalHelp.modal(type="checkbox")
-		div(role="dialog")
-			#help.card
-				label.modal-close(for="modalHelp")
-				.section
-					p.emphasis.bigfont First: watch #[a(href="/demo.webm") demo video] !
-					p Then click on a variant... Reminder:
-					ul
-						li All games start with a random assymetric position.
-						li Games are untimed, and played anonymously.
-						li No chat while playing, to focus on the moves.
-				.section
-					h3.red Bug report
-					p
-						| Please send an email to 
-						a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report")
-							| contact@vchess.club 
-						| .
-		input#modalLang.modal(type="checkbox")
-		div(role="dialog")
-			#language.card
-				label.modal-close(for="modalLang")
-				.section
-					fieldset
-						-
-							var langName = {
-								"fr": "French",
-								"en": "English",
-							}
-						label(for="langSelect") Preferred language?
-						select#langSelect(@change="setLanguage")
-							each langCode in languages
-								option(value=langCode selected=(lang==langCode))
-									=langName[langCode]
-				.section
-					h3.blue Contribute
-					p
-						| Browse the 
-						a(href="https://github.com/yagu0/vchess/tree/master/views")
-							| github repository
-						| : welcome/en.pug and all files rules/*/en.pug
-						| should be translated. When it's done, send me the files: 
-						a(href="mailto:contact@vchess.club?subject=[vchess.club] translation")
-							| contact@vchess.club
-						| . Thanks!
+		include modal-lang.pug
+		include modal-help.pug
 		input#modalB4welcome.modal(type="checkbox")
 		div(role="dialog")
-			#b4welcome.card.text-center
+			#b4welcome.card.text-center.small-modal
 				h3.blue First visit?
 				p#readThis(@click="showWelcomeMsg") >>> Please read this <<<
 		case lang
diff --git a/views/modal-help.pug b/views/modal-help.pug
new file mode 100644
index 00000000..6f1d40aa
--- /dev/null
+++ b/views/modal-help.pug
@@ -0,0 +1,18 @@
+input#modalHelp.modal(type="checkbox")
+div(role="dialog")
+	#help.card
+		label.modal-close(for="modalHelp")
+		.section
+			p.emphasis.bigfont First: watch #[a(href="/demo.webm") demo video] !
+			p Then click on a variant... Reminder:
+			ul
+				li All games start with a random assymetric position.
+				li Games are untimed, and played anonymously.
+				li No chat while playing, to focus on the moves.
+		.section
+			h3.red Bug report
+			p
+				| Please send an email to 
+				a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report")
+					| contact@vchess.club
+				| .
diff --git a/views/modal-lang.pug b/views/modal-lang.pug
new file mode 100644
index 00000000..f15d0634
--- /dev/null
+++ b/views/modal-lang.pug
@@ -0,0 +1,27 @@
+input#modalLang.modal(type="checkbox")
+div(role="dialog")
+	#language.card
+		label.modal-close(for="modalLang")
+		.section
+			fieldset
+				-
+					var langName = {
+						"fr": "French",
+						"en": "English",
+					}
+				label(for="langSelect") Preferred language?
+				select#langSelect(onChange="setLanguage(event)")
+					each langCode in languages
+						option(value=langCode selected=(lang==langCode))
+							=langName[langCode]
+		.section
+			h3.blue Contribute
+			p
+				| Browse the 
+				a(href="https://github.com/yagu0/vchess/tree/master/views")
+					| github repository
+				| : welcome/en.pug and all files rules/*/en.pug
+				| should be translated. When it's done, send me the files: 
+				a(href="mailto:contact@vchess.club?subject=[vchess.club] translation")
+					| contact@vchess.club
+				| . Thanks!
diff --git a/views/variant.pug b/views/variant.pug
index 6c2e04b5..89d814b2 100644
--- a/views/variant.pug
+++ b/views/variant.pug
@@ -6,39 +6,41 @@ block css
 
 block content
 	.container#variantPage
-		.row //TODO: this thing + game/problems/rules iin variant page. Here just h1
+		.row
 			#menuContainer.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
 				label.drawer-toggle(for="drawer-control")
 				input#drawer-control.drawer(type="checkbox")
 				#menuBar
 					label.drawer-close(for="drawer-control")
 					a(href="/")
-						img(src="/images/index/unicorn.svg")
-						span vchess.club
-						img(src="/images/index/wildebeest.svg")
-					a(href="#") Home222
-		.row
-			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-				label.drawer-toggle(for="drawer-control")
-				input#drawer-control.drawer(type="checkbox")
-				div
-					label.drawer-close(for="drawer-control")
-					a(href="#") Home
-					a(href="#") Home222
+						i.material-icons home
+					a(href="#rules" @click="setDisplay('rules')") Rules
+					a(href="#play" @click="setDisplay('game')") Play!
+					a(href="#problems" @click="setDisplay('problems')") Problems
+					#flagMenu(onClick="document.getElementById('modalLang').checked=true")
+						img(src="/images/flags/" + lang + ".svg")
+					#helpMenu(onClick="document.getElementById('modalHelp').checked=true")
+						.info-container
+							p Help
 		.row
-			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-				h4.variantpage-title.text-center(v-on:click="toggleDisplay('rules')")
-					| #{variant} Rules
-				my-rules(v-show="display=='rules'")
-			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-				h4.variantpage-title.text-center(v-on:click="toggleDisplay('game')")
-					| #{variant} Game
-				my-game(v-show="display=='game'" v-bind:problem="problem")
-			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-				h4.variantpage-title.text-center(v-on:click="toggleDisplay('problems')")
-					| #{variant} Problems
-				my-problems(v-show="display=='problems'"
-					v-on:show-problem="showProblem($event)")
+			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2(
+					v-show="display=='rules'")
+				my-rules
+			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2(
+					v-show="display=='game'")
+				my-game(v-bind:problem="problem")
+			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2(
+					v-show="display=='problems'")
+				my-problems(v-on:show-problem="showProblem($event)")
+		// (Some) Modals:
+		include modal-help.pug
+		include modal-lang.pug
+		input#modal-newgame.modal(type="checkbox")
+		div(role="dialog" aria-labelledby="newGameTxt")
+			.card.smallpad.small-modal
+				label#close-newgame.modal-close(for="modal-newgame")
+				h3#newGameTxt New game
+				p Waiting for opponent...
 
 block javascripts
 	script(src="/javascripts/utils/misc.js")
-- 
2.44.0