trivabble/trivabble
trivabble
/
trivabble
2
1
Fork 1
Code Issues 5 Pull Requests Projects Releases Wiki Activity

work on settings and spell checker UI/UX

This commit is contained in:
Raphaël Jakse 2020-08-29 12:26:05 +02:00
parent c2108dd441
commit 78c135de1c
7 changed files with 104 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
l10n/po/fr/trivabble.po
View File

@ -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"

8
l10n/pot/trivabble.pot
View File

@ -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 ""

4
public/config.js.sample
View File

@ -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

17
public/index.html
View File

@ -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>

30
public/trivabble.css
View File

@ -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;
}

104
public/trivabble.js
View File

@ -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 = "";
}
}
function downloadDictionary(code) {
if (localStorage.spellCheckerEnabled === code) {
// FIXME we silently never call the callback here
return;
}
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() {

3
server/trivabble-server.js
View File

@ -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) {