Merge pull request #37 from Ra3d0r/develop

v. 0.3.1 - Fix keyboard

src/feature/keyboard/components/item/KeyboardKey.tsx

@@ -6,10 +6,11 @@ interface props {
 	id: string;
 	keyTarget: string | null;
 	currentLetter: string | undefined;
+	previousKeyId: string;
 }
 
-const KeyboardKey = ({kbd, eventKey, id, keyTarget, currentLetter}: props) => {
-	const className = classNameKey(id, eventKey, keyTarget, currentLetter);
+const KeyboardKey = ({kbd, eventKey, id, keyTarget, currentLetter, previousKeyId}: props) => {
+	const className = classNameKey(id, eventKey, keyTarget, currentLetter, previousKeyId);
 
 	switch (id) {
 		case 'Space':

src/feature/keyboard/components/item/KeyboardList.tsx

@@ -10,11 +10,19 @@ interface props {
 	currentKeyId: string | null;
 	currentLetter: string | undefined;
 	lang: typeLang;
+	previousKeyId: string;
 }
 
 const handleKeyBoard = (lang: typeLang) => (lang === 'en' ? buttonsKeyboard : buttonsKeyboardRU);
 
-const KeyboardList = ({isShiftPressed, eventKeyCode, currentKeyId, currentLetter, lang}: props) => {
+const KeyboardList = ({
+	isShiftPressed,
+	eventKeyCode,
+	currentKeyId,
+	currentLetter,
+	lang,
+	previousKeyId,
+}: props) => {
 	return handleKeyBoard(lang).map((board, rowIndex) => {
 		return (
 			<div key={rowIndex} className="space-x-0.5 space-y-0.5 flex grow">
@@ -27,6 +35,7 @@ const KeyboardList = ({isShiftPressed, eventKeyCode, currentKeyId, currentLetter
 							eventKey={eventKeyCode}
 							keyTarget={currentKeyId}
 							currentLetter={currentLetter}
+							previousKeyId={previousKeyId}
 						/>
 					);
 				})}

src/feature/keyboard/components/main/Keyboard.tsx

@@ -3,7 +3,7 @@ import tw from 'twin.macro';
 
 import {typeLang, typeModeUnion} from '@types';
 
-import {selectCurrentLetter} from '@feature/typing/typingSelectors';
+import {selectCurrentLetter, selectPreviousLetter} from '@feature/typing/typingSelectors';
 
 import useKeyboard from '@hooks/useKeyboard';
 
@@ -32,8 +32,10 @@ const Keyboard = ({mode}: {mode: typeModeUnion}) => {
 	const currentLetter: string | undefined = useAppSelector((state) =>
 		selectCurrentLetter(state, mode),
 	);
+	const previousLetter = useAppSelector((state) => selectPreviousLetter(state, mode));
 	const [isShiftPressed, eventKeyCode] = useKeyboard(currentLetter, mode);
 	const currentKeyId = keyIdButtons(currentLetter, i18n.language as typeLang);
+	const previousKeyId = keyIdButtons(previousLetter, i18n.language as typeLang);
 
 	return (
 		<KeyboardContainer>
@@ -44,6 +46,7 @@ const Keyboard = ({mode}: {mode: typeModeUnion}) => {
 					currentKeyId={currentKeyId}
 					currentLetter={currentLetter}
 					lang={i18n.language as typeLang}
+					previousKeyId={previousKeyId || ''}
 				/>
 			</KeyboardPanel>
 		</KeyboardContainer>

src/feature/keyboard/helpers/classNameKey.ts

@@ -3,9 +3,10 @@ const classNameKey = (
 	eventKeyId: string,
 	targetKeyId: string | null,
 	currentLetter: string | undefined,
+	previousKeyId: string,
 ): string => {
 	switch (true) {
-		case eventKeyId === targetKeyId && keyId === eventKeyId:
+		case eventKeyId === previousKeyId && keyId === eventKeyId:
 			return 'target-typed';
 
 		case keyId === 'ShiftLeft' && keyId === eventKeyId:

src/feature/typing/typingSelectors.ts

@@ -7,6 +7,11 @@ export const selectCurrentLetter = (state: RootState, mode: typeModeUnion) => {
 	return state.typing[mode].currentText[index];
 };
 
+export const selectPreviousLetter = (state: RootState, mode: typeModeUnion) => {
+	const index = state.typing[mode].currentTextIndex;
+	return state.typing[mode].currentText[index - 1 < 0 ? 0 : index - 1];
+};
+
 export const selectCurrentTextIndex = (state: RootState, mode: typeModeUnion) =>
 	state.typing[mode].currentTextIndex;
 export const selectCurrentText = (state: RootState, mode: typeModeUnion) =>

src/helpers/handleKeyDown.ts

@@ -1,6 +1,45 @@
+import {t} from 'i18next';
+
+import {scoreActions} from '@feature/score/scoreSlice';
+import {toastActions} from '@feature/toast/toastSlice';
+import {typingActions} from '@feature/typing/typingSlice';
+import postScore from '@feature/userScore/postScore';
+
+import {textEng, textRu} from '../config';
+import keyIdButtons from './keyIdButtons';
+import randomTextFromArray from './randomTextFromArray';
 import typeHandleKeyDown from './types/typeHandleKeyDown';
+import checkKeyboardLayout from './utils/checkKeyboardLayout';
+import deleteWords from './utils/deleteWords';
+
+const {openToast} = toastActions;
 
-const handleKeyDown: typeHandleKeyDown = ({event, setIsShiftPressed, setEventKeyCode, status}) => {
+const {increaseTypos, updateCorrectness} = scoreActions;
+
+const {
+	addCurrentText,
+	addErrorIndex,
+	changeStatusCustomMode,
+	nextLetter,
+	resetCustomModeText,
+	previousLetter,
+} = typingActions;
+
+const handleKeyDown: typeHandleKeyDown = ({
+	event,
+	setIsShiftPressed,
+	setEventKeyCode,
+	status,
+	target,
+	dispatch,
+	currentText,
+	currentTextIndex,
+	mode,
+	allText,
+	isAuth,
+	errorsIndex,
+	lang,
+}) => {
 	if (event.key === 'Shift') {
 		setIsShiftPressed(true);
 	}
@@ -14,6 +53,62 @@ const handleKeyDown: typeHandleKeyDown = ({event, setIsShiftPressed, setEventKey
 	}
 
 	setEventKeyCode(event.code);
+
+	if (!checkKeyboardLayout(lang, event.key)) {
+		dispatch(openToast({message: t('changeKeyboard'), type: 'warning'}));
+		return;
+	}
+
+	if (!target) {
+		return;
+	}
+
+	const TargetKeyId = keyIdButtons(event.key);
+	if (!TargetKeyId) {
+		return;
+	}
+
+	if (!currentText.length) {
+		return;
+	}
+
+	if (event.key === 'Backspace') {
+		dispatch(previousLetter({mode, currentTextIndex}));
+		dispatch(updateCorrectness({mode, errorsIndex, currentTextIndex}));
+		return;
+	}
+
+	if (target !== event.key) {
+		dispatch(addErrorIndex({currentTextIndex, mode}));
+		dispatch(increaseTypos({mode}));
+		dispatch(updateCorrectness({mode, errorsIndex, currentTextIndex, isIncreaseTypos: true}));
+	}
+
+	if (mode === 'custom' && currentTextIndex === currentText.length - 1) {
+		isAuth && dispatch(postScore({mode, lang}));
+		dispatch(changeStatusCustomMode('idle'));
+		dispatch(resetCustomModeText());
+		return;
+	}
+
+	if (currentTextIndex < currentText.length - 1) {
+		dispatch(nextLetter({mode}));
+		return;
+	}
+
+	if (mode !== 'custom') {
+		const text = randomTextFromArray(
+			allText,
+			mode,
+			lang === 'en' ? textEng.textKey : textRu.textKey,
+		);
+		isAuth && dispatch(postScore({mode, lang}));
+		const changedText = lang === 'ru' ? deleteWords(text, '\r') : text;
+		dispatch(addCurrentText({text: changedText, mode}));
+		return;
+	}
+
+	throw new Error('Incorrect next text or letter');
 };
 
 export default handleKeyDown;

src/helpers/handleKeyUp.ts

@@ -1,105 +1,11 @@
-import {t} from 'i18next';
-
-import {scoreActions} from '@feature/score/scoreSlice';
-import {toastActions} from '@feature/toast/toastSlice';
-import {typingActions} from '@feature/typing/typingSlice';
-import postScore from '@feature/userScore/postScore';
-
-import {textEng, textRu} from '../config';
-import keyIdButtons from './keyIdButtons';
-import randomTextFromArray from './randomTextFromArray';
 import {typeHandleKeyUp} from './types/typeHandleKeyUp';
-import checkKeyboardLayout from './utils/checkKeyboardLayout';
-import deleteWords from './utils/deleteWords';
-
-const {
-	addCurrentText,
-	addErrorIndex,
-	changeStatusCustomMode,
-	nextLetter,
-	resetCustomModeText,
-	previousLetter,
-} = typingActions;
 
-const {openToast} = toastActions;
-
-const {increaseTypos, updateCorrectness} = scoreActions;
-
-const handleKeyUp: typeHandleKeyUp = ({
-	event,
-	setIsShiftPressed,
-	setEventKeyCode,
-	target,
-	dispatch,
-	currentText,
-	currentTextIndex,
-	mode,
-	allText,
-	isAuth,
-	errorsIndex,
-	lang,
-}) => {
+const handleKeyUp: typeHandleKeyUp = ({event, setIsShiftPressed, setEventKeyCode}) => {
 	if (event.key === 'Shift') {
 		setIsShiftPressed(false);
 	}
 
 	setEventKeyCode('');
-
-	if (!checkKeyboardLayout(lang, event.key)) {
-		dispatch(openToast({message: t('changeKeyboard'), type: 'warning'}));
-		return;
-	}
-
-	if (!target) {
-		return;
-	}
-
-	const TargetKeyId = keyIdButtons(event.key);
-	if (!TargetKeyId) {
-		return;
-	}
-
-	if (!currentText.length) {
-		return;
-	}
-
-	if (event.key === 'Backspace') {
-		dispatch(previousLetter({mode, currentTextIndex}));
-		dispatch(updateCorrectness({mode, errorsIndex, currentTextIndex}));
-		return;
-	}
-
-	if (target !== event.key) {
-		dispatch(addErrorIndex({currentTextIndex, mode}));
-		dispatch(increaseTypos({mode}));
-		dispatch(updateCorrectness({mode, errorsIndex, currentTextIndex, isIncreaseTypos: true}));
-	}
-
-	if (mode === 'custom' && currentTextIndex === currentText.length - 1) {
-		isAuth && dispatch(postScore({mode, lang}));
-		dispatch(changeStatusCustomMode('idle'));
-		dispatch(resetCustomModeText());
-		return;
-	}
-
-	if (currentTextIndex < currentText.length - 1) {
-		dispatch(nextLetter({mode}));
-		return;
-	}
-
-	if (mode !== 'custom') {
-		const text = randomTextFromArray(
-			allText,
-			mode,
-			lang === 'en' ? textEng.textKey : textRu.textKey,
-		);
-		isAuth && dispatch(postScore({mode, lang}));
-		const changedText = lang === 'ru' ? deleteWords(text, '\r') : text;
-		dispatch(addCurrentText({text: changedText, mode}));
-		return;
-	}
-
-	throw new Error('Incorrect next text or letter');
 };
 
 export default handleKeyUp;

src/helpers/types/typeHandleKeyDown.ts

@@ -1,10 +1,25 @@
+import {TFunction} from 'i18next';
+
 import {typeStatus} from '@types';
+import {typeLang, typeModeUnion} from '@types';
+
+import {AppDispatch} from '@store/store';
 
 export type typeHandleKeyDown = (arg: {
 	event: KeyboardEvent;
 	setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;
 	setEventKeyCode: React.Dispatch<React.SetStateAction<string>>;
 	status: typeStatus;
+	target: string | undefined;
+	dispatch: AppDispatch;
+	currentText: string[];
+	currentTextIndex: number;
+	mode: typeModeUnion;
+	allText: string[] | Record<string, unknown>[];
+	isAuth: boolean;
+	errorsIndex: Record<number, 'error'>;
+	lang: typeLang;
+	t: TFunction<'translation'>;
 }) => void;
 
 export default typeHandleKeyDown;

src/helpers/types/typeHandleKeyUp.ts

@@ -1,23 +1,7 @@
-import {TFunction} from 'i18next';
-
-import {typeLang, typeModeUnion} from '@types';
-
-import {AppDispatch} from '@store/store';
-
 interface params {
 	event: KeyboardEvent;
 	setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;
 	setEventKeyCode: React.Dispatch<React.SetStateAction<string>>;
-	target: string | undefined;
-	dispatch: AppDispatch;
-	currentText: string[];
-	currentTextIndex: number;
-	mode: typeModeUnion;
-	allText: string[] | Record<string, unknown>[];
-	isAuth: boolean;
-	errorsIndex: Record<number, 'error'>;
-	lang: typeLang;
-	t: TFunction<'translation'>;
 }
 
 export type typeHandleKeyUp = (arg: params) => void;

src/hooks/useKeyboard.ts

@@ -24,13 +24,11 @@ const useKeyboard = (target: string | undefined, mode: typeModeUnion): [boolean,
 	const {i18n, t} = useTranslation();
 
 	useKeyboardEvent('keydown', (event: KeyboardEvent) =>
-		handleKeyDown({event, setIsShiftPressed, setEventKeyCode, status}),
-	);
-	useKeyboardEvent('keyup', (event: KeyboardEvent) =>
-		handleKeyUp({
+		handleKeyDown({
 			event,
 			setIsShiftPressed,
 			setEventKeyCode,
+			status,
 			target,
 			dispatch,
 			currentText,
@@ -43,6 +41,13 @@ const useKeyboard = (target: string | undefined, mode: typeModeUnion): [boolean,
 			t,
 		}),
 	);
+	useKeyboardEvent('keyup', (event: KeyboardEvent) =>
+		handleKeyUp({
+			event,
+			setIsShiftPressed,
+			setEventKeyCode,
+		}),
+	);
 
 	return [isShiftPressed, eventKeyCode];
 };