From 4f808506c7267e836c6307ca1e7aa593acc404c5 Mon Sep 17 00:00:00 2001
From: reng <reng@ultracombos.com>
Date: Thu, 28 Aug 2025 15:54:23 +0800
Subject: [PATCH] update

---
 src/App.css |   3 +-
 src/App.jsx | 154 +++++++++++++++++++++++++++-------------------------
 2 files changed, 83 insertions(+), 74 deletions(-)

diff --git a/src/App.css b/src/App.css
index 85464c2..8d69c33 100644
--- a/src/App.css
+++ b/src/App.css
@@ -32,4 +32,5 @@ tr{
     cursor: ew-resize;
     background: #15ff00;
     box-shadow: -80px 0 0 80px #43e5f7;
-  }
\ No newline at end of file
+  }
+
diff --git a/src/App.jsx b/src/App.jsx
index e8255bf..485059c 100644
--- a/src/App.jsx
+++ b/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,63 +164,63 @@ function App() {
   },[]);
 
   return (
-    <main className="container">
-        <div className="overflow-y-auto flex flex-col gap-8 p-4">
-          <section className="flex flex-row gap-4 justify-between items-center">            
-            <div className="text-6xl p-4 bg-pink-300">{currentCue ? `${currentCue.name}` : 'None'}</div>  
-            <p>
-              {timestamp}
-            </p>
-            <button onClick={stop}>stop all</button>
-            <span className="flex flex-col gap-2 items-stretch">
-              <label htmlFor="fade_duration">Fade Duration</label>
-              <input type="range" id="fade_duration" min="0" max="30" step="0.1" defaultValue={DefaultFadeDuration} className="slider"
-                onChange={(e) => {
-                    const value = parseFloat(e.target.value);
-                    setFadeDuration(value);
-                }}></input>
-              <span className="text-2xl">{fadeDuration}s</span>
-            </span>
+    <main className="overflow-y-auto flex flex-row gap-8 p-4 min-h-screen">
+          <section className="flex flex-col gap-4">
+            <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}
+              </p>
+              <button onClick={stop}>stop all</button>
+              <span className="flex flex-col gap-2 items-stretch">
+                <label htmlFor="fade_duration">Fade Duration</label>
+                <input type="range" id="fade_duration" min="0" max="30" step="0.1" defaultValue={DefaultFadeDuration} className="slider"
+                  onChange={(e) => {
+                      const value = parseFloat(e.target.value);
+                      setFadeDuration(value);
+                  }}></input>
+                <span className="text-2xl">{fadeDuration}s</span>
+              </span>
+            </section>
+            <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> */}
+                        <th></th>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Type</th>
+                        <th>Auto</th>
+                        <th>Due | Light | Audio</th>
+                        <th>clientCue</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {cuelist?.map(({id, name, description, type, auto,...props}, index) => (
+                        <tr key={id} className={currentCue?.id === id ? 'bg-green-200' : ''}>
+                            <td className="flex flex-row gap-2">
+                                <button
+                                    onClick={()=>{
+                                        playCue({id, name, description, type, auto, ...props});
+                                    }}>go</button>                          
+                                {type==CueType.Announce && <button
+                                    onClick={()=>{
+                                        if(props.audioCue){
+                                          sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
+                                        }
+                                    }}>stop</button>}
+                            </td>
+                            <td>{name}</td>
+                            <td>{description}</td>
+                            <td>{EmojiType[type]}</td>
+                            <td>{auto ? '⤵️' : ''}</td>
+                            <td>{props.duration} {props.lightCue && `L${props.lightCue}`} {props.audioCue && `S${props.audioCue}`}</td>
+                            <td className={`${props.clientCue&& 'bg-green-300 rounded-full text-center font-[900]'}`}>{props.clientCue || ''}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
           </section>
-          <table className="border-collapse w-full **:p-2 border-green-500 border-4">
-              <thead className="bg-green-500">
-                  <tr className="text-left lowercase font-[900]">
-                      {/* <th>ID</th> */}
-                      <th></th>
-                      <th>Name</th>
-                      <th>Description</th>
-                      <th>Type</th>
-                      <th>Auto</th>
-                      <th>Due | Light | Audio</th>
-                      <th>clientCue</th>
-                  </tr>
-              </thead>
-              <tbody>
-                  {cuelist?.map(({id, name, description, type, auto,...props}, index) => (
-                      <tr key={id} className={currentCue?.id === id ? 'bg-green-200' : ''}>
-                          <td className="flex flex-row gap-2">
-                              <button
-                                  onClick={()=>{
-                                      playCue({id, name, description, type, auto, audioFile, ...props});
-                                  }}>go</button>                          
-                              {type==CueType.Announce && <button
-                                  onClick={()=>{
-                                      if(props.audioCue){
-                                        sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
-                                      }
-                                  }}>stop</button>}
-                          </td>
-                          <td>{name}</td>
-                          <td>{description}</td>
-                          <td>{EmojiType[type]}</td>
-                          <td>{auto ? '⤵️' : ''}</td>
-                          <td>{props.duration} {props.lightCue && `L${props.lightCue}`} {props.audioCue && `S${props.audioCue}`}</td>
-                          <td className={`${props.clientCue&& 'bg-green-300 rounded-full text-center font-[900]'}`}>{props.clientCue || ''}</td>
-                      </tr>
-                  ))}
-              </tbody>
-          </table>
-
           <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])=>(
-                <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[0]?.timestamp}</td>
-                  <td>
-                    <button>stop</button>
-                    <button>Q1</button>
-                    <button>Q2</button>
-                    <button>Q6</button>
+              {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?.length>0 &&log[0]?.status}</td>
+                      <td>{log?.length>0 && log[0]?.name}</td>
+                      <td>{log?.length>0 &&log[0]?.timestamp}</td>
+                    </>}
+                  <td className="flex flex-row gap-1 p-1">
+                    <button onClick={()=>sendOsc(OSC_ADDRESS.STOPCUE,'',id)}>stop</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>
   );
 }