From 7b254e7fecd6b5a65e2ce59d04820a42a5cd880a Mon Sep 17 00:00:00 2001
From: Maxim Velesyuk <max.velesyuk@gmail.com>
Date: Sun, 6 Oct 2024 22:15:03 +0200
Subject: [PATCH] Update slider style

---
 src/pages/map/components/MapComponent.tsx     |  1 -
 .../components/timelapse/TimelapseButton.tsx  | 27 +++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/pages/map/components/MapComponent.tsx b/src/pages/map/components/MapComponent.tsx
index 81ccf43d..ffc5f627 100644
--- a/src/pages/map/components/MapComponent.tsx
+++ b/src/pages/map/components/MapComponent.tsx
@@ -258,7 +258,6 @@ export default function MapComponent() {
           <TesterButton player={currentPlayer} freezeDice={setFrozenDice} />
         )}
       </StaticPanel>
-
       <TodaysMoves />
     </Box>
   )
diff --git a/src/pages/map/components/timelapse/TimelapseButton.tsx b/src/pages/map/components/timelapse/TimelapseButton.tsx
index c28f7a95..c2f7fe49 100644
--- a/src/pages/map/components/timelapse/TimelapseButton.tsx
+++ b/src/pages/map/components/timelapse/TimelapseButton.tsx
@@ -47,11 +47,10 @@ export default function TimelapseButton() {
 
   const datePart = currentDate.toISOString().split('T')[0]
 
-  const { data: movesByDay } = useQuery({
-    queryKey: ['timelapse', dateDiff],
-    queryFn: () => fetchMovesByDate(datePart),
-    staleTime: 1000 * 60 * 5,
-  })
+  const handleDateDiffChange = (value: number) => {
+    setDateDiff(value)
+    setMoveId(1)
+  }
 
   if (formState === 'closed') {
     return (
@@ -93,7 +92,9 @@ export default function TimelapseButton() {
             track={false}
             sx={{ margin: 0 }}
             value={dateDiff}
-            onChange={(_, value) => setDateDiff(Math.floor(value as number))}
+            onChange={(_, value) =>
+              handleDateDiffChange(Math.floor(value as number))
+            }
           />
         </Box>
         <Box textAlign="center" display="relative">
@@ -118,9 +119,9 @@ export default function TimelapseButton() {
     )
   }
 
-  const turnMarks = range(0, 20, 1).map((value) => ({
+  const turnMarks = range(1, 21, 1).map((value) => ({
     value,
-    label: (value + 1).toString(),
+    label: value.toString(),
   }))
 
   const nextDay = new Date(currentDate)
@@ -155,7 +156,7 @@ export default function TimelapseButton() {
       >
         <Slider
           min={1}
-          max={turnMarks.length - 0.5}
+          max={turnMarks.length + 0.5}
           step={1}
           marks={turnMarks}
           slots={{
@@ -232,11 +233,13 @@ function CustomMark(props: any) {
     height: '24px',
     // width: '50px',
     color: 'white',
-    top: '-24px',
+    top: '0px',
     position: 'absolute',
     // left: `${index * 2}%`,
   }
 
+  const offsetLeft = index > 9 ? '-6px' : '-3px'
+
   return (
     <div
       style={{
@@ -244,7 +247,9 @@ function CustomMark(props: any) {
         ...baseStyles,
       }}
     >
-      <span>{mark.label}</span>
+      <span style={{ position: 'absolute', top: '-26px', left: offsetLeft }}>
+        {mark.label}
+      </span>
       <div
         style={{
           height: '18px',