<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Twitch Chat Overlay</title>
<link rel="stylesheet" href="/static/css/style.css"> <!-- Link to external CSS -->
</head>
<body>
<div id="chat"></div>
<script>
// 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');
// Check if messages have changed
if (JSON.stringify(data.messages) !== JSON.stringify(lastMessages)) {
lastMessages = data.messages;
// Clear existing messages
chat.innerHTML = '';
// Add new messages with fade-in animation
data.messages.forEach((msg, index) => {
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');
}
chat.appendChild(messageElement);
});
// Scroll to the bottom
chat.scrollTop = chat.scrollHeight;
}
}
// Fetch chat messages every second
setInterval(fetchChat, 1000);
</script>
</body>
</html>