basic setup pong - frontend and backend with simplw socket message and fastify route

frontend/src/pages/pong/broadcastMsg.ts

@@ -3,8 +3,8 @@ import { Socket } from 'socket.io-client';
 import { getUser } from "@app/auth";
 
 /**
- * function sends socket.emit to the backend to active and broadcast a message to all sockets
- * echos the message with addMessage to the sender
+ * function sends socket.emit to the backend to active and a broadcast message to all sockets
+ * echos addPongMessage() the message with addMessage to the sender
  * @param socket 
  * @param msgCommand 
  */

frontend/src/pages/pong/pong.html

@@ -2,19 +2,28 @@
   <div id="mainbox" class="mainboxDisplay">
     <button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
     <h1 class="text-3xl font-bold text-gray-800">
-		  Pong Box<span id="t-username"></span>
+      Pong Box<span id="t-username"></span>
     </h1><br>
     <!-- Horizontal Message Box -->
     <div id="system-box" class="system-info">System: connecting ... </div>
+    <!-- Pong Box -->
+    <p>try this in a terminal</p>
+    </br>
+    <p>curl -k --data-raw '{"message": "Message SENT from the terminal en REMOTE"}' 'https://local.maix.me:8888/api/pong/broadcast' -H "Content-Type: application/json"</p>
     <div class="flex justify-center mt-2">
-        <div id="g-textBoxes" class="flex flex-col">
-          <div id="t-chatbox" class="chatbox-style"></div>
-          <div id="t-input-send" class="flex gap-1 mt-2">
+        <div id="pongspace" class="flex flex-col">
+          <div id="pongbox" class="pongbox-style">
+            <div class="pong-field">
+              <div class="pong-center-line"></div>
+              <div class="pong-bat left"></div>
+              <div class="pong-bat right"></div>
+            </div>
           </div>
         </div>
-  </div>
+    </div>
   </div>
 </div>
 
 
 
+