Merge pull request #16 from minzero31/jimini

Main develop#8 #14

Author: minzero31

src/img/error.png

@@ -1,13 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Modal from "./Modal";
 import computer from "../img/computer.png";
+import error from "../img/error.png";
 import io from "socket.io-client";
+import pond from "../img/pond.png";
 
 const socket = io("http://172.10.7.127");
 
 const Main = () => {
   const [bombHolder, setBombHolder] = useState(null);
   const [isModalOn, setIsModalOn] = useState(true);
+  const [ready, setReady] = useState(0);
+  const bombHolderRef = useRef(null);
+
+  useEffect(() => {
+    bombHolderRef.current = bombHolder;
+  }, [bombHolder]);
 
   useEffect(() => {
     socket.on("connect", () => {
@@ -19,32 +27,107 @@ const Main = () => {
       console.log("Bomb is with: ", bombHolderId);
     });
 
+    socket.on("ready_count", (count) => {
+      setReady(count);
+      console.log("Ready count is: ", count);
+    });
+
+    socket.on("limit_time", (limitTime) => {
+      setTimeout(() => {
+        if (bombHolderRef.current === socket.id) {
+          alert("You IDIOT!");
+        } else {
+          alert("good");
+        }
+      }, limitTime * 1000);
+    });
+
+    // Main 페이지에 진입할 때 서버로 이벤트 전송
+    socket.emit("enter_game");
+
     return () => {
       socket.off("connect");
       socket.off("bomb");
+      socket.off("ready_count");
+      socket.off("limit_time");
     };
   }, []);
 
+  const ErrorComputer = () => {
+    return (
+      <div style={{ position: "relative" }}>
+        <img
+          style={{ width: "280px" }}
+          onClick={passBomb}
+          src={computer}
+          alt="img"
+        />
+        <img
+          style={{
+            width: "130px",
+            position: "absolute",
+            bottom: 100,
+            left: 68,
+          }}
+          src={error}
+          alt="img"
+        />
+      </div>
+    );
+  };
+
   const passBomb = () => {
-    setBombHolder("other");
-    socket.emit("pass_bomb");
-    console.log("Bomb is passed to the other player!");
+    if (bombHolder === socket.id) {
+      // 폭탄을 소유한 클라이언트만 폭탄을 전달할 수 있음
+      socket.emit("pass_bomb");
+      console.log("Bomb is passed to the other player!");
+    }
   };
 
   return (
-    <div style={{ backgroundColor: "yellow", height: "100vh" }}>
-      <div>Main</div>
-      <div>
-        {bombHolder === socket.id ? <div>내 차례</div> : <div>네 차례</div>}
-      </div>
-      <div>
-        <div>
-          <img style={{ width: "280px" }} onClick={passBomb} src={computer} />
-        </div>
-        <div>
-          <img style={{ width: "280px" }} onClick={passBomb} src={computer} />
+    <div
+      style={{
+        height: "100vh",
+        position: "relative",
+        backgroundColor: "#64A842",
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <div
+          style={{ fontSize: 20, fontWeight: "bolder", backgroundColor: "" }}
+        >
+          {bombHolder === socket.id ? "My Turn" : "Your Turn"}
         </div>
       </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "150px",
+        }}
+      >
+        <img src={pond} alt="img" />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "100%",
+          position: "absolute",
+          bottom: 20,
+        }}
+      >
+        {bombHolder === socket.id ? (
+          <ErrorComputer />
+        ) : (
+          <img
+            style={{ width: "280px" }}
+            onClick={passBomb}
+            src={computer}
+            alt="img"
+          />
+        )}
+      </div>
       {isModalOn ? (
         <div
           style={{
@@ -60,7 +143,11 @@ const Main = () => {
             alignItems: "center",
           }}
         >
-          <Modal state={{ isModalOn, setIsModalOn }} />
+          <Modal
+            modalState={{ isModalOn, setIsModalOn }}
+            readyState={{ ready, setReady }}
+            socket={socket}
+          />
         </div>
       ) : null}
     </div>

src/img/pond.png

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react";
 import caution from "../img/caution.png";
 
-const Modal = ({ state }) => {
-  const { isModalOn, setIsModalOn } = state;
+const Modal = ({ modalState, readyState, socket }) => {
+  const { isModalOn, setIsModalOn } = modalState;
+  const { ready, setReady } = readyState;
   const [countDown, setCountDown] = useState(0);
+  const [click, setClick] = useState(false);
 
   useEffect(() => {
     const countdown = setInterval(() => {
@@ -14,6 +16,13 @@ const Modal = ({ state }) => {
     return () => clearInterval(countdown);
   }, [countDown]);
 
+  useEffect(() => {
+    if (ready === 2) {
+      setCountDown(5);
+      setTimeout(() => setIsModalOn(false), 5000);
+    }
+  }, [ready, setIsModalOn]);
+
   return (
     <div
       style={{
@@ -92,6 +101,18 @@ const Modal = ({ state }) => {
           </div>
         </div>
       )}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          paddingBottom: "15px",
+          fontSize: "15px",
+        }}
+      >
+        <div>
+          Ready <span>{ready}</span>/2
+        </div>
+      </div>
       <div
         style={{
           display: "flex",
@@ -106,16 +127,21 @@ const Modal = ({ state }) => {
             width: "200px",
             height: "35px",
             borderRadius: "20px",
+            backgroundColor: click ? "#F0F0F0" : "white",
             fontSize: "15px",
             border: "none",
             fontWeight: "bold",
           }}
+          disabled={click}
           onClick={() => {
-            setCountDown(5);
-            setTimeout(() => setIsModalOn(false), 5000);
+            setClick(true);
+            socket.emit("ready");
+            setReady(ready + 1);
+            // setCountDown(5);
+            // setTimeout(() => setIsModalOn(false), 5000);
           }}
         >
-          Confirm
+          Ready to Start
         </button>
       </div>
     </div>