Skip to content

Commit

Permalink
Merge pull request #73 from Joseonpaldo/minseok
Browse files Browse the repository at this point in the history 
Minseok
  • Loading branch information
@themerous
themerous authored Sep 13, 2024
2 parents 79ba6f8 + 72a1f97 commit 2244864
Show file tree
Hide file tree
Showing 13 changed files with 392 additions and 157 deletions.
Binary file added public/roullte.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions src/components/game/DeleteRoomModal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React from 'react';
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import Button from "@mui/material/Button";

const DeleteRoomModal = ({ open, onClose, confirm }) => {
return (
<Dialog
open={open}
onClose={onClose}
aria-labelledby="invite-dialog-title"
aria-describedby="invite-dialog-description"
PaperProps={{
style: {
borderRadius: '15px',
padding: '20px',
backgroundColor: '#f7f9fc',
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.3)',
},
}}
>
<DialogTitle
id="invite-dialog-title"
sx={{
textAlign: 'center',
color: '#ff6f61',
fontWeight: 'bold',
fontSize: '1.5rem',
borderBottom: '1px solid #ececec',
paddingBottom: '10px',
}}
>
로비를 삭제하시겠습니까?
</DialogTitle>
<DialogContent>
<DialogContentText
id="invite-dialog-description"
sx={{
textAlign: 'center',
color: '#333',
fontSize: '1.2rem',
margin: '20px 0',
}}
>
예를 누를 시 즉시 로비가 삭제됩니다
</DialogContentText>
</DialogContent>
<DialogActions sx={{ justifyContent: 'center' }}>

<Button
color="primary"
onClick={confirm}
variant="contained"
sx={{
backgroundColor: '#ff6f61',
color: '#fff',
'&:hover': {
backgroundColor: '#ff8a65',
},
padding: '8px 20px',
borderRadius: '25px',
fontWeight: 'bold',
}}
>
예
</Button>
<Button
color='secondary'
onClick={onClose}
variant="contained"
sx={{
backgroundColor: '#ff6f61',
color: '#fff',
'&:hover': {
backgroundColor: '#ff8a65',
},
padding: '8px 20px',
borderRadius: '25px',
fontWeight: 'bold',
}}>
아니오
</Button>
</DialogActions>
</Dialog>
);
};

export default DeleteRoomModal;
79 changes: 79 additions & 0 deletions src/components/game/DeleteSuccessModal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@

import React from 'react';
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import Button from "@mui/material/Button";

const DeleteRoomModal = ({ open, onClose, confirm }) => {
const handleClose = (event, reason) => {
if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
onClose(event, reason);
}
};

return (
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="invite-dialog-title"
aria-describedby="invite-dialog-description"
PaperProps={{
style: {
borderRadius: '15px',
padding: '20px',
backgroundColor: '#f7f9fc',
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.3)',
},
}}
>
<DialogTitle
id="invite-dialog-title"
sx={{
textAlign: 'center',
color: '#ff6f61',
fontWeight: 'bold',
fontSize: '1.5rem',
borderBottom: '1px solid #ececec',
paddingBottom: '10px',
}}
>
로비 삭제
</DialogTitle>
<DialogContent>
<DialogContentText
id="invite-dialog-description"
sx={{
textAlign: 'center',
color: '#333',
fontSize: '1.2rem',
margin: '20px 0',
}}
>
성공적으로 삭제했습니다
</DialogContentText>
</DialogContent>
<DialogActions sx={{ justifyContent: 'center' }}>

<Button
color="primary"
onClick={confirm}
variant="contained"
sx={{
backgroundColor: '#ff6f61',
color: '#fff',
'&:hover': {
backgroundColor: '#ff8a65',
},
padding: '8px 20px',
borderRadius: '25px',
fontWeight: 'bold',
}}
>
브라우저 종료
</Button>

</DialogActions>
</Dialog>
);
};

export default DeleteRoomModal;
40 changes: 36 additions & 4 deletions src/components/game/Lobby.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {useParams} from "next/navigation";
import FriendFrom from "@/components/game/FriendFrom";
import InforModal from "@/components/game/InforModal";
import FriendTo from "@/components/game/FriendTo";
import DeleteRoomModal from '@/components/game/DeleteRoomModal';
import DeleteSuccessModal from "@/components/game/DeleteSuccessModal";

const characters = [
{id: 1, src: '/image/character/bear.png', alt: 'Character 1'},
Expand Down Expand Up @@ -75,6 +77,9 @@ const Lobby = () => {

const [roomchecking, setRoomchecking] = useState(false);

//lobby 삭제 useState
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isDeleteSuccessModalOpen, setIsDeleteSuccessModalOpen] = useState(false);

async function getUserData(jwt) {
try {
Expand Down Expand Up @@ -502,6 +507,9 @@ const Lobby = () => {
setShowGameResult(true); // 결과 화면 표시
} else if (message.type === 'END_GAME') {
location.href = `/game/${roomId}`;
} else if (message.type === "DELETE_ROOM"){
//그냥 모달 띄울래
setIsDeleteSuccessModalOpen(true);
}
};

Expand Down Expand Up @@ -552,6 +560,10 @@ const Lobby = () => {
if (userData != null && userData.user_id != null) {
const result = await roomCheck(roomId, userData.user_id);
console.log(result);
if(!result){
alert("존재하지 않는방");
window.close();
}
setRoomchecking(result);
}
};
Expand All @@ -562,7 +574,17 @@ const Lobby = () => {
const deleteRoom= async (roomId, userId) => {
console.log(`/game/room/delete/${roomId}/ ${userId}`);
apiAxiosInstance.delete(`/game/room/delete/${roomId}/ ${userId}`)
.then(res => console.log("일단 요청은 성공적")).catch(error => console.error("방삭제 에러"+error));
.then(res => {
console.log("일단 요청은 성공적");
if(client && client.connected){
client.send(`/app/chat.deleteRoom/${roomId}`, {}, JSON.stringify({
type: 'DELETE_ROOM',
roomId
}));
}
setIsDeleteSuccessModalOpen(true);
})
.catch(error => console.error("방삭제 에러"+error));
}

return (
Expand Down Expand Up @@ -606,13 +628,23 @@ const Lobby = () => {
friendId={sender} // 친구 요청을 보낸 사람의 ID
/>

{/* 방폭파 모달 방장 여기는 아래 모달 실행과 deleteRoom*/}
<DeleteRoomModal
open={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
confirm={() => deleteRoom(roomId, userData.user_id)}
/>



{ /* 방폭파 추방 모달 여기서는 확인 후 window.close*/}
<DeleteSuccessModal
open={isDeleteSuccessModalOpen}
onClose={() => setIsDeleteSuccessModalOpen(false)}
confirm={() => window.close()}
/>

<div className="titleStyle">
{
roomchecking ? <button onClick={()=>deleteRoom(roomId, userData.user_id)}>방 폭파</button> : null
roomchecking ? <button onClick={()=>setIsDeleteModalOpen(true)}>방 폭파</button> : null
}
<h1>{roomName} {players.length}/4</h1>
<button type="button" onClick={() => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/game/YutPan.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1049,7 +1049,7 @@ function YutPan() {
<div className="loader"></div>
</div>
{
showRoulette ? <Roulette client={client} myPlayer={myPlayer}/> : null
showRoulette || (client == null || myPlayer == null) ? <Roulette client={client} myPlayer={myPlayer}/> : null
}
<div style={{
position: "absolute",
Expand Down
35 changes: 21 additions & 14 deletions src/components/game/roulette.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const RouletteBg = styled.div`
const RouletteWacu = styled.div`
width: 100%;
height: 100%;
background: #ffff00 url("https://m.lifeplanet.co.kr:444/commons/slink/administrator/openInnovation/img/MO)%20360%ED%94%8C%EB%9E%98%EB%8B%9B_%EB%A3%B0%EB%A0%9B%ED%8C%90_476x476_201026.png") no-repeat;
background: #ffff00 url("/roullte.png") no-repeat;
background-size: 100%;
transform-origin: center;
transition-timing-function: ease-in-out;
Expand Down Expand Up @@ -111,19 +111,26 @@ const Roulette = ({client, myPlayer}) => {


const alertMessage = (num) => {
switch (num) {
case 1:
alert("당첨!! 스타벅스 아메리카노");
break;
case 3:
alert("당첨!! 햄버거 세트 교환권");
break;
case 5:
alert("당첨!! CU 3,000원 상품권");
break;
default:
alert("꽝! 다음 기회에");
}
// switch (num) {
// case 1:
// alert("1");
// break;
// case 2:
// alert("2");
// break;
// case 3:
// alert("3");
// break;
// case 4:
// alert("4");
// break;
// case 5:
// alert("5");
// break;
// case 6:
// alert("6");
// break;
// }
client.send(
`/app/mini-game/result/${roomId}`,
{
Expand Down
2 changes: 1 addition & 1 deletion src/components/mini-game/Minigame.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Minigame = ({param, roomNumber, javaSocket, player}) => {
const {roomId} = useParams();

React.useEffect(() => {
const soc = io('http://localhost:4000', {
const soc = io('https://joseonpaldo.site', {
path: '/nws'
});
setSocket(soc);
Expand Down
Loading

0 comments on commit 2244864

Please sign in to comment.