From 69c1ca83597fce609cf731730f102521e5b04da7 Mon Sep 17 00:00:00 2001 From: Sergey Krylov Date: Mon, 25 Jul 2022 08:20:35 +0500 Subject: [PATCH] little fixes --- src/App.tsx | 4 ++-- src/components/BottomPanel/BottomPanel.tsx | 11 +++++++---- src/components/Card/Card.module.scss | 1 - src/components/Card/Card.tsx | 5 +++-- src/components/CardsField/CardsField.tsx | 6 ++++-- src/components/FinishedField/FinishedField.tsx | 4 +--- src/components/MatchGame/MatchGame.tsx | 16 +++++++++------- src/components/UI/Button/Button.module.scss | 2 +- src/components/UI/Timer/Timer.tsx | 12 +++++++----- src/context/MatchGameContext.tsx | 2 +- 10 files changed, 35 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 78d8146..53cff46 100644 --- a/src/App.tsx +++ b/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 ( diff --git a/src/components/BottomPanel/BottomPanel.tsx b/src/components/BottomPanel/BottomPanel.tsx index 7d72f7b..f95eecd 100644 --- a/src/components/BottomPanel/BottomPanel.tsx +++ b/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 = (props) => { const [isTimerStarted, setIsTimerStarted] = useState(false); const [isTimerStopped, setIsTimerStopped] = useState(false); const [panelState, setPanelState] = useState('start'); + const {changeGameTime} = useMatchGame(); function onStartBtnClickHandler(event: React.MouseEvent) { setIsTimerStarted(true); @@ -51,7 +54,7 @@ const BottomPanel: React.FC = (props) => { function renderStartStatePanel() { return isTimerStarted - ? + ? : <> diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index 0590320..918eba5 100644 --- a/src/components/Card/Card.module.scss +++ b/src/components/Card/Card.module.scss @@ -40,7 +40,6 @@ } } .backside { - //background: #aee571; transform: rotateY(180deg); font-size: 40px; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 6db3c79..a455cc3 100644 --- a/src/components/Card/Card.tsx +++ b/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 = (props) => { style={{opacity: props.isMatched ? 0 : 1}} onClick={() => cardClickHandler(props.id)} > -
+
{props.title}
{props.title}/ diff --git a/src/components/CardsField/CardsField.tsx b/src/components/CardsField/CardsField.tsx index b7491f0..38175bb 100644 --- a/src/components/CardsField/CardsField.tsx +++ b/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 = { diff --git a/src/components/FinishedField/FinishedField.tsx b/src/components/FinishedField/FinishedField.tsx index e819489..1754a43 100644 --- a/src/components/FinishedField/FinishedField.tsx +++ b/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 = ({mistakesCount, gameTime}) => { - // const {mistakesCount, gameTime} = useMatchGame(); - return (

GAME IS FINISHED !

diff --git a/src/components/MatchGame/MatchGame.tsx b/src/components/MatchGame/MatchGame.tsx index 1588ec4..9e29ffc 100644 --- a/src/components/MatchGame/MatchGame.tsx +++ b/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 diff --git a/src/components/UI/Button/Button.module.scss b/src/components/UI/Button/Button.module.scss index 9e06d60..b771bb6 100644 --- a/src/components/UI/Button/Button.module.scss +++ b/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; diff --git a/src/components/UI/Timer/Timer.tsx b/src/components/UI/Timer/Timer.tsx index fcf38b4..bad859b 100644 --- a/src/components/UI/Timer/Timer.tsx +++ b/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 = ({startTime, isStarted, isFinished}) => { +const Timer: React.FC = ({startTime, isStarted, isFinished, changeTime}) => { const [time, setTime] = useState(startTime); const [timeInterval, setTimeInterval] = useState(null) - const {changeGameTime} = useMatchGame(); useEffect(() => { if (!isStarted) return; @@ -25,7 +27,7 @@ const Timer: React.FC = ({startTime, isStarted, isFinished}) => { }, [isFinished]) useEffect(() => { - changeGameTime?.(time); + changeTime?.(time); }, [time]) return ( diff --git a/src/context/MatchGameContext.tsx b/src/context/MatchGameContext.tsx index d3e5546..19833ff 100644 --- a/src/context/MatchGameContext.tsx +++ b/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;