Merge branch 'prod' into test

src/pages/about/components/AboutContent.tsx

@@ -57,10 +57,10 @@ export const Creators = [
     name: 'pechenka242',
     text: 'Аналитик-тестировщик',
   },
-  {
-    name: 'ShiroiKumo',
-    text: 'Тестирование, обсуждение',
-  },
+  // {
+  //   name: 'ShiroiKumo',
+  //   text: 'Тестирование, обсуждение',
+  // },
   {
     name: 'Virtuoz',
     text: 'Обсуждение, идеи',

src/pages/map/components/MapComponent.tsx

@@ -393,7 +393,8 @@ export default function MapComponent() {
   const currentPlayerWinner =
     currentPlayer && winner && currentPlayer.id === winner.id
 
-  const stopActions = showWinScreen || animating || currentPlayerWinner
+  // const stopActions = showWinScreen || animating || currentPlayerWinner
+  const stopActions = animating || currentPlayerWinner
   const showActionButton = currentPlayer && !timelapseEnabled && !stopActions
   const showBigTimelapse = !showActionButton && !timelapseEnabled && !animating
 
@@ -460,7 +461,7 @@ export default function MapComponent() {
                 style={{ marginRight: '10px' }}
               />
               <Box>
-                Можете выдыхать, ивент закончен{' — '}
+                Можете выдыхать, ивент "закончен"{' — '}
                 <Link to={`/players/${topPlayers[0].url_handle}`}>
                   <LinkSpan color={'white'}>{topPlayers[0].name}</LinkSpan>{' '}
                 </Link>
@@ -859,7 +860,7 @@ function getMoveSteps(player: Player, moves: number) {
   return moves
 }
 
-function formatSeconds(timeDiff: number) {
+export function formatSeconds(timeDiff: number) {
   const hours = Math.floor((timeDiff / (60 * 60)) % 24)
   const minutes = Math.floor((timeDiff / 60) % 60)
   const seconds = Math.floor(timeDiff % 60)

src/pages/map/components/MapComponentMobile.tsx

@@ -2,11 +2,32 @@ import { Box } from '@mui/material'
 import TodaysMoves from './TodaysMoves'
 import { fetchPlayers } from 'src/utils/api'
 import { useQuery } from '@tanstack/react-query'
-import { getPlayerColor, Player } from 'src/utils/types'
+import { Color, getPlayerColor, Player } from 'src/utils/types'
 import ImagePlaceholder from 'assets/icons/image_placeholder.svg?react'
 import { Link } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import { getTimeDiffSeconds } from './utils'
+import { formatSecondsToTime } from 'src/pages/player/components/utils'
+import { formatSeconds } from './MapComponent'
+import LinkSpan from 'src/components/LinkSpan'
+
+const WINNER_COUNTDOWN_START = 60 * 60 * 24 * 3
+const WINNER_LAST_MOVE_TIME = '2024-12-16 12:02:12 GMT'
+const Winner = 'krabick'
 
 export default function MapComponentMobile() {
+  const [winnerCountdown, setWinnerCountdown] = useState(WINNER_COUNTDOWN_START)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const timePassed = getTimeDiffSeconds(new Date(), WINNER_LAST_MOVE_TIME)
+      // console.log('time passed', formatSeconds(timePassed))
+      const diff = WINNER_COUNTDOWN_START - timePassed
+      setWinnerCountdown(diff)
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [])
+
   const { data: playersData } = useQuery({
     queryKey: ['players'],
     queryFn: () => fetchPlayers(),
@@ -15,6 +36,8 @@ export default function MapComponentMobile() {
 
   const players = playersData?.players || []
 
+  const winner = players.find((player) => player.url_handle === Winner)
+
   const playersGroupedByMapPosition = players.reduce(
     (acc, player) => {
       const { map_position } = player
@@ -31,8 +54,43 @@ export default function MapComponentMobile() {
     .map(Number)
     .sort((a: number, b: number) => b - a)
 
+  const showWinMessage = winnerCountdown <= 0
+
   return (
     <Box marginTop={'100px'}>
+      <Box
+        display={'flex'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        height={'100%'}
+        marginBottom="50px"
+        fontSize="24px"
+        marginLeft="10px"
+        marginRight="10px"
+        padding="10px"
+        borderRadius="10px"
+        textAlign="center"
+        style={{
+          backgroundColor: Color.greyLight,
+        }}
+      >
+        {showWinMessage && winner ? (
+          <Box>
+            Можете выдыхать, ивент закончен <br />
+            <Link to={`/players/${winner.url_handle}`}>
+              <LinkSpan color={getPlayerColor(winner.url_handle)}>
+                {winner.name}
+              </LinkSpan>
+            </Link>{' '}
+            победил!
+          </Box>
+        ) : (
+          <Box>
+            До конца ивента <br />
+            <span className={'mono'}>{formatSeconds(winnerCountdown)}</span>
+          </Box>
+        )}
+      </Box>
       <Box
         width={'fit-content'}
         margin={'auto'}

src/pages/presentation/PlayerPresentation.tsx

@@ -9,6 +9,8 @@ import MaddysonImage from 'assets/presentation/maddyson.png'
 import UselessMouthImage from 'assets/presentation/uselessmouth.png'
 import SegallImage from 'assets/presentation/segall.png'
 import TimofeyImage from 'assets/presentation/timofey.png'
+import VovapainImage from 'assets/presentation/pain.png'
+import RoadhouseImage from 'assets/presentation/roadhouse.png'
 
 type PlayerContentType = {
   image: string
@@ -35,7 +37,7 @@ const PlayersContent: { [k in PlayerUrl]: PlayerContentType } = {
     funny_title: 'Any% speedrun aukus',
     nomination_title: 'Через тернии звёздам, минуя дропы и змейки',
     image: '',
-    video_link: '/uploads/krabick.mp4',
+    video_link: '/uploads/krabick2.mp4',
   },
   lasqa: {
     funny_title: 'Nolan will stand aside',
@@ -47,13 +49,13 @@ const PlayersContent: { [k in PlayerUrl]: PlayerContentType } = {
     funny_title: 'Men made a promise — the man did',
     nomination_title: 'Мужчина честной судьбы',
     image: MaddysonImage,
-    video_link: '/uploads/maddyson.mp4',
+    video_link: '/uploads/maddyson2.mp4',
   },
   melharucos: {
     funny_title: 'Eternal Tsukuyomi consisting of JRPG',
     nomination_title: 'Преданный фанат восточной культуры',
     image: '',
-    video_link: '/uploads/melharucos.mp4',
+    video_link: '/uploads/melharucos2.mp4',
   },
   praden: {
     funny_title: 'Тихий прохоДэн',
@@ -64,26 +66,26 @@ const PlayersContent: { [k in PlayerUrl]: PlayerContentType } = {
   roadhouse: {
     funny_title: 'Best drift on the map cells',
     nomination_title: 'НУЖНО ПРОСТО ПОДНЯТНЯТЬСЯ (ход на карте: 23 >> 5)',
-    image: '',
-    video_link: '/uploads/roadhouse.mp4',
+    image: RoadhouseImage,
+    video_link: '/uploads/roadhouse2.mp4',
   },
   segall: {
     funny_title: 'Owner of the lucky tickets',
     nomination_title: 'Лучший профессиональный дубляж',
     image: SegallImage,
-    video_link: '/uploads/segall1.mp4',
+    video_link: '/uploads/segall3.mp4',
   },
   timofey: {
     funny_title: "The fastest way to get an undertaker's license",
     nomination_title: 'Лучший гробовщик года',
     image: TimofeyImage,
-    video_link: '/uploads/timofey.mp4',
+    video_link: '/uploads/timofey_new.mp4',
   },
   unclebjorn: {
     funny_title: 'Unlucky in snakes-ladders — lucky in love',
     nomination_title: 'Везунчик наоборот',
-    image: '/uploads/unclebjorn2.mp4',
-    video_link: '',
+    image: '',
+    video_link: '/uploads/unclebjorn3.mp4',
   },
   uselessmouth: {
     funny_title: 'INVISIBLE',
@@ -95,7 +97,7 @@ const PlayersContent: { [k in PlayerUrl]: PlayerContentType } = {
   vovapain: {
     funny_title: 'The road will be mastered by the walking',
     nomination_title: 'Король уличных дорог',
-    image: '',
+    image: VovapainImage,
     video_link: '/uploads/vovapain.mp4',
   },
 }
@@ -110,7 +112,7 @@ export default function PlayerPresentation({ player, place }: Props) {
   const playerContent = PlayersContent[player.url_handle]
 
   return (
-    <Box textAlign="center" marginTop="150px" lineHeight="1.2">
+    <Box textAlign="center" marginTop="150px" lineHeight="1.2" zIndex="20">
       <Box
         fontSize="24px"
         color={playerColor}

src/pages/presentation/PresentationPage.tsx

@@ -1,5 +1,5 @@
 import { Box, Button } from '@mui/material'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { getPlayerColor, PlayerUrl } from 'src/utils/types'
 import Opening from './Opening'
@@ -16,6 +16,26 @@ type PageType = PlayerUrl | 'start' | 'end'
 export default function PresentationPage() {
   const [pageIdx, setPageIdx] = useState<number>(0)
 
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [buttonItem, setButtonItem] = useState<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (buttonRef.current) {
+        setButtonItem(buttonRef.current)
+      }
+    }, 50)
+    return () => clearTimeout(timer)
+  }, [])
+
+  let buttonLeft = null
+  let buttonTop = null
+  if (buttonItem) {
+    const rect = buttonItem.getBoundingClientRect()
+    buttonLeft = rect.left + rect.width / 2
+    buttonTop = rect.top + rect.height / 2
+  }
+
   const { players, scoreByPlayerId, winner } = usePlayersScores()
 
   let playersOrderedByScore = players.sort((a, b) => {
@@ -92,7 +112,17 @@ export default function PresentationPage() {
   return (
     <Box display="flex" justifyContent="center" width="100%">
       <Box width="100%">
-        <Box position="fixed" padding="40px" width="100%" zIndex="10">
+        {currentPlayerColor && buttonTop && buttonLeft && (
+          <Box
+            position="fixed"
+            left={`${buttonLeft - 500}px`}
+            top={`${buttonTop - 500}px`}
+            zIndex={-1}
+          >
+            <StarImage color={currentPlayerColor} />
+          </Box>
+        )}
+        <Box position="fixed" padding="40px" width="100%" zIndex="30">
           <Box
             display="flex"
             justifyContent="space-between"
@@ -120,26 +150,14 @@ export default function PresentationPage() {
               </Link>
             )}
             {showNext ? (
-              <Box position="relative">
-                {currentPlayerColor && (
-                  <Box
-                    position="absolute"
-                    left="-400px"
-                    top="-500px"
-                    zIndex={0}
-                  >
-                    <StarImage color={currentPlayerColor} />
-                  </Box>
-                )}
-
-                <Button
-                  onClick={handleNext}
-                  sx={{ width: '170px', height: '40px' }}
-                  color="customGreyDark"
-                >
-                  Дальше ({pageIdx + 1}/{PAGES_COUNT})
-                </Button>
-              </Box>
+              <Button
+                onClick={handleNext}
+                sx={{ width: '170px', height: '40px' }}
+                color="customGreyDark"
+                ref={buttonRef}
+              >
+                Дальше ({pageIdx + 1}/{PAGES_COUNT})
+              </Button>
             ) : (
               <Box width="170px" />
             )}