Merge branch 'main' into prod

src/App.tsx

@@ -2,6 +2,7 @@ import { createTheme, CssBaseline, ThemeProvider } from '@mui/material'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import AboutPage from 'pages/about/AboutPage'
 import RulesPage from 'pages/rules/RulesPage'
+import StatsPage from 'pages/stats/StatsPage'
 import React from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import './App.css'
@@ -52,6 +53,14 @@ const router = createBrowserRouter(
         </MainScreen>
       ),
     },
+    {
+      path: '/stats',
+      element: (
+        <MainScreen currentPage="stats">
+          <StatsPage />
+        </MainScreen>
+      ),
+    },
   ],
   { basename: '/' }
 )

src/components/MainMenu.tsx

@@ -78,7 +78,7 @@ export default function MainMenu({ currentPage }: Props) {
             </Button>
           </Link>
 
-          <Link to="#" style={{ marginRight: 10, textDecoration: 'none' }}>
+          <Link to="/stats" style={{ marginRight: 10, textDecoration: 'none' }}>
             <Button
               color={currentPage === 'stats' ? 'primary' : 'info'}
               sx={{ width: '150px' }}

src/components/MainScreen.tsx

@@ -1,17 +1,19 @@
-import { Box } from "@mui/material";
-import { Page } from "utils/types";
-import MainMenu from "./MainMenu";
+import { Box } from '@mui/material'
+import { ScrollRestoration } from 'react-router-dom'
+import { Page } from 'utils/types'
+import MainMenu from './MainMenu'
 
 type Props = {
-  currentPage: Page;
-  children?: React.ReactNode;
-};
+  currentPage: Page
+  children?: React.ReactNode
+}
 
 export default function MainScreen({ children, currentPage }: Props) {
   return (
     <Box>
       <MainMenu currentPage={currentPage} />
       {children}
+      <ScrollRestoration />
     </Box>
-  );
+  )
 }

src/pages/stats/StatsPage.tsx

@@ -0,0 +1,87 @@
+import {
+  Box,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
+import { fetchPlayers, fetchStats } from 'utils/api'
+import { Player } from 'utils/types'
+
+export default function StatsPage() {
+  const { data: playersData } = useQuery({
+    queryKey: ['players'],
+    queryFn: fetchPlayers,
+    staleTime: 1000 * 60 * 1,
+  })
+  const players = playersData?.players
+
+  const { data } = useQuery({
+    queryKey: ['playersStats'],
+    queryFn: fetchStats,
+    staleTime: 1000 * 60 * 1,
+  })
+  const playersStats = data?.players
+
+  if (!playersStats || !players) {
+    return <div>Loading...</div>
+  }
+
+  const playersById = players.reduce(
+    (acc, player) => {
+      acc[player.id] = player
+      return acc
+    },
+    {} as Record<number, Player>
+  )
+
+  const playersStatsByPosition = playersStats.sort(
+    (a, b) => b.map_position - a.map_position
+  )
+
+  return (
+    <Box>
+      <Box textAlign={'center'}>
+        <h2>Лидерборд</h2>
+      </Box>
+      <Box
+        marginTop={2}
+        marginLeft={4}
+        marginRight={4}
+        justifyContent="center"
+        display="flex"
+      >
+        <TableContainer sx={{ width: 'auto' }}>
+          <TableHead>
+            <TableRow>
+              <TableCell>#</TableCell>
+              <TableCell>Участник</TableCell>
+              <TableCell>Позиция на карте</TableCell>
+              <TableCell>Очки</TableCell>
+              <TableCell>Пройдено игр</TableCell>
+              <TableCell>Реролов</TableCell>
+              <TableCell>Просмотрено фильмов</TableCell>
+              <TableCell>Шейх-моментов</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {playersStatsByPosition.map((playerStat, index) => (
+              <TableRow key={index}>
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{playersById[playerStat.id].name}</TableCell>
+                <TableCell>{playerStat.map_position}</TableCell>
+                <TableCell>{0}</TableCell>
+                <TableCell>{playerStat.games_completed}</TableCell>
+                <TableCell>{playerStat.rerolls}</TableCell>
+                <TableCell>{playerStat.movies}</TableCell>
+                <TableCell>{playerStat.sheikh_moments}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableContainer>
+      </Box>
+    </Box>
+  )
+}

src/utils/api.ts

@@ -1,4 +1,4 @@
-import { playerMovesMock, playersMock } from './mocks'
+import { playerMovesMock, playersMock, playerStatsMock } from './mocks'
 import { Player, PlayerMove, PlayerMoveRequest } from './types'
 
 const MOCK_API = process.env.NODE_ENV === 'development'
@@ -51,3 +51,29 @@ export async function fetchCurrentUser(): Promise<CurrentUserIdResponse> {
   }
   return fetch(`/api/get_current_user_id`).then((res) => res.json())
 }
+
+type PlayerStats = {
+  id: number
+  map_position: number
+  total_moves: number
+  games_completed: number
+  games_dropped: number
+  sheikh_moments: number
+  rerolls: number
+  movies: number
+  ladders: number
+  snakes: number
+}
+
+type StatsResponse = {
+  players: Array<PlayerStats>
+}
+
+export async function fetchStats(): Promise<StatsResponse> {
+  if (MOCK_API) {
+    return Promise.resolve({
+      players: playerStatsMock(),
+    })
+  }
+  return fetch(`/api/player_stats`).then((res) => res.json())
+}

src/utils/mocks.ts

@@ -1,4 +1,4 @@
-import { range, sample } from 'lodash'
+import { range, sample, random } from 'lodash'
 import { Player, PlayerMove } from './types'
 
 const playerLasqa: Player = {
@@ -126,3 +126,18 @@ function generateDateRange(startDate: Date, endDate: Date) {
   // Return the array of dates
   return dateArray
 }
+
+export function playerStatsMock() {
+  return playersMock.map((player) => ({
+    id: player.id,
+    map_position: random(1, 101),
+    total_moves: random(1, 100),
+    games_completed: random(1, 30),
+    games_dropped: random(1, 20),
+    sheikh_moments: random(1, 20),
+    rerolls: random(1, 20),
+    movies: random(1, 10),
+    ladders: random(1, 20),
+    snakes: random(1, 20),
+  }))
+}