[Deploy] version 0.0.6

Caecae/package.json

@@ -30,8 +30,10 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "jest": "^29.7.0",
+    "terser-brunch": "^4.1.0",
     "ts-jest": "^29.2.3",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vite-plugin-compression": "^0.5.1"
   }
 }

Caecae/src/components/FindingGame/FindingGame.tsx

@@ -1,55 +1,84 @@
 import PictureGameBoard from "../common/PictureGameBoard/index.tsx";
 import {
   action,
+  genrateFindGameAnswerCheckBodyParameter,
   initFindingGameState,
 } from "../../jobs/FindingGame/FindingGameWork.tsx";
 import { useEffect, useRef } from "react";
 import LottieContainer from "../common/LottieContainer/index.tsx";
 import correctLottie from "@assets/animationCorrect.json";
 import wrongLottie from "@assets/animationIncorrect.json";
 import { store, useExistState } from "../../shared/Hyundux";
-//import HintSpot from "./Hint/HintSpot.tsx";
+import HintSpot from "./Hint/HintSpot.tsx";
 import SmileBadge from "../common/SmileBadge/index.tsx";
 import { createStory } from "../../shared/Hyundux-saga/Story.tsx";
 import useSaga from "../../shared/Hyundux-saga/useSaga.tsx";
-import { getFindGameStory } from "../../stories/getFindingGame.tsx";
+import { getFindGameStory } from "../../stories/FindGame/getFindingGame.tsx";
+import { getFindGameAnswerStory } from "../../stories/FindGame/getFindGameIsAnswer.tsx";
+import { getFindGameHintStory } from "../../stories/FindGame/getFindGameHint.tsx";
 
 const FindingGame = () => {
   const state = useExistState(initFindingGameState);
-  // const timerId = useRef<NodeJS.Timeout | null>(null);
+  const timerId = useRef<NodeJS.Timeout | null>(null);
   const [status, teller] = useSaga();
   const pictureWidth = useRef(0);
   const pictureHeight = useRef(0);
+  const hintTime = 40 * 1000; // 1000ms는 1초
   status;
   useEffect(() => {
     const getFindGameRunStory = createStory(getFindGameStory, {});
-    teller(action.init, [getFindGameRunStory]);
-    // timerId.current = setTimeout(() => {
-    //   store.dispatch(action.showHint());
-    // }, 40000);
+    teller(action.init, getFindGameRunStory);
+    timerId.current = setTimeout(() => {
+      teller(action.showHint, getFindGameHintStory, {
+        answerList: state.showingAnswers.map((answer) => {
+          return { positionX: answer.positionX, positionY: answer.positionY };
+        }),
+      });
+    }, hintTime);
   }, []);
 
-  // useEffect(() => {
-  //   if (state.showingHint.length == 0) {
-  //     if (timerId.current != null) {
-  //       clearInterval(timerId.current);
-  //     }
-  //     timerId.current = setTimeout(() => {
-  //       store.dispatch(action.showHint());
-  //     }, 40000);
-  //   }
-  // }, [state.showingHint]);
+  useEffect(() => {
+    if (timerId.current != null) {
+      clearInterval(timerId.current);
+    }
+    timerId.current = setTimeout(() => {
+      teller(action.showHint, getFindGameHintStory, {
+        answerList: state.showingAnswers.map((answer) => {
+          return { positionX: answer.positionX, positionY: answer.positionY };
+        }),
+      });
+    }, hintTime);
+  }, [state.showingAnswers]);
+
+  useEffect(() => {
+    if (state.showingHint.length == 0) {
+      if (timerId.current != null) {
+        clearInterval(timerId.current);
+      }
+      timerId.current = setTimeout(() => {
+        teller(action.showHint, getFindGameHintStory, {
+          answerList: state.showingAnswers.map((answer) => {
+            return { positionX: answer.positionX, positionY: answer.positionY };
+          }),
+        });
+      }, hintTime);
+    }
+  }, [state.showingHint]);
 
   const onClickAction = (
     width: number,
-    heigjht: number,
+    height: number,
     y: number,
     x: number
   ) => {
     pictureWidth.current = width;
-    pictureHeight.current = heigjht;
+    pictureHeight.current = height;
     if (state.gameStatus == "Gaming") {
-      store.dispatch(action.click(y, x, width, heigjht));
+      teller(
+        action.click,
+        getFindGameAnswerStory,
+        genrateFindGameAnswerCheckBodyParameter(state, y, x, width, height)
+      );
     }
   };
 
@@ -114,18 +143,26 @@ const FindingGame = () => {
     );
   });
 
-  // const showingHintElement = state.showingHint.map((hintAnswer) => {
-  //   return <HintSpot y={hintAnswer.y} x={hintAnswer.x} />;
-  // });
-
+  const showingHintElement = state.showingHint.map((hintAnswer) => {
+    return (
+      <HintSpot
+        y={hintAnswer.positionY * pictureHeight.current}
+        x={hintAnswer.positionX * pictureWidth.current}
+      />
+    );
+  });
   return (
     <div>
       <PictureGameBoard
         imageURL={state.imageURL}
+        setRect={(width, height) => {
+          pictureWidth.current = width;
+          pictureHeight.current = height;
+        }}
         showingElements={[
           ...showingCorrectElements,
           ...showingWrongElement,
-          //...showingHintElement,
+          ...showingHintElement,
           ...answerElement,
         ]}
         onClickAction={onClickAction}