Update events for contestants and host

src/Contestant.tsx

@@ -11,10 +11,23 @@ const Contestant = () => {
 
   const signature = useAppSelector(selectSignature);
   const [canBuzz, setCanBuzz] = useState<boolean>(false);
+  const [active, setActive] = useState<boolean>(false);
 
   useEffect(() => {
     socket.emit("contestant-join", { room, signature });
     socket.on("clue-clock-on", () => setCanBuzz(true));
+    socket.on("clue-clock-off", () => setCanBuzz(false));
+    socket.on("contestant-buzzed", ({ sid }) => {
+      setCanBuzz(false);
+      if (sid === socket.id) {
+        setActive(true);
+      }
+    });
+    socket.on("contestant-scores", () => setActive(false));
+    socket.on("contestant-penalized", () => {
+      setActive(false);
+      setCanBuzz(true);
+    });
   }, []);
 
   const handleBuzz = debounce(() => {
@@ -30,7 +43,7 @@ const Contestant = () => {
           cx={50}
           cy={50}
           r={30}
-          fill={canBuzz ? "red" : "grey"}
+          fill={active ? "green" : canBuzz ? "red" : "grey"}
           stroke="black"
           onClick={handleBuzz}
         />