chookspace/chookchat
1
1
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better client for friends

Browse Source
This commit is contained in:
Maxwell
2026-07-24 10:18:30 +10:00
parent 6598162680
commit 0d3c76086b
7 changed files with 127 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/friends.html
View File

@@ -3,6 +3,7 @@
<head>
<title>friends</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/style_friends.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/script.js"></script>
<script src="/script_friends.js"></script>

4
client/script_friends.js
View File

@@ -107,7 +107,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
// create a websocket
socket = new WebSocket("ws://" + document.location.hostname + ":" + document.location.port + "/friends/ws");
socket = new WebSocket("wss://" + document.location.hostname + ":" + document.location.port + "/friends/ws");
socket.onopen = function() {
console.log("connected to server!");
@@ -286,4 +286,4 @@ function sendMessage() {
renderMessage(sentMessage);
textarea.value = "";
}
}

28
client/style.css
View File

@@ -104,31 +104,3 @@ nav {
}
}
/* Friends-specific CSS */
#friends {
display: flex;
padding-left: 16px;
flex-wrap: wrap;
gap: 1rem;
overflow: hidden;
}
#friends-list {
flex: 1;
min-width: 300px;
height: 100%;
overflow-y: auto;
}
#friends-messenger {
flex: 1;
min-width: 300px;
}
#friends-message-box {
position: fixed;
bottom: 0;
right: 0;
width: 50%;
}

113
client/style_friends.css Normal file
View File

@@ -0,0 +1,113 @@
#friends {
display: flex;
height: calc(100vh - 60px);
overflow: hidden;
}
#friends-list {
width: 280px;
min-width: 280px;
border-right: 1px solid lime;
display: flex;
flex-direction: column;
overflow: hidden;
}
#friends-header {
padding: 16px;
border-bottom: 1px solid lime;
}
#friends-header h1 {
margin: 0;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 2px;
}
#friends-list-links {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
#friends-list-links p {
margin: 0;
padding: 10px 16px;
cursor: pointer;
border-left: 2px solid transparent;
transition: background-color 0.15s, border-color 0.15s;
}
#friends-list-links p:hover {
background-color: rgba(0, 255, 0, 0.1);
border-left-color: lime;
}
#friends-messenger {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
#friends-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
#friends-messages p {
margin: 0;
padding: 4px 0;
word-wrap: break-word;
}
#friends-messages p:empty {
display: none;
}
#friends-message-box {
position: static;
width: 100%;
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid lime;
box-sizing: border-box;
}
#friends-message-box textarea {
flex: 1;
resize: none;
height: 40px;
padding: 8px;
box-sizing: border-box;
}
#friends-message-box button {
padding: 0 20px;
white-space: nowrap;
}
@media (max-width: 600px) {
#friends {
flex-direction: column;
}
#friends-list {
width: 100%;
min-width: unset;
max-height: 200px;
border-right: none;
border-bottom: 1px solid lime;
}
#friends-message-box {
position: static;
width: 100%;
}
}