chore: merge (#23)

ping-neo-meo-pong · Dec 11, 2022 · 66b049b · 66b049b
2 parents f0e3d72 + 61cb634
commit 66b049b
Show file tree

Hide file tree

Showing 4 changed files with 327 additions and 2 deletions.
diff --git a/backend/src/events/events.gateway.ts b/backend/src/events/events.gateway.ts
@@ -275,6 +275,10 @@ export class EventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
         const user = await this.userRepository.findOneBy({
           id: que.leftUserId,
         });
+        if (user == null) {
+          console.log(`can not find user`);
+          return ;
+        }
         gameQueList.push({ inviterName: user.username, inviterId: user.id });
       }
     }

diff --git a/frontend/components/InviteModal.tsx b/frontend/components/InviteModal.tsx
@@ -0,0 +1,256 @@
+import { socket } from "../lib/socket";
+import { useRouter } from "next/router";
+import { useState, useEffect, useRef } from "react";
+import { Button, Modal, Box, ToggleButtonGroup, ToggleButton, Typography, TextField, Fade } from "@mui/material";
+import BubbleChartIcon from '@mui/icons-material/BubbleChart';
+import CallSplitIcon from '@mui/icons-material/CallSplit';
+import CircularProgress from '@mui/material/CircularProgress';
+
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+export function InviteModal() { ///////////////////////////////////////////////////////////
+  const [open, setOpen] = useState(false);
+  const [finding, setFinding] = useState(false);
+  const [query, setQuery] = useState('idle');
+  const timerRef = useRef<number>();
+
+  const handleClose = () => {
+    if (finding == true) {
+      console.log(`cencel matching`);
+      socket.emit(`cencelMatching`);
+      setFinding(false);
+    }
+    setOpen(false);
+  }
+
+  const [alignment, setAlignment] = useState<string>('NORMAL');
+  const handleAlignment = (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string,
+  ) => {
+    if (newAlignment != null)
+      setAlignment(newAlignment);
+  };
+
+
+  useEffect(
+    () => () => {
+      clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+
+  function onSubmitGameInvite(event: React.FormEvent<HTMLFormElement>) {
+    console.log(`cookie: ${document.cookie}`);
+    console.log(event.currentTarget.userName.value);
+    console.log(finding);
+    event.preventDefault(); // ?
+    setFinding((prevfinding) => !prevfinding);
+    if (finding == false) {
+      if (event.currentTarget.userName.value) {
+        socket.emit(`gameToFriend`, {
+          invitedUserName: event.currentTarget.userName.value,
+          // invitedUserName: "jw",
+          mode: alignment,
+        });
+        socket.off(`gameToFriend`);
+        // router.push(`/matching`);
+      } else {
+        alert(`please input name`);
+      }
+    }
+  }
+
+  const handleClickfinding = () => {
+    setFinding((prevfinding) => !prevfinding);
+  };
+  function GameLoading() {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Box sx={{ height: 40 }}>
+          <Fade
+            in={finding}
+            style={{
+              transitionDelay: finding ? '800ms' : '0ms',
+            }}
+            unmountOnExit
+          >
+            <CircularProgress />
+          </Fade>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <div>
+      <Button variant="contained" onClick={() => { setOpen(true) }}> 게임 초대 </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style} component="form" noValidate onSubmit={onSubmitGameInvite}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Invite User!
+          </Typography>
+
+          <ToggleButtonGroup
+            value={alignment}
+            exclusive
+            onChange={handleAlignment}
+            aria-label="text alignment"
+          >
+            <ToggleButton value="NORMAL" aria-label="NORMAL">
+              NORMAL{' '}
+              <BubbleChartIcon />
+            </ToggleButton>
+            <ToggleButton value="HARD" aria-label="HARD">
+              HARD{' '}
+              <CallSplitIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+          {alignment}
+          <br /><br />
+          <TextField
+            id="userName"
+            name="userName"
+            fullWidth
+            label="userName"
+            variant="outlined"
+            sx={{ mt: 3, mb: 2 }}
+          >
+          </TextField>
+          <Button type="submit" onClick={() => {
+            if (finding == true) {
+              console.log(`cencel matching`);
+              socket.emit(`cencelMatching`);
+            }
+          }} fullWidth variant="contained">
+            {finding ? 'Stop finding' : 'finding'}
+          </Button>
+          <br /><br />
+          <GameLoading />
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
+export function InviteModalWithUserName({ userName }: any) { ///////////////////////////////////////////////////////////
+  const [open, setOpen] = useState(false);
+  const [finding, setFinding] = useState(false);
+  const timerRef = useRef<number>();
+
+  const handleClose = () => {
+    if (finding == true) {
+      console.log(`cencel matching`);
+      socket.emit(`cencelMatching`);
+      setFinding(false);
+    }
+    setOpen(false);
+  }
+  const [alignment, setAlignment] = useState<string>('NORMAL');
+  const handleAlignment = (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string,
+  ) => {
+    if (newAlignment != null)
+      setAlignment(newAlignment);
+  };
+
+  function onClickGameInvite() {
+    console.log(`cookie: ${document.cookie}`);
+    console.log(userName);
+    setFinding((prevfinding) => !prevfinding);
+    if (finding == false) {
+      if (userName) {
+        socket.emit(`gameToFriend`, {
+          invitedUserName: userName,
+          // invitedUserName: "jw",
+          mode: alignment,
+        });
+        socket.off(`gameToFriend`);
+        // router.push(`/matching`);
+      } else {
+        alert(`please input name`);
+      }
+    }
+  }
+  function GameLoading() {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Box sx={{ height: 40 }}>
+          <Fade
+            in={finding}
+            style={{
+              transitionDelay: finding ? '800ms' : '0ms',
+            }}
+            unmountOnExit
+          >
+            <CircularProgress />
+          </Fade>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <div>
+      <Button variant="contained" onClick={() => { setOpen(true) }}> {userName}에게 게임 초대 </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Invite User!
+          </Typography>
+
+          <ToggleButtonGroup
+            value={alignment}
+            exclusive
+            onChange={handleAlignment}
+            aria-label="text alignment"
+          >
+            <ToggleButton value="NORMAL" aria-label="NORMAL">
+              NORMAL{' '}
+              <BubbleChartIcon />
+            </ToggleButton>
+            <ToggleButton value="HARD" aria-label="HARD">
+              HARD{' '}
+              <CallSplitIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+          {alignment}
+          <br /><br />
+          <Button onClick={() => {
+            onClickGameInvite();
+            if (finding == true) {
+              console.log(`cencel matching`);
+              socket.emit(`cencelMatching`);
+            }
+          }} fullWidth variant="contained">
+            {finding ? 'Stop finding' : 'finding'}
+          </Button>
+          <br /><br />
+          <GameLoading />
+        </Box>
+      </Modal>
+    </div>
+  );
+}
diff --git a/frontend/components/Loading.tsx b/frontend/components/Loading.tsx
@@ -0,0 +1,59 @@
+import { socket } from "../lib/socket";
+import { useRouter } from "next/router";
+import { useState, useEffect, useRef } from "react";
+import { Button, Modal, Box, ToggleButtonGroup, ToggleButton, Typography, TextField, Fade } from "@mui/material";
+import CircularProgress from '@mui/material/CircularProgress';
+import BubbleChartIcon from '@mui/icons-material/BubbleChart';
+import CallSplitIcon from '@mui/icons-material/CallSplit';
+
+export function GameRoading() {
+    const [finding, setfinding] = useState(false);
+    const [query, setQuery] = useState('idle');
+    const timerRef = useRef<number>();
+
+    useEffect(
+      () => () => {
+        clearTimeout(timerRef.current);
+      },
+      [],
+    );
+
+    const handleClickfinding = () => {
+      setfinding((prevfinding) => !prevfinding);
+    };
+
+    const handleClickQuery = () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      if (query !== 'idle') {
+        setQuery('idle');
+        return;
+      }
+
+      setQuery('progress');
+      timerRef.current = window.setTimeout(() => {
+        setQuery('success');
+      }, 2000);
+    };
+
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Box sx={{ height: 40 }}>
+          <Fade
+            in={finding}
+            style={{
+              transitionDelay: finding ? '800ms' : '0ms',
+            }}
+            unmountOnExit
+          >
+            <CircularProgress />
+          </Fade>
+        </Box>
+        <Button onClick={handleClickfinding} sx={{ m: 2 }}>
+          {finding ? 'Stop finding' : 'finding'}
+        </Button>
+      </Box>
+    );
+  }
diff --git a/frontend/pages/clients.tsx b/frontend/pages/clients.tsx
@@ -5,6 +5,8 @@ import { user_data } from "./login";
 import { socket, useSocketAuthorization } from "../lib/socket";
 import { logout, getLoginUser } from "../lib/login";
 import Layout from "../components/Layout";
+import { Button } from "@mui/material";
+import {InviteModal, InviteModalWithUserName} from "../components/InviteModal";
 
 export default function Client() {
   useSocketAuthorization();
@@ -14,6 +16,8 @@ export default function Client() {
   useEffect(getDmRooms, [router.isReady]);
   let [gameRoomList, setGameRoomList]: any = useState([]);
   useEffect(getGameRooms, [router.isReady]);
+  let [modal, setModal] = useState(<></>);
+  let [modalOpen, setModalOpen] = useState(false);
 
   console.log("clients page before useEffect");
   useEffect(() => {
@@ -167,10 +171,12 @@ export default function Client() {
       {dmRoomList}
 
       <h1>Game room list</h1>
-      <form onSubmit={onSubmitGameInvite}>
+      <InviteModal />
+      <InviteModalWithUserName userName="jw" />
+      {/* <form onSubmit={onSubmitGameInvite}>
         <button type="submit">create new Game room with </button>
         <input type="text" name="invitedUserId" />
-      </form>
+      </form> */}
       {gameRoomList}
 
       <h1>Random Maching</h1>