diff --git a/chat-app/src/chat-room.ts b/chat-app/src/chat-room.ts index f279fa6..98f1337 100644 --- a/chat-app/src/chat-room.ts +++ b/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 } diff --git a/chat-app/src/index.ts b/chat-app/src/index.ts index cc49374..a267642 100644 --- a/chat-app/src/index.ts +++ b/chat-app/src/index.ts @@ -14,12 +14,18 @@ const { upgradeWebSocket, websocket } = createBunWebSocket(); 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" })); diff --git a/chat-app/static/css/main.css b/chat-app/static/css/main.css index 59d11ea..5f9067f 100644 --- a/chat-app/static/css/main.css +++ b/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; + } } diff --git a/chat-app/static/js/index.js b/chat-app/static/js/index.js index 4746f16..ec01f37 100644 --- a/chat-app/static/js/index.js +++ b/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); }