Update the styles a bit, and add the slides

chat-app/build.ts

@@ -1,10 +1,17 @@
-async function main() {
+import { unlink } from 'node:fs/promises';
-  const results = await Bun.build({
+
+const config = {
   entrypoints: [ "./frontend/index.js" ],
   outdir: "./static/js/",
-    verbose: true
+};
-  });
 
+async function fileExists(path: string): Promise<bool> {
+  const file = Bun.file(path);
+  return file.exists();
+}
+
+async function main() {
+  const results = await Bun.build({ ...config, verbose: true });
 
   if (!results.success) {
     for (const message of results.logs) {

chat-app/frontend/index.js

@@ -22,13 +22,13 @@ function newMessageText(name, message) {
 
 const MessageBox = {
   view: function () {
-    return m(".messages", messages.map(function(message) {
+    return m(".messages", { id: "message-box" }, messages.reverse().map(function(message) {
       return m(".message", newMessageText(message.chatter, message.message));
-    }));
+    }), m("#anchor"));
   }
 };
 
-function clearMessageBox() {
+function clearMessageInputBox() {
   const messageBox = document.getElementById("message");
   messageBox.value = "";
 }
@@ -44,7 +44,7 @@ function sendMessage(e) {
   }
 
   socket.send(JSON.stringify(message));
-  clearMessageBox();
+  clearMessageInputBox();
 }
 
 const MessageInput = {

chat-app/frontend/login.js

@@ -1,14 +0,0 @@
-import m from 'mithril';
-
-// login to the server
-function login(e) {
-
-}
-
-export const Login = {
-  return m("form", { action: "/login", method: "post", onsubmit: login }, [
-    m("label", { for: "username" }, "Username"),
-    m("input", { type: "text", name: "username" }),
-    m("input", { type: "submit", value: "Login" })
-  ]);
-};

chat-app/frontend/state.js

@@ -1,2 +0,0 @@
-const state = {};
-

chat-app/src/index.ts

@@ -13,7 +13,7 @@ const app = new Hono();
 const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();
 app.get("/chat-service", upgradeWebSocket((c) => {
   return {
-    onOpen(_event, ws) {
+    onOpen(event, ws) {
       chatRoom.addListener('message-added', function (e) {
         ws.send(JSON.stringify({
           message: e.message.message,

chat-app/static/css/main.css

@@ -1,19 +1,51 @@
+body {
+    margin: 0;
+    padding: 0;
+    height: 100.001vh;
+}
+
+div {
+    box-sizing: border-box;
+}
+
+.messages {
+    padding: 1em;
+    display: flex;
+    flex-direction: column-reverse;
+    height: 95vh;
+    overflow: auto;
+}
+
 .messages .message {
     padding: 0.5em;
     border: 1px solid #aaa;
     border-radius: 5px;
     margin-bottom: 0.5em;
 }
+
 .chatter {
     font-weight: bold;
 }
 
+.chat-input {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.5em;
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+    height: 5vh;
+}
 .chat-input > form {
     display: flex;
     width: 100%;
+    box-sizing: border-box;
 }
-.chat-input > form > input {
+.chat-input > form > input,
+.chat-input > form > submit {
     padding: 0.7em;
+    margin-right: 0.4em;
 }
 .chat-input > form > input[name="chatter"] {
     width: 20%;

chat-app/static/js/index.js

@@ -1731,7 +1731,7 @@ function newMessageText(name, message) {
     import_mithril.default("span.chatter-message", message)
   ];
 }
-function clearMessageBox() {
+function clearMessageInputBox() {
   const messageBox = document.getElementById("message");
   messageBox.value = "";
 }
@@ -1743,7 +1743,7 @@ function sendMessage(e) {
     message[key] = value;
   }
   socket.send(JSON.stringify(message));
-  clearMessageBox();
+  clearMessageInputBox();
 }
 var messages = [];
 var socket = createWebSocket();
@@ -1756,9 +1756,9 @@ socket.onmessage = function(event) {
 };
 var MessageBox = {
   view: function() {
-    return import_mithril.default(".messages", messages.map(function(message) {
+    return import_mithril.default(".messages", { id: "message-box" }, messages.reverse().map(function(message) {
       return import_mithril.default(".message", newMessageText(message.chatter, message.message));
-    }));
+    }), import_mithril.default("#anchor"));
   }
 };
 var MessageInput = {

slide-deck

@@ -0,0 +1 @@
+Subproject commit 8d7b03c886e1f611b1ed69a5f12a7143f83f42a8