Add some logging to the event handlers for the chat room, add styles provided by my wife

chat-app/src/chat-room.ts

@@ -47,4 +47,5 @@ export class ChatRoom extends EventEmitter {
   }
 }
 
-export const chatRoom = new ChatRoom();
+const chatRoom = new ChatRoom();
+export { chatRoom }

chat-app/src/index.ts

@@ -14,12 +14,18 @@ const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();
 app.get("/chat-service", upgradeWebSocket((c) => {
   return {
     onOpen(event, ws) {
-      chatRoom.addListener('message-added', function (e) {
-        ws.send(JSON.stringify({
+      console.log(ws);
+      console.log(`Connection established ${event}`);
+
+      chatRoom.addListener('message-added', async function (e) {
+        const message = JSON.stringify({
           message: e.message.message,
           chatter: e.message.chatter,
           timestamp: e.message.timestamp
-        }));
+        });
+
+        console.log(message);
+        ws.send(message);
       });
     },
     onMessage(event, ws) {
@@ -39,19 +45,6 @@ app.get("/chat-service", upgradeWebSocket((c) => {
   }
 }));
 
-// set up the username, somehow
-// set the session for a user
-app.post("/login", async (c) => {
-  const user = await c.req.parseBody();
-  let success: boolean = false;
-
-  if (!users.find((u) => u == user.username)) {
-    users.push(user.username);
-    success = true;
-  }
-
-  return c.json({ success });
-});
 
 // get the HTML and JS from the static repo
 app.use("/", serveStatic({ path: "/static/index.html" }));

chat-app/static/css/main.css

@@ -1,7 +1,8 @@
 body {
     margin: 0;
     padding: 0;
-    height: 100.001vh;
+    background-color: #134115;
+    font-family: monospace;
 }
 
 div {
@@ -12,15 +13,19 @@ div {
     padding: 1em;
     display: flex;
     flex-direction: column-reverse;
-    height: 95vh;
+    height: auto;
     overflow: auto;
 }
 
 .messages .message {
-    padding: 0.5em;
-    border: 1px solid #aaa;
+    padding: 1em 1.25em;
+    border: 1px solid #020a03;
     border-radius: 5px;
-    margin-bottom: 0.5em;
+    margin-bottom: 0.75em;
+    background-color: #fffefc;
+    font-family: monospace;
+    font-size: 14px;
+    color: #0c0b09;
 }
 
 .chatter {
@@ -32,10 +37,10 @@ div {
     bottom: 0;
     width: 100%;
     box-sizing: border-box;
-    padding: 0.5em;
-    background-color: #fff;
     border-top: 1px solid #ccc;
-    height: 5vh;
+    height: auto;
+    padding: 1em;
+    background-color: #f4efe6;
 }
 .chat-input > form {
     display: flex;
@@ -44,12 +49,65 @@ div {
 }
 .chat-input > form > input,
 .chat-input > form > submit {
-    padding: 0.7em;
-    margin-right: 0.4em;
+    padding: 1em 1.25em;
+    margin-right: 1em;
+}
+.chat-input > form > submit {
+    background-color: #020a03;
+    border: none;
+    border-radius: 5px;
+    color: #fffbf6;
+    font-weight: bold;
+    font-family: monospace !important;
+    padding: 0.75em 1em;
+    margin-right: 0;
 }
 .chat-input > form > input[name="chatter"] {
     width: 20%;
+    border: 1px solid #020a03;
+    border-radius: 5px;
+    color: #0c0b09;
+    font-family: monospace;
 }
 .chat-input > form > input[name="message"] {
     width: 75%;
+    border: 1px solid #020a03;
+    border-radius: 5px;
+    color: #0c0b09;
+    font-family: monospace;
+}
+
+@media only screen and (max-width: 600px) {
+    .chat-input {
+        padding: 2.5em;
+    }
+
+    .chat-input > form {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        flex-direction: column;
+    }
+
+    .chat-input > form > input[name="chatter"] {
+        width: 100%;
+        font-size: 3.5em;
+        margin-bottom: 0.5em;
+        box-sizing: border-box;
+    }
+
+    .chat-input > form > input[name="message"] {
+        width: 100%;
+        font-size: 3.5em;
+        margin-bottom: 0.5em;
+        box-sizing: border-box;
+    }
+
+
+    .chat-input > form > input, .chat-input > form > submit {
+        padding: 0.75em 1em;
+        border-radius: 0.25em;
+        width: 100%;
+        font-size: 3.5em;
+    }
 }

chat-app/static/js/index.js

@@ -1721,7 +1721,7 @@ var import_mithril = __toESM(require_mithril(), 1);
 
 // frontend/websocket.js
 function createWebSocket() {
-  let appUrl = "undefined";
+  let appUrl = "chat.freedoom.party";
   appUrl = `//${appUrl}/chat-service`;
   return new WebSocket(appUrl);
 }