adds mic mute button

src/App.tsx

@@ -6,6 +6,7 @@ import { Footer } from "./components/Footer";
 import { SessionManager } from "./components/SessionManager";
 import { Game } from "./types/gameTypes";
 import MessageDisplay from "./components/MessageDisplay";
+import TopFixedChips from "./components/TopFixedChips";
 
 export default function App() {
   const [isConnected, setIsConnected] = useState(socket.connected);
@@ -87,6 +88,7 @@ export default function App() {
           setSession={setSession}
         />
       )}
+      <TopFixedChips session={session} />
     </div>
   );
 }

src/components/SessionManager.tsx

@@ -3,7 +3,6 @@ import { socket } from "../socket";
 
 import { ConnectedIndicator, DisconnectedIndicator } from "./Indicators";
 import Button from "../global/Button";
-import VoiceChat from "./VoiceChat";
 
 type SessionManagerProps = {
   isConnected: boolean;
@@ -49,12 +48,7 @@ export const SessionManager: FC<SessionManagerProps> = ({
 
   return (
     <section>
-      <div
+      <div className="w-full h-full absolute top-0 left-0 z-0 bg-teal-500">
-        className="w-full h-full absolute top-0 left-0 z-0"
-        style={{
-          backgroundImage: "linear-gradient(to bottom, #233876, #111827)",
-        }}
-      >
         <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 z-10 relative">
           <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl text-white">
             Skylo
@@ -101,7 +95,6 @@ export const SessionManager: FC<SessionManagerProps> = ({
             <span className="text-gray-200">Game Server: </span>
             {isConnected ? <ConnectedIndicator /> : <DisconnectedIndicator />}
           </div>
-          <VoiceChat session={session} />
         </div>
       </div>
     </section>

src/components/TopFixedChips.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+
+import VoiceChat from "./VoiceChat";
+import RoundChip from "../global/RoundChip";
+
+type TopFixedChipsProps = {
+  session: string;
+};
+
+const TopFixedChips: FC<TopFixedChipsProps> = ({ session }) => {
+  const isActiveSession = session !== "";
+
+  if (!isActiveSession) return null;
+
+  return (
+    <div className="fixed top-0 left-0 flex">
+      <RoundChip description="toggle voice chat">
+        <VoiceChat session={session} />
+      </RoundChip>
+    </div>
+  );
+};
+
+export default TopFixedChips;

src/components/VoiceChat.tsx

@@ -1,6 +1,8 @@
-import { FC, useEffect, useRef } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import { socket } from "../socket";
 
+import HeadsetIcon from "../global/icons/HeadsetIcon";
+
 type VoiceChatProps = {
   session: string;
 };
@@ -18,6 +20,8 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
     iceCandidatePoolSize: 10,
   };
 
+  const [isAudioEnabled, setIsAudioEnabled] = useState(false);
+
   // const localAudioRef = useRef<HTMLAudioElement>(null);
   const remoteAudioRef = useRef<HTMLAudioElement>(null);
 
@@ -135,13 +139,22 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
     console.log("Offer created");
   };
 
+  const disableAudio = () => {
+    pc.current.close();
+    console.log("Audio disabled");
+  };
+
+  const toggleAudio = async () => {
+    isAudioEnabled ? disableAudio() : enableAudio();
+    setIsAudioEnabled((previous) => !previous);
+  };
+
   return (
-    <div style={{ zIndex: 100 }}>
+    <div>
       {/*<audio ref={localAudioRef} autoPlay muted></audio>*/}
       <audio ref={remoteAudioRef} autoPlay></audio>
-
+      <button onClick={toggleAudio}>
-      <button style={{ zIndex: 100 }} onClick={enableAudio}>
+        <HeadsetIcon />
-        Enable Voice Chat
       </button>
     </div>
   );

src/global/Button.tsx

@@ -18,7 +18,7 @@ const Button: FC<ButtonProps> = ({ variant, children, ...rest }) => {
   }
   return (
     <button
-      className="text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
+      className="text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 bg-lime-700 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
       {...rest}
     >
       {children}

src/global/RoundChip.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+type RoundChipProps = {
+  description: string;
+  children: React.ReactNode;
+};
+
+const RoundChip: FC<RoundChipProps> = ({ description, children }) => {
+  return (
+    <span className="inline-flex items-center justify-center w-12 h-12 ml-4 mt-4 text-sm font-semibold rounded-full bg-gray-800 hover:bg-gray-700 text-gray-300">
+      {children}
+      <span className="sr-only">{description}</span>
+    </span>
+  );
+};
+
+export default RoundChip;

src/global/icons/HeadsetIcon.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+
+const HeadsetIcon: FC = () => {
+  return (
+    <svg
+      className="w-6 h-6 text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+    >
+      <path d="M 7.824 5.937 a 1 1 0 0 0 0.726 -0.312 a 2.042 2.042 0 0 1 2.835 -0.065 a 1 1 0 0 0 1.388 -1.441 a 3.994 3.994 0 0 0 -5.674 0.13 a 1 1 0 0 0 0.725 1.688 Z" />
+      <path d="M 17 7 A 7 7 0 1 0 3 7 a 3 3 0 0 0 -3 3 v 2 a 3 3 0 0 0 3 3 h 1 a 1 1 0 0 0 1 -1 V 7 a 5 5 0 1 1 10 0 v 7.083 A 2.92 2.92 0 0 1 12.083 17 H 12 a 2 2 0 0 0 -2 -2 H 9 a 2 2 0 0 0 -2 2 v 1 a 2 2 0 0 0 2 2 h 1 a 1.993 1.993 0 0 0 1.722 -1 h 0.361 a 4.92 4.92 0 0 0 4.824 -4 H 17 a 3 3 0 0 0 3 -3 v -2 a 3 3 0 0 0 -3 -3 Z" />
+      <path d="M 1 19 L 19 0 L 19 1 L 1 20 L 1 19" />
+    </svg>
+  );
+};
+
+export default HeadsetIcon;

tailwind.config.js

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import colors from "tailwindcss/colors";
 export default {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
@@ -16,6 +17,20 @@ export default {
       opacity: {
         95: "0.95",
       },
+      colors: {
+        transparent: "transparent",
+        current: "currentColor",
+        black: colors.black,
+        white: colors.white,
+        emerald: colors.emerald,
+        indigo: colors.indigo,
+        yellow: colors.yellow,
+        stone: colors.stone,
+        sky: colors.sky,
+        neutral: colors.neutral,
+        gray: colors.gray,
+        slate: colors.slate,
+      },
     },
   },
   plugins: [import("flowbite/plugin")],