update

src/App.css

@@ -33,3 +33,4 @@ tr{
     background: #15ff00;
     box-shadow: -80px 0 0 80px #43e5f7;
   }
+

src/App.jsx

@@ -7,6 +7,7 @@ import { OSC_ADDRESS } from "./utils/constant";
 
 
 const DefaultFadeDuration = 3; // 1 second
+const CLIENT_COUNT=12;
 
 const CueType={
     Bg: 'bg',
@@ -31,11 +32,11 @@ function App() {
   const refNextCue = useRef(null);
 
 
-  function sendOsc(addr, message){
+  function sendOsc(addr, message, id){
 
     invoke('send_osc_message', {
           key: addr,
-          message,
+          message: `${id}#${message}`,
           host:'0.0.0.0:0',
           target:'192.168.234.255:8000',
     });
@@ -97,7 +98,7 @@ function App() {
       }      
 
       if(props.clientCue){
-        sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue);
+        sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue,'all');
       }
 
       if(props.lightCue){
@@ -108,7 +109,7 @@ function App() {
   function stop() {
     console.log('Stop all');
 
-    sendOsc(OSC_ADDRESS.STOPCUE,'');
+    sendOsc(OSC_ADDRESS.STOPCUE,'','all');
     sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
   }
   function secondToTime(seconds) {
@@ -163,9 +164,9 @@ function App() {
   },[]);
 
   return (
-    <main className="container">
+    <main className="overflow-y-auto flex flex-row gap-8 p-4 min-h-screen">
-        <div className="overflow-y-auto flex flex-col gap-8 p-4">
+          <section className="flex flex-col gap-4">
-          <section className="flex flex-row gap-4 justify-between items-center">            
+            <section className="flex flex-row justify-between items-center">            
               <div className="text-6xl p-4 bg-pink-300">{currentCue ? `${currentCue.name}` : 'None'}</div>  
               <p>
                 {timestamp}
@@ -181,7 +182,7 @@ function App() {
                 <span className="text-2xl">{fadeDuration}s</span>
               </span>
             </section>
-          <table className="border-collapse w-full **:p-2 border-green-500 border-4">
+            <table className="border-collapse w-full **:p-1 border-green-500 border-4">
                 <thead className="bg-green-500">
                     <tr className="text-left lowercase font-[900]">
                         {/* <th>ID</th> */}
@@ -200,7 +201,7 @@ function App() {
                             <td className="flex flex-row gap-2">
                                 <button
                                     onClick={()=>{
-                                      playCue({id, name, description, type, auto, audioFile, ...props});
+                                        playCue({id, name, description, type, auto, ...props});
                                     }}>go</button>                          
                                 {type==CueType.Announce && <button
                                     onClick={()=>{
@@ -219,7 +220,7 @@ function App() {
                     ))}
                 </tbody>
             </table>
-
+          </section>
           <table>
             <thead className="bg-blue-500">
               <tr className="text-left lowercase font-[900]">
@@ -231,23 +232,30 @@ function App() {
               </tr>
             </thead>
             <tbody>
-              {Object.entries(clientStatus).map(([id, log])=>(
+              {Array.from(Array(CLIENT_COUNT).keys()).map((i) => {
+                const id=i+1;
+                const log = clientStatus[id];
+                return (
                   <tr key={id} className="text-left lowercase font-[900]">
                     <td className="font-[900]">{id}</td>
-                  <td>{log[0]?.status}</td>
+                    {<>
-                  <td>{log[0]?.name}</td>
+                      <td>{log?.length>0 &&log[0]?.status}</td>
-                  <td>{log[0]?.timestamp}</td>
+                      <td>{log?.length>0 && log[0]?.name}</td>
-                  <td>
+                      <td>{log?.length>0 &&log[0]?.timestamp}</td>
-                    <button>stop</button>
+                    </>}
-                    <button>Q1</button>
+                  <td className="flex flex-row gap-1 p-1">
-                    <button>Q2</button>
+                    <button onClick={()=>sendOsc(OSC_ADDRESS.STOPCUE,'',id)}>stop</button>
-                    <button>Q6</button>
+                    {cuelist?.filter(c=>c.clientCue).map(c=>(
+                      <button key={c.clientCue} onClick={()=>{
+                        sendOsc(OSC_ADDRESS.PLAYCUE, c.clientCue, id);
+                      }}>{c.clientCue}</button>
+                    ))}
                   </td>
                 </tr>
-              ))}
+                );
+              })}
             </tbody>
           </table>
-      </div>
     </main>
   );
 }