Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feat] 레이싱 게임 점수 백분위 확인 api 연결 #48

Merged
merged 3 commits into from
Aug 16, 2024
Merged

[Feat] 레이싱 게임 점수 백분위 확인 api 연결 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41efc76
feat: 레이싱 게임 점수 백분위 확인 fetch DTO 구현 (CC-163)
minani-0621 Aug 16, 2024
f8ea748
feat: 레이싱 게임에 상위 백분위 구현 (CC-163)
minani-0621 Aug 16, 2024
229f918
design: 레이싱 게임 CSS 수정 (CC-163)
minani-0621 Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions Caecae/src/components/RacingGame/RacingGame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,21 @@ import {
} from "../../jobs/RacingGame/RacingGameWork.tsx";
import { store, useExistState } from "../../shared/Hyundux/index.tsx";
import Link from "../../shared/Hyunouter/Link.tsx";
import getRacingGameTopRate from "../../stories/getRacingGameTopRate.tsx";

/** 게임 상태에 따라 다르게 보여지는 콘텐츠 */
const gameContent = (
gameStatus: string,
distance: number,
topRate: number | null,
handlePlayGame: () => void,
enterEvent: () => void
) => {
switch (gameStatus) {
case "previous":
case "enterEvent":
return (
<div className="absolute left-[600px] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
<div className="absolute left-[35%] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
<div className="font-bold text-xl mb-2 pr-5 text-[#A8A8A8]">CASPER ELECTRIC</div>
<div className=" text-[44px] mb-2 text-[#666666]">전력으로...!</div>
<div className="mt-5">
Expand All @@ -38,7 +40,7 @@ const gameContent = (
);
case "playing":
return (
<div className="absolute left-[650px] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
<div className="absolute left-[37%] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
<div className="font-bold text-xl mb-2 text-[#A8A8A8]">Game Score</div>
<div className="font-bold mb-2 text-[52px]">{distance.toFixed(3)} KM</div>
<div className="flex flex-row items-center justify-center mt-2">
Expand All @@ -51,14 +53,16 @@ const gameContent = (
);
case "end":
return (
<div className="absolute left-[650px] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
<div className="absolute left-[37%] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
<div className="flex flex-col items-center justify-center">
<div className="font-bold text-xl mb-2 text-[#A8A8A8]">Game Score</div>
<div className="font-bold text-xl mb-1 text-[#A8A8A8]">Game Score</div>
<div className="flex flex-row space-x-2">
<div className="font-bold text-[52px] mb-2">
{distance.toFixed(3)} KM
</div>
<div className="font-bold text-xl text-[#3D3D3D] flex items-end pb-5">상위 1%</div>
<div className="font-bold text-2xl text-[#3D3D3D] flex items-end pb-5 pl-1">
{`상위 ${topRate}%`}
</div>
</div>
</div>
<div className="flex flex-row items-center justify-center mt-2 space-x-4">
Expand Down Expand Up @@ -130,6 +134,7 @@ const RacingGame: React.FC = () => {
const [rearBackgroundWidth, setRearBackgroundWidth] = useState<number>(0);
// const [state, dispatch] = useWork(initRacingGameState, racingGameReducer);
const state = useExistState(initRacingGameState);
const [topRate, setTopRate] = useState<number | null>(null);

/** 모션 값을 사용하여 frontBackground의 x 위치 추적 */
const frontX = useMotionValue(0);
Expand Down Expand Up @@ -242,6 +247,19 @@ const RacingGame: React.FC = () => {
return () => unsubscribeFrontX();
}, [frontX]);

useEffect(() => {
const fetchData = async () => {
try {
const response = await getRacingGameTopRate(state.distance);
setTopRate(Number(response.data.percent.toFixed(3)));
}catch (error) {
console.error("레이싱 게임 점수 백분위 api 연결 에러:", error);
setTopRate(null);
}
};

fetchData();
}, [state.distance]);
return (
<div className="relative w-screen h-screen overflow-hidden">
<motion.div
Expand Down Expand Up @@ -270,7 +288,7 @@ const RacingGame: React.FC = () => {
autoplay={false}
className="absolute top-[485px] left-[250px] w-[350px] h-auto z-[3]"
/>
{gameContent(state.gameStatus, state.distance, handlePlayGame, enterEvent)}
{gameContent(state.gameStatus, state.distance, topRate, handlePlayGame, enterEvent)}
{gameMenu(state.gameStatus)}
</div>
);
Expand Down
16 changes: 16 additions & 0 deletions Caecae/src/stories/getRacingGameTopRate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import huynxios from "../shared/Hyunxios";

interface Response {
responseCode: number;
message: string;
data: Data;
}

interface Data {
percent: number;
}

export default async function getRacingGameTopRate(score: number) {
const response = await huynxios.get<Response>("/api/racing/percent?distance=" + score);
return response;
}
Loading