react-typing-test
Version:
A react component typing test, user input and wpm calculations.
123 lines (122 loc) • 6.57 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
exports.__esModule = true;
exports.TypingTest = void 0;
var react_1 = __importStar(require("react"));
var wordListGenerator_1 = require("./util/wordListGenerator");
var style_1 = require("./components/style");
var ThemeProvider_1 = require("./themes/ThemeProvider");
var RedoButton_1 = require("./components/RedoButton");
var MainContainer_1 = require("./components/MainContainer");
var Input_1 = require("./components/Input");
var Word_1 = require("./components/Word");
var TypingTest = function (_a) {
var _b = _a.wordLimit, wordLimit = _b === void 0 ? 50 : _b, _c = _a.language, language = _c === void 0 ? "english" : _c, _d = _a.theme, theme = _d === void 0 ? "Purpleish" : _d, onSetWPM = _a.onSetWPM, customWordList = _a.customWordList, customTheme = _a.customTheme;
var inputRef = (0, react_1.useRef)(null);
var _e = (0, react_1.useState)(""), currentWord = _e[0], setCurrentWord = _e[1];
var _f = (0, react_1.useState)(0), wordIndex = _f[0], setWordIndex = _f[1];
var _g = (0, react_1.useState)(null), startTime = _g[0], setStartTime = _g[1];
console.log(customWordList);
var _h = (0, react_1.useState)((0, wordListGenerator_1.getRandomWordList)({ wordLimit: wordLimit, language: language, customList: customWordList })), wordsToType = _h[0], setWordsToType = _h[1];
var _j = (0, react_1.useState)(0), wpm = _j[0], setWpm = _j[1];
var _k = (0, react_1.useState)(false), hasError = _k[0], setHasError = _k[1];
var _l = (0, react_1.useState)([]), typedWords = _l[0], setTypedWords = _l[1];
var targetWord = (0, react_1.useMemo)(function () { return wordsToType[wordIndex]; }, [wordsToType, wordIndex]);
var handleOnChange = function (e) {
var value = e.target.value;
var len = value.length;
if (!startTime) {
setStartTime(new Date());
}
if (value.charAt(len - 1) === " " ||
(targetWord === wordsToType[wordsToType.length - 1] &&
len === targetWord.length &&
value.charAt(len - 1) === targetWord.charAt(len - 1) &&
typedWords.length === wordsToType.length - 1)) {
var nextTypedWords_1 = __spreadArray(__spreadArray([], typedWords, true), [value.replace(" ", "")], false);
if (wordIndex + 1 === wordsToType.length) {
var endTime = Date.now();
var timeDiffInMinutes = (endTime - startTime.getTime()) / 60000;
var correctChars_1 = 0;
wordsToType.forEach(function (word, i) {
if (nextTypedWords_1[i]) {
nextTypedWords_1[i].split("").forEach(function (ntw, j) {
if (word[j] === ntw) {
correctChars_1 += 1;
}
});
}
});
setWpm(Math.floor(correctChars_1 / 5 / timeDiffInMinutes));
}
setCurrentWord("");
setTypedWords(nextTypedWords_1);
setWordIndex(wordIndex + 1);
}
else {
setCurrentWord(value);
}
if (value.charAt(len - 1) !== " ") {
setHasError(value.charAt(len - 1) !== targetWord.charAt(len - 1));
}
};
(0, react_1.useEffect)(function () {
if (onSetWPM) {
onSetWPM(wpm);
}
}, [wpm, onSetWPM]);
var reset = (0, react_1.useCallback)(function () {
var _a;
setWordIndex(0);
setTypedWords([]);
setStartTime(null);
setWpm(0);
setCurrentWord("");
setWordsToType((0, wordListGenerator_1.getRandomWordList)({ wordLimit: wordLimit, language: language, customList: customWordList }));
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, [inputRef]);
return (react_1["default"].createElement(ThemeProvider_1.StyledThemeProvider, { themeName: theme, customTheme: customTheme },
react_1["default"].createElement(MainContainer_1.MainContainer, null,
react_1["default"].createElement(style_1.GlobalStyle, null),
react_1["default"].createElement("div", null, wordsToType.map(function (randWord, i) { return (react_1["default"].createElement(Word_1.Word, { word: randWord, wordIndex: wordIndex, index: i, targetWord: targetWord, currentWord: currentWord, typedWords: typedWords })); })),
react_1["default"].createElement(style_1.BottomBar, null,
react_1["default"].createElement(Input_1.Input, { ref: inputRef, type: "text", spellCheck: "false", value: currentWord, onChange: handleOnChange, autoComplete: "off", hasError: hasError, autoFocus: true }),
react_1["default"].createElement(RedoButton_1.RedoButton, { onClick: reset }, "Redo")),
react_1["default"].createElement(style_1.ColoredSpan, null,
"WPM: ",
wpm,
" "))));
};
exports.TypingTest = TypingTest;
exports["default"] = exports.TypingTest;