little fixes

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cls from './App.module.scss';
-import MatchGame from './components/MatchGame/MatchGame';
-import { MatchGameProvider } from './context/MatchGameContext';
+import MatchGame from 'components/MatchGame/MatchGame';
+import { MatchGameProvider } from 'context/MatchGameContext';
 
 function App() {
   return (

src/components/BottomPanel/BottomPanel.tsx

@@ -1,7 +1,9 @@
-import { useMatchGame } from '../../context/MatchGameContext';
-import Button from '../UI/Button/Button';
+import { useMatchGame } from 'context/MatchGameContext';
 import React, { useEffect, useState } from 'react';
-import Timer from '../UI/Timer/Timer';
+
+import Button from 'components/UI/Button/Button';
+import Timer from 'components/UI/Timer/Timer';
+
 import cls from './BottomPanel.module.scss';
 
 type BottomPanelProps = {
@@ -17,6 +19,7 @@ const BottomPanel: React.FC<BottomPanelProps> = (props) => {
   const [isTimerStarted, setIsTimerStarted] = useState(false);
   const [isTimerStopped, setIsTimerStopped] = useState(false);
   const [panelState, setPanelState] = useState<PanelState>('start');
+  const {changeGameTime} = useMatchGame();
 
   function onStartBtnClickHandler(event: React.MouseEvent<HTMLButtonElement>) {
     setIsTimerStarted(true);
@@ -51,7 +54,7 @@ const BottomPanel: React.FC<BottomPanelProps> = (props) => {
 
   function renderStartStatePanel() {
     return isTimerStarted
-      ? <Timer isStarted={isTimerStarted} startTime={0} isFinished={isTimerStopped}/>
+      ? <Timer isStarted={isTimerStarted} startTime={0} isFinished={isTimerStopped} changeTime={changeGameTime}/>
       : <>
           <Button onClick={onStartBtnClickHandler}>START</Button>
           <Button onClick={onShuffleBtnClickHandler}>SHUFFLE</Button>

src/components/Card/Card.module.scss

@@ -40,7 +40,6 @@
       }
     }
     .backside {
-      //background: #aee571;
       transform: rotateY(180deg);
       font-size: 40px;
 

src/components/Card/Card.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import React from 'react';
+
 import cls from './Card.module.scss'
 
 export type CardComponentProps = {
@@ -27,7 +28,7 @@ const Card: React.FC<CardComponentProps> = (props) => {
       style={{opacity: props.isMatched ? 0 : 1}}
       onClick={() => cardClickHandler(props.id)}
     >
-      <div className={classes.join(' ')}>
+      <div className={classes.join(' ')} tabIndex={-1}>
         <div className={cls.frontside}>{props.title}</div>
         <div className={cls.backside}>
           <img src={props.imageURL} alt={props.title}/>

src/components/CardsField/CardsField.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { useMatchGame } from '../../context/MatchGameContext';
-import Card, { CardComponentProps } from '../Card/Card';
+
+import { useMatchGame } from 'context/MatchGameContext';
+import Card, { CardComponentProps } from 'components/Card/Card';
+
 import cls from './CardsField.module.scss';
 
 type CardProps = {

src/components/FinishedField/FinishedField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMatchGame } from '../../context/MatchGameContext';
+
 import cls from './FinishedField.module.scss';
 
 type FinishedFieldProps = {
@@ -8,8 +8,6 @@ type FinishedFieldProps = {
 }
 
 const FinishedField: React.FC<FinishedFieldProps> = ({mistakesCount, gameTime}) => {
-  // const {mistakesCount, gameTime} = useMatchGame();
-
   return (
     <div className={cls.FinishedField}>
       <h1>GAME IS FINISHED !</h1>

src/components/MatchGame/MatchGame.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
-import { cardImages } from '../../constants';
-import { useMatchGame } from '../../context/MatchGameContext';
-import { randomizeElementInArray } from '../../utils';
-import BottomPanel from '../BottomPanel/BottomPanel';
-import CardsField from '../CardsField/CardsField';
-import FinishedField from '../FinishedField/FinishedField';
-import cls from './MatchGame.module.scss';
+
+import BottomPanel from 'components/BottomPanel/BottomPanel';
+import CardsField from 'components/CardsField/CardsField';
+import FinishedField from 'components/FinishedField/FinishedField';
+import { cardImages } from 'src/constants';
+import { randomizeElementInArray } from 'src/utils';
+import { useMatchGame } from 'context/MatchGameContext';
+
+import cls from './MatchGame.module.scss'
 
 const MatchGame: React.FC = () => {
   // TODO replace to CardsField

src/components/UI/Button/Button.module.scss

@@ -16,7 +16,7 @@
   box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
   transition: .3s;
 
-  &:hover {
+  &:hover, &:focus {
     background: #7986cb;
     box-shadow: 0 15px 20px rgba(121, 134, 203, 0.4);
     color: white;

src/components/UI/Timer/Timer.tsx

@@ -1,18 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import { useMatchGame } from '../../../context/MatchGameContext';
-import { getTimeString } from '../../../utils';
+
+import { useMatchGame } from 'context/MatchGameContext';
+import { getTimeString } from 'src/utils';
+
 import cls from './Timer.module.scss'
 
 type TimerProps = {
   startTime: number;
   isStarted: boolean;
   isFinished: boolean;
+  changeTime?: (time: number) => void;
 }
 
-const Timer: React.FC<TimerProps> = ({startTime, isStarted, isFinished}) => {
+const Timer: React.FC<TimerProps> = ({startTime, isStarted, isFinished, changeTime}) => {
   const [time, setTime] = useState(startTime);
   const [timeInterval, setTimeInterval] = useState<NodeJS.Timer | null>(null)
-  const {changeGameTime} = useMatchGame();
 
   useEffect(() => {
     if (!isStarted) return;
@@ -25,7 +27,7 @@ const Timer: React.FC<TimerProps> = ({startTime, isStarted, isFinished}) => {
   }, [isFinished])
 
   useEffect(() => {
-    changeGameTime?.(time);
+    changeTime?.(time);
   }, [time])
 
   return (

src/context/MatchGameContext.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { getTimeString } from '../utils';
+import { getTimeString } from 'src/utils';
 
 type MatchGameContextType = {
   mistakesCount?: number;