From 0d3c76086bda2f296f649cb60effaeaa8f74797c Mon Sep 17 00:00:00 2001 From: Maxwell Jeffress Date: Fri, 24 Jul 2026 10:18:30 +1000 Subject: [PATCH] better client for friends --- build.sh | 4 +- client/friends.html | 1 + client/script_friends.js | 4 +- client/style.css | 28 ---------- client/style_friends.css | 113 +++++++++++++++++++++++++++++++++++++++ server/meson.build | 1 + server/src/main.cpp | 7 +++ 7 files changed, 127 insertions(+), 31 deletions(-) create mode 100644 client/style_friends.css diff --git a/build.sh b/build.sh index e3f390a..3356791 100644 --- a/build.sh +++ b/build.sh @@ -10,7 +10,9 @@ bin2cpp --file=client/login.html --output=server/src/generated bin2cpp --file=client/settings.html --output=server/src/generated bin2cpp --file=client/friends.html --output=server/src/generated bin2cpp --file=client/e404.html --output=server/src/generated -bin2cpp --file=client/style.css --output=server/src/generated + +bin2cpp --file=client/style.css --output=server/src/generated +bin2cpp --file=client/style_friends.css --output=server/src/generated bin2cpp --file=client/script.js --output=server/src/generated bin2cpp --file=client/script_friends.js --output=server/src/generated diff --git a/client/friends.html b/client/friends.html index d83196e..569295c 100644 --- a/client/friends.html +++ b/client/friends.html @@ -3,6 +3,7 @@ friends + diff --git a/client/script_friends.js b/client/script_friends.js index 5b595ae..a05549a 100644 --- a/client/script_friends.js +++ b/client/script_friends.js @@ -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 = ""; -} \ No newline at end of file +} diff --git a/client/style.css b/client/style.css index fdefda8..39a10f6 100644 --- a/client/style.css +++ b/client/style.css @@ -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%; -} diff --git a/client/style_friends.css b/client/style_friends.css new file mode 100644 index 0000000..d5b619b --- /dev/null +++ b/client/style_friends.css @@ -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%; + } +} diff --git a/server/meson.build b/server/meson.build index fe3ccf5..51104cc 100644 --- a/server/meson.build +++ b/server/meson.build @@ -13,6 +13,7 @@ sources = [ 'src/generated/friends.cpp', 'src/generated/script_friends.cpp', 'src/generated/style.cpp', + 'src/generated/style_friends.cpp', 'src/generated/script.cpp', 'src/generated/notify.cpp', diff --git a/server/src/main.cpp b/server/src/main.cpp index 0d04174..1d20aff 100644 --- a/server/src/main.cpp +++ b/server/src/main.cpp @@ -27,6 +27,7 @@ using Json = nlohmann::json; #include "generated/friends.h" #include "generated/script_friends.h" #include "generated/style.h" +#include "generated/style_friends.h" #include "generated/script.h" #include "generated/notify.h" @@ -60,6 +61,7 @@ int main() { const bin2cpp::File& friendsjsfile = bin2cpp::getScript_friendsJsFile(); const bin2cpp::File& e404file = bin2cpp::getE404HtmlFile(); const bin2cpp::File& stylefile = bin2cpp::getStyleCssFile(); + const bin2cpp::File& friendscssfile = bin2cpp::getStyle_friendsCssFile(); const bin2cpp::File& scriptfile = bin2cpp::getScriptJsFile(); const bin2cpp::File& notifyfile = bin2cpp::getNotifyOpusFile(); @@ -70,6 +72,7 @@ int main() { std::string settings{settingsfile.getBuffer(), settingsfile.getSize()}; std::string friends{friendsfile.getBuffer(), friendsfile.getSize()}; std::string friendsjs{friendsjsfile.getBuffer(), friendsjsfile.getSize()}; + std::string friendscss{friendscssfile.getBuffer(), friendscssfile.getSize()}; std::string e404{e404file.getBuffer(), e404file.getSize()}; std::string style{stylefile.getBuffer(), stylefile.getSize()}; std::string script{scriptfile.getBuffer(), scriptfile.getSize()}; @@ -87,6 +90,10 @@ int main() { response.set_content(style, "text/css"); }); + svr.Get("/style_friends.css", [&friendscss](const httplib::Request& request, httplib::Response& response) { + response.set_content(friendscss, "text/css"); + }); + svr.Get("/script.js", [&script](const httplib::Request& request, httplib::Response& response) { response.set_content(script, "text/javascript"); });