cdez/CS460-Projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a 'menu bar' at the top of the selfhosted webclient.

Browse source
This commit is contained in:
Charles Descamps 2025-03-28 10:17:45 -07:00
parent c5eab3f695
commit 2c9a3bc68a
1 changed files with 165 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

175
chatserver/templates/index.html
View file

@ -6,31 +6,143 @@
<title>Web Chat Client</title>
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; }
#chat { flex: 1; overflow-y: auto; padding: 10px; border-bottom: 1px solid #ccc; }
#messageInput { display: flex; padding: 10px; }
#messageInput input { flex: 1; padding: 10px; font-size: 16px; }
#messageInput button { padding: 10px; font-size: 16px; }
/* Light Mode Styles */
body.light-mode {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
background-color: white;
color: black;
}
body.light-mode #topBar {
background-color: #007bff;
color: white;
}
body.light-mode #topBar button {
background-color: white;
color: #007bff;
}
body.light-mode #topBar button:hover {
background-color: #e6e6e6;
}
body.light-mode #chat {
background-color: #f9f9f9;
}
body.light-mode #messageInput button {
background-color: #007bff;
color: white;
}
body.light-mode #messageInput button:hover {
background-color: #0056b3;
}
/* Dark Mode Styles */
body.dark-mode {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
background-color: #121212;
color: white;
}
body.dark-mode #topBar {
background-color: #1e1e1e;
color: white;
}
body.dark-mode #topBar button {
background-color: #333;
color: white;
}
body.dark-mode #topBar button:hover {
background-color: #555;
}
body.dark-mode #chat {
background-color: #1e1e1e;
}
body.dark-mode #messageInput button {
background-color: #333;
color: white;
}
body.dark-mode #messageInput button:hover {
background-color: #555;
}
/* Shared Styles */
#topBar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
#topBar span {
font-size: 16px;
}
#chat {
flex: 1;
overflow-y: auto;
padding: 10px;
border-bottom: 1px solid #ccc;
}
#messageInput {
display: flex;
padding: 10px;
}
#messageInput input {
flex: 1;
padding: 10px;
font-size: 16px;
}
#messageInput button {
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<body class="light-mode">
<!-- Top Bar -->
<div id="topBar">
<span id="userInfo">Username: <strong id="currentUsername"></strong> | Chat Room: <strong id="currentChatRoom"></strong></span>
<div>
<button onclick="changeUsername()">Change Username</button>
<button onclick="changeChatRoom()">Change Chat Room</button>
<button onclick="toggleTheme()">Toggle Theme</button>
</div>
</div>
<!-- Chat Messages -->
<div id="chat"></div>
<!-- Message Input -->
<div id="messageInput">
<input type="text" id="message" placeholder="Type a message...">
<input type="text" id="message" placeholder="Type a message..." onkeydown="handleKeyPress(event)">
<button onclick="sendMessage()">Send</button>
</div>
<script>
// Ask the user for the server address
// Ask the user for the server URL
const serverUrl = prompt("Enter the WebSocket server URL (e.g., http://localhost:5000):") || 'http://localhost:5000';
const socket = io(serverUrl); // Connect to the WebSocket server
const chatDiv = document.getElementById('chat');
const messageInput = document.getElementById('message');
const currentUsernameElement = document.getElementById('currentUsername');
const currentChatRoomElement = document.getElementById('currentChatRoom');
// Ask the user for their username and chat room
let username = prompt("Enter your username:");
let chatRoom = prompt("Enter chat room (default: 'default')") || 'default';
let username = prompt("Enter your username:") || "Anonymous";
let chatRoom = prompt("Enter chat room (default: 'default')") || "default";
// Update the top bar with the current username and chat room
currentUsernameElement.textContent = username;
currentChatRoomElement.textContent = chatRoom;
// Join the chat room
console.log('Joining chat room:', { username: username, chat_room: chatRoom });
@ -62,6 +174,49 @@
messageInput.value = ''; // Clear the input field
}
}
// Handle the "Enter" key to send a message
function handleKeyPress(event) {
if (event.key === "Enter") {
sendMessage();
}
}
// Change the username
function changeUsername() {
const newUsername = prompt("Enter your new username:");
if (newUsername && newUsername.trim() !== "") {
username = newUsername.trim();
currentUsernameElement.textContent = username;
console.log(`Username changed to: ${username}`);
socket.emit('send_message', { username: 'Server', chat_room: chatRoom, message: `${username} has changed their username.` });
}
}
// Change the chat room
function changeChatRoom() {
const newChatRoom = prompt("Enter the new chat room:");
if (newChatRoom && newChatRoom.trim() !== "") {
socket.emit('leave', { username: username, chat_room: chatRoom });
chatRoom = newChatRoom.trim();
currentChatRoomElement.textContent = chatRoom;
console.log(`Switched to chat room: ${chatRoom}`);
socket.emit('join', { username: username, chat_room: chatRoom });
chatDiv.innerHTML = ""; // Clear the chat history
}
}
// Toggle between light mode and dark mode
function toggleTheme() {
const body = document.body;
if (body.classList.contains('light-mode')) {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
} else {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
}
}
</script>
</body>
</html>