Merge branch 'main' into prod

aukus-devs · Sep 12, 2024 · 495694d · 495694d
2 parents dc1c6ce + 958520a
commit 495694d
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 87 deletions.
diff --git a/src/App.css b/src/App.css
@@ -27,30 +27,6 @@ button.MuiButton-root p {
   display: inline;
 }
 
-button.MuiButton-root p.orange {
-  border-bottom: 2px solid #ff8200;
-}
-
-button.MuiButton-root p.purple {
-  border-bottom: 2px solid #a970ff;
-}
-
-button.MuiButton-root p.blue {
-  border-bottom: 2px solid #0077ff;
-}
-
-button.MuiButton-root p.green {
-  border-bottom: 2px solid #2fb350;
-}
-
-button.MuiButton-root p.red {
-  border-bottom: 2px solid #ff3b30;
-}
-
-button.MuiButton-root p.brown {
-  border-bottom: 2px solid #a2845e;
-}
-
 .MuiDialogTitle-root {
   background-color: #222222;
   border-top-left-radius: 20px;
@@ -83,3 +59,27 @@ div.MuiOutlinedInput-root > fieldset {
 label.MuiInputLabel-shrink {
   display: none;
 }
+
+a span.purple {
+  border-bottom: 2px solid #a970ff;
+}
+
+a span.blue {
+  border-bottom: 2px solid #0077ff;
+}
+
+a span.green {
+  border-bottom: 2px solid #2fb350;
+}
+
+a span.orange {
+  border-bottom: 2px solid #ff8200;
+}
+
+a span.red {
+  border-bottom: 2px solid #ff3b30;
+}
+
+a span.brown {
+  border-bottom: 2px solid #a2845e;
+}
diff --git a/src/components/MainMenu.tsx b/src/components/MainMenu.tsx
@@ -23,33 +23,26 @@ export default function MainMenu({ currentPage }: Props) {
 
   return (
     <Box>
-      <Box display="block" textAlign={'center'} marginTop={2} marginBottom={2}>
+      <Box display="block" textAlign={'center'} marginTop={3} marginBottom={2}>
         <Link to={currentPlayer ? `/players/${currentPlayer.url_handle}` : '/'}>
-          <Button variant="text" style={{ backgroundColor: 'transparent' }}>
-            <p
-              className="purple"
-              style={{
-                fontWeight: 'bold',
-                paddingBottom: 0,
-                lineHeight: '1.2',
-              }}
-            >
-              <span
-                style={{
-                  display: 'inline-flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <img
-                  src="/static/logo.png"
-                  alt="logo"
-                  style={{ width: '15px', marginRight: '8px' }}
-                />
-                АУКУС 2024 {currentPlayer && `// ${currentPlayer.name}`}
-              </span>
-            </p>
-          </Button>
+          <span
+            className="purple"
+            style={{
+              fontWeight: 'bold',
+              paddingBottom: 0,
+              lineHeight: '1.2',
+              display: 'inline-flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <img
+              src="/static/logo.png"
+              alt="logo"
+              style={{ width: '15px', marginRight: '8px' }}
+            />
+            АУКУС 2024 {currentPlayer && `// ${currentPlayer.name}`}
+          </span>
         </Link>
       </Box>
       <Box display="flex" justifyContent={'center'} marginBottom={6}>

diff --git a/src/pages/map/components/PlayerIcon.tsx b/src/pages/map/components/PlayerIcon.tsx
@@ -1,5 +1,5 @@
-import { Box, Chip, Paper, Popper } from '@mui/material'
-import { Player } from 'utils/types'
+import { Box, Button, Chip, Paper, Popper } from '@mui/material'
+import { Color, Player } from 'utils/types'
 import { useEffect, useRef } from 'react'
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
@@ -185,23 +185,29 @@ export default function PlayerIcon({
             style={{
               borderRadius: '30px',
               padding: 1,
-              border: `2px solid ${playerColor}`,
+              background: Color.greyLight,
             }}
           >
-            <Box style={{}} padding={2}>
-              Текущая игра: {player.current_game}
-              <br />
-              <Link
-                to={player.stream_link}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Стрим {player.is_online ? 'онлайн' : 'оффлайн'}
+            <Box padding={2}>
+              <Link to={`/players/${player.url_handle}`}>
+                <span className="purple">
+                  <strong>{player.name}</strong>
+                </span>
               </Link>
               <br />
+              <Box marginTop={1}>Игра: {player.current_game}</Box>
               <br />
-              <Link to={`/players/${player.url_handle}`}>Страница игрока</Link>
-              <br />
+              {player.is_online ? (
+                <Link
+                  to={player.stream_link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="green">Смотреть</span>
+                </Link>
+              ) : (
+                'Офлайн'
+              )}
             </Box>
           </Paper>
         </Popper>

diff --git a/src/pages/player/PlayerPage.tsx b/src/pages/player/PlayerPage.tsx
@@ -10,7 +10,7 @@ import {
 } from '@mui/material'
 import { sample } from 'lodash'
 import { Link, useParams } from 'react-router-dom'
-import { PlayerMove } from 'utils/types'
+import { MoveType, PlayerMove } from 'utils/types'
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { fetchPlayerMoves, fetchPlayers } from 'utils/api'
@@ -72,7 +72,7 @@ export default function PlayerPage(props: Props) {
         justifyContent="center"
         display="flex"
       >
-        <TableContainer sx={{ width: 'auto' }}>
+        <TableContainer sx={{ width: '70%' }}>
           <TableHead>
             <TableRow>
               <TableCell>Ход</TableCell>
@@ -86,13 +86,13 @@ export default function PlayerPage(props: Props) {
             </TableRow>
           </TableHead>
           <TableBody>
-            {playerMoves.map((move) => {
+            {playerMoves.map((move, index) => {
               return (
                 <TableRow>
-                  <TableCell>{move.id}</TableCell>
-                  <TableCell>{move.created_at}</TableCell>
+                  <TableCell>{playerMoves.length - index}</TableCell>
+                  <TableCell>{formatDate(move.created_at)}</TableCell>
                   <TableCell>{move.item_title}</TableCell>
-                  <TableCell>{move.type}</TableCell>
+                  <TableCell>{formatMoveType(move.type)}</TableCell>
                   <TableCell>{move.dice_roll}</TableCell>
                   <TableCell>{move.cell_to}</TableCell>
                   <TableCell>{move.item_review}</TableCell>
@@ -106,3 +106,32 @@ export default function PlayerPage(props: Props) {
     </Box>
   )
 }
+
+function formatDate(dateString: string) {
+  // Create a new Date object
+  const date = new Date(dateString)
+
+  // Extract the day, month, and year
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0') // Months are 0-indexed
+  const year = String(date.getFullYear()).slice(-2) // Get last two digits of the year
+
+  // Format the date as dd.mm.yy
+  return `${day}.${month}.${year}`
+}
+
+function formatMoveType(move: MoveType) {
+  switch (move) {
+    case 'completed':
+      return 'Пройдено'
+    case 'drop':
+      return 'Дроп'
+    case 'reroll':
+      return 'Реролл'
+    case 'movie':
+      return 'Фильм'
+    case 'sheikh':
+      return 'Шейх-момент'
+  }
+  return ''
+}
diff --git a/src/pages/players/components/PlayerSection.tsx b/src/pages/players/components/PlayerSection.tsx
@@ -12,24 +12,32 @@ export default function PlayerSection({ player }: Props) {
       <Box textAlign={'left'}>
         <h1>Имя {player.name}</h1>
         <Box height={200} width={300} sx={{ backgroundColor: 'grey' }} />
-        <Box marginTop={1}>
-          <Button variant="text" style={{ backgroundColor: 'transparent' }}>
-            <p className="purple" style={{ lineHeight: '1.2' }}>
-              Twitch
-            </p>
-          </Button>
-          <Button variant="text" style={{ backgroundColor: 'transparent' }}>
-            <p className="blue" style={{ lineHeight: '1.2' }}>
-              VKPlay
-            </p>
-          </Button>
-          <Button variant="text" style={{ backgroundColor: 'transparent' }}>
-            <p className="orange" style={{ lineHeight: '1.2' }}>
-              Донейшн
-            </p>
-          </Button>
+        <Box marginTop={1} marginLeft={1}>
+          <Link
+            to={player.stream_link}
+            target="_blank"
+            rel="noopener nereferrer"
+            style={{ marginRight: 20 }}
+          >
+            <span className="purple">Twitch</span>
+          </Link>
+          <Link
+            to={player.stream_link}
+            target="_blank"
+            rel="noopener nereferrer"
+            style={{ marginRight: 20 }}
+          >
+            <span className="blue">VKPlay</span>
+          </Link>
+          <Link
+            to={player.stream_link}
+            target="_blank"
+            rel="noopener nereferrer"
+          >
+            <span className="orange">Донейшн</span>
+          </Link>
         </Box>
-        <Box textAlign="center" marginTop={1} width="100%">
+        <Box textAlign="center" marginTop={2} width="100%">
           <Link to={`/players/${player.url_handle}`}>
             <Button variant="contained" color="secondary" fullWidth>
               Страница участника