ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Attempting to add websocket support

Browse Source
This commit is contained in:
ramforth
2025-11-17 15:34:01 +01:00
parent 2fe07abecf
commit b60c642fd6
7 changed files with 92 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
templates/overlay-hacker-green.html
View File

@@ -4,38 +4,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hacker Green Overlay</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<style>
body {
background-color: rgba(0, 0, 0, 0);
color: #00FF41;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
text-shadow: 0 0 5px #00FF41, 0 0 10px #00FF41;
background-color: transparent;
color: #0f0;
font-family: 'VT323', monospace;
font-size: 20px;
margin: 0;
padding: 10px;
overflow: hidden;
text-shadow: 0 0 5px #0f0;
}
.chat-message {
margin-bottom: 8px;
animation: fadeIn 0.5s ease-in-out;
.chat-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.username {
font-weight: bold;
}
.username::after {
content: ':~$ ';
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- Example Message -->
<div class="chat-message">
<span class="username">system</span>
<span class="message">Hacker Green Theme Initialized.</span>
<div id="chat-container" class="chat-container">
<!-- Messages will be injected here -->
</div>
<script>
const userId = window.location.pathname.split('/')[2];
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const ws = new WebSocket(`${wsProtocol}//${window.location.host}/ws/${userId}`);
ws.onmessage = function(event) {
const messageData = JSON.parse(event.data);
const chatContainer = document.getElementById('chat-container');
const messageElement = document.createElement('div');
messageElement.innerHTML = `<span class="username">${messageData.author}:</span> ${messageData.text}`;
chatContainer.appendChild(messageElement);
};
</script>
</body>
</html>