</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">×</span>
- </h2>
+ <span data-l10n="text-content">Settings</span>
+ <span class="modal-button" id="btn-settings-close">×</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>
</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">
<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 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>
let scoreOf;
let bag;
let boardLangSelect;
- let dictionary;
+ const downloadedDictionaries = {};
const playerLetters = [];
let currentPlayer = "";
}
}
- 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) {
case "boardLang":
localStorage.trivabbleBoardLang = value;
document.getElementById("board-lang").value = value;
- if (localStorage.spellCheckerEnabled !== "false") {
- downloadDictionary(value);
- }
break;
}
}
}
}
- 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"));
}
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;
}
}
location.reload();
}
- function showConfig() {
+ function showSettings() {
const modal = document.querySelector(".modal");
modal.classList.toggle("show-modal");
}
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() {