Merge branch 'main' into prod

src/pages/map/components/MapComponent.tsx

@@ -19,6 +19,7 @@ import useCurrentUser from 'hooks/useCurrentUser'
 import LadderComponent from './Ladder'
 import SnakeComponent from './Snake'
 import SVGMarkers from './SVGMarkers'
+import TesterButton from './TesterButton'
 
 export default function MapComponent() {
   const finishCell = { id: 101, direction: null } as MapCell
@@ -27,6 +28,8 @@ export default function MapComponent() {
   const [closePopups, setClosePopups] = useState(false)
   const [moveSteps, setMoveSteps] = useState(0)
 
+  const [frozenDice, setFrozenDice] = useState<number | null>(null)
+
   const { data: playersData } = useQuery({
     queryKey: ['players'],
     queryFn: fetchPlayers,
@@ -59,28 +62,42 @@ export default function MapComponent() {
       return
     }
 
-    if (currentPlayer.map_position === 101 && params.diceRoll > 0) {
+    const diceRoll = frozenDice || params.diceRoll
+
+    if (currentPlayer.map_position === 101 && diceRoll > 0) {
       // win condition
     }
 
-    const newPosition = getNextPlayerPosition(currentPlayer, params.diceRoll)
+    const currentPosition = currentPlayer.map_position
+
+    const newPosition = getNextPlayerPosition(currentPlayer, diceRoll)
 
     // save player position in API
-    makeMove.mutate({
-      player_id: currentPlayer.id,
-      dice_roll: params.diceRoll,
-      move_to: newPosition,
-      stair_from: params.stairFrom,
-      stair_to: params.stairTo,
-      snake_from: params.snakeFrom,
-      snake_to: params.snakeTo,
-      type: params.type,
-      item_title: params.itemTitle,
-      item_length: params.itemLength,
-      item_rating: params.itemRating,
-      item_review: params.itemReview,
-    })
-    setMoveSteps(params.diceRoll)
+    makeMove.mutate(
+      {
+        player_id: currentPlayer.id,
+        dice_roll: diceRoll,
+        move_to: newPosition,
+        stair_from: params.stairFrom,
+        stair_to: params.stairTo,
+        snake_from: params.snakeFrom,
+        snake_to: params.snakeTo,
+        type: params.type,
+        item_title: params.itemTitle,
+        item_length: params.itemLength,
+        item_rating: params.itemRating,
+        item_review: params.itemReview,
+      },
+      {
+        onSuccess: () => {
+          if (frozenDice) {
+            currentPlayer.map_position = currentPosition
+          }
+        },
+      }
+    )
+
+    setMoveSteps(diceRoll)
   }
 
   const handleAnimationEnd = (player: Player, moves: number) => {
@@ -174,7 +191,11 @@ export default function MapComponent() {
         <ActionButton handleNextTurn={handleNextTurn} player={currentPlayer} />
       )}
 
-      <Box marginTop={20} />
+      {currentPlayer && (
+        <TesterButton player={currentPlayer} freezeDice={setFrozenDice} />
+      )}
+
+      <Box marginTop={30} />
     </Box>
   )
 }

src/pages/map/components/PlayerIcon.tsx

@@ -129,7 +129,7 @@ export default function PlayerIcon({
     if (anchorCell) {
       api.start({ from: { x: 0, y: 0 }, to: { x: 0, y: 0 } })
     }
-  }, [anchorCell, api])
+  }, [anchorCell, api, player.map_position])
 
   useEffect(() => {
     // console.log("updating map position to", player.mapPosition);

src/pages/map/components/TesterButton.tsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Input,
+} from '@mui/material'
+import { useQueryClient } from '@tanstack/react-query'
+import { ChangeEvent, useEffect, useState } from 'react'
+import { createPlayerMove } from 'utils/api'
+import { Player } from 'utils/types'
+
+type Props = {
+  player: Player
+  freezeDice: (value: number) => void
+}
+
+export default function TesterButton({ player, freezeDice }: Props) {
+  const [modalOpen, setModalOpen] = useState(false)
+  const [position, setPosition] = useState(player.map_position)
+  const [diceRoll, setDiceRoll] = useState(1)
+
+  useEffect(() => {
+    setPosition(player.map_position)
+  }, [player.map_position])
+
+  const queryClient = useQueryClient()
+
+  const handleMoveClick = async () => {
+    await createPlayerMove({
+      player_id: player.id,
+      dice_roll: position - player.map_position,
+      move_to: position,
+      stair_from: null,
+      stair_to: null,
+      snake_from: null,
+      snake_to: null,
+      type: 'completed',
+      item_title: 'Test move',
+      item_rating: 0,
+      item_review: '',
+      item_length: 'short',
+    })
+    await queryClient.invalidateQueries()
+  }
+
+  const handleDiceFreze = () => {
+    freezeDice(diceRoll)
+  }
+
+  return (
+    <>
+      <Box display={'flex'} justifyContent="center">
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 150,
+            zIndex: 20,
+          }}
+        >
+          <Button color="error" onClick={() => setModalOpen(true)}>
+            Для тестов
+          </Button>
+        </Box>
+      </Box>
+      <Dialog open={modalOpen} onClose={() => setModalOpen(false)}>
+        <DialogContent>
+          <Box>
+            <Input
+              type="number"
+              placeholder="Позиция"
+              value={position}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                setPosition(parseInt(event.target.value) || 0)
+              }
+            />
+            <Button onClick={handleMoveClick}>Переместить</Button>
+          </Box>
+          <Box>
+            <Input
+              type="number"
+              placeholder="Позиция"
+              value={diceRoll}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                setDiceRoll(parseInt(event.target.value) || 0)
+              }
+            />
+            <Button onClick={handleDiceFreze}>Зафиксировать кубик</Button>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setModalOpen(false)}>Закрыть</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

src/utils/api.ts

@@ -1,4 +1,9 @@
-import { playerMovesMock, playersMock, playerStatsMock } from './mocks'
+import {
+  playerMovesMock,
+  playersMock,
+  playersMockById,
+  playerStatsMock,
+} from './mocks'
 import { Player, PlayerMove, PlayerMoveRequest } from './types'
 
 const MOCK_API = process.env.NODE_ENV === 'development'
@@ -11,6 +16,7 @@ export async function fetchPlayerMoves(
   id: number
 ): Promise<PlayerMovesResponse> {
   if (MOCK_API) {
+    console.log('fetching player moves', id)
     return Promise.resolve({ moves: playerMovesMock() })
   }
   return fetch(`/api/players/${id}`).then((res) => res.json())
@@ -22,14 +28,16 @@ type PlayersResponse = {
 
 export async function fetchPlayers(): Promise<PlayersResponse> {
   if (MOCK_API) {
+    console.log('fetching players')
     return Promise.resolve({ players: playersMock })
   }
   return fetch(`/api/players`).then((res) => res.json())
 }
 
 export async function createPlayerMove(move: PlayerMoveRequest): Promise<void> {
   if (MOCK_API) {
-    playersMock[move.player_id].map_position += move.dice_roll
+    console.log('creating player move', move)
+    playersMockById[move.player_id].map_position = move.move_to
     return Promise.resolve()
   }
   return fetch(`/api/player_move`, {
@@ -47,6 +55,7 @@ type CurrentUserIdResponse = {
 
 export async function fetchCurrentUser(): Promise<CurrentUserIdResponse> {
   if (MOCK_API) {
+    console.log('fetching current user')
     return Promise.resolve({ user_id: playersMock[0].id })
   }
   return fetch(`/api/get_current_user_id`).then((res) => res.json())
@@ -71,6 +80,7 @@ type StatsResponse = {
 
 export async function fetchStats(): Promise<StatsResponse> {
   if (MOCK_API) {
+    console.log('fetching stats')
     return Promise.resolve({
       players: playerStatsMock(),
     })

src/utils/mocks.ts

@@ -41,6 +41,14 @@ export const playersMock = [playerLasqa, playerSegall, playerRoadhouse].sort(
   }
 )
 
+export const playersMockById = playersMock.reduce(
+  (acc, player) => {
+    acc[player.id] = player
+    return acc
+  },
+  {} as Record<number, Player>
+)
+
 const itemReviews: Array<string> = [
   'ПРОЙДЕНО: ИГРУШКА-ПРИКОЛЮХА, ЖАЛЬ ПРИШЛОСЬ РАШИТЬ ',
   'Фильм «Вася не в себе» (2023). Добрая комедия про важность таджиков с Павлом Прилучным. 5/10 ))) ',