#118 clean up field names, fix user settings dialog

cdot · Jan 31, 2024 · 0af6661 · 0af6661
1 parent 17d80f7
commit 0af6661
Show file tree

Hide file tree

Showing 17 changed files with 57 additions and 71 deletions.
diff --git a/bin/server.js b/bin/server.js
@@ -40,7 +40,7 @@ const DEFAULT_CONFIG = {
   // Defaults passed to the UI without processing by the server
   user_defaults: {
     notification: false, // notification requires https
-    theme: "default",
+    layout: "default",
     jqTheme: "pepper-grinder",
     warnings: true,
     cheers: true,

diff --git a/html/UserSettingsDialog.html b/html/UserSettingsDialog.html
@@ -7,8 +7,8 @@
 </div>
 
 <div class="dialog-row">
-  <label for="xanadoCSS" data-i18n-tooltip="tt-look-feel" data-i18n="label-look-feel"></label>
-  <select id="xanadoCSS" name="xanadoCSS">
+  <label for="layout" data-i18n-tooltip="tt-look-feel" data-i18n="label-look-feel"></label>
+  <select id="layout" name="layout">
   </select>
 </div>
 

diff --git a/i18n/en.json b/i18n/en.json
@@ -232,7 +232,7 @@
   "tt-invite": "Send emails to invite people to join the game",
   "tt-invite-mess": "Add a message that will be included in the invitation email",
   "tt-join": "Join the game and open it in a new window",
-  "tt-jqTheme": "Choose a display theme",
+  "tt-jqTheme": "Choose a display theme for dialogs",
   "tt-lang-code": "Choose a supported language code (e.g. 'en' is English)",
   "tt-leave": "If you leave the game your score will still count towards the leader board.",
   "tt-library": "Open games library",

diff --git a/src/browser/GameSetupDialog.js b/src/browser/GameSetupDialog.js
@@ -113,20 +113,13 @@ class GameSetupDialog extends Dialog {
         .then(editions => {
           const $eds = this.$dlg.find("[name=edition]");
           editions.forEach(e => $eds.append(`<option value="${e}">${e}</option>`));
-          if (ui.getSetting("edition")) {
-            $eds.val(ui.getSetting("edition"));
-            $eds.selectmenu("refresh");
-          }
         }),
         ui.promiseDictionaries()
         .then(dictionaries => {
           const $dics = this.$dlg.find("[name=dictionary]");
           dictionaries
           .forEach(d => $dics.append($(`<option value="${d}">${d}</option>`)));
           $dics.on("selectmenuchange", () => this.showFeedbackFields());
-          const seldic = ui.getSetting("dictionary");
-          if (seldic)
-            $dics.val(seldic).selectmenu("refresh");
           this.showFeedbackFields();
         })
       ]);
@@ -150,21 +143,13 @@ class GameSetupDialog extends Dialog {
       $fields.each((i, el) => {
         const $el = $(el);
         const field = $el.attr("name");
-        let val = game ? game[field] : (
-          ui.getSetting(field) || Game.DEFAULTS[field]);
-        if (el.tagName === "INPUT" && el.type === "checkbox") {
-          //console.debug("SET", field, "=", val);
+        const val = (game ? game[field] : undefined) || ui.getSetting(field);
+        if (el.tagName === "INPUT" && el.type === "checkbox")
           $el.prop("checked", val).checkboxradio("refresh");
-        } else if (el.tagName === "SELECT") {
-          if (typeof val === "undefined")
-            val = this.options.ui.getSetting(field);
-          //console.debug("SELECT", field, "=", val);
-          $el.val(val || "none");
-          $el.selectmenu("refresh");
-        } else if (val) {
-          //console.debug("SET", field, "=", val);
+        else if (el.tagName === "SELECT")
+          $el.val(val).selectmenu("refresh");
+        else if (val)
           $el.val(val);
-        }
         return true;
       });
       this.showTimerFields();

diff --git a/src/browser/UI.js b/src/browser/UI.js
@@ -159,12 +159,14 @@ class UI {
     // Initialise jquery theme
     const jqTheme = this.getSetting("jqTheme");
     if (jqTheme)
+      // Replace the link for the jQuery theme
       $("#jQueryTheme").each(function() {
         this.href = this.href.replace(/\/themes\/[^/.]+/, `/themes/${jqTheme}`);
       });
 
-    const css = this.getSetting("xanadoCSS");
+    const css = this.getSetting("layout");
     if (css)
+      // Replace the link for the CSS
       $("#xanadoCSS").each(function() {
         if (this.href)
           this.href = this.href.replace(/\/css\/[^/.]+/, `/css/${css}`);
@@ -260,7 +262,7 @@ class UI {
           // Handle special case of a button that opens a dialog.
           // When the dialog closes, a focusin event is sent back
           // to the tooltip, that we want to ignore.
-          if (event.originalEvent.type === "focusin")
+          if (event.originalEvent && event.originalEvent.type === "focusin")
             ui.tooltip.hide();
         }
         /* c8 ignore stop */
@@ -338,8 +340,8 @@ class UI {
    * @return {Promise} promise that resolves to
    * a list of css name strings.
    */
-  promiseCSS() {
-    assert.fail("UI.promiseCSS");
+  promiseLayouts() {
+    assert.fail("UI.promiseLayouts");
   }
 
   /**

diff --git a/src/browser/UserSettingsDialog.js b/src/browser/UserSettingsDialog.js
@@ -23,23 +23,20 @@ class UserSettingsDialog extends Dialog {
   createDialog() {
     return super.createDialog()
     .then(() => {
-      const curlan = $.i18n.locale();
-      //console.log("Curlan",curlan);
-
       const ui = this.options.ui;
-      const $css = this.$dlg.find('[name=xanadoCSS]');
+      const $layout = this.$dlg.find('[name=layout]');
       //const $jqt = this.$dlg.find("[name=jqTheme]");
       const $locale = this.$dlg.find('[name=language]');
 
-      return Promise.all([ ui.promiseCSS(), ui.promiseLocales() ])
-      .then(all => {
-        all[0].forEach(css => $css.append(`<option>${css}</option>`));
-        all[1]
-        .filter(d => d !== "qqq")
-        .sort((a, b) => new RegExp(`^${a}`,"i").test(curlan) ? -1 :
-              new RegExp(`^${b}`,"i").test(curlan) ? 1 : 0)
-        .forEach(d => $locale.append(`<option>${d}</option>`));
-      });
+      return Promise.all([
+        ui.promiseLayouts()
+        .then(layouts => layouts
+              .forEach(css => $layout.append(`<option>${css}</option>`))),
+        ui.promiseLocales()
+        .then(locales => locales
+              .filter(d => d !== "qqq")
+              .forEach(lan => $locale.append(`<option>${lan}</option>`)))
+      ]);
     });
   }
 
@@ -53,17 +50,17 @@ class UserSettingsDialog extends Dialog {
       .val(ui.getSetting("language"))
       .selectmenu("refresh");
 
-      this.$dlg.find("select[name=xanadoCSS]")
-      .val(ui.getSetting('theme'))
+      this.$dlg.find("select[name=layout]")
+      .val(ui.getSetting("layout"))
       .selectmenu("refresh");
 
       this.$dlg.find("select[name=jqTheme]")
-      .val(ui.getSetting('jqTheme'))
+      .val(ui.getSetting("jqTheme"))
       .selectmenu("refresh");
 
       this.$dlg.find('input[type=checkbox]')
       .each(function() {
-        $(this).prop('checked', ui.getSetting(this.name) === "true")
+        $(this).prop("checked", ui.getSetting(this.name) === "true")
         .checkboxradio("refresh");
       });
       // Notification requires https

diff --git a/src/browser/i18n.js b/src/browser/i18n.js
@@ -114,7 +114,7 @@ $.i18n.init = (locale, data_url, dbg) => {
  * Get the current locale
  * @return { string} the current locale string
  */
-$.i18n.locale = () => $.banana.locale;
+$.i18n.locale = () => $.banana ? $.banana.locale : undefined;
 
 /**
  * jQuery plugin to translate all elements in DOM that have

diff --git a/src/client/ClientUIMixin.js b/src/client/ClientUIMixin.js
@@ -71,7 +71,7 @@ const ClientUIMixin = superclass => class extends superclass {
    * @memberof CientUIMixin
    * @override
    */
-  promiseCSS() {
+  promiseLayouts() {
     return $.get("/css");
   }
 

diff --git a/src/standalone/StandaloneUIMixin.js b/src/standalone/StandaloneUIMixin.js
@@ -24,7 +24,8 @@ const DEFAULT_USER_SETTINGS = {
   // User settings
   one_window: true,
 	notification: false, // requires https
-	theme: "default",
+	layout: "default",
+  language: "en",
   jqTheme: "pepper-grinder",
 	warnings: true,
 	cheers: true,
@@ -120,9 +121,11 @@ const StandaloneUIMixin = superclass => class extends superclass {
     if (session === null) {
       // null means key does not exist
       // see https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem
-      if (typeof Game.DEFAULTS[key] === "undefined")
+      if (typeof Game.DEFAULTS[key] === "undefined") {
+        if (key === "language")
+          return $.i18n.locale() || DEFAULT_USER_SETTINGS.language;
         return DEFAULT_USER_SETTINGS[key];
-      else
+      } else
         return Game.DEFAULTS[key];
     } else
       return session;
@@ -142,12 +145,12 @@ const StandaloneUIMixin = superclass => class extends superclass {
   }
 
   /**
-   * @implements UI#promiseCSS
+   * @implements UI#promiseLayouts
    * @memberof standalone/StandaloneUIMixin
    * @instance
    * @override
    */
-  promiseCSS() {
+  promiseLayouts() {
     return Platform.readFile(Platform.getFilePath("css/index.json"));
   }
 

diff --git a/test/browser/UI.js b/test/browser/UI.js
@@ -22,7 +22,7 @@ describe("browser/UI", () => {
         getSetting(t) {
           return this.settings[t];
         }
-        promiseCSS() { return Promise.resolve([ "A", "B" ]); }
+        promiseLayouts() { return Promise.resolve([ "A", "B" ]); }
         promiseLocales() { return Promise.resolve([ "en", "fr" ]); }
       };
     }));
@@ -67,11 +67,11 @@ describe("browser/UI", () => {
       getSetting(t) {
         switch (t) {
         case "jqTheme": return "le-frog";
-        case "xanadoCSS": return "exander77";
+        case "layout": return "exander77";
         default: assert.fail(t); return false;
         }
       }
-      promiseCSS() { return Promise.resolve([]); }
+      promiseLayouts() { return Promise.resolve([]); }
     }
     (new NUI()).initTheme();
     let url = $("#xanadoCSS").attr("href");
@@ -134,7 +134,7 @@ describe("browser/UI", () => {
         assert.fail(t); return false;
       }
       promiseLocales() { return Promise.resolve([ "en", "fr" ]); }
-      promiseCSS() { return Promise.resolve([]); }
+      promiseLayouts() { return Promise.resolve([]); }
     }
     const ui = new NUI();
     return ui.initLocale()

diff --git a/test/browser/UserSettingsDialog.js b/test/browser/UserSettingsDialog.js
@@ -20,7 +20,7 @@ describe("browser/UserSettingsDialog", () => {
 
   const user_settings =   {
     "language": "en",
-    "xanadoCSS": "default",
+    "layout": "default",
     "jqTheme": "vader",
     "turn_alert": false,
     "cheers": false,
@@ -33,7 +33,7 @@ describe("browser/UserSettingsDialog", () => {
   it ("dialog", () => {
     const ui = {
       session: { key : "session key" },
-      promiseCSS: () => Promise.resolve(["A", "B"]),
+      promiseLayouts: () => Promise.resolve(["A", "B"]),
       promiseLocales: () => Promise.resolve(["C", "D"]),
       getSetting: s => user_settings[s]
     };

diff --git a/test/client/ClientGameUI.js b/test/client/ClientGameUI.js
@@ -18,15 +18,15 @@ describe("client/ClientGameUI", () => {
   };
 
   const USER_DEFAULTS = {
-    theme: "default",
+    layout: "default",
     jqTheme: "invader"
   };
 
   const session = {
     name: "Descartes",
     settings: {
       "language": "en",
-      "xanadoCSS": "default",
+      "layout": "default",
       "jqTheme": "vader",
       "turn_alert": false,
       "cheers": false,
@@ -44,7 +44,7 @@ describe("client/ClientGameUI", () => {
     defaults: {
       edition: "Test",
       dictionary: "Oxford_5000",
-      theme: "default"
+      layout: "default"
     },
     games: "delayed"
   };

diff --git a/test/client/ClientGamesUI.js b/test/client/ClientGamesUI.js
@@ -24,7 +24,7 @@ describe("client/ClientGamesUI", () => {
   };
 
   const USER_DEFAULTS = {
-    theme: "default",
+    layout: "default",
     jqTheme: "invader"
   };
 
@@ -33,7 +33,7 @@ describe("client/ClientGamesUI", () => {
     key: "human",
     settings: {
       "language": "en",
-      "xanadoCSS": "default",
+      "layout": "default",
       "jqTheme": "vader",
       "turn_alert": false,
       "cheers": false,
@@ -107,14 +107,13 @@ describe("client/ClientGamesUI", () => {
         //debug: console.debug
       }))
     .then(() => {
-      console.debug("Logged in");
+      //console.debug("Logged in");
       $("#signout-button").trigger("click");
     })
     .then(() => expectDialog(
       "UserSettingsDialog",
       () => $("#personaliseButton").trigger("click")))
     .then(() => {
-      console.debug("USD done");
       return expectDialog(
         "GameSetupDialog",
         () => $("#create-game").trigger("click"));

diff --git a/test/client/ClientUIMixin.js b/test/client/ClientUIMixin.js
@@ -15,7 +15,7 @@ describe("client/ClientUIMixin", () => {
     name: "Descartes",
     settings: {
       "language": "en",
-      "xanadoCSS": "default",
+      "layout": "default",
       "jqTheme": "vader",
       "turn_alert": false,
       "cheers": false,
@@ -67,7 +67,7 @@ describe("client/ClientUIMixin", () => {
     };
     const USER_DEFAULTS = {
       notification: false,
-      theme: "none",
+      layout: "none",
       jqTheme: "grass"
     };
     const server = new StubServer({
@@ -114,7 +114,7 @@ describe("client/ClientUIMixin", () => {
       ui.promiseDefaults("user")
       .then(s => assert.deepEqual(s, USER_DEFAULTS)),
 
-      ui.promiseCSS()
+      ui.promiseLayouts()
       .then(e => assert(Array.isArray(e))),
 
       ui.promiseLocales()

diff --git a/test/server/Server.js b/test/server/Server.js
@@ -39,7 +39,7 @@ describe("server/Server.js", () => {
       timePenalty: 0
     },
     user_defaults: {
-      theme: "default"
+      layout: "default"
     },
     games: "delayed",
     html_dir: "html"

diff --git a/test/server/UserManager.js b/test/server/UserManager.js
@@ -39,7 +39,7 @@ describe("server/UserManager", () => {
       timePenalty: 0
     },
     user_defaults: {
-      theme: "default"
+      layout: "default"
     },
     html_dir: "html"
   };

diff --git a/test/standalone/StandaloneUIMixin.js b/test/standalone/StandaloneUIMixin.js
@@ -69,7 +69,7 @@ describe("standalone/StandaloneUIMixin", () => {
   it("get...", () => {
     const ui = new Test();
     return Promise.all([
-      ui.promiseCSS(),
+      ui.promiseLayouts(),
       Platform.readFile(Platform.getFilePath(`css/index.json`))])
     .then(data => assert.deepEqual(data[0], data[1]))