mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-02-04 04:51:16 +08:00
added language support
This commit is contained in:
parent
7a199010c8
commit
2d3c5d35fe
7 changed files with 115 additions and 232 deletions
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
})
|
|
@ -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
Loading…
Reference in a new issue