From a897b421785af1c4e04f50995dca0f99da065ec6 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 11 Dec 2018 11:59:09 +0100
Subject: [PATCH] Saving state (draft, not working)

---
 TODO                                  |  2 ++
 public/javascripts/components/game.js | 30 +++++++++++++++++++++------
 public/javascripts/utils/misc.js      |  6 +++---
 public/stylesheets/variant.sass       | 16 ++++++++++----
 4 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/TODO b/TODO
index 9f8c3541..94f9cfa9 100644
--- a/TODO
+++ b/TODO
@@ -1,3 +1,5 @@
 Idée pour bouton settings de même taille que turn indicators :
 dessiner un bouton de taille selon écran, invisible mais toujours là
 --> le prendre comme référence (pour turn indicator)
+==> non, mais 2 tailles a priori (small sur smallscreens: à déterminer)
+modals --> in pug view
diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 68142084..021fa978 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -18,8 +18,9 @@ Vue.component('my-game', {
 			incheck: [],
 			pgnTxt: "",
 			hints: (getCookie("hints") === "1" ? true : false),
-			//color: TODO (lichess, chess.com, chesstempo)
-			//sound: TODO (0,1, 2)
+			color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+			// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
+			sound: getCookie("sound", "2"),
 		};
 	},
 	render(h) {
@@ -91,7 +92,7 @@ Vue.component('my-game', {
 			const settingsBtnElt = document.getElementById("settingsBtn");
 			const indicWidth = !!settingsBtnElt //-2 for border:
 				? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
-				: 30;
+				: 37; //TODO: always 37?
 			if (this.mode == "human")
 			{
 				let connectedIndic = h(
@@ -140,7 +141,6 @@ Vue.component('my-game', {
 						"topindicator": true,
 						"indic-right": true,
 						"settings-btn": true,
-						"small": smallScreen,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "settings")]
@@ -244,6 +244,7 @@ Vue.component('my-game', {
 										['board'+sizeY]: true,
 										'light-square': (i+j)%2==0,
 										'dark-square': (i+j)%2==1,
+										[this.color]: true,
 										'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
 										'incheck': showLight && incheckSq[ci][cj],
 									},
@@ -434,6 +435,7 @@ Vue.component('my-game', {
 			];
 			elementArray = elementArray.concat(modalEog);
 		}
+		// TODO: next 3 modals in (pug) view directly?!
 		const modalNewgame = [
 			h('input',
 				{
@@ -565,11 +567,27 @@ Vue.component('my-game', {
 							h('h3',
 								{
 									"class": { "section": true },
-									domProps: { innerHTML: "User settings" },
+									domProps: { innerHTML: "Preferences" },
 								}
 							),
 							// https://minicss.org/docs#forms-and-input
-							h('p', { domProps: { innerHTML: "TODO: hints" } }),
+							h('input',
+								{
+									attrs: {
+										"id": "setHints",
+										type: "checkbox",
+										checked: this.hints,
+									},
+								}
+							),
+							h('label',
+								{
+									attrs: {
+										for: "setHints",
+									},
+									domProps: { innerHTML: "Show hints?" },
+								},
+							),
 							h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
 							h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
 						]
diff --git a/public/javascripts/utils/misc.js b/public/javascripts/utils/misc.js
index 0b68ac45..f2927c34 100644
--- a/public/javascripts/utils/misc.js
+++ b/public/javascripts/utils/misc.js
@@ -1,5 +1,5 @@
 // Source: https://www.quirksmode.org/js/cookies.html
-function setCookie(name,value)
+function setCookie(name, value)
 {
 	var date = new Date();
 	date.setTime(date.getTime()+(183*24*60*60*1000)); //6 months
@@ -7,7 +7,7 @@ function setCookie(name,value)
 	document.cookie = name+"="+value+expires+"; path=/";
 }
 
-function getCookie(name) {
+function getCookie(name, defaut) {
 	var nameEQ = name + "=";
 	var ca = document.cookie.split(';');
 	for (var i=0;i < ca.length;i++)
@@ -18,7 +18,7 @@ function getCookie(name) {
 		if (c.indexOf(nameEQ) == 0)
 			return c.substring(nameEQ.length,c.length);
 	}
-	return null;
+	return defaut; //cookie not found
 }
 
 // Random (enough) string for socket and game IDs
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 1f3b977c..53412174 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -157,10 +157,18 @@ figure.diagram-container > figcaption
   clear: both
   padding-top: 5px
 
-.light-square
-  background-color: #f0d9b5
-.dark-square
-  background-color: #b58863
+.light-square.lichess
+	background-color: #f0d9b5;
+.dark-square.lichess
+	background-color: #b58863;
+.light-square.chesscom
+	background-color: #e5e5ca;
+.dark-square.chesscom
+	background-color: #6f8f57;
+.light-square.chesstempo
+	background-color: #fdfdfd;
+.dark-square.chesstempo
+	background-color: #88a0a8;
 
 .highlight
   background-color: #00cc66
-- 
2.44.0