added language support

This commit is contained in:
Jack 2020-05-16 14:57:01 +01:00
parent 7a199010c8
commit 2d3c5d35fe
7 changed files with 115 additions and 232 deletions

View file

@ -795,11 +795,11 @@ key {
width: min-content;
width: -moz-min-content;
}
.themes{
.themes, .languages{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
// gap: 1rem;
.theme{
.theme, .language{
// padding: 1rem 2rem;
text-align: center;
color: var(--sub-color);

View file

@ -216,16 +216,14 @@
<div class="text">Shows the keybind tips at the bottom of the page.</div>
<div class="buttons"><div class="button on" tabindex="0">show</div><div class="button off" tabindex="0">hide</div></div>
</div>
<div class="section" style="grid-column: 1/3;">
<h1>languages</h1>
<div class="languages">
</div>
</div>
<div class="section" style="grid-column: 1/3;">
<h1>theme</h1>
<div class="themes">
<div class="theme">light</div>
<div class="theme active">dark</div>
<div class="theme">light</div>
<div class="theme">light</div>
<div class="theme">light</div>
<div class="theme">light</div>
</div>
</div>
</div>
@ -330,12 +328,11 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@0.1.3/src/chartjs-plugin-trendline.min.js"></script>
<script src="js/words.js"></script>
<script src="js/db.js"></script>
<script src="js/commandline.js"></script>
<script src="js/settings.js"></script>
<script src="js/userconfig.js"></script>
<script src="js/words.js"></script>
<script src="js/script.js"></script>
<script src="js/account.js"></script>

View file

@ -51,6 +51,15 @@ let commands = {
showCommandLine();
}
},
{
id: "changeLanguage",
display: "Change language...",
subgroup: true,
exec: () => {
currentCommands = commandsLanguages;
showCommandLine();
}
},
{
id: "changeMode",
display: "Change mode...",
@ -263,6 +272,31 @@ let commandsThemes = {
]
};
let commandsLanguages = {
title: "Change language...",
list: [
{
id: "couldnotload",
display: "Could not load the languages list :("
}
]
};
if (Object.keys(words).length > 0) {
commandsLanguages.list = [];
Object.keys(words).forEach(language => {
commandsLanguages.list.push({
id: "changeLanguage" + capitalizeFirstLetter(language),
display: language.replace('_', ' '),
exec: () => {
changeLanguage(language);
restartTest();
saveConfigToCookie();
}
})
})
}
$("#commandLine input").keyup((e) => {
if (e.keyCode == 38 || e.keyCode == 40) return;
updateSuggestedCommands();

View file

@ -78,18 +78,28 @@ function initWords() {
inputHistory = [];
currentInput = "";
let language = words[config.language];
if (language == undefined || language == []) {
showNotification("Error generating word list", 3000);
return;
}
if (config.mode == "time" || config.mode == "words") {
let wordsBound = config.mode == "time" ? 50 : config.words;
let randomWord = words[Math.floor(Math.random() * words.length)];
wordsList.push(randomWord);
let randomWord = language[Math.floor(Math.random() * language.length)];
while (randomWord.indexOf(' ') > -1) {
randomWord = language[Math.floor(Math.random() * language.length)];
}
wordsList.push(randomWord.toLowerCase());
for (let i = 1; i < wordsBound; i++) {
randomWord = words[Math.floor(Math.random() * words.length)];
randomWord = language[Math.floor(Math.random() * language.length)];
previousWord = wordsList[i - 1];
while (randomWord == previousWord && (!config.punctuation && randomWord == "I")) {
randomWord = words[Math.floor(Math.random() * words.length)];
while (randomWord == previousWord || (!config.punctuation && randomWord == "I") || randomWord.indexOf(' ') > -1) {
randomWord = language[Math.floor(Math.random() * language.length)];
}
wordsList.push(randomWord);
wordsList.push(randomWord.toLowerCase());
}
} else if (config.mode == "custom") {
@ -423,7 +433,8 @@ function showResult() {
mode: config.mode,
mode2: mode2,
punctuation: config.punctuation,
timestamp: Date.now()
timestamp: Date.now(),
language: config.language
};
if (stats.wpm > 0 && stats.wpm < 250 && stats.acc > 50 && stats.acc <= 100) {
if (firebase.auth().currentUser != null) {
@ -452,15 +463,17 @@ function showResult() {
let infoText = "";
infoText = config.mode;
infoText += config.mode;
if (config.mode == "time") {
infoText += " " + config.time
} else if (config.mode == "words") {
infoText += " " + config.words
}
infoText += "<br>" + config.language.replace('_', ' ') ;
if (config.punctuation) {
infoText += " with punctuation"
infoText += "<br>with punctuation"
}
$("#result .stats .info .bottom").html(infoText);

View file

@ -2,19 +2,21 @@ function updateSettingsPage(){
let themesEl = $(".pageSettings .section .themes").empty();
themesList.forEach(theme => {
if (config.theme == 'theme') {
themesEl.append(`<div class="theme active" theme='${theme}'>${theme.replace('_', ' ')}</div>`);
} else {
themesEl.append(`<div class="theme" theme='${theme}'>${theme.replace('_', ' ')}</div>`);
}
themesEl.append(`<div class="theme" theme='${theme}'>${theme.replace('_', ' ')}</div>`);
})
let langEl = $(".pageSettings .section .languages").empty();
Object.keys(words).forEach(language => {
langEl.append(`<div class="language" language='${language}'>${language.replace('_', ' ')}</div>`);
})
setSettingsButton('smoothCaret', config.smoothCaret);
setSettingsButton('quickTab', config.quickTab);
setSettingsButton('liveWpm', config.showLiveWpm);
setSettingsButton('keyTips', config.showKeyTips);
setActiveThemeButton(config.theme);
setActiveThemeButton();
setActiveLanguageButton();
if (config.showKeyTips) {
$(".pageSettings .tip").removeClass('hidden');
@ -25,9 +27,14 @@ function updateSettingsPage(){
}
function setActiveThemeButton(theme) {
$(".pageSettings .themes .theme").removeClass('active');
$(".pageSettings .themes .theme[theme=" + theme + "]").addClass('active');
function setActiveThemeButton() {
$(`.pageSettings .section .themes .theme`).removeClass('active');
$(`.pageSettings .section .themes .theme[theme=${config.theme}]`).addClass('active');
}
function setActiveLanguageButton() {
$(`.pageSettings .section .languages .language`).removeClass('active');
$(`.pageSettings .section .languages .language[language=${config.language}]`).addClass('active');
}
function setSettingsButton(buttonSection,tf) {
@ -99,6 +106,7 @@ $(".pageSettings .section.keyTips .buttons .button.off").click(e => {
}
})
//themes
$(document).on("mouseover",".pageSettings .section .themes .theme", (e) => {
let theme = $(e.currentTarget).attr('theme');
previewTheme(theme);
@ -107,8 +115,17 @@ $(document).on("mouseover",".pageSettings .section .themes .theme", (e) => {
$(document).on("click",".pageSettings .section .themes .theme", (e) => {
let theme = $(e.currentTarget).attr('theme');
setTheme(theme);
setActiveThemeButton();
})
$(document).on("mouseleave",".pageSettings .section .themes", (e) => {
setTheme(config.theme);
})
//languages
$(document).on("click",".pageSettings .section .languages .language", (e) => {
let language = $(e.currentTarget).attr('language');
changeLanguage(language);
restartTest();
setActiveLanguageButton();
})

View file

@ -7,7 +7,8 @@ let config = {
punctuation: false,
words: 50,
time: 30,
mode: "words"
mode: "words",
language: "english"
}
//cookies
@ -28,6 +29,7 @@ function loadConfigFromCookie() {
changeTimeConfig(newConfig.time);
changeWordCount(newConfig.words);
changeMode(newConfig.mode);
changeLanguage(newConfig.language);
config = newConfig;
restartTest();
}
@ -140,3 +142,14 @@ function setTheme(name) {
theme: name
});
}
function changeLanguage(language) {
if (language == null || language == undefined) {
language = "english";
}
config.language = language;
firebase.analytics().logEvent('changedLanguage', {
language: language
});
saveConfigToCookie();
}

File diff suppressed because one or more lines are too long