From 4c500365fe23abeaffbf808ee6eb8592a9a8b73f Mon Sep 17 00:00:00 2001
From: Dave Smith-Hayes <me@davesmithhayes.com>
Date: Wed, 23 Oct 2024 21:57:58 -0400
Subject: [PATCH] Update the styles a bit, and add the slides

---
 chat-app/build.ts            | 19 +++++++++++++------
 chat-app/frontend/index.js   |  8 ++++----
 chat-app/frontend/login.js   | 14 --------------
 chat-app/frontend/state.js   |  2 --
 chat-app/src/index.ts        |  2 +-
 chat-app/static/css/main.css | 34 +++++++++++++++++++++++++++++++++-
 chat-app/static/js/index.js  |  8 ++++----
 slide-deck                   |  1 +
 8 files changed, 56 insertions(+), 32 deletions(-)
 delete mode 100644 chat-app/frontend/login.js
 delete mode 100644 chat-app/frontend/state.js
 create mode 160000 slide-deck

diff --git a/chat-app/build.ts b/chat-app/build.ts
index 37e3497..f31d630 100644
--- a/chat-app/build.ts
+++ b/chat-app/build.ts
@@ -1,10 +1,17 @@
-async function main() {
-  const results = await Bun.build({
-    entrypoints: [ "./frontend/index.js" ],
-    outdir: "./static/js/",
-    verbose: true
-  });
+import { unlink } from 'node:fs/promises';
 
+const config = {
+  entrypoints: [ "./frontend/index.js" ],
+  outdir: "./static/js/",
+};
+
+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) {
diff --git a/chat-app/frontend/index.js b/chat-app/frontend/index.js
index 76f73f1..8fa822f 100644
--- a/chat-app/frontend/index.js
+++ b/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 = {
diff --git a/chat-app/frontend/login.js b/chat-app/frontend/login.js
deleted file mode 100644
index 77ada13..0000000
--- a/chat-app/frontend/login.js
+++ /dev/null
@@ -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" })
-  ]);
-};
diff --git a/chat-app/frontend/state.js b/chat-app/frontend/state.js
deleted file mode 100644
index 556f1d3..0000000
--- a/chat-app/frontend/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const state = {};
-
diff --git a/chat-app/src/index.ts b/chat-app/src/index.ts
index 31dfef2..09d841d 100644
--- a/chat-app/src/index.ts
+++ b/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,
diff --git a/chat-app/static/css/main.css b/chat-app/static/css/main.css
index f95a028..59d11ea 100644
--- a/chat-app/static/css/main.css
+++ b/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%;
diff --git a/chat-app/static/js/index.js b/chat-app/static/js/index.js
index 5bfcd9a..5069bc6 100644
--- a/chat-app/static/js/index.js
+++ b/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 = {
diff --git a/slide-deck b/slide-deck
new file mode 160000
index 0000000..8d7b03c
--- /dev/null
+++ b/slide-deck
@@ -0,0 +1 @@
+Subproject commit 8d7b03c886e1f611b1ed69a5f12a7143f83f42a8