add more buttons

thewh1teagle · Nov 19, 2023 · 4388f32 · 4388f32
1 parent dc7ff6b
commit 4388f32
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
 enum Action {
   VOL_UP,
   VOL_DN,
+  PG_UP,
+  PG_DN,
 }
 interface Message {
   action: Action;
@@ -12,9 +14,9 @@ interface Message {
 // 8e25320d-7759-469e-b019-035b48593438
 function App() {
   const params = new URLSearchParams(window.location.search);
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [peer] = useState(new Peer({pingInterval: 1000}));
+  const [peer] = useState(new Peer({ pingInterval: 1000 }));
   const [conn, setConn] = useState<DataConnection | null>(null);
 
   function sendMessage(data: Message) {
@@ -26,7 +28,7 @@ function App() {
     console.log("connecting to ", address);
     peer.on("open", () => {
       const connection = peer.connect(address!);
-      setLoading(false)
+      setLoading(false);
       setConn(connection);
     });
 
@@ -39,7 +41,7 @@ function App() {
         <span className="text-lg font-bold">CONNECTING</span>
         <span className="loading loading-spinner w-[80px]"></span>
       </div>
-    )
+    );
   }
 
   return (
@@ -48,9 +50,7 @@ function App() {
         <div className="flex gap-3 items-center mt-52">
           <button
             className="btn btn-circle w-[100px] h-[100px]"
-            onClick={() => {
-              sendMessage({ action: Action.VOL_UP });
-            }}
+            onClick={() => sendMessage({ action: Action.VOL_UP })}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -69,9 +69,7 @@ function App() {
           </button>
           <button
             className="btn btn-circle w-[80px] h-[80px]"
-            onClick={() => {
-              sendMessage({ action: Action.VOL_DN });
-            }}
+            onClick={() => sendMessage({ action: Action.VOL_DN })}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +88,10 @@ function App() {
           </button>
         </div>
         <div className="flex flex-col gap-5 mt-auto items-center mb-[35%]">
-          <button className="btn btn-circle w-[150px] h-[150px]">
+          <button
+            onClick={() => sendMessage({ action: Action.PG_UP })}
+            className="btn btn-circle w-[150px] h-[150px]"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -106,7 +107,10 @@ function App() {
               />
             </svg>
           </button>
-          <button className="btn btn-circle w-[80px] h-[80px]">
+          <button
+            onClick={() => sendMessage({ action: Action.PG_DN })}
+            className="btn btn-circle w-[80px] h-[80px]"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"