<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Multiplayer Chat Server</title>
<style>
.nickname {
display: inline-block;
width: 100px;
margin-right: 10px;
}

.message {
display: inline-block;
width: 500px;
}
</style>
</head>
<body>
<h1>Welcome to the Multiplayer Chat Server!</h1>
<div id="chat">
<div id="messages"></div>
<div id="users"></div>
</div>

<form id="message-form">
<input type="text" id="nickname-input" class="nickname" required placeholder="Nickname" maxlength="20"/>
<input type="text" id="message-input" class="message" required placeholder="Message" maxlength="100"/>
<button type="submit">Send</button>
</form>

<script id="app">
// Function to add a message to the chat
function addMessage(nickname, message) {
var messagesDiv = document.getElementById("messages");

var messageDiv = document.createElement("div");
var nicknameSpan = document.createElement("span");
nicknameSpan.className = "nickname";
nicknameSpan.textContent = nickname + ": ";
messageDiv.appendChild(nicknameSpan);

var messageSpan = document.createElement("span");
messageSpan.className = "message";
messageSpan.textContent = message;
messageDiv.appendChild(messageSpan);

messagesDiv.appendChild(messageDiv);
}

// Function to add a user to the user list
function addUser(nickname) {
var usersDiv = document.getElementById("users");

var userDiv = document.createElement("div");
userDiv.textContent = nickname;

usersDiv.appendChild(userDiv);
}

// Function to remove a user from the user list
function removeUser(nickname) {
var usersDiv = document.getElementById("users");
var users = usersDiv.getElementsByTagName("div");

for (var i = 0; i < users.length; i++) {
if (users[i].textContent === nickname) {
usersDiv.removeChild(users[i]);
break;
}
}
}

// Send message form event listener
document.getElementById("message-form").addEventListener("submit", function(event) {
event.preventDefault();

var nicknameInput = document.getElementById("nickname-input");
var messageInput = document.getElementById("message-input");

var nickname = nicknameInput.value;
var message = messageInput.value;

addMessage(nickname, message);

nicknameInput.value = "";
messageInput.value = "";

return false;
});
</script>
<script>
// Websocket connection
var socket = new WebSocket("ws://localhost:8080");

// When a new message is received from the server
socket.onmessage = function(event) {
var data = JSON.parse(event.data);

if (data.type === "message") {
addMessage(data.nickname, data.message);
} else if (data.type === "user_join") {
addUser(data.nickname);
} else if (data.type === "user_leave") {
removeUser(data.nickname);
}
};

// When the websocket connection is closed
socket.onclose = function(event) {
console.log("Connection closed");
};

// When an error occurs with the websocket connection
socket.onerror = function(event) {
console.error("Websocket error:", event);
};

// Send message form event listener
document.getElementById("message-form").addEventListener("submit", function(event) {
event.preventDefault();

var nicknameInput = document.getElementById("nickname-input");
var messageInput = document.getElementById("message-input");

var nickname = nicknameInput.value;
var message = messageInput.value;

socket.send(JSON.stringify({
type: "message",
nickname: nickname,
message: message
}));

nicknameInput.value = "";
messageInput.value = "";

return false;
});
</script>
<script id="json-data" type="application/json">