mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-21 07:46:15 +08:00
added a custom text popup that allows to randomise words with a certain number of words
This commit is contained in:
Jack
parent
bbf1bd02c8
commit
c571b7e8fb
|
|
@ -326,6 +326,79 @@ a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
#customTextPopupWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5rem 0;
|
||||
|
||||
#customTextPopup {
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness);
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
width: 60vw;
|
||||
|
||||
textarea {
|
||||
background: var(--bg-color);
|
||||
padding: 1rem;
|
||||
color: var(--main-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
font-family: "Roboto Mono";
|
||||
width: 100%;
|
||||
border-radius: var(--roundness);
|
||||
resize: vertical;
|
||||
height: 200px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.check {
|
||||
input {
|
||||
margin: 0 !important;
|
||||
cursor: pointer;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
|
||||
&~.customTextRandomCheckbox {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
|
||||
display: inline-block;
|
||||
margin: 0 .5rem 0 .25rem;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
&:checked~.customTextRandomCheckbox {
|
||||
background: var(--main-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#customThemeShareWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -43,6 +43,20 @@
|
|||
<div class="button">ok</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="customTextPopupWrapper" class="hidden">
|
||||
<div id="customTextPopup" action="">
|
||||
<textarea class="textarea" placeholder="Custom text"></textarea>
|
||||
<div class="inputs">
|
||||
<label class="check"><input type="checkbox">
|
||||
<div class="customTextRandomCheckbox"></div>Random
|
||||
</label>
|
||||
<label class="wordcount"><input type="number" value="1" min="1" max="10000">
|
||||
Word count
|
||||
</label>
|
||||
</div>
|
||||
<div class="button">ok</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tagsWrapper" class="hidden">
|
||||
<div id="tagsEdit" action="" tagid="">
|
||||
<div class="title"></div>
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ let keypressStats = {
|
|||
};
|
||||
|
||||
let customText = "The quick brown fox jumps over the lazy dog".split(" ");
|
||||
let customTextIsRandom = false;
|
||||
let customTextWordCount = 1;
|
||||
let randomQuote = null;
|
||||
|
||||
const testCompleted = firebase.functions().httpsCallable("testCompleted");
|
||||
|
|
@ -301,7 +303,11 @@ function initWords() {
|
|||
language = words[config.language];
|
||||
}
|
||||
|
||||
if (config.mode == "time" || config.mode == "words") {
|
||||
if (
|
||||
config.mode == "time" ||
|
||||
config.mode == "words" ||
|
||||
(config.mode == "custom" && customTextIsRandom)
|
||||
) {
|
||||
// let wordsBound = config.mode == "time" ? 60 : config.words;
|
||||
let wordsBound = 60;
|
||||
if (config.showAllLines && config.mode != "time") {
|
||||
|
|
@ -311,8 +317,15 @@ function initWords() {
|
|||
wordsBound = config.words;
|
||||
}
|
||||
}
|
||||
if (config.mode == "custom") {
|
||||
wordsBound = customTextWordCount;
|
||||
}
|
||||
let wordset = language;
|
||||
if (config.mode == "custom") {
|
||||
wordset = customText;
|
||||
}
|
||||
for (let i = 0; i < wordsBound; i++) {
|
||||
randomWord = language[Math.floor(Math.random() * language.length)];
|
||||
randomWord = wordset[Math.floor(Math.random() * wordset.length)];
|
||||
previousWord = wordsList[i - 1];
|
||||
previousWord2 = wordsList[i - 2];
|
||||
while (
|
||||
|
|
@ -321,7 +334,7 @@ function initWords() {
|
|||
(!config.punctuation && randomWord == "I") ||
|
||||
randomWord.indexOf(" ") > -1
|
||||
) {
|
||||
randomWord = language[Math.floor(Math.random() * language.length)];
|
||||
randomWord = wordset[Math.floor(Math.random() * wordset.length)];
|
||||
}
|
||||
if (config.punctuation && config.mode != "custom") {
|
||||
randomWord = punctuateWord(previousWord, randomWord, i, wordsBound);
|
||||
|
|
@ -2292,6 +2305,66 @@ function hideCapsWarning() {
|
|||
}
|
||||
}
|
||||
|
||||
function showCustomTextPopup() {
|
||||
if ($("#customTextPopupWrapper").hasClass("hidden")) {
|
||||
$("#customTextPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.animate({ opacity: 1 }, 100, (e) => {
|
||||
$("#customTextPopup textarea").val(customText.join(" "));
|
||||
$("#customTextPopup .wordcount input").val(customTextWordCount);
|
||||
$("#customTextPopup textarea").focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function hideCustomTextPopup() {
|
||||
if (!$("#customTextPopupWrapper").hasClass("hidden")) {
|
||||
$("#customTextPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
100,
|
||||
(e) => {
|
||||
$("#customTextPopupWrapper").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$("#customTextPopupWrapper").click((e) => {
|
||||
if ($(e.target).attr("id") === "customTextPopupWrapper") {
|
||||
hideCustomTextPopup();
|
||||
}
|
||||
});
|
||||
|
||||
$("#customTextPopup .button").click((e) => {
|
||||
let text = $("#customTextPopup textarea").val();
|
||||
text = text.trim();
|
||||
text = text.replace(/[\n\r\t ]/gm, " ");
|
||||
text = text.replace(/ +/gm, " ");
|
||||
text = text.split(" ");
|
||||
if (text.length >= 10000) {
|
||||
showNotification("Custom text cannot be longer than 10000 words.", 4000);
|
||||
changeMode("time");
|
||||
text = "The quick brown fox jumped over the lazy dog".split(" ");
|
||||
} else {
|
||||
customText = text;
|
||||
customTextIsRandom = $("#customTextPopup .check input").prop("checked");
|
||||
if (customTextIsRandom && customText.length < 3) {
|
||||
showNotification("Random custom text requires at least 3 words", 4000);
|
||||
customTextIsRandom = false;
|
||||
}
|
||||
customTextWordCount = $("#customTextPopup .wordcount input").val();
|
||||
restartTest();
|
||||
}
|
||||
hideCustomTextPopup();
|
||||
});
|
||||
|
||||
$(document).on("click", "#top .logo", (e) => {
|
||||
changePage("test");
|
||||
});
|
||||
|
|
@ -2342,8 +2415,9 @@ $(document).on("click", "#top .config .time .text-button", (e) => {
|
|||
});
|
||||
|
||||
$(document).on("click", "#top .config .customText .text-button", (e) => {
|
||||
changeCustomText();
|
||||
restartTest();
|
||||
// changeCustomText();
|
||||
// restartTest();
|
||||
showCustomTextPopup();
|
||||
});
|
||||
|
||||
$(document).on("click", "#top .config .punctuationMode .text-button", (e) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue