Merge branch 'main' into prod

src/App.css

@@ -137,3 +137,7 @@ div.Mui-focused {
   scrollbar-width: auto; /* Makes the scrollbar thinner */
   scrollbar-color: #007aff #0c0c0c; /* Scroll thumb color and track color */
 }
+
+span.MuiSlider-mark {
+  display: none;
+}

src/pages/map/components/MapComponent.tsx

@@ -6,12 +6,14 @@ import { Fragment, useState } from 'react'
 import { createPlayerMove, fetchPlayers } from 'utils/api'
 import { NextTurnParams, Player } from 'utils/types'
 import { cellSize, MainMap } from '../types'
-import ActionButton from './ActionButton'
+import ActionButton from './action/ActionButton'
 import CellItem from './CellItem'
 import MapArrow from './MapArrow'
-import PlayerIcon from './PlayerIcon'
+import PlayerIcon from './player/PlayerIcon'
+import StaticPanel from './StaticPanel'
 import SVGMarkers from './SVGMarkers'
 import TesterButton from './TesterButton'
+import TimelapseButton from './timelapse/TimelapseButton'
 import TodaysMoves from './TodaysMoves'
 import {
   ladders,
@@ -238,18 +240,24 @@ export default function MapComponent() {
             onAnimationEnd={handleAnimationEnd}
           />
         ))}
-      {currentPlayer && (
-        <ActionButton
-          handleNextTurn={handleNextTurn}
-          player={currentPlayer}
-          onMakingTurn={handleMakingTurn}
-          onDiceRoll={handleDiceRoll}
-        />
-      )}
-
-      {currentPlayer && (
-        <TesterButton player={currentPlayer} freezeDice={setFrozenDice} />
-      )}
+      <StaticPanel>
+        {currentPlayer && (
+          <Box marginBottom={'20px'} display="flex" justifyContent="center">
+            <ActionButton
+              handleNextTurn={handleNextTurn}
+              player={currentPlayer}
+              onMakingTurn={handleMakingTurn}
+              onDiceRoll={handleDiceRoll}
+            />
+          </Box>
+        )}
+        <Box display="flex" justifyContent="center">
+          <TimelapseButton />
+        </Box>
+        {currentPlayer && (
+          <TesterButton player={currentPlayer} freezeDice={setFrozenDice} />
+        )}
+      </StaticPanel>
 
       <TodaysMoves />
     </Box>

src/pages/map/components/StaticPanel.tsx

@@ -0,0 +1,57 @@
+import { Box } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+
+type Props = {
+  children: React.ReactNode
+}
+
+export default function StaticPanel({ children }: Props) {
+  const [isFixed, setIsFixed] = useState(true)
+  const [scrollPosition, setScrollPosition] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const position = window.scrollY
+      setScrollPosition(position)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, []) // Empty dependency array ensures the effect runs only on mount and unmount
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const mapBottom = document.getElementById('map-cell-0')
+
+  if (containerRef.current && mapBottom) {
+    const makeFixed =
+      window.innerHeight - mapBottom.getBoundingClientRect().bottom < 295
+
+    if (!makeFixed && isFixed) {
+      setIsFixed(false)
+    }
+
+    if (makeFixed && !isFixed) {
+      setIsFixed(true)
+    }
+  }
+
+  return (
+    <Box display={'flex'} justifyContent="center">
+      <Box
+        paddingLeft={'100px'}
+        paddingRight={'100px'}
+        sx={{
+          position: isFixed ? 'fixed' : 'absolute',
+          zIndex: 20,
+          width: '100%',
+          ...(isFixed ? { bottom: 100 } : { marginTop: '30px' }),
+        }}
+        ref={containerRef}
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}

src/pages/map/components/TesterButton.tsx

@@ -51,20 +51,10 @@ export default function TesterButton({ player, freezeDice }: Props) {
   }
 
   return (
-    <>
-      <Box display={'flex'} justifyContent="center">
-        <Box
-          sx={{
-            position: 'fixed',
-            bottom: 150,
-            zIndex: 20,
-          }}
-        >
-          <Button color="error" onClick={() => setModalOpen(true)}>
-            Для тестов
-          </Button>
-        </Box>
-      </Box>
+    <Box marginTop={'20px'}>
+      <Button color="error" onClick={() => setModalOpen(true)}>
+        Для тестов
+      </Button>
       <Dialog open={modalOpen} onClose={() => setModalOpen(false)}>
         <DialogContent>
           <Box>
@@ -94,6 +84,6 @@ export default function TesterButton({ player, freezeDice }: Props) {
           <Button onClick={() => setModalOpen(false)}>Закрыть</Button>
         </DialogActions>
       </Dialog>
-    </>
+    </Box>
   )
 }

src/pages/map/components/ActionButton.tsx → src/pages/map/components/action/ActionButton.tsx

@@ -1,5 +1,5 @@
-import { Box, Button } from '@mui/material'
-import { useEffect, useRef, useState } from 'react'
+import { Button } from '@mui/material'
+import { useState } from 'react'
 import { DiceOption, NextTurnParams, Player } from 'utils/types'
 import DiceModal from './DiceModal'
 import TurnModal from './TurnModal'
@@ -23,38 +23,6 @@ export default function ActionButton({
   const [dice, setDice] = useState<DiceOption | null>(null)
   const [turnParams, setTurnParams] = useState<NextTurnParams | null>(null)
 
-  const [buttonFixed, setButtonFixed] = useState(true)
-
-  const [scrollPosition, setScrollPosition] = useState(0)
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const position = window.scrollY
-      setScrollPosition(position)
-    }
-
-    window.addEventListener('scroll', handleScroll)
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, []) // Empty dependency array ensures the effect runs only on mount and unmount
-
-  const buttonBoxRef = useRef<HTMLDivElement>(null)
-  const mapBottom = document.getElementById('map-cell-0')
-
-  if (buttonBoxRef.current && mapBottom) {
-    const makeFixed =
-      window.innerHeight - mapBottom.getBoundingClientRect().bottom < 295
-
-    if (!makeFixed && buttonFixed) {
-      setButtonFixed(false)
-    }
-
-    if (makeFixed && !buttonFixed) {
-      setButtonFixed(true)
-    }
-  }
-
   const handleClick = () => {
     setTurnModalOpen(true)
     onMakingTurn(true)
@@ -105,27 +73,15 @@ export default function ActionButton({
 
   return (
     <>
-      <Box display={'flex'} justifyContent="center">
-        <Box
-          sx={{
-            position: buttonFixed ? 'fixed' : 'absolute',
-            zIndex: 20,
-            width: '320px',
-            ...(buttonFixed ? { bottom: 100 } : { marginTop: '30px' }),
-          }}
-          ref={buttonBoxRef}
-        >
-          <Button
-            variant="contained"
-            color="primary"
-            size="large"
-            onClick={handleClick}
-            fullWidth
-          >
-            <strong>Бросить кубик</strong>
-          </Button>
-        </Box>
-      </Box>
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        onClick={handleClick}
+        sx={{ width: '320px' }}
+      >
+        <strong>Бросить кубик</strong>
+      </Button>
       <TurnModal
         open={turnModalOpen}
         onClose={handleClose}

src/pages/map/components/PlayerIcon.tsx → src/pages/map/components/player/PlayerIcon.tsx

@@ -26,9 +26,9 @@ import PlayerGreenMoving from 'assets/map/PlayerGreenMoving.gif'
 import PlayerGreenLightMoving from 'assets/map/PlayerGreenLightMoving.gif'
 import PlayerBrownMoving from 'assets/map/PlayerBrownMoving.gif'
 
-import { cellSize } from '../types'
+import { cellSize } from '../../types'
 import PlayerPopup from './PlayerPopup'
-import { getMapCellById, laddersByCell, snakesByCell } from './utils'
+import { getMapCellById, laddersByCell, snakesByCell } from '../utils'
 import { CircleSharp } from '@mui/icons-material'
 
 const playerIcons: { [key: string]: string } = {