current state

.air.toml

@@ -0,0 +1,52 @@
+root = "."
+testdata_dir = "testdata"
+tmp_dir = "tmp"
+
+[build]
+  args_bin = []
+  bin = "tmp\\main.exe"
+  cmd = "go build -o ./tmp/main.exe ."
+  delay = 1000
+  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
+  exclude_file = []
+  exclude_regex = ["_test.go"]
+  exclude_unchanged = false
+  follow_symlink = false
+  full_bin = ""
+  include_dir = []
+  include_ext = ["go", "tpl", "tmpl", "html"]
+  include_file = []
+  kill_delay = "0s"
+  log = "build-errors.log"
+  poll = false
+  poll_interval = 0
+  post_cmd = []
+  pre_cmd = []
+  rerun = false
+  rerun_delay = 500
+  send_interrupt = false
+  stop_on_error = false
+
+[color]
+  app = ""
+  build = "yellow"
+  main = "magenta"
+  runner = "green"
+  watcher = "cyan"
+
+[log]
+  main_only = false
+  silent = false
+  time = false
+
+[misc]
+  clean_on_exit = false
+
+[proxy]
+  app_port = 0
+  enabled = false
+  proxy_port = 0
+
+[screen]
+  clear_on_rebuild = false
+  keep_scroll = true

.gitignore

@@ -0,0 +1 @@
+/tmp

static/css/style.css

@@ -0,0 +1,66 @@
+/* Load Minecraft font */
+@font-face {
+    font-family: 'Minecraft';
+    src: url('https://assets.codepen.io/4175254/Minecraft.woff2') format('woff2');
+}
+
+body {
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+#chat {
+    position: fixed;
+    top: 25%; /* Offset from the top */
+    left: 2%; /* Offset from the left */
+    /* width: 300px; Fixed width for the chat */
+    max-height: 50vh; /* Limit height to 50% of the viewport */
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+    font-family: 'Minecraft', sans-serif;
+    font-size: 16px;
+    color: white;
+    text-shadow: 2px 2px 0 #3f3f3f;
+    border-radius: 0px; /* Rounded corners */
+    overflow-y: hidden; /* Scroll if messages exceed height */
+}
+
+.message {
+    margin-bottom: 4px;
+    opacity: 0;
+    animation: fadeIn 0.5s ease-in-out forwards;
+    word-wrap: break-word; /* Prevent text overflow */
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Fade out older messages */
+.message.fade-out {
+    animation: fadeOut 0.5s ease-in-out forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}

static/overlay.html

@@ -4,69 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Minecraft Twitch Chat Overlay</title>
-    <style>
+    <link rel="stylesheet" href="/static/css/style.css"> <!-- Link to external CSS -->
-        /* Import Minecraft font */
-        @import url('https://fonts.googleapis.com/css2?family=Minecraft&display=swap');
-
-        body {
-            background-color: transparent;
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-        }
-
-        #chat {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 30%;
-            padding: 10px;
-            box-sizing: border-box;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            background-color: transparent;
-        }
-
-        .message {
-            font-family: 'Minecraft', sans-serif;
-            font-size: 16px;
-            color: white;
-            text-shadow: 2px 2px 0 #3f3f3f;
-            margin-bottom: 5px;
-            opacity: 0;
-            animation: fadeIn 0.5s ease-in-out forwards;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Fade out older messages */
-        .message.fade-out {
-            animation: fadeOut 0.5s ease-in-out forwards;
-        }
-
-        @keyframes fadeOut {
-            from {
-                opacity: 1;
-                transform: translateY(0);
-            }
-            to {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-        }
-    </style>
 </head>
 <body>
     <div id="chat"></div>
@@ -74,31 +12,39 @@
         // Extract the channel name from the URL
         const channel = window.location.pathname.split('/')[2];
 
+        // Store the last set of messages to avoid reloading the same ones
+        let lastMessages = [];
+
         // Function to fetch chat messages
         async function fetchChat() {
             const response = await fetch(`/chat/${channel}`);
             const data = await response.json();
             const chat = document.getElementById('chat');
 
-            // Clear existing messages
+            // Check if messages have changed
-            chat.innerHTML = '';
+            if (JSON.stringify(data.messages) !== JSON.stringify(lastMessages)) {
+                lastMessages = data.messages;
 
-            // Add new messages with fade-in animation
+                // Clear existing messages
-            data.messages.forEach((msg, index) => {
+                chat.innerHTML = '';
-                const messageElement = document.createElement('div');
-                messageElement.classList.add('message');
-                messageElement.textContent = msg;
 
-                // Fade out older messages if there are more than 10
+                // Add new messages with fade-in animation
-                if (data.messages.length > 10 && index < data.messages.length - 10) {
+                data.messages.forEach((msg, index) => {
-                    messageElement.classList.add('fade-out');
+                    const messageElement = document.createElement('div');
-                }
+                    messageElement.classList.add('message');
+                    messageElement.textContent = msg;
 
-                chat.appendChild(messageElement);
+                    // Fade out older messages if there are more than 10
-            });
+                    if (data.messages.length > 10 && index < data.messages.length - 10) {
+                        messageElement.classList.add('fade-out');
+                    }
 
-            // Scroll to the bottom
+                    chat.appendChild(messageElement);
-            chat.scrollTop = chat.scrollHeight;
+                });
+
+                // Scroll to the bottom
+                chat.scrollTop = chat.scrollHeight;
+            }
         }
 
         // Fetch chat messages every second