Merge branch 'main' into prod

src/components/MainMenu.tsx

@@ -12,12 +12,14 @@ type Props = {
   currentPage: Page
   replaceMenuButtons?: React.ReactNode
   rightSlot?: React.ReactNode
+  leftSlot?: React.ReactNode
 }
 
 export default function MainMenu({
   currentPage,
   replaceMenuButtons,
   rightSlot,
+  leftSlot,
 }: Props) {
   const { userId } = useUser()
   const { data: playersData } = useQuery({
@@ -72,6 +74,11 @@ export default function MainMenu({
         >
           {replaceMenuButtons || (
             <>
+              {leftSlot && (
+                <Box marginRight={'55px'} position="absolute" right="100%">
+                  {leftSlot}
+                </Box>
+              )}
               <Link to="/" style={{ marginRight: 10 }}>
                 <Button
                   color={currentPage === 'map' ? 'primary' : 'info'}
@@ -127,16 +134,7 @@ export default function MainMenu({
           )}
 
           {rightSlot && (
-            <Box
-              marginLeft={2.5}
-              padding={'10px'}
-              borderRadius="15px"
-              sx={{
-                position: 'absolute',
-                left: '100%',
-                backgroundColor: Color.greyDark,
-              }}
-            >
+            <Box marginLeft={'55px'} position="absolute" left="100%">
               {rightSlot}
             </Box>
           )}

src/components/PlayerCanvasBackground/player-canvas-background.tsx

@@ -1,5 +1,5 @@
 import React, { SVGProps, useEffect, useRef, useState } from 'react'
-import { Box, IconButton } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import {
   CanvasImage,
   PlayerCanvasBackgroundContextProvider,
@@ -8,9 +8,12 @@ import {
 import { useRefDimensions } from './use-ref-dimensions'
 import { ControlButtons } from './ui/control-buttons'
 import { CanvasStage } from './ui/canvas-stage'
-import { Player } from '../../utils/types'
+import { Color, Player } from 'utils/types'
 import { StaticCanvas } from './ui/static-canvas'
 import MainMenu from 'components/MainMenu'
+import PointAucModal from 'pages/player/components/PointAucModal'
+import { useMutation } from '@tanstack/react-query'
+import { resetPointaucToken } from 'utils/api'
 
 function ImageSvg(props: SVGProps<SVGSVGElement>) {
   return (
@@ -42,26 +45,71 @@ function EditModeButton() {
   const { setIsEditMode } = usePlayerCanvasBackgroundContext()
 
   return (
-    <IconButton
-      sx={{ width: 40, height: 40, padding: 0 }}
+    <Button
+      sx={{
+        width: '212px',
+        height: '40px',
+        paddingLeft: '15px',
+        paddingRight: '15px',
+        paddingTop: '10px',
+        paddingBottom: '10px',
+        backgroundColor: Color.blue,
+      }}
       color="info"
       onClick={() => setIsEditMode(true)}
     >
       <ImageSvg />
-    </IconButton>
+      <Box marginLeft={'8px'} />
+      Редактировать
+    </Button>
+  )
+}
+
+function PointAucButton({ onClick }: { onClick: () => void }) {
+  return (
+    <Button
+      sx={{
+        width: '212px',
+        height: '40px',
+        paddingLeft: '15px',
+        paddingRight: '15px',
+        paddingTop: '10px',
+        paddingBottom: '10px',
+        backgroundColor: Color.blue,
+      }}
+      color="info"
+      onClick={() => onClick()}
+    >
+      Привязать PointAuc
+    </Button>
   )
 }
 
 type CanvasContainerProps = {
   width: number
   height: number
   canEdit?: boolean
+  isOwner?: boolean
 }
 
-function CanvasContainer({ canEdit, ...props }: CanvasContainerProps) {
+function CanvasContainer({ canEdit, isOwner, ...props }: CanvasContainerProps) {
   const { images, isEditMode } = usePlayerCanvasBackgroundContext()
   const [imageList, setImageList] = useState<CanvasImage[]>(images)
 
+  const [showPointAucModal, setShowPointAucModal] = useState(false)
+  const resetToken = useMutation({ mutationFn: resetPointaucToken })
+
+  const handleConnectPointAuc = async () => {
+    setShowPointAucModal(false)
+    const { token } = await resetToken.mutateAsync()
+    const url = `https://pointauc.com/?aukus_token=${token}`
+    window.open(url, '_blank')
+  }
+
+  const handlePointAucClick = () => {
+    setShowPointAucModal(true)
+  }
+
   useEffect(() => {
     setImageList(images)
   }, [images, isEditMode])
@@ -71,6 +119,11 @@ function CanvasContainer({ canEdit, ...props }: CanvasContainerProps) {
     editButton = <EditModeButton />
   }
 
+  let pointAucButton = null
+  if (!isEditMode && isOwner) {
+    pointAucButton = <PointAucButton onClick={handlePointAucClick} />
+  }
+
   const controlButtons = isEditMode && (
     <Box sx={{ display: 'flex', gap: 1.5 }}>
       <ControlButtons imageList={imageList} setImageList={setImageList} />
@@ -82,6 +135,7 @@ function CanvasContainer({ canEdit, ...props }: CanvasContainerProps) {
       <MainMenu
         currentPage="player"
         replaceMenuButtons={controlButtons}
+        leftSlot={pointAucButton}
         rightSlot={editButton}
       />
       {isEditMode ? (
@@ -93,6 +147,11 @@ function CanvasContainer({ canEdit, ...props }: CanvasContainerProps) {
       ) : (
         <StaticCanvas />
       )}
+      <PointAucModal
+        open={showPointAucModal}
+        onClose={() => setShowPointAucModal(false)}
+        onAccept={handleConnectPointAuc}
+      />
     </>
   )
 }
@@ -101,9 +160,15 @@ type Props = {
   player: Player
   children: React.ReactNode
   canEdit?: boolean
+  isOwner?: boolean
 }
 
-export function PlayerCanvasBackground({ children, player, canEdit }: Props) {
+export function PlayerCanvasBackground({
+  children,
+  player,
+  canEdit,
+  isOwner,
+}: Props) {
   const containerRef = useRef<HTMLDivElement>(null)
   const dimensions = useRefDimensions(containerRef)
 
@@ -117,7 +182,7 @@ export function PlayerCanvasBackground({ children, player, canEdit }: Props) {
       }}
     >
       <PlayerCanvasBackgroundContextProvider player={player}>
-        <CanvasContainer {...dimensions} canEdit={canEdit} />
+        <CanvasContainer {...dimensions} canEdit={canEdit} isOwner={isOwner} />
       </PlayerCanvasBackgroundContextProvider>
 
       {children}

src/pages/player/components/PlayerContent.tsx

@@ -1,14 +1,13 @@
 import { Box, Button, Typography } from '@mui/material'
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import LinkSpan from 'components/LinkSpan'
 import { useUser } from 'context/UserProvider'
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
-import { fetchPlayerMoves, fetchPlayers, resetPointaucToken } from 'utils/api'
+import { fetchPlayerMoves, fetchPlayers } from 'utils/api'
 import { getPlayerColor } from 'utils/types'
 import { aukus1Games, aukus2Games } from '../data_aukus1'
 import MoveCard from './MoveCard'
-import PointAucModal from './PointAucModal'
 import StreamLink from './StreamLink'
 import { PlayerCanvasBackground } from 'components/PlayerCanvasBackground'
 import OldMoveCard from './OldMoveCard'
@@ -18,7 +17,6 @@ type Props = {}
 export default function PlayerContent(props: Props) {
   const { id: playerHandle } = useParams()
   const [fetchStart] = useState(Date.now())
-  const [showPointAucModal, setShowPointAucModal] = useState(false)
 
   const { userId, role, moderFor } = useUser()
 
@@ -30,8 +28,6 @@ export default function PlayerContent(props: Props) {
   const players = playersData?.players
   const player = players?.find((player) => player.url_handle === playerHandle)
 
-  const resetToken = useMutation({ mutationFn: resetPointaucToken })
-
   const { data: playerMovesData } = useQuery({
     queryKey: ['playerMoves', player?.id || 0],
     queryFn: () => player && fetchPlayerMoves(player.id),
@@ -65,32 +61,18 @@ export default function PlayerContent(props: Props) {
   const aukus1games = aukus1Games[player.url_handle]
   const aukus2games = aukus2Games[player.url_handle]
 
-  const handlePointAucClick = () => {
-    setShowPointAucModal(true)
-  }
-
-  const handleConnectPointAuc = async () => {
-    setShowPointAucModal(false)
-    const { token } = await resetToken.mutateAsync()
-    const url = `https://pointauc.com/?aukus_token=${token}`
-    window.open(url, '_blank')
-  }
-
   return (
     <Box>
-      <PlayerCanvasBackground player={player} canEdit={canEdit}>
+      <PlayerCanvasBackground
+        player={player}
+        canEdit={canEdit}
+        isOwner={isOwner}
+      >
         <Box marginTop={'100px'} position={'relative'} zIndex={5}>
           <Box textAlign={'center'}>
             <Typography fontSize="48px" fontWeight={700}>
               Страница участника {player.name}
             </Typography>
-            {isOwner && (
-              <Box marginTop={'30px'}>
-                <Button color="customOrange" onClick={handlePointAucClick}>
-                  Привязать PointAuc
-                </Button>
-              </Box>
-            )}
             <Box marginTop={'30px'} marginBottom={'50px'}>
               <StreamLink player={player} />
             </Box>
@@ -129,7 +111,9 @@ export default function PlayerContent(props: Props) {
           <Box marginBottom={'50px'} />
 
           {aukus1games.games.map((game, index) => (
-            <OldMoveCard id={index + 1} game={game} />
+            <Fragment key={index}>
+              <OldMoveCard id={index + 1} game={game} />
+            </Fragment>
           ))}
         </Box>
       )}
@@ -149,15 +133,12 @@ export default function PlayerContent(props: Props) {
           <Box marginBottom={'50px'} />
 
           {aukus1games.games.map((game, index) => (
-            <OldMoveCard id={index + 1} game={game} />
+            <Fragment key={index}>
+              <OldMoveCard id={index + 1} game={game} />
+            </Fragment>
           ))}
         </Box>
       )}
-      <PointAucModal
-        open={showPointAucModal}
-        onClose={() => setShowPointAucModal(false)}
-        onAccept={handleConnectPointAuc}
-      />
     </Box>
   )
 }