Merge pull request #15 from minzero31/jimini

socket 통신#8

Author: minzero31

package-lock.json

@@ -11,6 +11,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.7.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -1,11 +1,50 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Modal from "./Modal";
+import computer from "../img/computer.png";
+import io from "socket.io-client";
+
+const socket = io("http://172.10.7.127");
 
 const Main = () => {
+  const [bombHolder, setBombHolder] = useState(null);
   const [isModalOn, setIsModalOn] = useState(true);
+
+  useEffect(() => {
+    socket.on("connect", () => {
+      console.log("Connected to server");
+    });
+
+    socket.on("bomb", (bombHolderId) => {
+      setBombHolder(bombHolderId);
+      console.log("Bomb is with: ", bombHolderId);
+    });
+
+    return () => {
+      socket.off("connect");
+      socket.off("bomb");
+    };
+  }, []);
+
+  const passBomb = () => {
+    setBombHolder("other");
+    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>
+      </div>
       {isModalOn ? (
         <div
           style={{

src/img/computer.png

@@ -51,9 +51,23 @@ const Modal = ({ state }) => {
         />
       </div>
       {countDown ? (
-        <div style={{ display: "flex" }}>
-          <div>{countDown}</div>
-          <div>s</div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            fontSize: "18px",
+            flexGrow: 0.7,
+            justifyContent: "center",
+            fontWeight: "bold",
+            gap: "20px",
+          }}
+        >
+          <div>게임이 시작됩니다.</div>
+          <div>
+            {countDown}
+            <b>s</b>
+          </div>
         </div>
       ) : (
         <div