show enemy name

traque-front/components/team/enemyTeamModal.jsx

@@ -0,0 +1,32 @@
+import useGame from "@/hook/useGame";
+import { RedButton } from "../util/button";
+import { useEffect, useRef } from "react";
+
+export function EnemyTeamModal({ visible, onClose }) {
+    const { teamId, enemyName } = useGame();
+    const imageRef = useRef(null);
+
+    useEffect(() => {
+        if (visible) {
+            refreshImage();
+        }
+    }, [visible]);
+
+    function refreshImage() {
+        imageRef.current.src = SERVER_URL + "/photo/enemy?team=" + teamId.toString() + "&t=" + new Date().getTime();
+    }
+
+    const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
+    return (visible &&
+        <>
+            <div className='fixed w-screen h-screen bg-black bg-opacity-50 z-10 text-center'></div>
+            <div className='fixed w-11/12 h-5/6 p-5 z-20 mx-auto inset-x-0 my-auto inset-y-0 flex flex-col justify-center rounded-xl transition-all shadow-xl bg-white '>
+                <h1 className="w-full text-center text-3xl mb-5">{enemyName}</h1>
+                <img ref={imageRef} src={SERVER_URL + "/photo/enemy?team=" + teamId.toString()} className='w-full h-full object-contain' />
+                <div className="h-20">
+                    <RedButton onClick={onClose}>Close</RedButton>
+                </div>
+            </div>
+        </>
+    )
+}