Re-orga Chat Box

frontend/src/chat/chat.css

@@ -2,38 +2,52 @@
 
 .btn-style {
   @apply
-  w-[100px] 
-  h-[32px] 
-  border-2 border-black 
+  w-[100px]
+  h-[32px]
+  border-1 
+  border-gray-500
   rounded-3xl
+  bg-gray-500
+  text-white
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
   hover:bg-blue-200
-  active:bg-white
-  text-black 
-  cursor-pointer;
+  active:bg-gray-400
+  active:translate-y-[1px]
+  active:shadow-[0_2px_0_0_black];
 }
 
 .send-btn-style {
   @apply 
   w-[50px] 
   h-[50px] 
-  border-2 border-black 
+  border-1 
+  border-gray-500
   rounded-3xl
   hover:bg-blue-200 
-  active:bg-white
-  text-black
-  cursor-pointer;
+  bg-red-100 
+  text-red-700
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
+  active:bg-gray-400
+  active:translate-y-[1px]
+  active:shadow-[0_2px_0_0_black];;
 }
 
 
 .chatbox-style {
   @apply
-  w-[600px]
-  h-[150px] /* increase height if needed */
-  p-[10px]
-  border-1 border-black
-  shadow-sm
+  w-[650px]
+  h-[300px] /* increase height if needed */
+  p-[8px]
+  border-1
+  border-black
+  shadow-2xl 
   text-left
-  text-gray-800
+  text-gray-700
+  bg-white 
   rounded-3xl
   overflow-y-auto
   whitespace-pre-line
@@ -49,9 +63,11 @@
   p-[10px]
   border-1 border-black
   shadow-sm
+  flex-1
   rounded-3xl
-  focus:bg-gray-300
-  hover:bg-blue-200 
+  focus:bg-blue-300
+  hover:bg-blue-200
+  bg-white 
   text-gray-800;
 }
 
@@ -73,7 +89,7 @@
   left-1/2 
   -translate-x-1/2 
   -translate-y-1/2 
-  bg-white w-[650px] 
+  bg-gray-200 w-[850px] 
   p-6 rounded-xl 
   shadow-2xl 
   text-center z-50;
@@ -84,6 +100,14 @@
   cursor-pointer
 }
 
+.title {
+  @apply
+  text-6xl 
+  font-bold
+  text-gray-800
+}
+
+
 p {
   @apply
   text-black

frontend/src/pages/chat/chat.html

@@ -1,18 +1,37 @@
 <div class="displaybox">
-	<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">
-			Chat Box <span id="t-username"></span>
-		</h1><br>
-		<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
-		<button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
-		<div id="t-chatbox" class="chatbox-style"></div>
-		</br>
-		<div class="flex gap-2">
-			<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style flex-1" />
-			<button id="b-send" class="send-btn-style">Send</button>
-		</div>
-		</br>
-		<p class="text-gray-400">From this Chat Box you can send messages to other players</p>
-	</div>
-</div>
+  <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">
+		ChatterBoxes 😀😀😀<span id="t-username"></span>
+    </h1><br>
+    <button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
+    <button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
+
+    <!-- Center wrapper for chat + vertical box -->
+    <div class="flex justify-center mt-2">
+      <!-- Groupe Chat + vertical box container -->
+      <div id = "g-boxes" class="flex gap-1">
+        <!-- Text Chat box panel + send -->
+        <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">
+            <input id="t-chat-window" placeholder="Type your message..." class="chat-window-style" />
+            <button id="b-send" class="send-btn-style">Send</button>
+          </div>
+        </div>
+
+        <!-- Vertical Ping box panel-->
+        <div id="ping-box" class="w-[150px] ml-2 bg-gray-300 rounded-2xl p-2 shadow-md flex flex-col gap-1 h-[350px]">
+          <p id="ping-title" class="text-sm font-semibold text-gray-700">Ping Buddies</p>
+          <div id="ping-list" class="flex-1 overflow-y-auto">
+            <p>Alice</p>
+            <p>Bob</p>
+            <p>Charlie</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-gray-400 mt-2">From this Chat Box you can send messages to other players</p>
+  </div>
+</div>

frontend/src/pages/chat/chat.ts

@@ -14,7 +14,7 @@ const color = {
 };
 
 
-// get the name of the machine useed to connect 
+// get the name of the machine used to connect 
 const machineHostName = window.location.hostname;
 console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);