Skip to content

Commit 65331d3

Browse files
ming-taroming-taro
committed
[ADD] Merge branch 'develop' into ming-taro
2 parents e9b2d1b + 4e33745 commit 65331d3

File tree

11 files changed

+378
-149
lines changed

11 files changed

+378
-149
lines changed

‎package-lock.json

+30
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"history": "^5.3.0",
1818
"jest-canvas-mock": "^2.4.0",
1919
"konva": "^8.4.0",
20+
"moment": "^2.29.4",
2021
"mvp.css": "^1.12.0",
2122
"opencv-react": "^0.0.6",
2223
"react": "^18.2.0",
@@ -31,6 +32,7 @@
3132
"react-router-dom": "^6.6.2",
3233
"react-scripts": "5.0.1",
3334
"react-select": "^5.7.0",
35+
"react-spinners": "^0.13.8",
3436
"react-toastify": "^9.1.1",
3537
"react-webcam": "^7.0.1",
3638
"sass": "^1.57.1",

‎src/game/TwoDecorativeGame.jsx

+47-19
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,19 @@ import TwoGameScreen from "./component/twoplayer/TwoGameScreen.jsx";
44
import OnOff from "./img/on-off-button.png";
55
import StarRain from "./component/effect/StarRain.jsx";
66
import { useNavigate } from "react-router-dom";
7+
import Loading from "./component/loading/Loading";
78

89
import * as constants from "../utils/Constants";
910

1011
import { useLocation } from "react-router-dom";
11-
import { createBrowserHistory } from "history";
12+
import axios from 'axios';
1213

1314

1415
function TwoDecorativeGame() {
1516

1617
const anotherVideoRef = useRef(null);
1718
const otherDrawingRef = useRef(null);
18-
const otherContextRef = useRef(null);
1919
const otherEmojiRef = useRef(null);
20-
const otherEmojiContextRef = useRef(null);
2120

2221

2322
/// 파라미터로 방 코드 받음
@@ -31,17 +30,14 @@ function TwoDecorativeGame() {
3130

3231
const handleResize = () => {
3332
let height = window.innerHeight * constants.TWO_DECORATIVE_GAME_HEIGHT_RATIO;
34-
console.log(height)
35-
3633
setWindowHeight(height);
3734
}
3835

39-
// 모달창 (타이머)
40-
const [isOpen, setIsOpen] = useState(false);
36+
const [isLoading, setIsLoading] = useState(true);
4137

42-
const onClickButton = () => {
43-
setIsOpen(true);
44-
};
38+
const getVideo = (isLoading) => {
39+
console.log(isLoading);
40+
}
4541

4642
// 자식 함수 데려오기
4743
const gameScreenRef = useRef();
@@ -54,15 +50,21 @@ function TwoDecorativeGame() {
5450
const [word, setWord] = useState("Your Word Here!");
5551
// 뒤로가기 버튼 클릭
5652
const [isBackButton, setIsBackButton] = useState(false);
53+
5754
// 상대 이모지 개수 불러오기
5855
const [otherNumber, setOtherNumber] = useState(0);
5956

6057
const getOtherData = (otherNumber) => {
6158
console.log(otherNumber);
6259
}
6360

61+
const onClickedBack = ()=> {
62+
deleteRoom(code);
63+
setIsBackButton(!isBackButton)
64+
}
6465

65-
66+
const otherShapes = useRef([]);
67+
6668
useEffect(() => {
6769

6870
window.addEventListener('resize', handleResize);
@@ -72,6 +74,24 @@ function TwoDecorativeGame() {
7274

7375
}, [])
7476

77+
// 방 나가기 -> 방 삭제
78+
const deleteRoom = (code) => {
79+
axios.post(constants.GAMEROOM_URL + "/delete",
80+
{
81+
code: code,
82+
})
83+
.then((res) => {
84+
85+
if (res.data.result == "FAIL") {
86+
console.log("방 삭제 실패");
87+
}
88+
else {
89+
console.log("방 삭제 성공")
90+
}
91+
})
92+
.catch((Error) => { console.log("에러", Error) })
93+
}
94+
7595
return (
7696
<div className="main-container-decoration-game-two">
7797
<StarRain />
@@ -80,7 +100,7 @@ function TwoDecorativeGame() {
80100
<div className="best-top-left-decoration-game-two">
81101
</div>
82102
<div className="best-top-right-decoration-game-two">
83-
<div className="on-off-button-two-decorative" onClick={()=> { setIsBackButton(!isBackButton)}}>
103+
<div className="on-off-button-two-decorative" onClick={onClickedBack}>
84104
<img className="on-off-image-two-decorative" src={OnOff} alt="END"></img>
85105
</div>
86106
</div>
@@ -115,9 +135,9 @@ function TwoDecorativeGame() {
115135
sender={Math.random().toString(36).substring(2, 11)}
116136
anotherVideoRef={anotherVideoRef}
117137
otherDrawingRef={otherDrawingRef}
118-
otherContextRef={otherContextRef}
119138
otherEmojiRef={otherEmojiRef}
120139
isBackButton = {isBackButton} />
140+
121141
</div>
122142
</div>
123143
</div>
@@ -130,6 +150,7 @@ function TwoDecorativeGame() {
130150

131151
<div className="right-body-container-decoration-game-two">
132152
<div className="body-container-of-right-decoration-game-two">
153+
<Loading loading={isLoading}/>
133154
<div style={{
134155
position: "relative",
135156
height: "100%"
@@ -143,8 +164,15 @@ function TwoDecorativeGame() {
143164
position: "absolute",
144165
width: (window.innerHeight * constants.TWO_DECORATIVE_GAME_HEIGHT_RATIO * (4.0 / 3.0)),
145166
height: windowHeight,
146-
margin: "auto",
167+
marginLeft: "auto",
168+
marginRight: "auto",
169+
top: "0",
170+
left: "0",
171+
right: "0",
172+
textAlign: "center",
147173
zIndex: 1,
174+
width: "100%",
175+
height: "100%",
148176
transform: "scaleX(-1)"
149177
}}
150178
/>
@@ -155,16 +183,16 @@ function TwoDecorativeGame() {
155183
// tabIndex={0}s
156184
//onKeyDown={f1Down}
157185
style={{
158-
// background:"red",
186+
// background: "red",
159187
position: "absolute",
160188
marginLeft: "auto",
161189
marginRight: "auto",
162190
left: "0",
163191
right: "0",
164192
textAlign: "center",
165193
zIndex: 9,
166-
width: "100%",
167-
height: "100%",
194+
width: (window.innerHeight * constants.TWO_DECORATIVE_GAME_HEIGHT_RATIO * (4.0 / 3.0)),
195+
height: windowHeight,
168196
}}>
169197
</canvas>
170198
<canvas
@@ -180,8 +208,8 @@ function TwoDecorativeGame() {
180208
right: "0",
181209
textAlign: "center",
182210
zIndex: 11,
183-
width: "100%",
184-
height: "100%",
211+
width: (window.innerHeight * constants.TWO_DECORATIVE_GAME_HEIGHT_RATIO * (4.0 / 3.0)),
212+
height: windowHeight,
185213
}}>
186214
</canvas>
187215
</div>

‎src/game/TwoGameLobby.jsx

+1-17
Original file line numberDiff line numberDiff line change
@@ -96,23 +96,8 @@ function TwoGameLobby() {
9696
})
9797
.catch((Error) => { console.log("에러", Error) })
9898
}
99-
const deleteRoom = (code) => {
100-
axios.post(constants.GAMEROOM_URL + "/delete",
101-
{
102-
code: code,
103-
})
104-
.then((res) => {
105-
106-
if (res.data.result == "FAIL") {
107-
console.log("방 삭제 실패");
108-
}
109-
else {
110-
console.log("방 삭제 성공")
111-
}
112-
})
113-
.catch((Error) => { console.log("에러", Error) })
114-
}
11599

100+
116101
// 방리스트에서 방 클릭시 방상태 변경
117102
const changeFullState = (code) => {
118103
axios.get(constants.GAMEROOM_URL + `/change/${code}`)
@@ -156,7 +141,6 @@ function TwoGameLobby() {
156141
});
157142
}
158143
changeFullState(inputData[index].code);
159-
deleteRoom(inputData[index].code);
160144
}
161145
else {
162146
// 입장 불가

‎src/game/component/GameScreen.jsx

+40-15
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@ const GameScreen = forwardRef((props, ref) => {
2424
captureImage
2525
}))
2626

27-
const headers = {
28-
'Accept':'application/json',
29-
'Authorization': constants.AUTHORIZATION_IMAGE
30-
};
27+
3128

3229
// 웹캡 변수
3330
const webcamRef = useRef(null);
@@ -66,6 +63,28 @@ const GameScreen = forwardRef((props, ref) => {
6663
let startY;
6764
const shapes = useRef([]); // 이모지 저장소
6865

66+
// const headers = {
67+
// 'Accept': 'application/json',
68+
// 'Authorization': constants.AUTHORIZATION_IMAGE
69+
// };
70+
71+
const [token, setToken] = useState();
72+
73+
// 토큰발급하기
74+
useEffect(() => {
75+
76+
updateToken();
77+
78+
}, [])
79+
const updateToken = async () => {
80+
81+
await axios.get(constants.TOKEN_URL)
82+
.then((res) => {
83+
setToken(res.data["token"])
84+
})
85+
.catch((Error) => { console.log("에러", Error) })
86+
}
87+
6988
// 손그리기 캔버스
7089
useEffect(() => {
7190
let radius = 20;
@@ -122,7 +141,7 @@ const GameScreen = forwardRef((props, ref) => {
122141
windowSize.width * constants.GAME_FRAME_WIDTH_RATIO, windowSize.height * constants.GAME_FRAME_HEIGHT_RATIO); // 프레임 위치 나중에 손 봐야함
123142
};
124143
}, [canvasRef3]);
125-
144+
126145
// 이모지 생성 캔버스
127146
useEffect(() => {
128147
const canvas = canvasRef4.current;
@@ -403,33 +422,39 @@ const GameScreen = forwardRef((props, ref) => {
403422
}
404423

405424
// 이모지 넣어주는 함수
406-
const setEmoji = async(emojiName) => {
425+
const setEmoji = async (emojiName) => {
407426
const canvas = canvasRef4.current;
408427
canvas.width = windowSize.width;
409428
canvas.height = windowSize.height;
410429
const image = new Image();
411-
412-
console.log(emojiName);
413430
await axios.get(
414-
'https://api.flaticon.com/v3/search/icons/{orderBy}?q='+emojiName,
415-
{headers}
431+
'https://api.flaticon.com/v3/search/icons/{orderBy}?q=' + emojiName,
432+
{headers : {
433+
434+
'Accept': 'application/json',
435+
'Authorization': "Bearer " + token
436+
},
437+
}
416438
).then(res => {
417439
console.log(res.data);
418440
var source = res.data.data[2].images[512];
419441
source = source.replace("https://cdn-icons-png.flaticon.com", "");
420442
image.crossOrigin = "anonymous";
421443
image.src = source;
444+
}).catch((error) => {
445+
draw();
446+
props.getWord("Try Again");
422447
})
423-
448+
424449
//image.src = "https://emojiapi.dev/api/v1/" + emojiName + "/" + parseInt(windowSize.width * constants.GAME_EMOJI_RATIO) + ".png";
425450

426451
//image.crossOrigin = "Anonymous";
427452
//image.setAttribute('crossOrigin', '');
428453
//image.crossOrigin="*";
429-
image.onerror = function () {
430-
draw();
431-
props.getWord("Try Again");
432-
}
454+
// image.onerror = function () {
455+
// draw();
456+
// props.getWord("Try Again");
457+
// }
433458

434459
image.onload = function () {
435460
//ctx.drawImage(image, 125, 0);

0 commit comments

Comments
 (0)