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
This commit is contained in:
Raphaël Jakse
parent
26b2c9d206
commit
02e8d3f6a5
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,23 +24,21 @@
|
|||
<textarea id="chat-ta" placeholder="Write a message to your adversaries here" data-l10n="placeholder"></textarea>
|
||||
<button id="chat-btn" class="minibutton" data-l10n="text-content">Send message</button>
|
||||
<div id="lang-selection">
|
||||
<label>
|
||||
<span data-l10n="text-content">Interface language: </span>
|
||||
<p>
|
||||
<label for="select-lang" data-l10n="text-content">Interface language: </label>
|
||||
<select id="select-lang">
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
<option value="br">Brezhoneg</option>
|
||||
<option value="ro">Română</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div id="board-lang-selection" style="display:none">
|
||||
<label>
|
||||
<span data-l10n="text-content">Board language: </span>
|
||||
</p>
|
||||
<p id="board-lang-selection" style="display:none">
|
||||
<label for="board-lang" data-l10n="text-content">Board language: </label>
|
||||
<select id="board-lang">
|
||||
<option value="fr">French</option>
|
||||
</select>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -56,7 +54,7 @@
|
|||
<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>
|
||||
<p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="double-tap-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Double tap duration</span></label></p>
|
||||
<p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="flash-light-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Flash light duration</span></label></p>
|
||||
<p><label><input type="text" size="6" id="flash-light-color"/> <span data-l10n="text-content">Flash light color</span></label></p>
|
||||
<p><label><input type="color" size="6" id="flash-light-color" /> <span data-l10n="text-content">Flash light color</span></label></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue