From 3c1a8696cb449407b6f5176cd65a5103ca6bd863 Mon Sep 17 00:00:00 2001 From: Merith Date: Fri, 14 Mar 2025 17:40:46 -0700 Subject: [PATCH] fade out, test debug point --- main.go | 25 +++++++++++++++++++++++++ static/overlay.html | 39 ++++++++++++++++++++++++++++++++++----- 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/main.go b/main.go index 997e2ca..3b2e20d 100644 --- a/main.go +++ b/main.go @@ -64,6 +64,31 @@ func main() { c.File("./static/overlay.html") // Serve the overlay HTML }) + // Test endpoint to simulate chat messages via POST requests + r.POST("/test/:channel", func(c *gin.Context) { + channel := c.Param("channel") + var request struct { + Username string `json:"username"` + Message string `json:"message"` + } + + if err := c.ShouldBindJSON(&request); err != nil { + c.JSON(400, gin.H{"error": "Invalid request body"}) + return + } + + mu.Lock() + defer mu.Unlock() + messages := channelMessages[channel] + messages = append(messages, fmt.Sprintf("%s: %s", request.Username, request.Message)) + if len(messages) > 100 { // Keep only the last 100 messages + messages = messages[1:] + } + channelMessages[channel] = messages + + c.JSON(200, gin.H{"status": "message added"}) + }) + // Start the web server go func() { err := client.Connect() diff --git a/static/overlay.html b/static/overlay.html index e72ea2b..74d1bf2 100644 --- a/static/overlay.html +++ b/static/overlay.html @@ -5,6 +5,18 @@ Minecraft Twitch Chat Overlay +
@@ -33,11 +45,7 @@ const messageElement = document.createElement('div'); messageElement.classList.add('message'); messageElement.textContent = msg; - - // 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'); - } + messageElement.timestamp = Date.now(); // Store the timestamp chat.appendChild(messageElement); }); @@ -47,8 +55,29 @@ } } + // Function to fade out old messages + function fadeOutOldMessages() { + const messages = document.querySelectorAll('#chat .message'); + const now = Date.now(); + const fadeOutDuration = 10000; // 10 seconds + + messages.forEach(message => { + const age = now - message.timestamp; + if (age > fadeOutDuration) { + message.classList.add('fade-out'); + // Remove the element from the DOM after the transition ends + message.addEventListener('transitionend', () => { + message.remove(); + }, { once: true }); + } + }); + } + // Fetch chat messages every second setInterval(fetchChat, 1000); + + // Check and fade out old messages every second + setInterval(fadeOutOldMessages, 1000); \ No newline at end of file