feat(chat): added base for chat service

added front html

nigel in the mud

route function with openapi - gen

clean up the code a little

after pull request

frontend/src/pages/chat/chat.html

@@ -0,0 +1,25 @@
+ <div class="displaybox">
+    <div id="mainbox" class="mainboxDisplay">
+      
+      
+      <button id="b-whoami" class="btn-style absolute top-6 left-6">Whoami</button>
+      <h1 class="text-3xl font-bold text-gray-800">
+        Chat Box <span id="t-username"></span>
+      </h1><br>
+      <button id="b-logout" class="btn-style absolute top-6 right-6">Kill Server</button>
+      
+      
+      
+      <p>Welcome, <span id="username"></span></p>
+      
+      
+      <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>

frontend/src/pages/chat/chat.ts

@@ -1,5 +1,84 @@
-import { addRoute, type RouteHandlerParams } from "@app/routing";
+import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
+import { showError } from "@app/toast";
+import authHtml from './chat.html?raw';
+import client from '@app/api'
+import { updateUser } from "@app/auth";
 
-addRoute('/chat', function (_url: string, _args: RouteHandlerParams) {
-	return "this is the chat page !"
-})
+type Providers = {
+  name: string,
+  display_name: string,
+  icon_url?: string,
+  color?: { default: string, hover: string },
+};
+
+function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
+
+	setTitle('Chat Page');
+	return {
+
+ 		html: authHtml, postInsert: async (app) => {
+		
+			const sendButton = document.getElementById('b-send') as HTMLButtonElement;
+			const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
+			const sendtextbox= document.getElementById('t-chat-window') as HTMLButtonElement;
+			const blogout = document.getElementById('b-logout') as HTMLButtonElement;
+			const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
+			const username = document.getElementById('username') as HTMLDivElement;
+			
+
+			const value = await client.chatTest();
+			if (value.kind === "success")
+			{
+				console.log(value.payload);
+			}
+			else if (value.kind === "notLoggedIn")
+			{
+
+			} else {
+				console.log('unknown response: ', value);
+			}
+			
+			// Add a new message to the chat display
+			const addMessage = (text: any) => {
+				const messageElement = document.createElement('div');
+				messageElement.textContent = JSON.stringify(text, null, 2);
+				chatWindow.appendChild(messageElement);
+				chatWindow.scrollTop = chatWindow.scrollHeight;   //puts scroll to the bottom
+			};
+			
+			sendButton!.addEventListener('click', async () => {
+  			let msgtext: string = sendtextbox.value;
+
+  				if (msgtext) {
+    				addMessage(msgtext);
+					sendtextbox.value = "";
+  				}
+			});
+			
+			chatWindow.textContent = "helloWorld";
+
+			// Whoami button to display user name
+			bwhoami?.addEventListener('click', async () => {
+				try {
+					const res = await client.guestLogin();
+					switch (res.kind) {
+						case 'success': {
+							let user = await updateUser();
+							if (user === null)
+								return showError('Failed to get user: no user ?');
+							setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
+							break;
+						}
+						case 'failed': {
+							showError(`Failed to login: ${res.msg}`);
+						}
+					}
+				} catch (e) {
+					console.error("Login error:", e);
+					showError('Failed to login: Unknown error');
+				}
+			});
+		}
+	}
+}
+addRoute('/chat', handleChat, { bypass_auth: true });