init

src/Contestant.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { debounce } from "lodash";
+
+import { socket } from "./socket";
+import { useAppSelector } from "./hooks";
+import { selectCanBuzz, selectSignature } from "./store/contestantSlice";
+
+const Contestant = () => {
+  const { room } = useParams();
+
+  const signature = useAppSelector(selectSignature);
+  const canBuzz = useAppSelector(selectCanBuzz);
+
+  useEffect(() => {
+    socket.emit("contestant-join", { room, signature });
+  }, []);
+  useEffect(() => {
+    if (parent.current) {
+      setWidth(parent.current.getBoundingClientRect().width);
+    }
+  }, [parent]);
+
+  const handleBuzz = debounce(
+    () => {
+      if (canBuzz) {
+        socket.emit("buzz");
+      }
+    },
+    1000,
+    { leading: true, trailing: false }
+  );
+
+  return (
+    <div>
+      <svg viewBox={`0 0 100 100`}>
+        <circle
+          cx={50}
+          cy={50}
+          r={30}
+          fill={canBuzz ? "red" : "grey"}
+          stroke="black"
+          onClick={handleBuzz}
+        />
+        <text x={50} y={50} textAnchor="middle">
+          Buzz
+        </text>
+      </svg>
+    </div>
+  );
+};
+
+export default Contestant;