From 081f85e2752f00434fbb101666bc3c8758e63024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A4=EC=A4=80=EC=88=98?=
<99115509+hoheesu@users.noreply.github.com>
Date: Fri, 17 Jan 2025 14:37:54 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B0=B0=ED=8F=AC=20=EC=97=90=EB=9F=AC?=
=?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/ui/deck/BackDeck.tsx | 7 ++-
src/components/ui/deck/FrontDeck.tsx | 3 +-
src/components/ui/deck/frontDeckStyle.ts | 14 +++--
src/components/ui/deck/frontDeckprops.d.ts | 1 +
src/pages/game/GameRoom.tsx | 64 ++++++++++++++++++----
5 files changed, 70 insertions(+), 19 deletions(-)
diff --git a/src/components/ui/deck/BackDeck.tsx b/src/components/ui/deck/BackDeck.tsx
index 7442ab0..5288f8a 100644
--- a/src/components/ui/deck/BackDeck.tsx
+++ b/src/components/ui/deck/BackDeck.tsx
@@ -5,6 +5,7 @@ import { useCardIndexStore } from "../../../store/useGuessNumberStore";
interface IBackDeckProps {
isFlipped: boolean;
+ number?: number;
color: string;
cardIndex: number;
myHighlight?: boolean;
@@ -12,8 +13,8 @@ interface IBackDeckProps {
}
export default function BackDeck({
- // isFlipped,
-
+ isFlipped,
+ number,
color,
disabled,
myHighlight,
@@ -33,7 +34,7 @@ export default function BackDeck({
disabled={disabled}
onClick={onClicBackDeck}
>
-
+ {isFlipped ? number : }
);
}
diff --git a/src/components/ui/deck/FrontDeck.tsx b/src/components/ui/deck/FrontDeck.tsx
index 2b4ec7a..39da47e 100644
--- a/src/components/ui/deck/FrontDeck.tsx
+++ b/src/components/ui/deck/FrontDeck.tsx
@@ -4,11 +4,12 @@ export default function FrontDeck({
value,
color,
myHighlight,
+ isFlipped,
}: IFrontDeckProps) {
const underBar = value === 6 || value === 9;
return (
-
+
{value === -1 ? "-" : value}
diff --git a/src/components/ui/deck/frontDeckStyle.ts b/src/components/ui/deck/frontDeckStyle.ts
index 115fd98..a4d85f1 100644
--- a/src/components/ui/deck/frontDeckStyle.ts
+++ b/src/components/ui/deck/frontDeckStyle.ts
@@ -1,6 +1,10 @@
import styled from "styled-components";
-export const cardDeck = styled.div<{ color: string; myHighlight?: boolean }>`
+export const cardDeck = styled.div<{
+ color: string;
+ myHighlight?: boolean;
+ isFlipped: boolean;
+}>`
display: flex;
flex-direction: column;
justify-content: center;
@@ -8,9 +12,11 @@ export const cardDeck = styled.div<{ color: string; myHighlight?: boolean }>`
width: 44px;
height: 90px;
border-radius: 8px;
- border: ${({ myHighlight, color }) =>
- myHighlight
- ? "2px solid red" // highlight가 true일 때 빨간색 테두리
+ border: ${({ myHighlight, color, isFlipped }) =>
+ isFlipped
+ ? "1px solid red"
+ : myHighlight
+ ? "2px solid yellow" // highlight가 true일 때 노란색 테두리
: color === "black"
? "1px solid var(--color-gray-0)"
: "1px solid var(--color-gray-999)"};
diff --git a/src/components/ui/deck/frontDeckprops.d.ts b/src/components/ui/deck/frontDeckprops.d.ts
index 7f36191..36a9e3f 100644
--- a/src/components/ui/deck/frontDeckprops.d.ts
+++ b/src/components/ui/deck/frontDeckprops.d.ts
@@ -2,4 +2,5 @@ interface IFrontDeckProps {
value: number;
color: string;
myHighlight?: boolean;
+ isFlipped: boolean;
}
diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx
index fd29eca..f7548e9 100644
--- a/src/pages/game/GameRoom.tsx
+++ b/src/pages/game/GameRoom.tsx
@@ -66,6 +66,7 @@ interface IFinalHand {
interface IOpponentColor {
color: string;
+ num?: number;
isFlipped: boolean;
}
@@ -101,7 +102,8 @@ interface INowTurn {
interface IDrawCard {
arrangeCard: boolean;
- finalHand: IFinalHand[];
+ finalHand?: IFinalHand[];
+ currentHand?: IFinalHand[];
message: string;
newPosition: number;
newlyDrawn: IFinalHand;
@@ -252,10 +254,7 @@ export default function GameRoom() {
};
const handleOpponentColor = async (data: IOpponentColorArrayRevealed) => {
- console.log(`${JSON.stringify(data)}`);
- console.log("핸들 오포넌트칼라 데이터", data);
const { opponentColorArray } = data;
- console.log(opponentColorArray, "상대 칼라 확인하기");
setOpponentColor(opponentColorArray);
};
@@ -272,12 +271,28 @@ export default function GameRoom() {
const handleDrawCard = async (data: IDrawCard) => {
console.log(`${JSON.stringify(data)}`);
- const { finalHand, message, newPosition, newlyDrawn, arrangeCard } = data;
- setMessage(message);
- setFinalHand(finalHand);
- setNewlyDrawn(newlyDrawn);
- setArrangeCard(arrangeCard);
- setNewPosition(newPosition);
+ const {
+ finalHand,
+ currentHand,
+ message,
+ newPosition,
+ newlyDrawn,
+ arrangeCard,
+ } = data;
+ if (arrangeCard) {
+ setFinalHand(currentHand!);
+ setPossiblePositions(possiblePositions);
+ setJoker(newlyDrawn);
+ setArrangeCard(arrangeCard);
+ setMessage(message);
+ }
+ if (!arrangeCard) {
+ setMessage(message);
+ setFinalHand(finalHand!);
+ setNewlyDrawn(newlyDrawn);
+ setArrangeCard(arrangeCard);
+ setNewPosition(newPosition);
+ }
};
const handleOpponentCard = async (data: IOponnentCard) => {
@@ -299,14 +314,40 @@ export default function GameRoom() {
socket.on("join", handleJoin);
socket.on("leave", handleLeave);
socket.on("ready", handleReady);
+ socket.on("message", (data) => {
+ console.log(data);
+ });
socket.on("gameStart", handleGameStart);
socket.on("handDeck", handleHandDeck);
socket.on("arrangeCard", handleArrangeCard);
socket.on("opponentColorArrayRevealed", handleOpponentColor);
socket.on("nowTurn", handleNowTurn);
socket.on("drawCard", handleDrawCard);
+ socket.on("newlyDrawnArrangementDone", handleDrawCard);
socket.on("opponentCard", handleOpponentCard);
+ socket.on("correctGuess", (data) => {
+ const { opponentFinalHand } = data;
+ setOpponentColor(opponentFinalHand);
+ });
socket.on("wrongGuess", handleWrongGuess);
+ socket.on("yourCardFlipped", (data) => {
+ const { finalHand } = data;
+ setFinalHand(finalHand);
+ });
+ socket.on("cardFlipped", (data) => {
+ const { opponentFinalHand } = data;
+ setOpponentColor(opponentFinalHand);
+ });
+ socket.on("gameOver", (data) => {
+ console.log(data);
+ });
+ socket.on("opponentColorArrayRevealed", (data) => {
+ console.log(data);
+ });
+
+ socket.on("error", (data) => {
+ console.log(data);
+ });
return () => {
socket.disconnect();
@@ -359,6 +400,7 @@ export default function GameRoom() {
isFlipped={deck.isFlipped}
color={deck.color}
cardIndex={index}
+ number={deck.num}
myHighlight={index === opponentIndex}
disabled={userMyId !== turnId}
/>
@@ -378,7 +420,7 @@ export default function GameRoom() {
value={deck.num}
color={deck.color}
myHighlight={index === newPosition}
- // opponentHighlight ={index ===}
+ isFlipped={deck.isFlipped}
/>
{index === finalHand.length - 1 &&
possiblePositions.includes(finalHand.length) && (