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 { + 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(); 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