make a chat that should work on the cruise ship

2025-05-09 22:16:10 -06:00
commit 79977c47ba
13 changed files with 430 additions and 0 deletions
--- a/templates/chat.html
+++ b/templates/chat.html
@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cruise Chat</title>
+    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        #chat-box { height: 70vh; overflow-y: auto; border: 1px solid #ccc; padding: 10px; }
+        .message { margin-bottom: 10px; }
+    </style>
+</head>
+<body>
+<div class="container mt-3">
+    <h2 class="text-center">Cruise Chat</h2>
+<!--    <p class="text-muted">Logged in as: {{.}}</p>-->
+    <div class="d-flex justify-content-between align-items-center">
+        <p class="text-muted mb-0">Logged in as: {{.}}</p>
+        <a href="/logout" class="btn btn-secondary btn-sm">Logout</a>
+    </div>
+    <div id="chat-box" class="mb-3"></div>
+    <div class="input-group">
+        <input type="text" id="message-input" class="form-control" placeholder="Type a message...">
+        <button id="send-btn" class="btn btn-primary">Send</button>
+    </div>
+</div>
+<script src="/static/js/jquery.min.js"></script>
+<script>
+  function fetchMessages() {
+    $.getJSON("/messages", function(data) {
+      $("#chat-box").empty();
+      data.forEach(msg => {
+        let time = new Date(msg.timestamp).toLocaleTimeString();
+        $("#chat-box").append(
+          `<div class="message"><strong>${msg.username}</strong> (${time}): ${msg.content}</div>`
+        );
+      });
+      $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);
+    });
+  }
+
+  $(document).ready(function() {
+    fetchMessages();
+    setInterval(fetchMessages, 2000);
+
+    $("#send-btn").click(function() {
+      let content = $("#message-input").val();
+      if (content) {
+        $.post("/send", { content: content }, function() {
+          $("#message-input").val("");
+          fetchMessages();
+        });
+      }
+    });
+
+    $("#message-input").keypress(function(e) {
+      if (e.which == 13) {
+        $("#send-btn").click();
+      }
+    });
+  });
+</script>
+</body>
+</html>