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

frontend/index.html

@@ -56,6 +56,7 @@
 	<script type="module" src="/src/routing"></script>
 	<script type="module" src="/src/toast"></script>
 	<script type="module" src="/src/auth"></script>
+	<script type="module" src="/src/pong/"></script>
 </body>
 
 </html>

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>
 
 
 
+

frontend/src/pong/index.ts

@@ -1,2 +1 @@
 import './pong.css';
-  

frontend/src/pong/pong.css

@@ -80,7 +80,8 @@
   bg-gray-200 w-[850px] 
   p-6 rounded-xl 
   shadow-2xl 
-  text-center z-50;
+  text-center 
+  z-50;
 }
 
 .mainboxDisplay button {
@@ -88,18 +89,49 @@
   cursor-pointer
 }
 
-.title {
+.pongbox-style {
   @apply
-  text-6xl 
-  font-bold
-  text-gray-800
+  h-[450px]
+  w-[800px]
+  bg-gray-400
+  text-6xl
+  flex
+  items-center
+  justify-center;
 }
 
 
-
-
-
-p {
+.text-style {
   @apply
   text-black
+
 }
+
+.pong-field {
+  @apply relative w-[800px] h-[450px] bg-black;
+}
+
+.pong-bat {
+  @apply absolute w-[12px] h-[80px] bg-white;
+}
+
+.pong-bat.left {
+  @apply left-4 top-1/2 -translate-y-1/2;
+}
+
+.pong-bat.right {
+  @apply right-4 top-1/2 -translate-y-1/2;
+}
+
+
+.pong-center-line {
+  @apply
+    absolute
+    left-1/2
+    top-0
+    h-full
+    w-[4px]
+    -translate-x-1/2
+    bg-[linear-gradient(to_bottom,white_50%,transparent_50%)]
+    bg-[length:4px_20px];
+}