разрешение конфликтов

packages/client/src/components/YandexIcon/YandexIcon.tsx

@@ -0,0 +1,5 @@
+import icon from '@assets/RU.svg'
+export const YandexIcon = () => {
+  return <img src={icon}/>
+
+}

packages/client/src/entry-client.tsx

@@ -14,21 +14,21 @@ declare global {
   }
 }
 
-// window.addEventListener('load', () => {
-//   if ('serviceWorker' in navigator) {
-//     navigator.serviceWorker
-//       .register('/sw.js')
-//       .then(registration => {
-//         console.log(
-//           'ServiceWorker registration successful with scope: ',
-//           registration.scope
-//         )
-//       })
-//       .catch((error: string) => {
-//         console.log('ServiceWorker registration failed: ', error)
-//       })
-//   }
-// })
+window.addEventListener('load', () => {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+      .register('/sw.js')
+      .then(registration => {
+        console.log(
+          'ServiceWorker registration successful with scope: ',
+          registration.scope
+        )
+      })
+      .catch((error: string) => {
+        console.log('ServiceWorker registration failed: ', error)
+      })
+  }
+})
 
 ReactDOM.hydrateRoot(
   document.getElementById('root') as HTMLElement,

packages/client/src/hooks/useAuth.ts

@@ -11,9 +11,9 @@ export const useAuth = () => {
     user.id
       ? navigate('/game/start')
       : dispatch(fetchUser()).then(res => {
-          if (res.type === 'auth/fetch/rejected') {
-            return navigate('/auth')
-          }
-        })
+        if (res.type === 'auth/fetch/rejected') {
+          return navigate('/auth')
+        }
+      })
   }
 }

packages/client/src/hooks/useOAuth.ts

@@ -0,0 +1,23 @@
+import { oauthYandex, fetchUser } from '@store/actions/AuthActionCreators'
+import { useAppDispatch } from '@store/index'
+import { OauthData } from '@store/types'
+
+export const useOAuth = () => {
+  const REDIRECT_URI = 'http://localhost:3000'
+  const dispatch = useAppDispatch()
+  const url = document.location.href
+  const code = url.split('=').pop();
+  return () => {
+    if (/code/.test(url)) {
+      dispatch(oauthYandex({
+        code: code,
+        redirect_uri: REDIRECT_URI
+      } as OauthData))
+        .then(res => {
+          if (res.payload === 'OK') {
+            dispatch(fetchUser())
+          }
+        })
+    }
+  }
+}

packages/client/src/hooks/useRegister.ts

@@ -1,4 +1,4 @@
-import { register } from '../store/actions/AuthActionCreators'
+import {  register } from '../store/actions/AuthActionCreators'
 import { useAppDispatch } from '../store/index'
 import { UserData } from '../store/types'
 import { useNavigate } from 'react-router-dom'

packages/client/src/hooks/useServiceId.tsx

@@ -0,0 +1,17 @@
+import { getServiceId } from "@store/actions/AuthActionCreators"
+import { useAppDispatch } from "@store/index"
+
+export const useServiceId = () => {
+  const dispatch = useAppDispatch()
+  const REDIRECT_URI = 'http://localhost:3000';
+  // const REDIRECT_URI =`http://localhost:${__CLIENT_PORT__}`
+
+  return () => {
+    dispatch(getServiceId())
+      .then(res => {
+        if (res.payload.service_id) {
+          document.location = `https://oauth.yandex.ru/authorize?response_type=code&client_id=${res.payload.service_id}&redirect_uri=${REDIRECT_URI}`
+        }
+      })
+  }
+}

packages/client/src/pages/LoginPage/Login.tsx

@@ -13,19 +13,35 @@ import { useLogin } from '../../hooks/useLogin'
 import { useUser } from '../../hooks/useUser'
 import { fetchUser } from '../../store/actions/UserActionCreators'
 import { useAppDispatch } from '../../store/index'
+import { styled } from '@mui/material/styles'
+import { useServiceId } from '../../hooks/useServiceId'
 
 export default function Login() {
   const user = useUser()
   const dispatch = useAppDispatch()
   const navigate = useNavigate()
   const login = useLogin()
+  const location = useServiceId()
+
+  const YandexIdButton = styled(Button)({
+    color: ' white',
+    width: '100%',
+    height: '44px',
+    backgroundColor: 'black',
+    textTransform: 'none',
+    '&:hover': {
+      backgroundColor: 'black',
+      borderColor: '#0062cc',
+      boxShadow: 'none',
+    },
+  })
 
   useEffect(() => {
-    dispatch(fetchUser())
     if (user.id) {
       navigate('/game/start')
     }
-  }, [navigate, user])
+    dispatch(fetchUser())
+  }, [user.id])
 
   const handleLogin = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
@@ -36,6 +52,7 @@ export default function Login() {
     } as LoginData
     login(authData)
   }
+
 
   return (
     <Box color="primary">
@@ -83,6 +100,13 @@ export default function Login() {
               {' '}
               Войти
             </Button>
+            <Typography component="p" sx={{ textAlign: 'center', fontSize: '12px' }}>
+            или
+          </Typography>
+            <YandexIdButton 
+            onClick={()=>location()}
+            // startIcon={<YandexIcon/>}
+            >Войти c Яндекс ID</YandexIdButton>
             <Stack spacing={2} sx={{ textAlign: 'center' }}>
               <Typography>Еще не зарегистрированы?</Typography>
               <Typography

packages/client/src/pages/game/GamePlay/Board.tsx

@@ -7,6 +7,13 @@ import React, {
   ReactElement,
   memo,
 } from 'react'
+import { useAppDispatch, useAppSelector } from '@store/index'
+import { selectUserData } from '@store/slices/AuthSlice'
+import {
+  fetchLeaderboard,
+  sendDataToLeaderboard,
+} from '@store/actions/RatingActionCreators'
+import { selectRatingData } from '@store/slices/RatingSlice'
 
 import {
   drawCells,
@@ -27,13 +34,25 @@ import {
   drawStatusShips,
   canvasWidth,
   canvasHeight,
+  getStepTimeGame,
+  getStepTimeWorkFun,
 } from './helper'
 
 import { CellArgs, BoardProps } from './types'
 
 let currentPlayer = 'player' //За кем текущий ход
 let timeClickComp = 700 // время реакции компа
 
+let startTime: number; // время начала игры
+let timeHandlePlayer: number; // время обработки функции удара player
+let startTimeGame: number; //время нового отсчета
+let pausePlayer: string; //время раздумий игрока с отработкой клика
+let timeHandleComp: number; // время обработки функции удара
+let pauseComp: string; // // пауза обработки удара compa
+let timeDraw: number; //время работы ф-и по отрисовке
+let pauseWorkFunPlayer: string; //время работы ф-и игрока
+let pauseWorkFunСomp: string; // // время работы ф-и compa
+
 const Board = ({
   name,
   nameBoard,
@@ -42,6 +61,10 @@ const Board = ({
   compShips,
   coords,
 }: BoardProps): ReactElement => {
+  const dispatch = useAppDispatch()
+  const user = useAppSelector(selectUserData)
+  const ratingData = selectRatingData()
+
   const [sunkenShipsPlayer, setSunkenShipsPlayer] = useState<CellArgs[]>([]) //затонувшие корабли player
   const [sunkenShipsComp, setSunkenShipsComp] = useState<CellArgs[]>([]) //затонувшие корабли comp
 
@@ -54,6 +77,56 @@ const Board = ({
   const [countPlayerShips, setCountPlayerShips] = useState(allPlayerShips) //Количество кораблей для уничтожения
   const [countCompShips, setCountCompShips] = useState(allCompShips) //Количество кораблей для уничтожения
 
+  const [playerIsWin, setPlayerIsWin] = useState(false)
+
+  useEffect(() => {
+    dispatch(fetchLeaderboard())
+  }, [])
+
+  useEffect(() => {
+    startTime = Date.now(); //время на старте игры
+  }, []);
+
+
+  useEffect(() => {
+    //для изме-я шага по времени для игрока
+    if (timeHandlePlayer === undefined || timeDraw === undefined) return;
+    if (name === "computer") return;
+
+    pausePlayer = getStepTimeGame(Date.now() - startTime);
+    pauseWorkFunPlayer = getStepTimeWorkFun(timeHandlePlayer, timeDraw);
+
+    startTime = startTimeGame; //для нового отсчета с функции клика компа в конце
+  }, [timeHandlePlayer, name, timeDraw]);
+
+  useEffect(() => {
+    //для изме-я шага по времени для компа
+    if (timeHandleComp === undefined || timeDraw === undefined) return;
+    if (name === "player") return;
+
+    pauseComp = getStepTimeGame(timeClickComp);
+    pauseWorkFunСomp = getStepTimeWorkFun(timeHandleComp, timeDraw);
+  }, [timeHandleComp, name, timeDraw]);
+
+  useEffect(() => {
+    if (playerIsWin && user) {
+      const currentUser = ratingData.find(({ data: { id } }) => id === user.id)
+      const score = (currentUser && currentUser.data.score + 1) ?? 1
+
+      const { avatar, id, display_name } = user
+      dispatch(
+        sendDataToLeaderboard({
+          avatar,
+          id,
+          name: display_name ?? 'anonymous',
+          score,
+        })
+      )
+
+      setPlayerIsWin(false)
+    }
+  }, [playerIsWin, user, ratingData])
+
   const canvasRef: RefObject<HTMLCanvasElement> =
     useRef<HTMLCanvasElement | null>(null)
 
@@ -70,6 +143,8 @@ const Board = ({
     if (countCompShips === 0 || countPlayerShips === 0) return
     if (currentPlayer === name) return //если текущий ход равен глобальному currentPlayer(тек. ход), то ничего не делаем
 
+    const firstNow = performance.now();  
+
     if (currentPlayer === 'computer') {
       const cell = generateRandomCompShot() as CellArgs //рандомная ячейка компа
 
@@ -92,6 +167,12 @@ const Board = ({
         currentPlayer = 'player' //т к ход мимо переход стрельбы
       }
     }
+
+    const secondNow = performance.now();
+    timeHandleComp = secondNow - firstNow; //время работы функции клика компа
+
+    startTimeGame = Date.now(); //начало нового отсчета
+
   }, [
     countPlayerShips,
     countCompShips,
@@ -106,13 +187,30 @@ const Board = ({
 
     const drawGrid = (context: CanvasRenderingContext2D) => {
       //отрисовка сетки, краблей, клеток попадания, клеток мимо
+
+      const firstNow = performance.now();
+
       context.clearRect(0, 0, size, size)
       drawCells({ context, cellSize, dimMatr })
 
-      drawNameBoard(context, nameBoard) //отрисовка названия доски
+        drawNameBoard(
+        context,
+        nameBoard,
+        name,
+        pausePlayer,
+        pauseComp,
+        pauseWorkFunPlayer,
+        pauseWorkFunСomp
+      ); //отрисовка названия доски с добавлением временных шагов
       drawLatterCoords(context, coords.letterCoords) //отрисовка координат букв доски
       drawNumberCoords(context, coords.numberCoords) //отрисовка координат чисел доски
-      drawWhoWin(context, name, countCompShips, countPlayerShips) //who win
+      drawWhoWin(
+        context,
+        name,
+        setPlayerIsWin,
+        countCompShips,
+        countPlayerShips
+      ) //who win
       drawStatusShips(context, name, countCompShips, countPlayerShips) // кол-о к уничтож клеток
 
       drawShips(context, cellSize, playerShips!) //отрисовка караблей
@@ -123,6 +221,9 @@ const Board = ({
 
       drawPastCells(context, cellSize, pastCellsPlayer) //отрис клетки мимо игрока
       drawPastCells(context, cellSize, pastCellsComp) //отрис клетки мимо компа
+
+      const secondNow = performance.now();
+      timeDraw = secondNow - firstNow; //время работы функции draw
     }
 
     if (canvasRef.current) localRef = canvasRef.current
@@ -171,6 +272,8 @@ const Board = ({
     if (countCompShips === 0 || countPlayerShips === 0) return
     if (currentPlayer === name) return //если текущий ход равен глобальному currentPlayer(тек. ход), то ничего не делаем
 
+    const firstNow = performance.now();
+
     if (currentPlayer === 'player') {
       const { offsetX, offsetY } = event.nativeEvent //определяется ячейка по которой кликнул игрок
 
@@ -190,6 +293,9 @@ const Board = ({
         currentPlayer = 'computer' // т к ход мимо переход стрельбы к компу
       }
     }
+
+    const secondNow = performance.now();
+    timeHandlePlayer = secondNow - firstNow; //время работы функции клика игрока
   }
 
   useEffect(