From: Raphaël Jakse Date: Sat, 3 Oct 2020 09:18:24 +0000 (+0200) Subject: Various improvements X-Git-Url: https://secure.softndesign.org/git/?a=commitdiff_plain;h=02e8d3f6a5230a218d28c9e63b244c5996495454;p=trivabble.git Various improvements - soften buttons a bit - align the lang settings - ensure paddings are okay at various places - make the escape key close various dialogs - make some settings even more flexible (for the admin sys) - do not save the new value of a setting if its value is already equal to this. - change the default flash light color --- diff --git a/l10n/po/fr/board.po b/l10n/po/fr/board.po index fe488bb..42975c4 100644 --- a/l10n/po/fr/board.po +++ b/l10n/po/fr/board.po @@ -1,121 +1,121 @@ #TranslationFunction trivabble msgid "Afrikaans" -msgstr "afrikaans" +msgstr "Afrikaans" msgid "Arabic" -msgstr "arabe" +msgstr "Arabe" msgid "Bulgarian" -msgstr "bulgare" +msgstr "Bulgare" msgid "Breton" -msgstr "breton" +msgstr "Breton" msgid "Catalan" -msgstr "catalan" +msgstr "Catalan" msgid "Czech" -msgstr "tchèque" +msgstr "Tchèque" msgid "Welsh" -msgstr "gallois" +msgstr "Gallois" msgid "Danish" -msgstr "danois" +msgstr "Danois" msgid "German" -msgstr "allemand" +msgstr "Allemand" msgid "Greek" -msgstr "grec" +msgstr "Grec" msgid "English" -msgstr "anglais" +msgstr "Anglais" msgid "Esperanto" -msgstr "espéranto" +msgstr "Espéranto" msgid "Spanish" -msgstr "espagnol" +msgstr "Espagnol" msgid "Estonian" -msgstr "estonien" +msgstr "Estonien" msgid "Basque" -msgstr "basque" +msgstr "Basque" msgid "Finnish" -msgstr "finlandais" +msgstr "Finlandais" msgid "French" -msgstr "français" +msgstr "Français" msgid "Irish" -msgstr "irlandais" +msgstr "Irlandais" msgid "Hebrew" -msgstr "hébreu" +msgstr "Hébreu" msgid "Croatian" -msgstr "croate" +msgstr "Croate" msgid "Hungarian" -msgstr "hongrois" +msgstr "Hongrois" msgid "Armenian" -msgstr "arménien" +msgstr "Arménien" msgid "Icelandic" -msgstr "islandais" +msgstr "Islandais" msgid "Italian" -msgstr "italien" +msgstr "Italien" msgid "Latin" -msgstr "latin" +msgstr "Latin" msgid "Lithuanian" -msgstr "lituanien" +msgstr "Lituanien" msgid "Latvian" -msgstr "letton" +msgstr "Letton" msgid "Malay" -msgstr "malais" +msgstr "Malais" msgid "Dutch" -msgstr "néerlandais" +msgstr "Néerlandais" msgid "Norwegian" -msgstr "norvégien" +msgstr "Norvégien" msgid "Polish" -msgstr "polonais" +msgstr "Polonais" msgid "Portuguese" -msgstr "portugais" +msgstr "Portugais" msgid "Romanian" -msgstr "roumain" +msgstr "Roumain" msgid "Russian" -msgstr "russe" +msgstr "Russe" msgid "Slovak" -msgstr "slovaque" +msgstr "Slovaque" msgid "Slovenian" -msgstr "slovène" +msgstr "Slovène" msgid "Swedish" -msgstr "suédois" +msgstr "Suédois" msgid "Turkish" -msgstr "turc" +msgstr "Turc" msgid "Ukrainian" -msgstr "ukrainien" +msgstr "Ukrainien" msgid "Klingon" -msgstr "klingon" +msgstr "Klingon" diff --git a/public/alert.js b/public/alert.js index 6675540..ee55168 100644 --- a/public/alert.js +++ b/public/alert.js @@ -22,6 +22,7 @@ divAlert.style.display = "none"; if (divAlertCallback) { divAlertCallback(alertInput.value); + divAlertCallback = null; } } @@ -29,6 +30,7 @@ divAlert.style.display = "none"; if (divAlertCallback) { divAlertCallback(null); + divAlertCallback = null; } } @@ -36,12 +38,15 @@ divAlert.style.display = "none"; if (divAlertCallbackYes) { divAlertCallbackYes(); + divAlertCallbackYes = null; } } + function confirmNo() { divAlert.style.display = "none"; if (divAlertCallbackNo) { divAlertCallbackNo(); + divAlertCallbackNo = null; } } @@ -112,6 +117,12 @@ divAlertOuter.appendChild(divAlertButton); divAlert.appendChild(divAlertOuter); document.body.appendChild(divAlert); + document.body.addEventListener("keydown", function (e) { + if (e.key === 'Escape') { + promptCancel(); + confirmNo(); + } + }); } global.myAlert = function (msg, callback) { diff --git a/public/config.js.sample b/public/config.js.sample index bdd7845..35bccf5 100644 --- a/public/config.js.sample +++ b/public/config.js.sample @@ -14,12 +14,28 @@ window.TrivabbleConf = { // Max consecutive tries before blacklisting WebSockets for the current session MAX_WEBSOCKET_ERRORS: 1, - // to tweak only if your webserver is shared with other conflicting resources at / ( ex: yunohost integration ) + // To tweak only if your webserver is shared with other conflicting resources at / (e.g. Yunohost integration) APP_PATH: "", // Whether the spell checker is enabled (dictionaries must be downloaded on the server before enabling this option) ENABLE_SPELL_CHECKER: false, + // The color of the flash light when double clicking on a cell + FLASH_LIGHT_COLOR: "#EE6633", + + // The list of durations of the flash light available in the settings box + FLASH_LIGHT_DURATIONS: [800, 1600, 3200], + + // The defaut flash light duration. If not set, the value at the middle of the previous array is used. + FLASH_LIGHT_DURATION: 1600, + + // The list of durations used to detect a double tap available in the settings box + DOUBLE_TAP_DURATIONS: [650, 1100, 1800, 3000, 5000], + + // The defaut double tap duration. If not set, the value at the middle of the previous array is used. + DOUBLE_TAP_DURATION: 1800, + + // 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 d797e98..f7e910c 100644 --- a/public/index.html +++ b/public/index.html @@ -24,23 +24,21 @@
-
- @@ -56,7 +54,7 @@

-

+

diff --git a/public/trivabble.css b/public/trivabble.css index e9e3544..3d89dd2 100644 --- a/public/trivabble.css +++ b/public/trivabble.css @@ -147,13 +147,16 @@ body { button { margin: 0.25em 0; min-height:3em; - background:#AFA; - border:1px solid gray; + background: #CFC; + border: 1px solid #8C8; + border-radius: 2px; + cursor: pointer; + transition: 0.2s; } button:hover { - background:#FD7; - cursor:pointer + background: #FD7; + border: 1px solid #CA5; } button[disabled=disabled], button:disabled { @@ -351,7 +354,7 @@ td.blink { } .minibutton { - padding:0; + padding:0.25ex 0.5ex; min-height:0; font-size:small } @@ -478,12 +481,34 @@ td.blink { font-size:small } -#lang-selection, #board-lang-selection { +#prefs #lang-selectioninput, #prefs label { + vertical-align:middle +} + +#lang-selection { + display:table; +} + +#lang-selection p { + display:table-row; +} + +#lang-selection p:first-child select { + margin-bottom:0.5ex; +} + +#lang-selection select, #lang-selection label { + display:table-cell; + vertical-align:middle; font-size:small; } -#prefs input, #prefs label { - vertical-align:middle +#lang-selection select { + width:100%; +} + +#lang-selection label { + padding-right:0.5ex; } .modal { @@ -599,6 +624,7 @@ td.blink { width:1.5em; font-weight:bold; transition:500ms; + padding:0; } #next-help-msg:hover { @@ -619,6 +645,8 @@ td.blink { margin:0; font-size:0.9; color:#222; + padding:0 0.5ex; + max-width:17em; } #help-box-inner:before { diff --git a/public/trivabble.js b/public/trivabble.js index 9135ca1..33e497d 100644 --- a/public/trivabble.js +++ b/public/trivabble.js @@ -36,10 +36,15 @@ Conf[parameterName] = defaultValue; } else if (typeof Conf[parameterName] !== typeof defaultValue) { myAlert("Head's up - configuration " + parameterName + " does not have the right type. It should be a " + (typeof defaultValue) + ", it is a " + (typeof Conf[parameterName])); - throw new Error("Wrong type for configuration " + parameterName + ", expected " + (typeof defaultValue) + ", got " + (typeof Conf[parameterName])); + throw new Error("Wrong type for configuration " + parameterName + ", expected " + (typeof defaultValue) + ", got " + (typeof Conf[parameterName])); } } + function middle(key) { + const setting = getSetting(key); + return setting[Math.floor(setting.length / 2)] + } + setConf("POLLING_DELAY", 2000); setConf("ENABLE_WEBSOCKETS", true); setConf("ENABLE_EVENT_SOURCE", true); @@ -49,8 +54,10 @@ setConf("ENABLE_TILE_SOUND", true); setConf("ENABLE_SPELL_CHECKER", false); setConf("DOUBLE_TAP_DURATIONS", [650, 1100, 1800, 3000, 5000]); + setConf("DOUBLE_TAP_DURATION", middle("DOUBLE_TAP_DURATIONS")); setConf("FLASH_LIGHT_DURATIONS", [800, 1600, 3200]); - setConf("FLASH_LIGHT_COLOR", "#E3E"); + setConf("FLASH_LIGHT_DURATION", middle("FLASH_LIGHT_DURATIONS")); + setConf("FLASH_LIGHT_COLOR", "#ee6633"); function isSetting(key) { return Object.prototype.hasOwnProperty.call(Conf, key) || @@ -98,6 +105,10 @@ } function setSetting(key, value) { + if (getSetting(key) === value) { + return; + } + let type; /* try to retrieve type from configuration */ @@ -145,8 +156,7 @@ localStorage.setItem(key + "_type", type); } } - migrateSetting("doubleTapDuration", "number"); - migrateSetting("flashLightDuration", "number"); + migrateSetting("spellCheckerEnabled", "boolean"); migrateSetting("trivabbleGameNumber", "number"); migrateSetting("trivabbleBoardLang", "string"); @@ -1859,7 +1869,7 @@ return; } - if ((laserTouch.last !== cell) || (Date.now() - laserTouch.date > getSetting("doubleTapDuration"))) { + if ((laserTouch.last !== cell) || (Date.now() - laserTouch.date > getSetting("DOUBLE_TAP_DURATION"))) { laserTouch.last = cell; laserTouch.date = Date.now(); return; @@ -1873,7 +1883,7 @@ placeholder.classList.add("laser-highlighting"); placeholder.classList.add("laser-highlight"); - const sixthFlashLightDuration = getSetting("flashLightDuration") / 6; + const sixthFlashLightDuration = getSetting("FLASH_LIGHT_DURATION") / 6; function on() { placeholder.classList.add("laser-highlight"); @@ -2024,30 +2034,24 @@ document.body.addEventListener("dblclick", laserDblClick); document.body.addEventListener("touchstart", laserTouch); - if (!isSetting("doubleTapDuration")) { - setSetting("doubleTapDuration", getSetting("DOUBLE_TAP_DURATIONS")[Math.floor(getSetting("DOUBLE_TAP_DURATIONS").length / 2)]); - } const doubleTapDuration = document.getElementById("double-tap-duration"); if (doubleTapDuration) { doubleTapDuration.max = getSetting("DOUBLE_TAP_DURATIONS").length - 1; - doubleTapDuration.value = translateDuration(getSetting("doubleTapDuration"), getSetting("DOUBLE_TAP_DURATIONS")); + doubleTapDuration.value = translateDuration(getSetting("DOUBLE_TAP_DURATION"), getSetting("DOUBLE_TAP_DURATIONS")); doubleTapDuration.onchange = function () { - setSetting("doubleTapDuration", translateDuration( + setSetting("DOUBLE_TAP_DURATION", translateDuration( document.getElementById("double-tap-duration").value, getSetting("DOUBLE_TAP_DURATIONS") )); }; } - if (!isSetting("flashLightDuration")) { - setSetting("flashLightDuration", getSetting("FLASH_LIGHT_DURATIONS")[Math.floor(getSetting("FLASH_LIGHT_DURATIONS").length / 2)]); - } const flashLightDuration = document.getElementById("flash-light-duration"); if (flashLightDuration) { flashLightDuration.max = getSetting("FLASH_LIGHT_DURATIONS").length - 1; - flashLightDuration.value = translateDuration(getSetting("flashLightDuration"), getSetting("FLASH_LIGHT_DURATIONS")); + flashLightDuration.value = translateDuration(getSetting("FLASH_LIGHT_DURATION"), getSetting("FLASH_LIGHT_DURATIONS")); flashLightDuration.onchange = function () { - setSetting("flashLightDuration", translateDuration( + setSetting("FLASH_LIGHT_DURATION", translateDuration( document.getElementById("flash-light-duration").value, getSetting("FLASH_LIGHT_DURATIONS") )); @@ -2056,14 +2060,7 @@ const flashLightColor = document.getElementById("flash-light-color"); if (flashLightColor) { - - /* migration of old settings for flash light color */ - const oldSetting = getSetting("flashLightColor"); - if (oldSetting) { - setSetting("FLASH_LIGHT_COLOR", oldSetting); - delete localStorage.flashLightColor; - } - + console.log(getSetting("FLASH_LIGHT_COLOR")); flashLightColor.value = getSetting("FLASH_LIGHT_COLOR"); flashLightColor.onchange = function () { setSetting("FLASH_LIGHT_COLOR", document.getElementById("flash-light-color").value); @@ -2188,6 +2185,11 @@ document.getElementById("btn-settings").onclick = showSettings; document.getElementById("btn-settings-close").onclick = showSettings; document.getElementById("next-help-msg").onclick = nextHelpMessage; + document.body.addEventListener("keydown", function (e) { + if (e.key === 'Escape') { + document.querySelector(".modal").classList.remove("show-modal"); + } + }); } function initGame() {