From 78c135de1c09b3bd49afdfd3a20fed42d25f7760 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Rapha=C3=ABl=20Jakse?= <raphael.trivabble@jakse.fr>
Date: Sat, 29 Aug 2020 12:26:05 +0200
Subject: [PATCH] work on settings and spell checker UI/UX

---
 l10n/po/fr/trivabble.po    |  12 ++---
 l10n/pot/trivabble.pot     |   8 +--
 public/config.js.sample    |   4 +-
 public/index.html          |  17 ++++---
 public/trivabble.css       |  30 ++++++++++-
 public/trivabble.js        | 100 +++++++++++++++++++------------------
 server/trivabble-server.js |   3 +-
 7 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po
index 8e4292f..752e8bb 100644
--- a/l10n/po/fr/trivabble.po
+++ b/l10n/po/fr/trivabble.po
@@ -187,11 +187,11 @@ msgstr "Impossible de charger le dictionnaire"
 msgid  "Enable spell checker"
 msgstr "Activer le vérificateur orthographique"
 
-msgid  "Spell checking requires Trivabble to download a dictionary. This dictionary is based on Aspell. Do you confirm?"
-msgstr "La vérification orthographique nécessite que Trivabble télécharge un dictionnaire. Ce dictionnaire est construit grâce à Aspell. Confirmez-vous ?"
+msgid  "Spell checking requires Trivabble to download a dictionary. Do you confirm?"
+msgstr "La vérification orthographique nécessite que Trivabble télécharge un dictionnaire. Confirmez-vous ?"
 
-msgid  "Configuration"
-msgstr "Options de configuration"
+msgid  "Spell checking is based on:"
+msgstr "La vérification orthographique est basée sur :"
 
-msgid  "Configuration window"
-msgstr "Fenêtre de configuration"
+msgid  "Settings"
+msgstr "Paramètres"
\ No newline at end of file
diff --git a/l10n/pot/trivabble.pot b/l10n/pot/trivabble.pot
index 7d95428..e830002 100644
--- a/l10n/pot/trivabble.pot
+++ b/l10n/pot/trivabble.pot
@@ -193,11 +193,11 @@ msgstr ""
 msgid  "Enable spell checker"
 msgstr ""
 
-msgid  "Spell checking requires Trivabble to download a dictionary. This dictionary is based on Aspell. Do you confirm?"
+msgid  "Spell checking requires Trivabble to download a dictionary. Do you confirm?"
 msgstr ""
 
-msgid  "Configuration"
+msgid  "Spell checking is based on:"
 msgstr ""
 
-msgid  "Configuration window"
-msgstr ""
+msgid  "Settings"
+msgstr ""
\ No newline at end of file
diff --git a/public/config.js.sample b/public/config.js.sample
index 2a69af5..bdd7845 100644
--- a/public/config.js.sample
+++ b/public/config.js.sample
@@ -17,8 +17,8 @@ window.TrivabbleConf = {
     // to tweak only if your webserver is shared with other conflicting resources at / ( ex: yunohost integration )
     APP_PATH: "",
 
-    // Whether Check spelling is enabled (dictionaries must be downloaded on the server before enabling this option
-    ENABLE_CHECK_SPELLING: false,
+    // Whether the spell checker is enabled (dictionaries must be downloaded on the server before enabling this option)
+    ENABLE_SPELL_CHECKER: false,
 
     // I don't like trailing commas, here is a nice message for you reading this file :-)
     HAVE_FUN: true
diff --git a/public/index.html b/public/index.html
index be8dd23..a809646 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,20 +44,20 @@
             </div>
         </div>
 
-        <div class="modal" id="modal-config-dialog">
+        <div class="modal" id="modal-settings-dialog">
             <div class="modal-content">
                 <h2>
-                    <span data-l10n="text-content">Configuration window</span>
-                    <span class="modal-button" id="modal-close-btn">&#215;</span>
-		</h2>
+                    <span data-l10n="text-content">Settings</span>
+                    <span class="modal-button" id="btn-settings-close">&#215;</span>
+        		</h2>
                 <div id="prefs-sound">
                     <p><label><input type="checkbox" id="tiles-sound" checked="checked" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
                     <p><label><input type="checkbox" id="msg-sound" checked="checked" /><span data-l10n="text-content">Sound of messages</span></label></p>
-                    <p><label><input type="checkbox" id="enable-spell-checker" style="display:none" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
+                    <p id="enable-spell-checker-outer" style="display:none"><label><input type="checkbox" id="enable-spell-checker" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
                 </div>
             </div>
         </div>
-        
+
 	<div id="content">
             <table id="board">
                 <tr><td class="corner"></td></tr>
@@ -68,6 +68,7 @@
         </div>
 
         <div id="panel">
+            <button id="btn-settings" data-l10n="text-content">Settings</button>
             <div id="bag"></div>
             <p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span><br /><span id="help-bag" data-l10n="text-content">Click on it to take one.</span><a href="#" id="help-clear" style="display:none"></a></p>
             <table id="participants">
@@ -78,8 +79,8 @@
             <p id="help-turn" data-l10n="text-content">Who's turn? Click on the Turn button!</p>
             <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
             <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
-            <button id="check-spelling" class="minibutton" data-l10n="text-content" style="display: none">Check spelling for new words</button>
-            <button id="modal-config-btn" class="text-content" data-l10n="text-content">Configuration</button>
+            <button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
+            <p id="info-spell-checking" style="display:none;"><span data-l0n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
         </div>
     </body>
 </html>
diff --git a/public/trivabble.css b/public/trivabble.css
index da4138a..50ab0ee 100644
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -356,7 +356,8 @@ td.blink {
     width:165px;
     height:160px;
     background:url(bag.svg) no-repeat;
-    background-size:100% 100%
+    background-size:100% 100%;
+    flex:1;
 }
 
 #bag:hover {
@@ -511,9 +512,11 @@ td.blink {
     border-radius: 0.25rem;
     background-color: lightgray;
 }
-.modal-button:hover {
+
+.modal-button:hover, #btn-settings:hover {
     background-color: darkgray;
 }
+
 .show-modal {
     opacity: 1;
     visibility: visible;
@@ -524,3 +527,26 @@ td.blink {
 .alert {
     z-index: 2;
 }
+
+#btn-settings {
+    background:lightgray;
+    color:black;
+    font-size:small;
+    border-radius:3px;
+    border:none;
+    margin:0 0 0 auto;
+    min-height: 2em;
+}
+
+#btn-settings:before {
+    content: "⚙️ "
+}
+
+#info-spell-checking {
+    font-size:small;
+    color:gray;
+}
+
+#info-spell-checking a {
+    color:black;
+}
\ No newline at end of file
diff --git a/public/trivabble.js b/public/trivabble.js
index bb50e36..aa52518 100644
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -60,7 +60,7 @@
     let scoreOf;
     let bag;
     let boardLangSelect;
-    let dictionary;
+    const downloadedDictionaries = {};
 
     const playerLetters = [];
     let currentPlayer = "";
@@ -151,60 +151,59 @@
         }
     }
 
-    function setSpellCheckerState(enabled) {
-        if (enabled !== null) {
-            localStorage.spellCheckerEnabled = enabled.toString();
-        }
+    function getDictionary(code, callback, force) {
+        if (downloadedDictionaries[code]) {
+            if (downloadedDictionaries[code].length) {
+                if (callback) {
+                    callback(downloadedDictionaries[code]);
+                    return;
+                }
+            }
 
-        if (localStorage.spellCheckerEnabled === "false") {
-            document.getElementById("enable-spell-checker").checked = false;
-            document.getElementById("check-spelling").style.display = "none";
-        } else {
-            document.getElementById("enable-spell-checker").checked = true;
-            document.getElementById("check-spelling").style.display = "";
+            // FIXME we silently never call the callback here
+            return;
         }
-    }
 
-    function downloadDictionary(code) {
-        if (localStorage.spellCheckerEnabled === code) {
+        if (!force && localStorage.spellCheckerEnabled !== "true") {
+            myConfirm(
+                _("Spell checking requires Trivabble to download a dictionary. Do you confirm?"),
+                function () {
+                    localStorage.spellCheckerEnabled = "true";
+                    getDictionary(code, callback, true);
+                }
+            );
             return;
         }
 
+        // Avoid redownloading the dictionary if a download is on its way
+        downloadedDictionaries[code] = [];
+
         const file = new XMLHttpRequest();
-        file.overrideMimeType("application/dictionary");
         file.open("GET", "dict/" + code + ".dict", true);
         file.onreadystatechange = function () {
             if (file.readyState === 4) {
                 if (file.status === 200) {
                     try {
-                        dictionary = file.responseText.split("\n");
-                        setSpellCheckerState(code);
+                        const dictionary = file.responseText.split("\n");
+                        downloadedDictionaries[code] = dictionary;
+                        callback(dictionary);
+                        return;
                     } catch (e) {
+                        delete downloadedDictionaries[code];
                         myAlert(_("Incorrect dictionary file."));
-                        setSpellCheckerState(false);
                     }
                 } else {
+                    delete downloadedDictionaries[code];
                     myAlert(_("Can't load dictionary file."));
-                    setSpellCheckerState(false);
                 }
             }
         };
-        file.send(null);
+        file.send();
     }
 
-    function enableSpellChecker() {
-        if (document.getElementById("enable-spell-checker").checked) {
-            myConfirm(
-                _("Spell checking requires Trivabble to download a dictionary. This dictionary is based on Aspell. Do you confirm?"),
-                function () {
-                    downloadDictionary(localStorage.trivabbleBoardLang);
-                },
-                function () {
-                    setSpellCheckerState(false);
-                });
-        } else {
-            setSpellCheckerState(false);
-        }
+    function spellCheckerSettingChecked() {
+        localStorage.spellCheckerEnabled = document.getElementById("enable-spell-checker").checked.toString();
+        initSpellChecker();
     }
 
     function removeElem(elem) {
@@ -612,9 +611,6 @@
             case "boardLang":
                 localStorage.trivabbleBoardLang = value;
                 document.getElementById("board-lang").value = value;
-                if (localStorage.spellCheckerEnabled !== "false") {
-                    downloadDictionary(value);
-                }
                 break;
         }
     }
@@ -1634,11 +1630,15 @@
         }
     }
 
-    function checkSpelling() {
+    function checkSpellingClicked() {
         if (localStorage.spellCheckerEnabled === "false") {
             return;
         }
 
+        getDictionary(localStorage.trivabbleBoardLang, checkSpelling);
+    }
+
+    function checkSpelling(dictionary) {
         const newWords = searchNewWords();
         if (newWords.length === 0) {
             myAlert(_("No new word found"));
@@ -1763,18 +1763,20 @@
     }
 
     function initSpellChecker() {
-        if (!localStorage.spellCheckerEnabled) {
-            localStorage.spellCheckerEnabled = Conf.ENABLE_SPELL_CHECKER.toString();
+        if (Conf.ENABLE_SPELL_CHECKER) {
+            document.getElementById("enable-spell-checker-outer").style.display = "";
         }
 
-        document.getElementById("enable-spell-checker").onclick = enableSpellChecker;
+        document.getElementById("enable-spell-checker").onclick = spellCheckerSettingChecked;
 
-        if (localStorage.spellCheckerEnabled === "false") {
-            setSpellCheckerState(false);
+        if (!Conf.ENABLE_SPELL_CHECKER || localStorage.spellCheckerEnabled === "false") {
+            document.getElementById("check-spelling").style.display = "none";
+            document.getElementById("enable-spell-checker").checked = false;
+            document.getElementById("info-spell-checking").style.display = "none";
         } else {
-            const spellChecker = localStorage.spellCheckerEnabled;
-            localStorage.spellCheckerEnabled = "false";
-            downloadDictionary(spellChecker);
+            document.getElementById("check-spelling").style.display = "";
+            document.getElementById("info-spell-checking").style.display = "";
+            document.getElementById("enable-spell-checker").checked = true;
         }
     }
 
@@ -1843,7 +1845,7 @@
         location.reload();
     }
 
-    function showConfig() {
+    function showSettings() {
 	const modal = document.querySelector(".modal");
 	modal.classList.toggle("show-modal");
     }
@@ -1870,11 +1872,11 @@
         document.getElementById("join-game").onclick   = joinGame;
         document.getElementById("clear-rack").onclick  = clearRack;
         document.getElementById("show-rack").onclick   = showRack;
-        document.getElementById("check-spelling").onclick = checkSpelling;
+        document.getElementById("check-spelling").onclick = checkSpellingClicked;
         helpClear.onclick  = clearGame;
 
-	document.getElementById("modal-config-btn").onclick = showConfig;
-	document.getElementById("modal-close-btn").onclick = showConfig;
+        document.getElementById("btn-settings").onclick = showSettings;
+        document.getElementById("btn-settings-close").onclick = showSettings;
     }
 
     function initGame() {
diff --git a/server/trivabble-server.js b/server/trivabble-server.js
index 07bc614..7421b25 100644
--- a/server/trivabble-server.js
+++ b/server/trivabble-server.js
@@ -980,7 +980,8 @@ function handleRequest(request, response) {
                             ".ogg": "audio/ogg",
                             ".js": "application/javascript; charset=utf-8",
                             ".css": "text/css; charset=utf-8",
-                            ".svg": "image/svg+xml"
+                            ".svg": "image/svg+xml",
+                            ".dict": "text/plain"
                         };
 
                         for (const i in mimes) {
-- 
2.30.2