Adding tooltip to click-to-copy logic in pre-round component

client/src/components/pre-round.component.jsx

@@ -1,30 +1,68 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 
-const PreRound = ({ gameId, playerName, onStart }) => {
+const ClickToCopy = ({ text }) => {
   const textareaRef = useRef(null);
-  const copyGameId = () => {
+  const [hovered, setHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const copyText = () => {
     textareaRef.current.select();
     document.execCommand("copy");
+    setCopied(true);
   };
 
   return (
-    <div style={{
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-    }}>
-      <span>Playing as {playerName}</span>
-      <span onClick={copyGameId}>Game Code: {gameId} (click to copy)</span>
-      <button onClick={onStart}>Start Game</button>
+    <div
+      style={{
+        position: "relative",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <span
+        style={{ borderBottom: "1px dotted black" }} 
+        onClick={copyText}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => {setHovered(false); setCopied(false)}}
+      >
+        {text}
+      </span>
+      <span
+        style={{
+          display: hovered ? "block" : "none",
+          backgroundColor: "black",
+          color: "#fff",
+          textAlign: "center",
+          padding: "1px 5px",
+          borderRadius: "8px",
+          position: "absolute",
+          zIndex: 1,
+          top: "-100%",
+        }}
+      >
+        {copied ? "Copied!" : "Click to Copy"}
+      </span>
       <textarea
         ref={textareaRef}
         style={{ position: "absolute", top: "-1000px" }}
-        value={gameId}
+        value={text}
         readOnly
       />
     </div>
-  );
+  )
 }
 
+const PreRound = ({ gameId, playerName, onStart }) => (
+  <div style={{
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  }}>
+    <span>Playing as {playerName}</span>
+    <span>Game Code:</span>
+    <ClickToCopy text={gameId} />
+    <button onClick={onStart}>Start Game</button>
+  </div>
+);
+
 export default PreRound;