diff --git a/Caecae/src/components/FindingGame/FindingGame.tsx b/Caecae/src/components/FindingGame/FindingGame.tsx index 72add31..a55576e 100644 --- a/Caecae/src/components/FindingGame/FindingGame.tsx +++ b/Caecae/src/components/FindingGame/FindingGame.tsx @@ -3,7 +3,7 @@ import { action, initFindingGameState, } from "../../jobs/FindingGame/FindingGameWork.tsx"; -import { useEffect } from "react"; +import { useEffect, useRef } from "react"; import LottieContainer from "../common/LottieContainer/index.tsx"; import correctLottie from "@assets/animationCorrect.json"; import wrongLottie from "@assets/animationIncorrect.json"; @@ -18,6 +18,8 @@ const FindingGame = () => { const state = useExistState(initFindingGameState); // const timerId = useRef(null); const [status, teller] = useSaga(); + const pictureWidth = useRef(0); + const pictureHeight = useRef(0); status; useEffect(() => { const getFindGameRunStory = createStory(getFindGameStory, {}); @@ -44,8 +46,8 @@ const FindingGame = () => { y: number, x: number ) => { - width; - heigjht; + pictureWidth.current = width; + pictureHeight.current = heigjht; if (state.gameStatus == "Gaming") { store.dispatch(action.click(y, x, width, heigjht)); } @@ -58,8 +60,8 @@ const FindingGame = () => { if (state.gameStatus == "Gaming") { return ( { const answerElement = state.showingAnswers.map((answer, index) => { if (state.gameStatus == "DoneSuccess" || state.gameStatus == "DoneFail") { - const left = answer.positionX - 50; - const top = answer.positionY - 50; + const left = answer.positionX * pictureWidth.current - 50; + const top = answer.positionY * pictureHeight.current - 50; const rotateRadian = index == 0 ? "-13" : "8"; const bageType = index == 0 ? "orange_line" : "yellow_line"; return ( @@ -100,8 +102,8 @@ const FindingGame = () => { return ( { ticketId: gameState.ticketId, phone: phoneNumber, }); - console.log(response); }} /> }